$ ( "# 요소 ID")로 jasmine으로 jQuery를 테스트하는 방법 $ (이)로 사용되는 경우

Question

JS를 위해이 재스민 테스트를 실행하는 방법을 모르겠지만 확실하게 다른 PPL이 문제가 있습니다.어쩌면 나는 틀린 일을하고있을 수도 있고 아마도 불가능하다는 것을 알고 있습니다. 나는 이것에 대한 힌트를 찾지 못했습니다.문제는 jquery - $ (이)에서 예를 들어 선택한 요소와 동일하지 않다는 사실과 관련이 있습니다.$ ( "# this-id") :

자바 스크립트 :

[..]
$("#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")로 함수가 호출되지 않지만 대신에 함수가 $ ( "# button-id")로 호출되지 않기 때문에이 테스트가 실패합니다.이), $ (이)!= $ ( "# button-id").

아무도이 테스트를 수행하는 방법을 알려줄 수 있습니까?나는 꽤 잃어버린다.심지어 jquery와 $ (this) didn에 대한 remy sharp의 위대한 기사t 더 나아가

Answer 1

Ok, now I've got the solution to my problem. The solution is easy, the explanation not. I'll explain the solution from scratch.

This is my Javascript code with jQuery that I want to test using jasmine-jquery:

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

And now using Jasmine-jQuery I want to ensure that the JS function "doSomethingWith" gets called with the correct "$(this)".

First one might think that $(this) === $( "input.toggler" ), but that is not true. Inside the callback function of the click handler, the $(this) jQuery uses is neither the jQuery object $( "input.toggler" ) nor the DOM element referenced by that object. As Remy Sharp explains in his really nice article "jQuery's this: demystified", the "this" inside the callback function is the DOM element, but $(this) creates a jQuery object from that DOM element. And that is not identical to the jQuery object $( "input.toggler" ).

So if you want to test this with Jasmine using the function "toHaveBeenCalledWith", you have to first extract the DOM element using either document.getElementById(...) or else document.getElementsByTagName(...)[INDEX] (where INDEX is the index of the element you want, since the latter function gives you an array of DOM elements), which is plain old Javascript. Then, when you have extracted the DOM element wanted, you have to create a jQuery-object from it by enclosing it in $( and ).

My passing Jasmine-jQuery-test finally looks something like this (using 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 ) )

So the "$(this)" from my Javascript code translates to "$(DOM_input_element)" in my Jasmine-jQuery test.

Hopefully this helps you with your projects! It took me quite a while to figure this out.