测试CSS转型茉莉花

Question

我想用茉莉花&茉莉花jQuery来测试一些JavaScript完成

所以我在功能该位的Javascript

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

我已经申请了一些在spec.css麦粒肿是添加CSS过渡，并添加一些HTML到夹具，然后在茉莉花规格添加像这样：

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不会改变时间或使测试等待1000ms。它只是覆盖window.setTimeout。所以只要你打电话setTimeout(someFunction, 1000)它保存了传递的功能和时间。然后，当您拨打tick时，它只会调用所有保存的功能，时间会低于您传递给tick的呼叫。

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