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.

diff --git a/tests/unit/accordion/accordion_methods.js b/tests/unit/accordion/accordion_methods.js
index e0ed734f69ed5b789b4a3b77265942ef98f35632..eade690b1d99dceb1810f4c1ab1b539447e85526 100644 (file)
--- a/tests/unit/accordion/accordion_methods.js
+++ b/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() {

diff --git a/tests/unit/autocomplete/autocomplete_methods.js b/tests/unit/autocomplete/autocomplete_methods.js
index 05a7d6e1448737727830129486d9d60ef5604af5..1043e47baef12d53baff36f08f86cd38546f32a8 100644 (file)
--- a/tests/unit/autocomplete/autocomplete_methods.js
+++ b/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"];

diff --git a/tests/unit/menu/menu_methods.js b/tests/unit/menu/menu_methods.js
index b6ebaf21532c4d58fb241ecd971e7e2a66dc387e..0ecaf7328ed026f6850afd9ddca8ec961cd1a4d7 100644 (file)
--- a/tests/unit/menu/menu_methods.js
+++ b/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");
+       });
 });
 
 

diff --git a/tests/unit/testsuite.js b/tests/unit/testsuite.js
index b3748d8eed0ce84169370a4bc18c5e02eeec7fd5..9c7c46c2247f9942ee5a21fbf4035b4374c7ae66 100644 (file)
--- a/tests/unit/testsuite.js
+++ b/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 );
+}
 
 }());