Adding a domEqual assertion to our testsuite for more sane DOM

comparisons. Comparing innerHTML is too dependent on random browser
quirks like IE only sometimes rendering closing tags.

Author: jzaefferer

tests/unit/accordion/accordion_methods.js

@@ -3,20 +3,9 @@
 module( "accordion: methods", accordionSetupTeardown() );
 
 test( "destroy", function() {
-	var beforeHtml = $( "#list1" )
-		.find( "div" )
-			.css( "font-style", "normal" )
-		.end()
-		.parent()
-			.html();
-	var afterHtml = $( "#list1" )
-		.accordion()
-		.accordion( "destroy" )
-		.parent()
-			.html()
-			// Opera 9 outputs role="" instead of removing the attribute like everyone else
-			.replace( / role=""/g, "" );
-	equal( afterHtml, beforeHtml );
+	domEqual("#list1", function() {
+		$("#list1").accordion().accordion("destroy");
+	});
 });
 
 test( "enable/disable", function() {

tests/unit/autocomplete/autocomplete_methods.js

@@ -11,13 +11,9 @@ module("autocomplete: methods", {
 });
 
 test("destroy", function() {
-	var beforeHtml = $("#autocomplete").parent().html();
-	var afterHtml = $("#autocomplete").autocomplete().autocomplete("destroy").parent().html();
-	// Opera 9 outputs role="" instead of removing the attribute like everyone else
-	if ($.browser.opera) {
-		afterHtml = afterHtml.replace(/ role=""/g, "");
-	}
-	equal( afterHtml, beforeHtml, "before/after html should be the same" );
+	domEqual("#autocomplete", function() {
+		$("#autocomplete").autocomplete().autocomplete("destroy");
+	});
 })
 
 var data = ["c++", "java", "php", "coldfusion", "javascript", "asp", "ruby", "python", "c", "scala", "groovy", "haskell", "perl"];

tests/unit/menu/menu_methods.js

@@ -6,13 +6,9 @@
 module("menu: methods");
 
 test("destroy", function() {
-	var beforeHtml = $("#menu1").find("div").css("font-style", "normal").end().parent().html();
-	var afterHtml = $("#menu1").menu().menu("destroy").parent().html();
-	// Opera 9 outputs role="" instead of removing the attribute like everyone else
-	if ($.browser.opera) {
-		afterHtml = afterHtml.replace(/ role=""/g, "");
-	}
-	equal( afterHtml, beforeHtml );
+	domEqual("#menu1", function() {
+		$("#menu1").menu().menu("destroy");
+	});
 });
 
 

tests/unit/testsuite.js

@@ -65,6 +65,38 @@ window.commonWidgetTests = function( widget, settings ) {
 	test( "version", function() {
 		ok( "version" in $.ui[ widget ], "version property exists" );
 	});
-};
+}
+
+/*
+ * Experimental assertion for comparing DOM objects.
+ * 
+ * Serializes an element and some attributes and it's children if any, otherwise the text.
+ * Then compares the result using deepEqual.
+ */
+window.domEqual = function( selector, modifier, message ) {
+	var attributes = ["class", "role", "id", "tabIndex", "aria-activedescendant"];
+	
+	function extract(value) {
+		var result = {};
+		result.nodeName = value[0].nodeName;
+		$.each(attributes, function(index, attr) {
+			result[attr] = value.attr(attr);
+		});
+		result.children = [];
+		var children = value.children();
+		if (children.length) {
+			children.each(function() {
+				result.children.push(extract($(this)));
+			});
+		} else {
+			result.text = value.text();
+		}
+		return result;
+	}
+	var expected = extract($(selector));
+	modifier($(selector));
+	
+	deepEqual( extract($(selector)), expected, message );
+}
 
 }());