From bc785281797d6c4455967a105d83e44ad12f612e Mon Sep 17 00:00:00 2001
From: Timo Tijhof <krinklemail@gmail.com>
Date: Mon, 21 Nov 2016 18:57:18 -0800
Subject: [PATCH] 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
---
 tests/qunit/data/testrunner.js                |  3 +++
 .../resources/jquery/jquery.color.test.js     | 23 ++++++++-----------
 .../jquery/jquery.makeCollapsible.test.js     | 21 +----------------
 3 files changed, 14 insertions(+), 33 deletions(-)

diff --git a/tests/qunit/data/testrunner.js b/tests/qunit/data/testrunner.js
index b79c1927f3..0b28684a59 100644
--- 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 9afd793e5b..ca6a512fc5 100644
--- 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 c51e40931c..9c7660fe8d 100644
--- 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 ) );
-- 
2.20.1