javascript - CSS transitionEnd イベントの後に実行される JavaScript を単体テストするにはどうすればよいですか

Question

ブートストラップモーダルウィンドウがあります。qunit+sinonjs (偽のタイマー) を使用すると、1 つの要素がページに残ります ( div class='modal-backdor'):

• http://jsfiddle.net/valuks/8xVCR/2/embedded/result/
• http://jsfiddle.net/valuks/8xVCR/2/

twitter-bootstrap (95 行目)を見ると、transitionEnd イベントが発生しています。イベントが発生した後に実行されるコードをテストするにはどうすればよいですか?

Answer 1

問題は、テスト コードを 1000 ミリ秒待機させずに、この時間内に発生するはずthis.clock.tick(1000);のすべての JavaScript を呼び出すことです。setTimeoutsしたがって、あなたの場合、アニメーションを開始してthis.clock.tick(1000);も、アニメーションはまだ1000ミリ秒続くため、効果はありません。Jasmines のようなものを探しています。waits()これは、経過した時間、下にあるすべてのテスト コードの実行を停止します。qunit と sinon に相当するものはないようです。

ところで。あなたがやろうとしているのは、単体テストよりも受け入れテストです。 実際のアニメーションを開始する代わりに、テストで transitionEnd イベントをトリガーできるように、DOM 要素をモックする必要があります。また、アニメーションを開始して待機すると、非常に長時間実行される単体テストで終了します。したがって、私の最新のプロジェクトでは、1 ～ 2 秒で実行される約 200 のテスト ケースがあります。waitsしたがって、テストで使用を開始するときに、これにかかる時間を考えてみてください。