好的,现在我已经解决了我的问题。解决方法很简单,解释不是。我将从头开始解释解决方案。
这是我想使用 jasmine-jquery 测试的带有 jQuery 的 Javascript 代码:
$( "input.toggler" ).on( "click", function( e ) {
[...]
doSomethingWith( $(this) );
} );
现在使用 Jasmine-jQuery,我想确保使用正确的“$(this)”调用 JS 函数“doSomethingWith”。
第一个可能认为 $(this) === $( "input.toggler" ),但事实并非如此。在点击处理程序的回调函数中,jQuery 使用的 $(this) 既不是 jQuery 对象 $( "input.toggler" ) 也不是该对象引用的 DOM 元素。正如 Remy Sharp 在他非常好的文章“ jQuery's this: demystified ”中解释的那样,回调函数中的“this”是 DOM 元素,但是 $(this) 从该 DOM 元素创建一个 jQuery 对象。这与 jQuery 对象 $( "input.toggler" ) 不同。
因此,如果您想使用函数“toHaveBeenCalledWith”对 Jasmine 进行测试,您必须首先使用 document.getElementById(...) 或 document.getElementsByTagName(...)[INDEX] 提取 DOM 元素(其中 INDEX是您想要的元素的索引,因为后一个函数为您提供了一个 DOM 元素数组),这是普通的旧 Javascript。然后,当您提取所需的 DOM 元素时,您必须通过将其包含在 $( 和 ) 中来创建一个 jQuery 对象。
我通过的 Jasmine-jQuery-test 最终看起来像这样(使用 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 代码中的“$(this)”在我的 Jasmine-jQuery 测试中转换为“$(DOM_input_element)”。
希望这对您的项目有所帮助!我花了很长时间才弄清楚这一点。