3

TDD を理解するdom要素を左に移動するための簡単なテスト スーツを作成しました。

アニメーションが終了するまで待つ必要があるアニメーションをテストしています。モンキーパッチのように感じ、qUnitのサンプルフォームを使用することになったので、プロミスを使用したくありませんでした:

test("move 50", function () {
   //Creates an element for testing and attaches to document
   var el = appendToTest(); 
   ok(el.css('left') == "auto", "element 0");
   stop();
   moveLeft(el, 50, 100);
   setTimeout(function () {
     equal(el.css("left"), "50px");
     start();
  }, 101);//Timeout duration
});

フルフィドル

テストはすべての jQuery バージョンで失敗しますが、2.x (edge)

failed
Expected:   
"50px"
Result:     
"49.69220733642578px"
Diff:   
"50px" "49.69220733642578px"

タイムアウト期間を十分に増やすとテストに合格するので、左のプロパティを調べる前にアニメーションが終了しなかったと考えました。

しかし、これは正しくないようです。どのくらい待つかを推測する必要があります。これを行うより良い方法はありますか？

4

2 に答える 2

2

テストとメソッドを再構築する必要がありますmoveLeft。あなたが現在行っていることは、.animate（おそらくmoveLeft、ラッパーです.animate）を呼び出してから、要素の左の位置を確認する前に101ミリ秒待機するようにqUnitに指示することです。すでに指摘したように、これはあまり信頼できるテスト方法ではありません。

代わりに、実行が終了したときにコールバック関数.animateを呼び出す機能を利用する必要があります。関数を変更して、このコールバックを受け入れるようにします。これを次のように定義します。moveLeft

function() {equal(el.css("left"), "50px");start();}

そして、このコールバックを関数.animate内に渡しますmoveLeft

たとえば、呼び出しは次のようになります。

//tells qUnit to expect that one assertion will happen.
//this will mean that your test will also fail if moveLeft doesn't invoke the callback.
      expect(1); 
//define the calback function
      var callback = function(){equal(el.css("left"), "50px");start();}
//execute the test:
       moveLeft(el, 50, 100,callback);

フィドル

moveLeftおまけとして、任意のコールバックを受け入れることができるはるかに柔軟な関数が用意されています。\o/

于 2013-09-17T15:25:50.807 に答える
0

実際には、それを行うためのより良い方法があります - Sinon の偽のタイマーを使用してください - http://sinonjs.org/docs/#clock

  1. セットアップで偽のタイマーを初期化します。

    setup: function () { this.clock = sinon.useFakeTimers(); }

  2. テストで関数を呼び出した後moveLeft()、偽のタイマーを 100 ミリ秒に設定します。

    this.clock.tick(100);

  3. 非同期テストを使用せずに、アニメーションの結果をすぐにテストできるようになりました。

    equal(el.css("left"), "50px");

于 2014-04-03T10:04:20.133 に答える