How to test the duration of a $timeout operation using jasmine?

Question

Suppose I have the following anonymous functionality within a directive:

 $timeout(function () {
     element.removeClass('highlighted')
 }, 2000)   

This works successfully. Now, if I wanted to write a test, using jasmine, to ensure the class is removed after ~2s, how would this be done?

I should add that I have attempted using both jasmine.Clock and waitsFor approaches so far, and in both cases, the tests failed. Notably, however, when I change $timeout to setTimeout within my directive, both tests have passed, so angular's behavior seems to be at play here.

(Note that using $timeout.flush() is unsatisfactory here, as it will only prove that the timeout completed, not how long it took).

Answer 1

Beginning in 1.2 $timeout.flush() takes a delay parameter which simulates the clock akin to jasmine.Clock's simulation, but in a way that makes Angular $timeout happy.

So this test will pass:

it("timeout test", function() {
    $timeout(function() {
        timerCallback();
    }, 100);
    expect(timerCallback).not.toHaveBeenCalled();
    $timeout.flush(99);
    expect(timerCallback).not.toHaveBeenCalled();
    $timeout.flush(1);
    expect(timerCallback).toHaveBeenCalled();
});

demo fiddle