Angular controller promises and testing

Question

Im writing some unit tests for my controller which uses promises. Basically this:

UserService.getUser($routeParams.contactId).then(function (data) {
      $scope.$apply(function () {
      $scope.contacts = data;
   });
});

I have mocked my UserService. This is my unit test:

beforeEach(inject(function ($rootScope, $controller, $q, $routeParams) {
        $routeParams.contactId = contactId;
        window.localStorage.clear();
        UserService = {
            getUser: function () {
                def = $q.defer();
                return def.promise;
            }
         };
        spyOn(UserService, 'getUser').andCallThrough();


      scope = $rootScope.$new();
      ctrl = $controller('ContactDetailController', {
        $scope: scope,
        UserService:UserService
      });
  }));


it('should return 1 contact', function () {
    expect(scope.contacts).not.toBeDefined();
    def.resolve(contact);
    scope.$apply();

    expect(scope.contacts.surname).toEqual('NAME');
    expect(scope.contacts.email).toEqual('EMAIL');
});

This give me the following error:

Error: [$rootScope:inprog] $digest already in progress

Now removing the $scope.$apply in the controller causes the test to pass, like this:

UserService.getUser($routeParams.contactId).then(function (data) {
    $scope.contacts = data;     
 });

However this breaks functionality of my controller... So what should I do here?

Thanks for the replies, the $apply is not happening in the UserService. It's in the controller. Like this:

EDIT: The $apply is happening in the controller like this.

appController.controller('ContactDetailController', function ($scope, $routeParams, UserService) {
    UserService.getUser($routeParams.contactId).then(function (data) {
      $scope.$apply(function () {
        $scope.contacts = data;
    });
});

Real UserService:

 function getUser(user) {
    if (user === undefined) {
      user = getUserId();
    }
    var deferred = Q.defer();
    $http({
      method: 'GET',
      url: BASE_URL + '/users/' + user
    }).success(function (user) {
      deferred.resolve(user);
    });
    return deferred.promise;
  }

Yes, you should manually run the digest in your unit test, and you should probably not be doing it in your service. Why does your service have a $scope? The service should act as the model, and a controller should be getting the data from the service. If you are finding that you need to run $apply in your code, then something may not be right. — aet, Apr 19 '14 at 22:17
The $apply on the scope is happening in the controller. Sorry for the confusion, see my edit in the post above. — user2862639, Apr 20 '14 at 06:37
There may be an issue in `UserService`, in that it's resolving the promise outside of the `$digest` loop. Can you post the code/details of how it fetches the user and resolves the promise it returns? — Michal Charemza, Apr 20 '14 at 08:14

score 1 · Accepted Answer · answered Apr 20 '14 at 08:48

There are a couple of issues in your UserService.

You're using Q, rather than $q. Hard to know exactly what effect this has, other than it's not typical when using Angular and might have affects with regards to exactly when then callbacks run.
You're actually creating a promise in getUser when you don't really need to (can be seen as an anti-pattern). The success function of the promise returned from $http promise I think is often more trouble than it's worth. In my experience, usually better to just use the standard then function, as then you can return a post-processed value for it and use standard promise chaining:
```
function getUser(user) {
  if (user === undefined) {
    user = getUserId();
  }
  return $http({
    method: 'GET',
    url: BASE_URL + '/users/' + user
  }).then(function(response) {
    return response.data;
  });
}
```

Once the above is changed, the controller code can be changed to

UserService.getUser($routeParams.contactId).then(function (data) {
  $scope.contacts = data;     
});

Then in the test, after resolving the promise call $apply.

def.resolve(contact);
scope.$apply();

Angular controller promises and testing

1 Answers1