我如何测试jquery动画函数,如fadeTo,fadeOut和js-test-driver？

2023年7月3日 247次阅读

我试图为我的js函数编写一些测试用例,但我面临着一个恼人的问题.

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

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

要么：

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

在我的网页上工作正常.

当我想编写一些js-test-driver单元测试用例时,问题出现了.
当我想验证fadeTo函数时：

…

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

…

那就失败了.

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

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

最佳答案 要测试异步行为,您需要使用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).
>在队列的callbacks对象中注册after()函数.
>在下一个队列步骤中,您可以在方法完成后进行应该为true的断言.

点赞