如何用茉莉花模擬jQuery

Question

我想要做的事情：我們正在爲現有的使用jQuery的Javascript代碼庫編寫一些測試。對於測試，我們不希望有實際的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) : {}; 
}; 

然後，如果我正確地理解他，他使用的是像這樣的（來自他的博客改編爲例）：

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'); 

其他的想法：我也試圖合併間諜對象我nto 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();