How to write mock in karma-jasmine for AngularJS unit testing

Question

I have to unit test my controller. First I have to create mock for my services.

Here is my service:

angular.module("demo-app")
.factory("empService",function($http){

    var empService={};
    empService.getAllEmployees=function(){
        return $http.get("http://localhost:3000/api/employees");
    }

    empService.postEmployee=function(emp){
        return $http.post("http://localhost:3000/api/employees",emp);
    }

    empService.getEmployee=function(id){
        return $http.get("http://localhost:3000/api/employees/"+id)
    }

    empService.putEmployee=function(emp){
        return $http.put("http://localhost:3000/api/employees/"+emp._id,emp)
    }

    empService.deleteEmployee=function(id){
        return $http.delete("http://localhost:3000/api/employees/"+id);
    }

    empService.findEmployee=function(emp){
        return $http.post("http://localhost:3000/api/employees/search",emp);
    }

    return empService;
})

Here is findData() method in my controller, which I am going to test:

$scope.findData=function(){
    $scope.loadingEmployee=true;
    var emp={};
    listProp=Object.getOwnPropertyNames($scope.searchEmployee);
    for(index in listProp){
        if($scope.searchEmployee[listProp[index]]!=""){
            emp[listProp[index]]=$scope.searchEmployee[listProp[index]];
        }
    }
    console.log(emp);
    empService.findEmployee(emp).then(function(data){   
        $scope.allEmployees=data.data;
        console.log(data.data);
        $scope.loadingEmployee=false;
    });
}

How can I mock my empService.findEmployee(emp) method, so that I can test the findData() method.

My spec.js test file with mocking my service method. Here it is:

beforeEach(function(){
    var emp={"name":"sanjit"};
    fakeService={
        getAllEmployees:function(emp){
            def=q.defer();
            def.resolve({data:[{"name":"sanjit"},{'name':'ssss'}]});
            return def.promise;
        },
        findEmployee:function(emp){
            var def=q.defer();
            def.resolve({data:[{"name":"sanjit"}]});
            console.log("working");
            return def.promise;
        }
    };
    spyOn(fakeService,'findEmployee').and.callThrough();
    fakeService.findEmployee(emp);
});
beforeEach(angular.mock.inject(function($rootScope,$controller,$injector,$q){
    httpBackend=$injector.get('$httpBackend');
    scope=$rootScope.$new();
    q=$q;
    ctrl=$controller('adminEmployeeCtrl',{$scope:scope,empService:fakeService});
})); 

it('findData test',function(){
    scope.$apply();
    scope.findData();
    expect(scope.loadingEmployee).toEqual(false);
})

But I got another error:

 Error: Unexpected request: GET dashboard/views/dashboard-new.html
 No more request expected

But I didn't call it. Please help me

Answer 1

One of the most important rules when testing controllers in angularjs is you do not need to create reall http requests, just mock the functions in that service that are used by your controller. So you need to spyOn them and call fake function to return the proper value. Let's spy on one of them

/**
 * @description Tests for adminEmployeeCtrl controller
 */
(function () {

    "use strict";

    describe('Controller: adminEmployeeCtrl ', function () {

        /* jshint -W109 */
        var $q, $scope, $controller;
        var empService;
        var errorResponse = 'Not found';


        var employeesResponse = [
            {id:1,name:'mohammed' },
            {id:2,name:'ramadan' }
        ];

        beforeEach(module(
            'loadRequiredModules'
        ));

        beforeEach(inject(function (_$q_,
                                    _$controller_,
                                    _$rootScope_,
                                    _empService_) {
            $q = _$q_;
            $controller = _$controller_;
            $scope = _$rootScope_.$new();
            empService = _empService_;
        }));

        function successSpies(){

            spyOn(empService, 'findEmployee').and.callFake(function () {
                var deferred = $q.defer();
                deferred.resolve(employeesResponse);
                return deferred.promise;
                // shortcut can be one line
                // return $q.resolve(employeesResponse);
            });
        }

        function rejectedSpies(){
            spyOn(empService, 'findEmployee').and.callFake(function () {
                var deferred = $q.defer();
                deferred.reject(errorResponse);
                return deferred.promise;
                // shortcut can be one line
                // return $q.reject(errorResponse);
            });
        }

        function initController(){

            $controller('adminEmployeeCtrl', {
                $scope: $scope,
                empService: empService
            });
        }


        describe('Success controller initialization', function(){

            beforeEach(function(){

                successSpies();
                initController();
            });

            it('should findData by calling findEmployee',function(){
                $scope.findData();
                // calling $apply to resolve deferred promises we made in the spies
                $scope.$apply();
                expect($scope.loadingEmployee).toEqual(false);
                expect($scope.allEmployees).toEqual(employeesResponse);
            });
        });

        describe('handle controller initialization errors', function(){

            beforeEach(function(){

                rejectedSpies();
                initController();
            });

            it('should handle error when calling findEmployee', function(){
                $scope.findData();
                $scope.$apply();
                // your error expectations
            });
        });
    });
}());

Answer 2

You may not have manually called GET dashboard/views/dashboard-new.html but $scope.$apply() might be triggering it somehow and you can't do anything but handle it.

You can do something like this to handle it: (after injecting it using _$httpBackend_ and assigning to $httpBackend in beforeEach)

$httpBackend.when('GET', 'dashboard/views/dashboard-new.html').respond(200);
scope.$digest();
$httpBackend.flush();