$（ "＃element-id"）を$（ "＃element-id"）としてjQueryでテストする方法

Question

このジャスミンテストを私のJSで実行する方法はわかりませんが、確かに他の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")) 

残念ながら、このテストがへのREFを保存するなどの任意の変化に（失敗関数は$（ "＃button-id"）で呼び出されるのではなく、代わりに$（this）、$（this）！= $（ "＃button- id "）。

このテストをどのように行うか教えてもらえますか？私はかなり失われています。でもRemy Sharp's great article on jQuery and $(this)はそれ以上私を手に入れませんでした。

Answer 1

これで問題は解決しました。解決策は簡単です、説明はありません。私は最初から解決策を説明します。

これは私がジャスミン-jqueryの使用してテストしたいjQueryを使って私のJavascriptコードです：

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

そして今、私はJS機能「doSomethingWithが」正しいと呼び出されることを確実にしたいジャスミン-のjQueryを使用して"$（これ）"。

最初に$（this）=== $（ "input.toggler"）と考えるかもしれませんが、それは当てはまりません。 クリックハンドラのコールバック関数の中で、$（this）jQueryはjQueryオブジェクト$（ "input.toggler"）でもそのオブジェクトが参照するDOM要素も使用しません。 レミーシャープ氏は本当に素敵な記事 "jQuery's this: demystified"で説明しているように、コールバック関数内の "this"はDOM要素ですが、$（this）はそのDOM要素からjQueryオブジェクトを作成します。これはjQueryオブジェクト$（ "input.toggler"）と同じではありません。

"toHaveBeenCalledWith"関数を使用してJasmineでこれをテストする場合は、まずdocument.getElementById（...）またはdocument.getElementsByTagName（...）を使用してDOM要素を抽出する必要があります[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）" 翻訳しますジャスミン - jQueryテスト。

これがあなたのプロジェクトに役立つことを願っています。これを理解するにはかなり時間がかかりました。