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

How can I unit test JavaScript that will executed after the CSS transitionEnd event

本文关键字：JavaScript 单元测试 执行 CSS transitionEnd 事件      更新时间：2023-09-26

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

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

看看twitter引导程序（第95行），有一个transitionEnd事件被触发。如何测试将在事件激发后执行的代码？

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

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

相关文章：