How to use jasmine to test an async function that

Question

I'm using a function to fetch data from webapi. Basicly using $.ajax.

I'm now testing it with waits() like this:

describe('xxxxxxxxxxxxxxxxxxxxx', function () {
  var r;
  it('fetchFilter', function () {
    runs(function () {
      model.fetch(opts)
      .done(function(data) {
        r = data;
      });
    });

    waits(2000);

    runs(function () {
      expect(r[0].gender).toBeDefined();
    });
  });
});

The problem is:

1. It's not guaranteed that waits(2000) will do the job well. Due to various reasons(network connections, algorithm efficiency of the api it self, etc.), I may have to waits(5000) or more, or for some models waits(500) is enough. And the most annoying thing is that it's all out of control.
2. A lot of waits() makes the test-specs-runs waste a lot of time waiting. The time of running the whole suite is too long to accept.

Is there some best practice of doing there kind of things?

PS: I know that unit test should not be applied to some function that relies on webapi or database. But I'm working with a single-page-js-heavy-webapp. The data fetching process is as important as how I will consume them with js models.

Answer 1

As per jasmine 2.5, you can pass an extra paramater for it("scenario", callback, timeout)

describe('xxxxxxxxxxxxxxxxxxxxx', function (done) {
  var r, fetchDone;

  it('fetchFilter', function () {

    runs(function () {
      model.fetch(opts).done(function(data) {
        r = data;
        fetchDone = true;
      });
    });

    setTimeout(function() {
        done();
    }, 9000); 

    runs(function () {
      expect(r[0].gender).toBeDefined();
    });

  });
},10000);

Answer 2

waitsFor() will wait for a specified latch callback to return true (it will try many time every few ms). It will also raise an exception if the specified timeout (5000ms in this case) is exceeded.

describe('xxxxxxxxxxxxxxxxxxxxx', function () {
  var r, fetchDone;

  it('fetchFilter', function () {

    runs(function () {
      model.fetch(opts).done(function(data) {
        r = data;
        fetchDone = true;
      });
    });

    waitsFor(function() { 
      return fetchDone; 
    }, 5000); 

    runs(function () {
      expect(r[0].gender).toBeDefined();
    });

  });
});

Check the Jasmine docs for more info on waitsFor() and runs()

Answer 3

The following solution allows you to wait no more than really necessary but still you have to define max timeout you suppose to be enough. The waitsFor takes the function and waits until it returns true or the timeout passed as the last argument expired. Otherwise it fails.

Supposing the thing you need to wait for is that r[0] is defined at all, it could be:

waitsFor(
    function() { return r[0]; },
    'the data should be already set',
    5000);