jQuery的.hide（）没有设置style =“display：none;”一致地跨浏览器

Question

背景
我使用QUnit以下列方式验证DOM元素的创建（到目前为止一直正常工作）：

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

有关isEqualNode的更多信息：MDN，W3

问题：
我在使用jQuery's .hide()方法时比较节点时遇到问题，因为：

• 使用style="display: none;"生成; Firefox之后没有额外空格
• 使用style="display: none; "生成; Chrome之后的额外空格
• isEqualNode认为style="display: none;"与style="display: none; "不同（您可以按不同的顺序拥有属性，而isEqualNode仍然认为节点相等，但是额外的空间不是） 。
• 在构建$expected时，我只能满足2种情况中的1种情况。

因此，根据我选择创建Chrome的情况，我的测试最终会因Firefox或$expected而失败。

这是jsFiddle so that you can see what I mean

我可以检查元素是否隐藏.is(':hidden')，但这对我来说并不理想，因为：

• 我不能再像我目前那样将整个DOM元素集与.isEqualNode进行比较，并且必须编写许多单独的测试来获得等价物，这将使我的测试非常广泛且难以维护。
• 我觉得通过使用DOM方法（即isEqualNode），我的测试比使用jQuery方法（例如.is(':hidden')）更强大，因为我的元素首先使用jQuery生成并使用jQuery独立验证方法更有可能发现问题。

您是否看到jQuery的{​​{1}}方法生成.hide()属性作为错误/问题的方式存在差异？ （即我应该在http://bugs.jquery.com/）上提出它吗？

您是否看到了一种解决方案，可以让我在不使用stype="display方法的情况下比较节点？

Answer 1

从QUnit透视图执行以下检查以查看元素是否隐藏：

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

这使您无需比较字符串差异。如果您不使用jQuery，请执行：

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

如果您想创建一些实用程序扩展来模块化您的单元/交互测试，那么isEqualNode不是您最好的方法。更好地为自己提供如下方法：

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