5

私の JS でこの Jasmine テストを実行する方法がわかりません。また、他の ppl にもこの問題があります。多分私は間違っているか、不可能かもしれません-これに関するヒントは見つかりませんでした。この問題は、- jQuery では - $(this) が、たとえば $("#this-id") によって選択された要素と同じではないという事実に関係しています。

Javascript:

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

Jasmine-Test (CoffeeScript):

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

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

残念ながら、関数は $("#button-id") で呼び出されず、代わりに $(this) で呼び出されるため、このテストは失敗します (私の Jasmine テストで最初に変数に参照を格納するなどのバリエーションがあります)。および $(this) != $("#button-id")。

このテストを達成する方法を誰か教えてもらえますか? 私はかなり迷っています。jQuery と $(this) に関する Remy Sharp の素晴らしい記事でさえ、それ以上は理解できませんでした。

4

1 に答える 1

4

わかりました、今私は私の問題の解決策を手に入れました。解決策は簡単ですが、説明は簡単ではありません。その解決策を一から解説します。

これは、jasmine-jquery を使用してテストしたい jQuery を使用した私の Javascript コードです。

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

そして今、Jasmine-jQuery を使用して、JS 関数 "doSomethingWith" が正しい "$(this)" で呼び出されるようにしたいと考えています。

最初は $(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] (ここで 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 に答える