Jasmine's spyOn method in Angular does not impact functions within the factory

Question

Jasmine's spyOn method in Angular does not impact functions within the factory

Initially, my Controller looks like this:

login.controller.js:

angular.module('app').controller('LoginController',
         function($scope,UserService,$location) {
            $scope.submit = function() {
                UserService.login(email,password).then(function(data){
                    if(data.result=='success'){
                        $location.path('/home');
                    else{
                        $scope.loginError='Login failed';
                    }
                },function(error){
                    $scope.loginError='Login failed';
                });
            };

Next, I have a factory service called UserService.js

angular.module('app').factory('UserService', function($http,$q,CONST) {
        login: function(username, password) {
            var defer =$q.defer();
            $http({
                method:'POST',
                url:CONST.baseUrl+'rest/login',
                data:{
                    userName:username,
                    password:password
                }
            }).success(function(data,status,headers,config){
                defer.resolve(data);
            }).error(function(data){
                defer.reject(data);
            });
            return defer.promise;
        },

Afterwards, my Jasmine test is structured like this:

describe('testing the userService',function(){
    beforeEach(module('app'))
    var scope,LoginController,httpBackend;
    beforeEach(inject(function(_$rootScope_,$controller,_UserService_,_$httpBackend_){
        scope = _$rootScope_.$new();
        httpBackend = _$httpBackend_;
        LoginController = $controller('LoginController',{
            $scope:scope,
            UserService:_UserService_
        });
    }));

    it('should return success when logging in',function(){
        httpBackend.expectPOST('rest/login',{
                    userName:'Jordan',
                    password:'password'
                }).respond(200,{result:'success'});

        spyOn(UserService,'login').and.callThrough();
        scope.submit();
        httpBackend.flush();
        expect(UserService.login).toHaveBeenCalled();
        expect(location.path()).toBe('/home');
    });

    afterEach(function(){
        httpBackend.verifyNoOutstandingExpectation();
        httpBackend.verifyNoOutstandingRequest();
    });
});

However, the test result indicates:

Chrome 43.0.2357 (Windows 7 0.0.0) testing the userService should return success when logging in FAILED
        Expected spy login to have been called.
            at Object.<anonymous> (C:/Users/IBM_ADMIN/desk/workspace/WaterFundWeb/WebContent/test/unit/userService.js:28:29)

I am certain that the login() function is being called, so why did the test fail?

javascript angularjs jasmine karma-runner

Answer 1

Answer №1

I have made some improvements to your LoginController and UserService:

//I have also added a CONST factory that returns an empty string as the baseUrl, 
//since I am not familiar with the logic inside this factory in your code.
angular.module('app').factory('CONST', function() {
    return {
        baseUrl: ''
    };
});

angular.module('app').factory('UserService', function($http, $q, CONST) {
    //UserService should return an object with a login function. 
    //The code you provided for this factory has incorrect syntax.
    return {
        login: function (username, password) {
            var defer = $q.defer();
            $http({
                method: 'POST',
                url: CONST.baseUrl + 'rest/login',
                data: {
                    userName: username,
                    password: password
                }
            }).success(function (data, status, headers, config) {
                defer.resolve(data);
            }).error(function (data) {
                defer.reject(data);
            });
            return defer.promise;
        }
    };
});

angular.module('app').controller('LoginController', function($scope, UserService, $location) {

    //Remember to include parameters in the $scope.submit function,
    //as you will use them when calling UserService.login
    $scope.submit = function (email, password) {
        UserService.login(email, password).then(
            function (data) {
                if (data.result == 'success') {
                    $location.path('/home');
                } else {
                    $scope.loginError = 'Login failed';
                }
            },
            function (error) {
                $scope.loginError = 'Login failed';
            });
    };
});

After refactoring, I discovered some syntax errors in your tests. Below is the updated code with my comments and fixes:

describe('test the userService',function() {
    var scope, LoginController, httpBackend,
        userService, //You need to create a variable for UserService to use it further (creating spies, etc.)
        location; //You also require a variable for the $location service to check the current path in your test

    beforeEach(inject(function(_$rootScope_, $controller, UserService, _$httpBackend_, _$location_) {
        scope = _$rootScope_.$new();
        httpBackend = _$httpBackend_;

        //Don't forget to initialize your new variables

        location = _$location_;
        userService = UserService;
        LoginController = $controller('LoginController', {
            $scope:scope,
            UserService: userService,
            $location: location //Pass $location service to your LoginController
        });
    }));

    it('when login post return success',function(){
        httpBackend.expectPOST('rest/login',{
            userName:'Jordan',
            password:'password'
        }).respond(200,{result:'success'});

        spyOn(userService, 'login').and.callThrough();

        //Pass the required parameters to the $scope.submit function
        //Expect a POST request to rest/login URL with 'Jordan' username and 'password' as password
        scope.submit('Jordan', 'password');
        httpBackend.flush();

        expect(userService.login).toHaveBeenCalled();
        expect(location.path()).toBe('/home');
    });

    afterEach(function(){
        httpBackend.verifyNoOutstandingExpectation();
        httpBackend.verifyNoOutstandingRequest();
    });
});

With these changes, your test should now pass.

If you have any questions or encounter issues, feel free to reach out.

Answer 2

I have made some improvements to your LoginController and UserService:

//I have also added a CONST factory that returns an empty string as the baseUrl, 
//since I am not familiar with the logic inside this factory in your code.
angular.module('app').factory('CONST', function() {
    return {
        baseUrl: ''
    };
});

angular.module('app').factory('UserService', function($http, $q, CONST) {
    //UserService should return an object with a login function. 
    //The code you provided for this factory has incorrect syntax.
    return {
        login: function (username, password) {
            var defer = $q.defer();
            $http({
                method: 'POST',
                url: CONST.baseUrl + 'rest/login',
                data: {
                    userName: username,
                    password: password
                }
            }).success(function (data, status, headers, config) {
                defer.resolve(data);
            }).error(function (data) {
                defer.reject(data);
            });
            return defer.promise;
        }
    };
});

angular.module('app').controller('LoginController', function($scope, UserService, $location) {

    //Remember to include parameters in the $scope.submit function,
    //as you will use them when calling UserService.login
    $scope.submit = function (email, password) {
        UserService.login(email, password).then(
            function (data) {
                if (data.result == 'success') {
                    $location.path('/home');
                } else {
                    $scope.loginError = 'Login failed';
                }
            },
            function (error) {
                $scope.loginError = 'Login failed';
            });
    };
});

After refactoring, I discovered some syntax errors in your tests. Below is the updated code with my comments and fixes:

describe('test the userService',function() {
    var scope, LoginController, httpBackend,
        userService, //You need to create a variable for UserService to use it further (creating spies, etc.)
        location; //You also require a variable for the $location service to check the current path in your test

    beforeEach(inject(function(_$rootScope_, $controller, UserService, _$httpBackend_, _$location_) {
        scope = _$rootScope_.$new();
        httpBackend = _$httpBackend_;

        //Don't forget to initialize your new variables

        location = _$location_;
        userService = UserService;
        LoginController = $controller('LoginController', {
            $scope:scope,
            UserService: userService,
            $location: location //Pass $location service to your LoginController
        });
    }));

    it('when login post return success',function(){
        httpBackend.expectPOST('rest/login',{
            userName:'Jordan',
            password:'password'
        }).respond(200,{result:'success'});

        spyOn(userService, 'login').and.callThrough();

        //Pass the required parameters to the $scope.submit function
        //Expect a POST request to rest/login URL with 'Jordan' username and 'password' as password
        scope.submit('Jordan', 'password');
        httpBackend.flush();

        expect(userService.login).toHaveBeenCalled();
        expect(location.path()).toBe('/home');
    });

    afterEach(function(){
        httpBackend.verifyNoOutstandingExpectation();
        httpBackend.verifyNoOutstandingRequest();
    });
});

With these changes, your test should now pass.

If you have any questions or encounter issues, feel free to reach out.

Jasmine's spyOn method in Angular does not impact functions within the factory

Answer №1

Similar questions

"Utilize a custom filter in AngularJS to narrow down data based on specified numerical

The default skin of video.js is disrupted by a 16:8 ratio

Issue: Unable to open port (GetCommState) : Error code 1 not recognized - Utilizing Nodejs, express, SerialPort

Modifying HTML attributes using AngularJS

Implementing jQuery form validator post anti-SPAM verification?

What is the reason for dirname not being a module attribute? (using the __ notation)

Protractor is having difficulty finding the specified element or value

Attempting to refresh MongoDB using the Angular framework

Ways to eliminate the design from a previously selected list item

Send the component template and functions when triggering an expanded view in a material dialog

Should scripts be replayed and styles be refreshed after every route change in single page applications (SPA's)? (Vue / React / Angular)

Struggling with ensuring that Angular-JS pauses and waits for an asynchronous call to complete before moving on

What is the process for changing CORS origins while the NodeJS server is active?

Can you provide guidance on how to specifically specify the type for the generics in this TypeScript function?

When using express and passport-local, the function `req.isAuthenticated()` will typically return a

The use of Physijs and implementing setLinearVelocity for object movement

Do developers typically define all flux action types within a constants object as a common programming practice?

Securely getting a data point from a pathway

perform an action in PHP when a button is clicked

Ways to convert a PHP array into a JavaScript array