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

1 files changed, 67 insertions, 26 deletions

diff --git a/tests/unit/effects/effects_core.js b/tests/unit/effects/effects_core.js
index d3b5179e2..e59a982c0 100644
--- a/tests/unit/effects/effects_core.js
+++ b/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() {