How I could test jquery animate functions like fadeTo, fadeOut with js-test-driver?

Question

I was trying to write some test cases for my js functions, but I am facing an irritating issue.

In my script there is a code section like:

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

or:

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

which works fine on my pages.

The problem came when I had wanted to write some js-test-driver unit test cases. When I want to verify the fadeTo function:

...

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

...

then it fails.

The reason could be that this is an animation and when I try to verify, it does not finish the animation.

Could somebody know a way to be able to test jQuery animate functions in js-test-driver?

Friederike · Accepted Answer · 2013-04-19T08:14:09.177

2

To test asynchronous behaviour you need to use the AsyncTestCase from js-test-driver.

Try this:

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")); 
    });

}

});

Note: I haven't tried the code myself. Hope there are no typos. ;)

Edit: If the function you want to test does not have a callback functionality you can add it using AOP. The procedure is:

Add a after() callback to the function you want to test (as in this jsfiddle).
Register the after() function in the callbacks object of the queue.
In the next queue-step you can then make assertions that should be true after your method has completed.

edited Apr 19 '13 at 08:14

answered Apr 18 '13 at 12:24

Friederike

1,252
15
29

and if it not sure that our function is doing this fade? So if there is a condition in my function which deals with it? How I can test these cases separately? Your sollution is testing only the jquery fadeOut function whether it works or not, am I right? You manually called the fadeOut function and tested it. Please correct me if I'm wrong. – Iamisti Apr 18 '13 at 12:28
Yes my code only checks that fadeOut works since you only asked about that in your question. Could you post an example of the function you want to test? I'm not really getting what the problem is. – Friederike Apr 18 '13 at 12:33
AsyncTestCase is also my suggestion here. Note that you can also set a timeout to wait until the div has hidden, because this way you only test jQuery's fadeOut function itself. – Uooo Apr 18 '13 at 12:47
I suppose you could also hook the onAnimationComplete function to the end of the function that you want to test by using AOP. But I'm not sure if that is such a good idea or if you could just test this kind of thing manually on the web page itself. – Friederike Apr 18 '13 at 12:59
1

http://fiddle.jshell.net/faFL9/2/ - here is my function which needs to be covered with unit tests. Note that there is a 'visibility' style change as well, so what I need is: checks that after this function executed, the visibility and the fadeTo are working fine. Thanks in advance Friederike! – Iamisti Apr 18 '13 at 13:37
I've added an example AOP method to your code. With that you can make assertions after your function finished. See this fiddle: http://fiddle.jshell.net/faFL9/7/ Adding it to the test case above shouldn't be a problem. ;) – Friederike Apr 18 '13 at 21:34
Thanks, It was help me a lot! This will be the sollution, thanks! – Iamisti Apr 19 '13 at 08:00
If you can make it work I'd be very grateful if you marked the answer as the solution. ;) Thanks in advance. – Friederike Apr 19 '13 at 08:07

How I could test jquery animate functions like fadeTo, fadeOut with js-test-driver?

1 Answers1