Effects: Updating unit tests to use some more stable logic hopefully

Author: gnarf

tests/unit/effects/effects_core.js

@@ -61,38 +61,79 @@ asyncTest( "animateClass works with borderStyle", function() {
 
 asyncTest( "animateClass works with colors", function() {
 	var test = $("div.animateClass"),
-		count = 0;
+		count = 0,
+		oldStep = jQuery.fx.step.backgroundColor;
 	expect(2);
-	test.toggleClass("testChangeBackground", duration, function() {
-		present( test.css("backgroundColor"), [ "#ffffff", "#fff", "rgb(255, 255, 255)" ], "Color is final" );
-		start();
+
+	// we want to catch the first frame of animation
+	jQuery.fx.step.backgroundColor = function( fx ) {
+		oldStep.apply( this, arguments );
+
+		// make sure it has animated somewhere we can detect
+		if ( fx.pos > 255 / 2000 ) {
+			jQuery.fx.step.backgroundColor = oldStep;
+			notPresent( test.css("backgroundColor"),
+				[ "#000000", "#ffffff", "#000", "#fff", "rgb(0, 0, 0)", "rgb(255,255,255)" ],
+				"Color is not endpoints in middle." );
+			test.stop( true, true );
+		}
+	};
+
+	test.toggleClass("testChangeBackground", {
+		duration: 2000,
+		complete: function() {
+			present( test.css("backgroundColor"), [ "#ffffff", "#fff", "rgb(255, 255, 255)" ], "Color is final" );
+			start();
+		}
 	});
-	setTimeout(function() {
-		var color = test.css("backgroundColor");
-		notPresent( color, [ "#000000", "#ffffff", "#000", "#fff", "rgb(0, 0, 0)", "rgb(255,255,255)" ],
-			"Color is not endpoints in middle." );
-	}, mid);
 });
 
-asyncTest( "animateClass works with children", function() {
-	var test = $("div.animateClass"),
-		h2 = test.find("h2");
+asyncTest( "animateClass calls step option", 1, function() {
+	var test = jQuery("div.animateClass"),
+		done = function() {
+			done = jQuery.noop;
+			test.stop();
+			start();
+		};
+	test.toggleClass( "testChangeBackground", {
+		step: function( fx ) {
+			ok( true, "Step Function Called" );
+			setTimeout( done, 0 );
+		}
+	});
+});
 
-	expect(4);
-	setTimeout(function() {
-		notPresent( h2.css("fontSize"), ["10px","20px"], "Font size is neither endpoint when in middle.");
-	}, mid);
-	test.toggleClass("testChildren", { children: true, duration: duration, complete: function() {
-		equal( h2.css("fontSize"), "20px", "Text size is final during complete");
-		test.toggleClass("testChildren", duration, function() {
-			equal( h2.css("fontSize"), "10px", "Text size revertted after class removed");
+asyncTest( "animateClass works with children", 3, function() {
+	var animatedChild,
+		test = $("div.animateClass"),
+		h2 = test.find("h2");
 
-			start();
-		});
-		setTimeout(function() {
-			equal( h2.css("fontSize"), "20px", "Text size unchanged during animate with children: undefined" );
-		}, mid);
-	}});
+	test.toggleClass("testChildren", {
+		children: true,
+		duration: duration,
+		complete: function() {
+			equal( h2.css("fontSize"), "20px", "Text size is final during complete");
+			test.toggleClass("testChildren", {
+				duration: duration,
+				complete: function() {
+					equal( h2.css("fontSize"), "10px", "Text size revertted after class removed");
+
+					start();
+				},
+				step: function( val, fx ) {
+					if ( fx.elem === h2[ 0 ] ) {
+						ok( false, "Error - Animating property on h2" );
+					}
+				}
+			});
+		},
+		step: function( val, fx ) {
+			if ( fx.prop === "fontSize" && fx.elem === h2[ 0 ] && !animatedChild ) {
+				equal( fx.end, 20, "animating font size on child" );
+				animatedChild = true;
+			}
+		}
+	});
 });
 
 asyncTest( "animateClass clears style properties when stopped", function() {

ui/jquery.effects.core.js

@@ -268,16 +268,15 @@ $.effects.animateClass = function( value, duration, easing, callback ) {
 		// map all animated objects again - this time collecting a promise
 		allAnimations = allAnimations.map(function() {
 			var styleInfo = this,
-				dfd = $.Deferred();
-
-			this.el.animate( this.diff, {
-				duration: o.duration,
-				easing: o.easing,
-				queue: false,
-				complete: function() {
-					dfd.resolve( styleInfo );
-				}
-			});
+				dfd = $.Deferred(),
+				opts = jQuery.extend({}, o, {
+					queue: false,
+					complete: function() {
+						dfd.resolve( styleInfo )
+					}
+				});
+
+			this.el.animate( this.diff, opts );
 			return dfd.promise();
 		});