Jasmine Clock mocking and JQuery effect 'complete' function does not go along well

Question

I have found a problem testing JQuery animations. The problem is that during jasmine.Clock.useMock() mode JQuery does not call complete function after effect execution.

Logic:

$('#mydiv').fadeOut('normal', function () {
    // this is called AFTER the test ends
    // but should be called after jasmine.Clock.tick(1000);
    $(this).remove();
})

Spec:

it('should pass', function () {
    jasmine.Clock.useMock();
    // call logic
    jasmine.Clock.tick(1000);
    // using jasmine-jquery matcher
    expect($('#mydiv')).not.toExist();
})

Test fails with the message:

Expected '<div id="mydiv" style="opacity: 0; "></div>' not to exist.

It means that effect ended correctly, but complete function was not called. It actually gets called after test runner finishes execution.

I am not sure whether it is bug to be reported to JQuery or to Jasmine developers. Maybe someone would suggest workaround.

My goal is to test that element was removed after the logic execution, so I need not.toExist() matcher.

Answer 1

Please see the answer at your github issue. jQuery effects and Jasmine's mock clock are not compatible.

Answer 2

I'm the 0.00001%, as I'm using backbone with prototype - but I added this to my SpecHelper.js file to get around the scriptaculous effects I'm using and ensure my callbacks are executed.

I'm sure you could take the same approach for jquery.

beforeEach(function() {
  // Override scriptaculous effects so we can ensure our afterFinish
  // callbacks are executed.
  var effects = [
    'Appear', 'BlindDown', 'BlindUp', 'DropOut', 'Fade', 'Fold',
    'Grow', 'Highlight', 'Morph', 'Move', 'Opacity', 'Puff',
    'Pulsate', 'Scale', 'ScrollTo', 'Shake', 'Shrink', 'SlideDown',
    'SlideUp', 'Squish', 'SwitchOff', 'Tween'
  ];
  effects.each(function(name){
    Effect[name] = function(el, options) {
      options = options || (options = {});
      expect(el).toExist();
      if(options['afterFinish']) options['afterFinish']();
    }
  });
});