Angular.js promise not resolving when unit testing service with karma

Question

I am trying to unit test an Angular.js service, and need to set an expect on a promise returned from a Mock service (using Jasmine). I am using the karma unit testing framework. The relevant code snippet is below:

// I can't figure out how to do the equivalent of a $scope.$digest here. 
var loginStatusPromise = FacebookService.getFacebookToken();
loginStatusPromise.then(function(token) {
    expect(false).toBeTruthy(); // If this test passes, there is something going wrong!
    expect(token).not.toBeNull(); // The token should be ValidToken
    expect(token).toBe('ValidToken');
});

The complete unit test code can be seen here.

The problem is the promise.then statement never fires when karma is executing. Hence, none of my expect statements are executed. In my controller tests, I use $scope.$digest() to resolve the promises, but I am not clear on how to do this in a service test. As I thought there was no notion of 'scope' in a service test.

Do I have the wrong end of the stick here? Do I need to injecct $rootScope into my service test and then use $digest? Or, is there another way?

Answer 1

Assuming that you are using ngFacebook/ngModule a quick note before the solution/ideas is that this project does not have unit tests ! Are you sure you want to use this project ?

I did a quick scan of your Unit Tests on Github and found following missing:-

1) Module initialization. ngFacebook needs that or you need to initialize your module that does the same thing.

beforeEach(module('ngFacebook'));

OR

beforeEach(module('yieldtome'));

2) Seriously consider mocking ngFacebook module

At unit level tests you are testing your code within a mocked bubble where outside interfaces are stubbed out.

Otherwise) Try adding calling the API as below:-

 $rootScope.$apply(function() {
     this.FacebookService.getFacebookToken().then(function(){
        //your expect code here
     });
    });
 $httpBackend.flush();//mock any anticipated outgoing requests as per [$httpBackend][2]

Answer 2

I had this problem and resolved it by simply putting a $rootScope.$apply() at the end of my test

Your FacebookService might be the issue, as suggested by @mpm. Are you sure it doesn't have any http calls happening inside of that Facebook dependency which wouldn't be occurring during unit testing? Are you certain that resolve has been called on the deferred yet?

Answer 3

beforeEach(function(){
   var self=this;
    inject(function($rootScope,Facebook){
        self.$rootScope=$rootScope;
        self.Facebook=Facebook;
    });
})

it('resolves unless sourcecode broken',function(done){
    // I can't figure out how to do the equivalent of a $scope.$digest here. 
    var loginStatusPromise = this.FacebookService.getFacebookToken();
    loginStatusPromise.then(function(token) {
        expect(token).toBe('ValidToken');
        done();
    });
    $rootscope.$apply();

});

https://docs.angularjs.org/api/ng/service/$q

Answer 4

I agree with the above answers that a service should have nothing to do with $rootScope.

In my case had a $q promise, that used a second service internally resolving to a promise as well. No way to resolve the external one, unless I added $rootScope.$digest() into my service code (not the test)...

I ended-up writing this quick shim for $q to use in my tests, but be careful, as it's just an example and not a complete $q implementation.

beforeEach(module(function($provide) {
  $provide.value('$q', {
    defer: function() {
      var _resolve, _reject;
      return {
        promise: {
          then: function (resolve, reject) {
            _resolve = resolve;
            _reject = reject;
          }
        },
        resolve: function (data) {
          window.setTimeout(_resolve, 0, data);
        },
        reject: function (data) {
          window.setTimeout(_reject, 0, data);
        }
      };
    }
  });
}));

Hope it will be useful to someone, or if you have any feedback.

Thanks.