qunit: Update tests to not assume animations use setTimeout

As of jQuery 1.12, animations use requestAnimationFrame in modern
browsers, which cannot be forced to finish synchronously by merely
mocking the 'setTimeout' and 'Date' clocks via Sinon.

For jquery.color, reduce duration from 10ms to 3ms (not 10ms which will
now be real time, not 0ms since we do want to test real frames).

Change-Id: Ie147fc2a91d2cd349b4031390f3c59b1bcfb65b5

diff --git a/tests/qunit/data/testrunner.js b/tests/qunit/data/testrunner.js
index b79c192..0b28684 100644 (file)
--- a/tests/qunit/data/testrunner.js
+++ b/tests/qunit/data/testrunner.js
@@ -25,6 +25,9 @@
        // killing the test and assuming timeout failure.
        QUnit.config.testTimeout = 60 * 1000;
 
+       // Reduce default animation duration from 400ms to 0ms for unit tests
+       $.fx.speeds._default = 0;
+
        // Add a checkbox to QUnit header to toggle MediaWiki ResourceLoader debug mode.
        QUnit.config.urlConfig.push( {
                id: 'debug',

diff --git a/tests/qunit/suites/resources/jquery/jquery.color.test.js b/tests/qunit/suites/resources/jquery/jquery.color.test.js
index 9afd793..ca6a512 100644 (file)
--- a/tests/qunit/suites/resources/jquery/jquery.color.test.js
+++ b/tests/qunit/suites/resources/jquery/jquery.color.test.js
@@ -1,18 +1,15 @@
 ( function ( $ ) {
-       QUnit.module( 'jquery.color', QUnit.newMwEnvironment( {
-               setup: function () {
-                       this.clock = this.sandbox.useFakeTimers();
-               }
-       } ) );
+       QUnit.module( 'jquery.color', QUnit.newMwEnvironment() );
 
-       QUnit.test( 'animate', 1, function ( assert ) {
-               var $canvas = $( '<div>' ).css( 'background-color', '#fff' );
+       QUnit.test( 'animate', function ( assert ) {
+               var done = assert.async(),
+                       $canvas = $( '<div>' ).css( 'background-color', '#fff' ).appendTo( '#qunit-fixture' );
 
-               $canvas.animate( { backgroundColor: '#000' }, 10 ).promise().then( function () {
-                       var endColors = $.colorUtil.getRGB( $canvas.css( 'background-color' ) );
-                       assert.deepEqual( endColors, [ 0, 0, 0 ], 'end state' );
-               } );
-
-               this.clock.tick( 20 );
+               $canvas.animate( { 'background-color': '#000' }, 3 ).promise()
+                       .done( function () {
+                               var endColors = $.colorUtil.getRGB( $canvas.css( 'background-color' ) );
+                               assert.deepEqual( endColors, [ 0, 0, 0 ], 'end state' );
+                       } )
+                       .always( done );
        } );
 }( jQuery ) );

diff --git a/tests/qunit/suites/resources/jquery/jquery.makeCollapsible.test.js b/tests/qunit/suites/resources/jquery/jquery.makeCollapsible.test.js
index c51e409..9c7660f 100644 (file)
--- a/tests/qunit/suites/resources/jquery/jquery.makeCollapsible.test.js
+++ b/tests/qunit/suites/resources/jquery/jquery.makeCollapsible.test.js
@@ -1,11 +1,7 @@
 ( function ( mw, $ ) {
        var loremIpsum = 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit.';
 
-       QUnit.module( 'jquery.makeCollapsible', QUnit.newMwEnvironment( {
-               setup: function () {
-                       this.clock = this.sandbox.useFakeTimers();
-               }
-       } ) );
+       QUnit.module( 'jquery.makeCollapsible', QUnit.newMwEnvironment() );
 
        function prepareCollapsible( html, options ) {
                return $( $.parseHTML( html ) )
@@ -42,12 +38,10 @@
 
                        // ...expanding happens here
                        $toggle.trigger( 'click' );
-                       test.clock.tick( 500 );
                } );
 
                // ...collapsing happens here
                $toggle.trigger( 'click' );
-               test.clock.tick( 500 );
        } );
 
        QUnit.test( 'basic operation (<div>)', 5, function ( assert ) {
@@ -71,11 +65,9 @@
                        } );
 
                        $toggle.trigger( 'click' );
-                       test.clock.tick( 500 );
                } );
 
                $toggle.trigger( 'click' );
-               test.clock.tick( 500 );
        } );
 
        QUnit.test( 'basic operation (<table>)', 7, function ( assert ) {
@@ -106,11 +98,9 @@
                        } );
 
                        $toggle.trigger( 'click' );
-                       test.clock.tick( 500 );
                } );
 
                $toggle.trigger( 'click' );
-               test.clock.tick( 500 );
        } );
 
        function tableWithCaptionTest( $collapsible, test, assert ) {
@@ -137,11 +127,9 @@
                        } );
 
                        $toggle.trigger( 'click' );
-                       test.clock.tick( 500 );
                } );
 
                $toggle.trigger( 'click' );
-               test.clock.tick( 500 );
        }
 
        QUnit.test( 'basic operation (<table> with caption)', 10, function ( assert ) {
@@ -192,11 +180,9 @@
                        } );
 
                        $toggle.trigger( 'click' );
-                       test.clock.tick( 500 );
                } );
 
                $toggle.trigger( 'click' );
-               test.clock.tick( 500 );
        }
 
        QUnit.test( 'basic operation (<ul>)', 7, function ( assert ) {
@@ -260,7 +246,6 @@
                } );
 
                $collapsible.find( '.mw-collapsible-toggle' ).trigger( 'click' );
-               this.clock.tick( 500 );
        } );
 
        QUnit.test( 'initial collapse (options.collapsed)', 2, function ( assert ) {
@@ -278,7 +263,6 @@
                } );
 
                $collapsible.find( '.mw-collapsible-toggle' ).trigger( 'click' );
-               this.clock.tick( 500 );
        } );
 
        QUnit.test( 'clicks on links inside toggler pass through (options.linksPassthru)', 2, function ( assert ) {
@@ -316,7 +300,6 @@
                } );
 
                $collapsible.find( '.mw-collapsible-toggle' ).trigger( 'click' );
-               this.clock.tick( 500 );
        } );
 
        QUnit.test( 'collapse/expand text (options.collapseText, options.expandText)', 2, function ( assert ) {
@@ -333,7 +316,6 @@
                } );
 
                $collapsible.find( '.mw-collapsible-toggle' ).trigger( 'click' );
-               this.clock.tick( 500 );
        } );
 
        QUnit.test( 'cloned collapsibles can be made collapsible again', 2, function ( assert ) {
@@ -352,6 +334,5 @@
                } );
 
                $clone.find( '.mw-collapsible-toggle a' ).trigger( 'click' );
-               test.clock.tick( 500 );
        } );
 }( mediaWiki, jQuery ) );