5

我不知道如何为我的 JS 运行这个 Jasmine 测试，当然其他人也有这个问题。也许我做错了，或者不可能 - 我没有找到任何暗示。问题与以下事实有关 - 在 jQuery 中 - $(this) 与例如 $("#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") )

不幸的是，这个测试失败了（有任何变化，比如在我的 Jasmine 测试中首先将 ref 存储到一个变量中），因为该函数不是用 $("#button-id") 调用的，而是用 $(this) 调用的，和 $(this) != $("#button-id").

谁能告诉我如何完成这个测试？我很迷茫。甚至Remy Sharp 关于 jQuery 和 $(this) 的精彩文章也没有让我更进一步。

4

1 回答 1

4

好的，现在我已经解决了我的问题。解决方法很简单，解释不是。我将从头开始解释解决方案。

这是我想使用 jasmine-jquery 测试的带有 jQ​​uery 的 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)”。

希望这对您的项目有所帮助！我花了很长时间才弄清楚这一点。

于 2012-02-29T20:51:32.360 回答