Testing AngularJS promises in Jasmine 2.0

Question

I've been trying to wrap my head around Jasmine 2.0 and AngularJS promises. I know that:

• Jasmine 2.0 introduced the done function to replace the old runs and waitsFor functions
• AngularJS $q promises will not resolve until a digest cycle is triggered

How can I test AngularJS promises using the new async syntax in Jasmine 2.0?

Answer 1

After your call to promise.resolve():

• Call $timeout.flush(). This will force a digest cycle and propagate the promise resolution
• Call done(). This tells Jasmine the async tests have completed

Here's an example (Demo on Plunker):

describe('AngularJS promises and Jasmine 2.0', function() {     var $q, $timeout;      beforeEach(inject(function(_$q_, _$timeout_) {         // Set `$q` and `$timeout` before tests run         $q = _$q_;         $timeout = _$timeout_;     }));      // Putting `done` as argument allows async testing     it('Demonstrates asynchronous testing', function(done) {         var deferred = $q.defer();          $timeout(function() {             deferred.resolve('I told you I would come!');         }, 1000); // This won't actually wait for 1 second.                   // `$timeout.flush()` will force it to execute.          deferred.promise.then(function(value) {             // Tests set within `then` function of promise             expect(value).toBe('I told you I would come!');         })         // IMPORTANT: `done` must be called after promise is resolved         .finally(done);          $timeout.flush(); // Force digest cycle to resolve promises     }); }); 

Answer 2

For me the $timeout.flush() didn't work very well, but I've multiple async calls in my spec. I found the $rootScope.$apply(), as a method to force the digeston each async call.

describe('AngularJS promises and Jasmine 2.0', function () {   beforeEach(inject(function (_$q_, _$timeout_, _$rootScope_) {     $q = _$q_     $timeout = _$timeout_     $rootScope = _$rootScope_   }))    it('demonstrates asynchronous testing', function (done) {     var defer = $q.defer()      Async.call()     .then(function (response) {       // Do something        var d = $q.defer()       Async.call()       .then(function (response) {         d.resolve(response)         $rootScope.$apply() // Call the first digest        })       return d.promise     })     .then(function (response) {       // Do something after the first digest        Async.call()       .then(function (response) {         defer.resolve(response) // The original defer         $rootScope.$apply() // Call the second digest       })     })      defer.promise.then(function(value) {       // Do something after the second digest       expect(value).toBe('I told you I would come!')     })     .finally(done)      if($timeout.verifyNoPendingTasks())       $timeout.flush()    }) }) 

It is like a chained async calls thing. Hope it helps the conversation. Regards