Search code examples
javascriptjqueryjasminejasmine-jquery

Testing CSS Transition finished in Jasmine

I'm trying to test a bit of JavaScript using jasmine & jasmine-jquery

So I have this bit of Javascript in function

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

I've applied some styes in spec.css that add a css transition and added some html into a fixture, then added in the jasmine specs like so:

   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()

Now I have tested this on the page and fires fine, but on runner it fails and even the console.log doesn't run. Can you test the transitions?

Solution

  • This cant work cause jasmine.Clock doesn't change the time or make the test to wait for 1000ms. It just overwrites window.setTimeout. So whenever you call setTimeout(someFunction, 1000) it saved the passed functions and times. Then when you call tick it just calls any saved functions with a time lower then the you passed to the tick call.

    So the only way to test your transitionEnd event is to trigger the event manually. Also it makes not much sense to test that the event is fired after a specific time, as this is a browser behavior you rely on.