Jasmine, JQuery UI addClass Test Problem

Question

I'm trying to test the simplest case of addClass with a duration (using jQuery UI and Jasmine).

Here's the test that's failing:

it("should use jquery ui", function() {
  runs(function() {
    expect(el.hasClass("fdsa")).toBeFalsy();
    el.addClass("fdsa", 1000);
    expect(el.hasClass("fdsa")).toBeFalsy();// this should not be failing, but it is
  });

  waits(1000);

  runs(function() {
    expect(el.hasClass("fdsa")).toBeTruthy();
  });
});

My expectation is that it wouldn't have the class until after 1000 milliseconds. When I test this from the browser console, it behaves this way.

This is the sanity check that I used (tested in the Jasmine browser window).

el = $($("div")[0]);
el.addClass("qwer", 1000);
console.log(el.hasClass("qwer")); // output is "false"
setTimeout( function(){
  console.log(el.hasClass("qwer")); // output is "true"
}, 1001);

And this works always. WTF?

Answer 1

I took the time to setup a fiddle for it: http://jsfiddle.net/ahus1/pZGdP/

I 'invented' what was necessary to get it working, like the beforeEach. I don't know the versions you used, but in this sample I used the latest ones available.

I noticed that it was only starting to work when I really added a proper class to the stylesheet. When there is no .fdsa class in the CSS, there's no transition, and the test will fail.

Maybe the fiddle will solve it for you. Please have a look.

Best regards, Alexander.