javascript - 如何对将在 CSS transitionEnd 事件后执行的 JavaScript 进行单元测试

Question

我有引导模式窗口。使用 qunit+sinonjs（假计时器），一个元素会留在页面上（div class='modal-backdor'）：

• http://jsfiddle.net/valuks/8xVCR/2/embedded/result/
• http://jsfiddle.net/valuks/8xVCR/2/

查看twitter-bootstrap（第 95 行），触发了一个 transitionEnd 事件。如何测试事件触发后将执行的代码？

Answer 1

问题是this.clock.tick(1000);不要让您的测试代码等待 1000 毫秒，而是调用setTimeouts此时应该发生的所有 JavaScript。因此，在您的情况下，启动动画this.clock.tick(1000);将无效，因为动画仍将持续 1000 毫秒。您正在寻找像 Jasmines 这样的东西waits()，它会在过去的时间内停止执行下面的所有测试代码。似乎在 qunit 和 sinon 中没有等价物。

顺便提一句。您要做的更多的是验收测试，而不是单元测试。您应该考虑模拟您的 DOM 元素 ，这样您就可以在测试中触发 transitionEnd 事件，而不是启动真正的动画。同样启动动画并等待将在非常长时间运行的单元测试中结束。所以在我最新的项目中，我们有大约 200 个测试用例，它们将运行 1-2 秒。因此，请考虑在您开始waits在测试中使用时需要多长时间。