1

背景：
我正在使用以下方式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，我只能满足两种情况中的一种。

因此，我的测试最终总是失败，Chrome或者Firefox取决于我选择创建的情况$expected。

这是一个jsFiddle，这样你就可以明白我的意思

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

  • 我无法再将整套 DOM 元素与.isEqualNode我目前所做的比较，并且必须编写许多单独的测试来获得等效的测试，这将使我的测试非常广泛且难以维护。
  • 我觉得通过使用DOM方法（即isEqualNode）我的测试比使用jQuery方法（例如.is(':hidden')）更健壮，因为我的元素是首先生成的，jQuery并且具有jQuery独立的验证方法更有可能发现问题。

jQuery您是否看到's.hide()方法将stype="display属性生成为错误/问题的方式存在差异？（即我应该在http://bugs.jquery.com/上提出它吗）？

您是否看到允许我在不使用jQuery方法的情况下比较我的节点的解决方案？

4

1 回答 1

2

从 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...
于 2012-10-01T13:13:02.787 回答