Unit-test promise-based code in Angularjs

Question

I'm having hard times trying to test promise-based code in Angularjs.

I have the following code in my controller:

    $scope.markAsDone = function(taskId) {
        tasksService.removeAndGetNext(taskId).then(function(nextTask) {
            goTo(nextTask);
        })
    };

    function goTo(nextTask) {
        $location.path(...);
    }

I'd like to unit-test the following cases:

when markAsDone is called it should call tasksService.removeAndGetNext
when tasksService.removeAndGetNext is done it should change location (invoke goTo)

It seems to me that there is no easy way to test those two cases separately.

What I did to test the first one was:

var noopPromise= {then: function() {}}
spyOn(tasksService, 'removeAndGetNext').andReturn(noopPromise);

Now to test the second case I need to create another fake promise that would be always resolved. It's all quite tedious and it's a lot of boilerplate code.

Is there any other way to test such things? Or does my design smell?

The accepted solution did not work for me. This did: stackoverflow.com/questions/21895684/… — sibidiba
– sibidiba, Commented Apr 17, 2014 at 4:42

Chui Tey · Accepted Answer · 2014-12-29 10:31:23Z

110

You will still need to mock the services and return a promise, but you should use real promises instead, so you don't need to implement its functionality. Use beforeEach to create the already fulfilled promise and mock the service if you need it to ALWAYS be resolved.

var $rootScope;

beforeEach(inject(function(_$rootScope_, $q) {
  $rootScope = _$rootScope_;

  var deferred = $q.defer();
  deferred.resolve('somevalue'); //  always resolved, you can do it from your spec

  // jasmine 2.0
  spyOn(tasksService, 'removeAndGetNext').and.returnValue(deferred.promise); 

  // jasmine 1.3
  //spyOn(tasksService, 'removeAndGetNext').andReturn(deferred.promise); 

}));

If you'd rather prefer to resolve it in each it block with a different value, then you just expose the deferred to a local variable and resolve it in the spec.

Of course, you would keep your tests as they are, but here is some really simple spec to show you how it would work.

it ('should test receive the fulfilled promise', function() {
  var result;

  tasksService.removeAndGetNext().then(function(returnFromPromise) {
    result = returnFromPromise;
  });

  $rootScope.$apply(); // promises are resolved/dispatched only on next $digest cycle
  expect(result).toBe('somevalue');
});

edited Dec 29, 2014 at 10:31

Chui Tey

5,5842 gold badges41 silver badges44 bronze badges

answered Apr 18, 2013 at 11:56

Caio Cunha

23.4k6 gold badges81 silver badges74 bronze badges

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

5 Comments

aamiri Over a year ago

can you explain the purpose of $rootScope = $rootScope; in your first example?

Caio Cunha Over a year ago

What I'm doing is injecting the $rootScope (if you insert a _ before and after, it will be ignored) and exposing it through a local variable. This way you don't need to inject it into each separately spec, as all of them are probably going to use it.

Mike Over a year ago

+1 I was missing this $rootScope.$apply() - very helpful thanks

Federico Nafria Over a year ago

@CaioToOn Is there some way to dispatch a promise without applying the scope?

charlespwd Over a year ago

For the record, the whole var deferred = $q.defer(); deferred.resolve('something'); returnValue(deferred.promise) can be reduced to returnValue($q.when('something'))

yangmillstheory · Accepted Answer · 2014-06-19 02:08:05Z

4

Another approach would be the following, taken straight out of a controller I was testing:

var create_mock_promise_resolves = function (data) {
    return { then: function (resolve) { return resolve(data); };
};

var create_mock_promise_rejects = function (data) {
    return { then: function (resolve, reject) { if (typeof reject === 'function') { return resolve(data); } };
};

var create_noop_promise = function (data) {
    return { then: function () { return this; } };
};

edited Jun 19, 2014 at 2:08

answered Apr 10, 2014 at 23:49

yangmillstheory

1,06514 silver badges31 bronze badges

3 Comments

Kayhadrin Over a year ago

Your promise mock is going to run the resolve() or reject() functions synchronously, but in AngularJs, it's always done asynchronously. So I wouldn't recommend this solution because it doesn't accurately test the code.

yangmillstheory Over a year ago

In unit tests, you want the ability to run asynchronous code synchronously. This is why services like $httpBackend are automatically mocked out in the Angular testing environment.

yangmillstheory Over a year ago

Actually, I totally see your point. These promises will automatically flush themselves. You want the ability to flush them on command.

Michael · Accepted Answer · 2014-08-13 08:53:43Z

0

And as yet another option you can avoid having to call $digestby using the Q library (https://github.com/kriskowal/q) as a drop-in replacement for $q e.g:

beforeEach(function () {
    module('Module', function ($provide) {
        $provide.value('$q', Q); 
    });
});

This way promises can be resolved/rejected outside of the $digest cycle.

answered Aug 13, 2014 at 8:53

Michael

2,3081 gold badge24 silver badges31 bronze badges

Collectives™ on Stack Overflow

Unit-test promise-based code in Angularjs

3 Answers 3

5 Comments

3 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

3 Comments

Comments

Linked

Related