javascript - 区分 DOM——如何编写单元测试来检查脚本是否对页面上的元素进行了任何用户可见的更改？

Question

我最近写的一个 JavaScript 插件内置了各种故障保护功能，可以告诉整个插件或部分插件隐藏自身并在无法运行的情况下死掉。例如，假设我们提供的一项功能是自动生成一个弹出窗口，当用户将鼠标悬停在在线商店中时，该弹出窗口会显示竞争对手对该商品的价格。然后我们还会进行一些检查，表明如果我们不知道任何竞争对手的价格，或者我们无法识别商品，则不要显示弹出窗口。

我想使用大致遵循以下结构的测试来测试该功能禁用:

1. 将我们的插件加载到应该禁用某些功能的页面上
2. 欺骗一些可能会触发该功能的用户操作
3. 断言没有对 DOM 进行可见的更改。 (即，不对可见元素进行样式更改，不添加或删除元素，除非它们打开了 display:none)

当然，第 3 步很有趣。有没有一种简单的方法可以用 JavaScript 编写“DOM 不变”测试？ (或者在用于 Python 的 Selenium 中，这是我用来编写我的测试的——但是用 JavaScript 编写检查可能更广泛有用，因为它可以在任何 JavaScript 测试环境中使用。)

---

附言几个注释来阻止“你做错了!”人群:

• 是的，我知道我可以将上面测试中的第 3 步替换为检查是否未进行插件本应进行的特定更改，而且我可能甚至决定这样做。但是，如果这些特定更改的规范不明确且容易更改，则这种包罗万象的方法可能会有用。

• 是的，我还意识到，当一个本应无影响的事件被触发时，仅仅检查 DOM 没有立即视觉变化并不足以证明什么都没有坏。不过，这对我目前的目的来说是最好的。此外，即使结果没有用，它也很有趣。

Answer 1

使用突变观察器来检测没有发生突变。您可能想查看 Mutation Summary，这是一个非常好的突变观察者高级包装器。检查没有发生突变可能很容易，就像检查返回的数组的长度为 0 一样。参见 https://code.google.com/p/mutation-summary/ .