13

.animateページの読み込みから 5 秒後に起動する 1 秒の jQueryアクションがあります。Jasmine ユニット テスト コードで Sinon タイマーを設定し、7 秒後にテストして、アニメーション後のプロパティが適切であるかどうかを確認します。

うまく動かないので、アニメーション自体のインスタンスを Jasmine HTML テスト ページに配置して、何が起こっているかをよく確認しました。

  • Firefox と Chrome では、ページが読み込まれ、アニメーション関数が呼び出され、単体テストがすぐに失敗し、その後 (これもすぐに) アニメーションが目に見えて発生します。

  • IE、Opera、および Safari では、ページが読み込まれ、アニメーション関数が呼び出され、単体テストがすぐに失敗し、アニメーションが表示されません。

私が望んでいたのは次のことでした（すべてのブラウザで）：

  • ページが読み込まれ、アニメーション関数が呼び出され、アニメーションが瞬時に完了し、単体テストがすぐに成功します。

Sinon のドキュメントを見ると、偽のタイマーは次のプロセスをカバーしています: setTimeout, clearTimeout, setInterval, clearInterval,Date

jQueryのアニメーションの仕組みはわかりませんが、トランジションにCSSを使っているのではないかと思いますし、SinonのuseFakeTimersではCSSトランジションがカバーされていないので、これが問題だと思います。ただし、問題について私が正しければ、まだ解決策が必要です。

シノン以外も試してみようかな。Jasmine'swaits()はこのテストで完璧に機能しますが、私のようなせっかちな人々にとっては信じられないほど実用的ではありません.

他の提案はありますか？私は JS 単体テストに慣れていないので、あいまいな回答は助けになるどころか混乱してしまうことを覚えておいてください。;o)

4

3 に答える 3

20

jQuery offを使用して、jQuery 効果をオフにすることができます。

jQuery.fx.off = true

これは、イベントが発生するまでの最初の 7 秒間の待機の問題を解決しませんが、DOM が期待どおりに変更されたことをテストできることを意味します。

于 2012-02-29T13:49:23.777 に答える
4

私も同じ問題を抱えています。これは、jQueryのアニメーションがrequestAnimationFrame()、に依存する代わりに利用可能かどうかを利用しているために発生すると思いますsetTimeout()。

requestAnimationFrameオブジェクトのすべてのブラウザ固有の関数windowをnullに設定することで、この問題を回避しました。

window.webkitRequestAnimationFrame = null;
window.mozRequestAnimationFrame = null;
window.oRequestAnimationFrame = null;

jQueryがロードされる前に、このコードが実行されることを確認してください。

于 2011-09-27T18:02:21.183 に答える
2

ここに示されているように、SinonJsで可能だと思います：https://sinonjs.org/releases/latest/fake-timers/

test("should animate element over 500ms", function () {
   var el = jQuery("<div></div>");
   el.appendTo(document.body);

   el.animate({ height: "200px", width: "200px" });
   this.clock.tick(510);

   equals("200px", el.css("height"));
   equals("200px", el.css("width"));
});
于 2014-02-06T16:16:08.273 に答える