StackOverflow に関するこれら2 つの関連する質問にもかかわらず、これに対する満足のいく答えをまだ見つけていないため、Jasmine-jQuery ユーザーの間で受け入れられているベスト プラクティスがあるかどうかを確認するために投稿します。
基本的な問題は単純で、その 2 つの例が 2 つのリンクされた質問でカバーされています。
私の Javascript には、次の
setup()
ように、イベント ハンドラーをページ上のさまざまなセレクターにバインドする関数があり$('#someDiv').click(someHandler)
ます。この関数はに渡されます$(document).ready
私の Jasmine テストでは、ページから抽出されたさまざまな部分を表す HTML フィクスチャを使用して、それらの要素に対する AJAX インタラクションをテストしています (Jasmine-Rails の「サーバー」バージョンを実行しており、ブラウザで Jasmine テスト レポートを表示できます)。
もちろん、問題は、ハンドラーをバインドしようとするセレクターがsetup()
、フィクスチャーがロードされるまで存在しないことです。その結果、Jasmine テストで明示的にトリガーされたイベントは、そのハンドラーをバインドする関数が既に実行されているため、フィクスチャの DOM 要素によって取得されません$(document).ready
。
フィクスチャが読み込まれるまでJasmine が呼び出しを遅らせることができれば$(document).ready
、私は最高です。しかし、どうやらそれはできないようです。
上記の 2 つの StackOverflow の質問から、これを回避するためのさまざまな方法を集めましたが、すべて満足のいくものではありませんでした。
バインディング コードを
setup
HTML フィクスチャ自体にコピーします。これは非 DRY であり、ほぼ確実にフィクスチャが現実と同期しなくなる原因となります。また、フィクスチャは目立たない JS を表すため、コードとマークアップを混在させないようにする必要があります。setup
関数を必要とするテスト ケースで関数を明示的に呼び出します。setup
これは単純なケースでは機能しますが、冪等でない場合は失敗します。では、上に示したコードの代わりに次の
setup
ようなものを使用します。$(document).on('click', '#someDiv', someHandler)
(私はjQuery 1.10.1を使用しています。)実際にこれを試しましたが、機能しません.ロードされたフィクスチャに一致する要素が含まれていても、その要素で「クリック」をトリガーしても呼び出され#someDiv
ません。someHandler
うまくいったとしても、(私が正しく理解していれば)this
ハンドラーが呼び出されたときの値は、イベントを最初に受け取った要素ではなく、実際にイベントを処理した要素を反映するため、面倒です。では
setup
、 のようなものを使用しますが$('#someDiv').live(someHandler)
、live
jQuery 1.7 で廃止され、1.9 で削除されました。
テスト環境に対応するためだけに作業コードに変更を加える必要がなく、DRY に違反する必要のない、私が見逃している他の方法はありますか?