Any better way than setTimeout to wait for asnyc callbacks when testing JavaScript?

Question

Given this code:

showForm = function (url) {
        return $.get(url, function (html) {
             $('body').append();              
        });
 };

When using sinon.js , jQuery.mockjax.js and expect.js , I have the following passing test:

it("showForm calls jQuery.append", function () {

    $.mockjax({
          url: '/fake'                    
    });

    var spy = sinon.spy($.fn, "append");             
    presenter.showForm('/fake');

    setTimeout(function () { 
        expect(spy.called).to.be.equal(true);
    }, 1000);
});

Using the setTimeout function to wait on the callback from the asynchronous $.get smells bad and it will slow down my test suite if I do too much of it.

However, I feel that the intent is reasonably clear and it does seem to test exactly what I want.

Is there a better way and can you please explain what's going on in your answer?

Answer 1

Pass your anonymous function to show form as a parameter and have it called in the callback after the append. To ensure its called you could make it an $.ajax request that covers the error callback as well.

This way it is called exactly when the get request finishes with no excess time or called too early.

showForm = function (url, callback) {
        return $.get(url, function (html) {
             $('body').append();   
             if(callback != undefined)
             callback();
        });
 };

it("showForm calls jQuery.append", function () {

    $.mockjax({
          url: '/fake'                    
    });

    var spy = sinon.spy($.fn, "append");

    presenter.showForm('/fake', function (){ 
        expect(spy.called).to.be.equal(true);
    });
});

Answer 2

You should use sinons fakeServer . This will call your ajax callback immediately, when the $.ajax call was made. See this jsFiddle

before(function(){
  var server = sinon.fakeServer.create();
  server.respondWith('response');
})

it("showForm calls jQuery.append", function () {
    var spy = sinon.spy($.fn, "append");             
    presenter.showForm('/fake');
    server.respond();
    expect(spy.called).to.be.equal(true);
});

Answer 3

Use $.doTimeout plugin

Check the following documentation.

http://benalman.com/projects/jquery-dotimeout-plugin/

Hope this helps