Sinon: Clock not working with jQuery animations

[mikeobrien]

So I'm trying to use the clock to test the visibility of an element after a fade in. I cannot seem to get this to work at all, it's as if the element is not completing the animation. If I use the clock against a setTimeout it works. Also if I use mocha's async done() I can see that the animation completes (So I know for sure that it's happening). I tried using the example in the docs for animations and the clock and it doesn't work either. Here is a fiddle of my tests:

http://jsfiddle.net/hcoverlambda/R9Pa5/8/

Any ideas?

[mikeobrien]

One more thing I wanted to note is I tried reordering the script tags so that sinon was before and after jQuery and I get the same result. So it doesn't look like the load ordering makes a difference.

[cjohansen]

Is your version of jQuery perhaps using requestAnimationFrame? Sinon doesn't know about this, but probably should.

[mikeobrien]

I was using 2.0.3 and requestAnimationFrame is not used (Looking at the source anyways). AFAICT it was pulled from ~1.6 and not put back (But maybe I'm missing something). I did however try going back to the latest pre 2.0.0 version (1.11.0-beta2) and it worked! Tried both the 2.0.0 and the latest 2.1.0 beta 2 it's broken. So some change in 2.0 is causing it. I was under the impression that 2.0 was just missing < IE9 support but evidently there was more.

[linkesch]

@mikeobrien Thanks for the solution. Same problem here. Downgrading from 2.1.1 to 1.11.1 worked.

[mroderick]

@mikeobrien the runnable example is broken. Would you mind fixing it up? It'll help people understand the issue, making it more likely that someone will work on it. Thanks

[Munksey]

I am using jQuery 2.1.3 and found that the jQuery.now method needs to be stubbed. I imagine that when jQuery gets loaded, it keeps a reference to Date.now before it gets stubbed.

Running something like this will resolve the problem:

  before(function() {
    this.clock = sinon.useFakeTimers();
    sinon.stub(jQuery, 'now', function() { return Date.now(); });
  });

  after(function() {
    this.clock.restore();
    jQuery.now.restore();
  });

[mroderick]

It is well established by now that (older) jQuery was not written very defensively. This is a bug on their side, and should be fixed there