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

Closed
vkovalskiy opened this Issue Feb 5, 2012 · 4 comments

Comments

Projects
None yet
4 participants
@vkovalskiy

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.

I am not sure whether it is jasmine ot jquery problem. The complete ticket is here:

http://stackoverflow.com/questions/9141800/jasmine-clock-mocking-and-jquery-effect-complete-function-does-not-go-along-we

@infews

This comment has been minimized.

Show comment Hide comment
@infews

infews Feb 11, 2012

Contributor

This is a known issue. jQuery animations depend on setTimeout and the jasmine mock clock stubs that function. You need to turn off jQuery animations ($.fx.off()) in a global beforeEach.

I think this is a good pattern - you don't want animations messing with your tests. If you need to test with animations on I suggest you add incremental browser-based testing to your stack.

Contributor

infews commented Feb 11, 2012

This is a known issue. jQuery animations depend on setTimeout and the jasmine mock clock stubs that function. You need to turn off jQuery animations ($.fx.off()) in a global beforeEach.

I think this is a good pattern - you don't want animations messing with your tests. If you need to test with animations on I suggest you add incremental browser-based testing to your stack.

@infews infews closed this Feb 11, 2012

@vkovalskiy

This comment has been minimized.

Show comment Hide comment
@vkovalskiy

vkovalskiy Feb 19, 2012

I have tried to turn off animations in a beforeEach of a particular describe block but no result (complete remains uncalled).

What did you mean exactly saing global beforeEach? Where the statement should be placed to resolve jQuery problem?

I have tried to turn off animations in a beforeEach of a particular describe block but no result (complete remains uncalled).

What did you mean exactly saing global beforeEach? Where the statement should be placed to resolve jQuery problem?

@dguzzo

This comment has been minimized.

Show comment Hide comment
@dguzzo

dguzzo Jun 6, 2012

You need to turn off jQuery animations ($.fx.off()) in a global beforeEach.

Ah, this worked for me! It was not clear to me initially why an effect/animation such as fadeOut() would not act as expected in conjunction with

jasmine.Clock.tick(someMilliSeconds);

doing the below to turn off animations in my specific describe() function worked:

    beforeEach(function(){
      loadFixtures('prototype');
      jasmine.Clock.useMock();
      jQuery.fx.off = true;
    });

dguzzo commented Jun 6, 2012

You need to turn off jQuery animations ($.fx.off()) in a global beforeEach.

Ah, this worked for me! It was not clear to me initially why an effect/animation such as fadeOut() would not act as expected in conjunction with

jasmine.Clock.tick(someMilliSeconds);

doing the below to turn off animations in my specific describe() function worked:

    beforeEach(function(){
      loadFixtures('prototype');
      jasmine.Clock.useMock();
      jQuery.fx.off = true;
    });
@EvHaus

This comment has been minimized.

Show comment Hide comment
@EvHaus

EvHaus Aug 25, 2014

Just an FYI for those finding this issue, jQuery 2.0 does not have an fx.off() method. You need use this instead:

$.fx.off = true;

EvHaus commented Aug 25, 2014

Just an FYI for those finding this issue, jQuery 2.0 does not have an fx.off() method. You need use this instead:

$.fx.off = true;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment