Unit testing an asynchronous service in angularjs

Question

I am trying to unit test a service which has asynchronous methods but am having no luck.

I have tried to implement with promises by using the $q support in angularjs.

Any help would be appreciated.

angular.module('myapp', ['myservice']);

angular.module('myservice', []).factory('myservice', function($q) {
  var ls = {};

  ls.DoIt = function() {
    var deferred = $q.defer();

    setTimeout(function(){
        deferred.resolve(5);
    },3000);

    return deferred.promise;
  }

  return ls;

});

describe('services', function () {

    beforeEach(module('myservice'));

    it("should equal 2",  inject(function(myservice) {
        myservice.DoIt().then(function(returned) {
            expect(returned).toEqual(2);
        });        
    }));
});

Mark Amery · Accepted Answer · 2015-03-04 12:49:51Z

30

First of all, the setTimeout is particularly tricky to test since it hard to mock. Fortunately AngularJS has a wrapper around it ($timeout) that plays the same role but can be easily mocked:

  ls.DoIt = function() {
    var deferred = $q.defer();

    $timeout(function(){
        deferred.resolve(5);
    },3000);

    return deferred.promise;
  }

The mock provided for $timeout allows us to easily simulate elapsed time (with $timeout.flush()) which means our tests can run fast, without really waiting for the async event to complete (please note that the production code is still using async API!).

The changed tests would look like:

it("should equal 5",  inject(function(myservice, $timeout) {

    var valueToVerify;
    myservice.DoIt().then(function(returned) {
      valueToVerify = returned;  
    });  
    $timeout.flush();        
    expect(valueToVerify).toEqual(5);
}));

And finally the working jsFiddle: http://jsfiddle.net/v9L9G/1/

edited Mar 4, 2015 at 12:49

Mark Amery

158k94 gold badges435 silver badges477 bronze badges

answered Mar 18, 2013 at 13:23

pkozlowski.opensource

117k60 gold badges329 silver badges286 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Hidden Developer Over a year ago

Thanks for the detailed explanation. The service I am writing uses IndexedDB and the api is asynchronous and I am struggling as to how I can apply the above when the DoIt function would call something like request.onsuccess = function(event) { // Do something with request.result! deferred.resolve(result); };

M.K. Safi Over a year ago

@Pawel What if I'm testing a controller which uses DoIt mock service, and inside that controller, DoIt is in a loop, so it gets called multiple times. How do I flush it multiple times? Isn't it possible to get DoIt to flush itself? I tried to get an asynchronous mock to flush itself by including this in it, but that doesn't seem very robust.

M.K. Safi Over a year ago

Actually, the fiddle I shared above seems to successfully get a mock to flush itself. The problem I was having turned out to be some where else...

Lukasz Prus Over a year ago

@pkozlowski.opensource How do we test that valueToVerify was still undefined after 1000ms?

Caio Cunha · Accepted Answer · 2015-04-15 00:22:55Z

4

It's not related to Angular itself, but to Jasmine async tests.

If you need a setTimeout use Angular $timeout. And if you wish to have a fine control over setTimeout/$timeout executions, use mocked Clock.

edited Apr 15, 2015 at 0:22

answered Mar 18, 2013 at 13:31

Caio Cunha

23.4k6 gold badges81 silver badges74 bronze badges

2 Comments

Hidden Developer Over a year ago

Thanks for your help. I will review the $timeout documentation.

Stephane Over a year ago

The provided link to the Jasmine Async 404ed. I reckon it is now jasmine.github.io/2.0/…

Collectives™ on Stack Overflow

Unit testing an asynchronous service in angularjs

2 Answers 2

4 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related