code coverage for angularJS service

Question

I have a controller that is calling a service. I want to write my unit tests such that I get coverage on the success and error functions of the then function.

maApp.controller('editEmailAndPasswordController', 
                 ["$scope", "emailAndPasswordService",
    function editEmailAndPasswordController($scope, emailAndPasswordService) {
        $scope.EmailId = '[email protected]';
        $scope.CurrentPassword = '';
        $scope.Success = false;

        $scope.save = function () {
            var request = {
                currentPassword: $scope.CurrentPassword,
                newEmailId: $scope.EmailId
            };
            emailAndPasswordService.save(request).then(function (data) {
                $scope.Success = true;
            }, function (data, status, header, config) {
                $scope.Success = false;
            });
        };
    }]);

This is what I have got so for. I want another test for the fail condition as well, but not sure how to set up the mock service.

describe('Controllers', function () {
    var $scope, ctrl, controller, svc, def;
    describe('editEmailAndPasswordController', function () {

        beforeEach(function() {
            module('maApp');
        });

        beforeEach(inject(function ($controller, $rootScope, $q) {
            ctrl = $controller;
            svc = {
                save: function () {
                    def = $q.defer();
                    return def.promise;
                }
            };
            spyOn(svc, 'save').andCallThrough();
            $scope = $rootScope.$new();
            controller = ctrl('editEmailAndPasswordController', { $scope: $scope, emailAndPasswordService: svc });
        }));

        it('should set ShowEdit as false upon save', function () {
            $scope.ShowEdit = true;
            $scope.EmailId = 'newEmail';
            $scope.CurrentPassword = 'asdf1';

            $scope.save();
            expect($scope.EmailId).toBe('[email protected]');
            expect($scope.Success).toBe(true);
        });
    });
});

Tek · Accepted Answer · 2014-06-14 09:35:44Z

3

You have some real problems with this code.

Don't call ".andCallThrough()"- that way your test depends on the implementaton of the service and means your controller is not isolated. The main idea is to create unit tests.

svc = {save: jasmine.createSpy()};

svc.save.andReturn(...);
You can't assert against expect($scope.EmailId).toBe('[email protected]'); because you change the value in the code to $scope.EmailId = 'newEmail';
you can create 2 private methods for readability

function success(value) { var defer = q.defer(); defer.resolve(value); return defer.promise; }

function failure(value){ var defer = q.defer(); defer.reject(value); return defer.promise; }

Thus in the first test you can call

svc.save.andReturn(success());

$scope.$digest()

expect($scope.Success).toBeTruthy();

And in the other test you will have the same but:

svc.save.andReturn(failure());

$scope.$digest()

expect($scope.Success).toBeFalsy();

edited Jun 14, 2014 at 9:35

answered Jun 13, 2014 at 12:34

Tek

1,1982 gold badges12 silver badges23 bronze badges

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

2 Comments

Arun Over a year ago

In your success function you are calling reject, just changed that on my side and it worked like a charm.

Tek Over a year ago

Ah my mistake sorry , but you got the idea and glad that i helped ;)

JB Nizet · Accepted Answer · 2014-06-13 12:27:50Z

1

In one case, you want the promise to be successful, so you want to resolve the deferred:

$scope.save();

def.resolve('whatever');
$scope.$apply();

expect($scope.Success).toBe(true);
...

In the other case, you want the promise to be a failure, so uou want to reject the deferred:

$scope.save();

def.reject('whatever');
$scope.$apply();

expect($scope.Success).toBe(false);
...

This is explained in the documentation.

answered Jun 13, 2014 at 12:27

JB Nizet

694k94 gold badges1.3k silver badges1.3k bronze badges

Collectives™ on Stack Overflow

code coverage for angularJS service

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related