जैस्मीन के साथ jQuery को नकली कैसे करें

Question

मैं क्या करना चाहता हूं: हम मौजूदा जावास्क्रिप्ट कोड बेस के लिए कुछ परीक्षण लिख रहे हैं जो jQuery का भारी उपयोग करता है। परीक्षणों के लिए, हम वास्तविक HTML तत्व (HTML फिक्स्चर) नहीं चाहते हैं। हम इसे पसंद करेंगे अगर हमारे पास एक jQuery मॉक ऑब्जेक्ट था जो HTML से संबंधित कुछ भी नहीं करता है।

मेरे शुरुआती बिंदु: सबसे होनहार दृष्टिकोण मैं यहाँ पाया:

http://eclipsesource.com/blogs/2014/03/27/mocks-in-jasmine-tests/

यह एक सहायक विधि है कि एक वस्तु के कार्यों के माध्यम से जा रहा है और प्रत्येक के लिए एक जासूस बनाकर एक नकली बनाता है बनाता है समारोह:

window.mock = function (constr, name) { 
    var keys = []; 
    for (var key in constr.prototype) 
    keys.push(key); 
    return keys.length > 0 ? jasmine.createSpyObj(name || "mock", keys) : {}; 
}; 

तो फिर, अगर मैं उसे सही ढंग से समझ, वह का उपयोग करता है यह (अपने ब्लॉग पोस्ट से अनुकूलित उदाहरण) की तरह:

012,

var el = mock($); 
el('.some-not-existing-class').css('background', 'red'); 
expect(el.css).toHaveBeenCalledWith('background', 'red'); 

बहरहाल, यह काम नहीं करता है, के बाद से el एक object और नहीं एक function है।

मेरे दृष्टिकोण इस समस्या को हल करने के लिए: मैं मामले के लिए खाते में करने के लिए अपने mock समारोह पुनर्संशोधित कि constr है एक function:

mock (constr, name) { 
    var keys = []; 
    for (var key in constr.prototype) 
    keys.push(key); 
    var result = keys.length > 0 ? jasmine.createSpyObj(name || "mock", keys) : {}; 

    // make sure that if constr is a function (like in the case of jQuery), the mock is too 
    if (typeof constr === 'function') { 
    var result2 = result; 
    result = jasmine.createSpy(name || 'mock-fn'); 
    for (var key in result2) 
     result[key] = result2[key]; 
    } 
    return result; 
} 

हालांकि, परीक्षा में दूसरी पंक्ति एक Cannot read property css of undefined त्रुटि फेंकता है:

var el = mock($); 
el('.some-not-existing-class').css('background', 'red'); 
expect(el.css).toHaveBeenCalledWith('background', 'red'); 

अन्य उपाय: मैं भी जासूस वस्तु विलय करने की कोशिश की मैं एनटीओ jQuery, लेकिन इससे मदद नहीं मिली।

कोई विचार? मुझे आशा है कि हम अकेले नहीं हैं जो HTML फिक्स्चर के बिना ऐसा करते हैं।

Answer 1

मिला। जब mock समारोह के अपने संस्करण jQuery वस्तु वापस जाने के लिए जब jQuery समारोह शुरू हो जाती है की स्थापना की है, परीक्षण काम करता है:

mock (constr, name) { 
    var keys = []; 
    for (var key in constr.prototype) 
    keys.push(key); 
    var result = keys.length > 0 ? jasmine.createSpyObj(name || "mock", keys) : {}; 

    // make sure that if constr is a function (like in the case of jQuery), the mock is too 
    if (typeof constr === 'function') { 
    var result2 = result; 
    result = jasmine.createSpy(name || 'mock-fn'); 
    result.and.returnValue(result); 
    for (var key in result2) 
     result[key] = result2[key]; 
    } 
    return result; 
} 

Answer 2

आप अपने स्वयं के सहायक तरीके को रोल करने के बजाय sinon.js stubs का उपयोग कर सकते हैं।

stub = sinon.stub(jQuery.fn, 'css'); 

// invoke code which calls the stubbed function 

expect(stub.calledWith({ 'background': 'red' })).toBe(true); 
stub.restore();