如何使用$（“＃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

回答

相关问题