Question

Background:
I am using QUnit to validate the creation of DOM elements in the following manner (which has been working fine so far):

$actual = Mylibrary.createSomething();
$expected = $('<div........');
ok($actual[0].isEqualNode($expected[0]),'Node properly created');

More info on isEqualNode: MDN, W3

Issue:
I am having an issue comparing nodes when I use the jQuery's .hide() method because:

• it produces style="display: none;" (no extra space after ;) with Firefox
• it produces style="display: none; " (extra space after ;) with Chrome
• isEqualNode considers that style="display: none;" is different than style="display: none; " (you can have attributes in different order and isEqualNode still considers nodes to be equal, but that extra space not).
• when building $expected, I can only cater for 1 of the 2 situations.

Accordingly my tests end up always failing with Chrome or Firefox depending on which situation I choose to create $expected.

Here is a jsFiddle so that you can see what I mean

I could check if element is hidden with .is(':hidden') but that isn’t ideal to me because:

• I can no longer compare whole set of DOM elements with .isEqualNode like I currently do and would have to write many individual tests to get an equivalent which will make my tests very extensive and hard to maintain.
• I feel that by using a DOM method (i.e. isEqualNode) my tests are more robusts than if I used a jQuery method (e.g. .is(':hidden')) because my elements are generated with jQuery in the first place and having a jQuery-independent verification method will more likely spot problems.

Do you see the discrepancies with the way the jQuery‘s .hide() method generates the stype="display attribute as a bug/problem? (i.e. should I raise it on http://bugs.jquery.com/)?

Do you see a solution that would allow me comparing my nodes without using jQuery methods?

Answer 1

From QUnit perspective perform the following check in order to see whether the element is hidden:

equal(element.css('display'), 'none', 'element is not hidden');

This eliminates the need for you to compare string differences. If you are not using jQuery then perform:

equal(element.style.display, 'none', 'element is not hidden');

If you would like to create some utility extensions to modularize your unit/interaction testing, then isEqualNode is not your best approach here. Better provide yourself with methods like:

checkClass(element, cssClass)
checkAttribute(element, attr, value)
checkAttributeExists(element, attr)
etc...