4

我试图为我的 js 函数编写一些测试用例，但我遇到了一个恼人的问题。

在我的脚本中有一个代码部分，如：

$("idOfTheDiv").fadeOut('fast');

或者：

$("idOfTheDiv").fadeTo('fast', 1);

这在我的页面上运行良好。

当我想写一些 js-test-driver 单元测试用例时，问题就来了。当我想验证 fadeTo 函数时：

...

assertTrue($("#idOfTheDiv").css("opacity") == "0");

...

然后它失败了。

原因可能是这是一个动画，当我尝试验证时，它没有完成动画。

有人可以知道一种能够在 js-test-driver 中测试 jQuery 动画函数的方法吗？

4

1 回答 1

2

要测试异步行为，您需要使用 js-test-driver 中的AsyncTestCase。

尝试这个：

FadeTest = AsyncTestCase("FadeTest", {

testFadeOut : function(queue) {
    // add HTML to your Test
    /*:DOC += <div id="idOfTheDiv"><p>foo</p></div>*/

    var animationComplete = false;

    queue.call('prepare test', function(callbacks) {
        var onAnimationComplete = callbacks.add(function() {
            animationComplete = true;
        });

        $("#idOfTheDiv").fadeOut('fast', onAnimationComplete);
    });

    // The async test will wait until the onAnimationComplete function has been called.
    // So the following part is executed when the animation is done.
    queue.call('assertion', function() {
       assertTrue(animationComplete);
       // Now you can check the opacity of the div
       assertEquals(0, $("#idOfTheDiv").css("opacity")); 
    });

}

});

注意：我自己没有尝试过代码。希望没有错别字。;)

编辑：如果您要测试的函数没有回调功能，您可以使用 AOP 添加它。程序是：

  • 向要测试的函数添加 after() 回调（如在此jsfiddle中）。
  • 在队列的回调对象中注册 after() 函数。
  • 在下一个队列步骤中，您可以在方法完成后做出应该为真的断言。
于 2013-04-18T12:24:48.140 回答