如何使用$（「＃element-id」）作爲$（this）使用Jasmine測試jQuery

我不知道如何爲我的JS運行這個Jasmine測試，當然也有其他的ppl有這個問題。也許我做錯了，也許這是不可能的 - 我沒有發現任何暗示。這個問題與這樣一個事實有關 - 在jQuery中 - $（this）與例如$（「＃這-ID」）：

的Javascript：

[..] 
$("#button-id").on("click", function(e) { callSomeFunctionWith($(this)); });

茉莉花測試（CoffeeScript的）：

[..] 
spyOn some.object, "callSomeFunctionWith" 
spyOnEvent($("#button-id"), 'click') 

$("#button-id").trigger("click") 
expect(some.object.callSomeFunctionWith).toHaveBeenCalledWith($("#button-id"))

遺憾的是本次測試失敗（與像裁判存儲到任何變化因爲函數不是用$（「＃button-id」）調用的，而是用$（this）和$（this）調用的！= $（「＃button- ID」）。

有人能告訴我如何完成這個測試嗎？我很迷茫。即使Remy Sharp's great article on jQuery and $(this)也沒有讓我更進一步。

來源

2012-02-29 RSeidelsohn

好吧，現在我已經解決了我的問題。解決方案很簡單，解釋不了。我將從頭開始解釋解決方案。

這是我的Javascript代碼使用jQuery，我想測試使用茉莉花的jQuery：

$("input.toggler").on("click", function(e) { 
    [...] 
    doSomethingWith($(this)); 
});

現在用茉莉花，jQuery的我想確保JS功能「doSomethingWith」被稱爲與正確的「$（本）」。

第一個人可能會認爲$（this）=== $（「input.toggler」），但事實並非如此。在click處理函數的回調函數中，$（this）jQuery使用的既不是jQuery對象$（「input.toggler」），也不是該對象引用的DOM元素。正如Remy Sharp在他的非常好的文章「jQuery's this: demystified」中解釋的，回調函數中的「this」是DOM元素，但是$（this）從該DOM元素創建了一個jQuery對象。這與jQuery對象$（「input.toggler」）不一樣。所以如果你想用Jasmine使用函數「toHaveBeenCalledWith」來測試這個，你必須首先使用document.getElementById（...）或者document.getElementsByTagName（...）[INDEX ]（其中INDEX是你想要的元素的索引，因爲後一個函數給你一個DOM元素數組），這是一個普通的舊Javascript。然後，當你提取了想要的DOM元素時，你必須通過將它包含在$（和）中來創建一個jQuery對象。

我路過茉莉花jQuery的測試終於看起來像這樣（使用CoffeeScript的）：

it "does something with my input element", -> 
    DOM_input_element = document.getElementsByTagName("input")[0] # Choose the correct DOM element here 

    spyOn myobject.functions, "doSomethingWith" 
    spyOnEvent($('input.toggler'), 'click') 

    [...] 

    $('input.toggler').trigger('click') 

    # Check for changes after click: 
    expect(myobject.functions.doSomethingWith).toHaveBeenCalledWith($(DOM_input_element))

所以「$（本）」從我的Javascript代碼轉換爲「$（DOM_input_element）」在我Jasmine-jQuery測試。

希望這可以幫助您與您的項目！我花了很長時間才弄明白這一點。

來源

2012-02-29 20:51:32 RSeidelsohn

如何使用$（「＃element-id」）作爲$（this）使用Jasmine測試jQuery

回答

相關問題