在 Jasmine 中完成 CSS Transition 测试

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事件的唯一方法是手动触发该事件。此外，测试事件在特定时间后触发没有多大意义，因为这是您依赖的浏览器行为。