javascript - 测试 CSS Transition 在 Jasmine 中完成

Question

我正在尝试使用 jasmine 和 jasmine-jquery 测试一些 JavaScript

所以我在函数中有这段 Javascript

trackTransition = ()->
  $("#test").on "transitionend MSTransitionEnd webkitTransitionEnd oTransitionEnd", ()-> 
    console.log "trans End"

我在 spec.css 中应用了一些样式，添加了一个 css 转换并添加了一些 html 到固定装置中，然后像这样添加到 jasmine 规范中:

   describe "Checks when animation finished", ->
      beforeEach ->
        @trans = spyOnEvent('#test', 'transitionend MSTransitionEnd webkitTransitionEnd oTransitionEnd')
        jasmine.Clock.useMock()
        trackTransition()

      it "Should check when transition ended", ->
        expect(@trans).not.toHaveBeenTriggered()
        jasmine.Clock.tick(1001)
        expect(@trans).toHaveBeenTriggered()

现在我已经在页面上对此进行了测试并且可以正常触发，但是在运行器上它失败了，甚至 console.log 也没有运行。你能测试转换吗？

Answer 1

这无法工作，因为 jasmine.Clock 不会更改时间或使测试等待 1000 毫秒。它只是覆盖 window.setTimeout。因此，无论何时调用 setTimeout(someFunction, 1000)，它都会保存传递的函数和时间。然后，当您调用 tick 时，它只会调用任何保存的函数，其时间低于您传递给 tick 调用的时间。

因此，测试 transitionEnd 事件的唯一方法是手动触发该事件。此外，测试事件是否在特定时间后触发也没有多大意义，因为这是您依赖的浏览器行为。