Passing a dummy version of service to a controller in unit test - angularjs

Question

I am trying to test my controller by passing it a dummy version of a service. However, when karma runs it makes a call to the real service, which is specified in the controller definition (line 3) instead of the object I try to inject with beforeEach(inject(function(....)
Please help me identify what I am doing wrong.
//I have a code like the following.
angular.module('myApp')
.controller('memberSearch2Ctrl', ['$scope', 'PersonnelService', 'SavedSearchService', '$routeParams', '$log',
function memberSearch2Ctrl($scope, personnelApi, savedSearches, $routeParams, $log) {
// utilises PersonnelService to make ajax calls to get data from server....
}
]);
// real version of a service that makes ajax calls and returns real data
angular.module('myApp')
.service('PersonnelService', function($http, $q) {
//this.search(....)
});
// dummy version of the above, has the same functions like above just returns hardcoded json
angular.module('myApp')
.service('PersonnelServiceMock', function($http, $q) {
// returns hardcoded json for testing purpose
//this.search(....)
});
// heres my tests
describe('memberSearch2Ctrl', function() {
var ctrl, scope, personnelApiMock, savedSearchService;
beforeEach(module('myApp'));
beforeEach(inject(function($rootScope, $controller, PersonnelServiceMock, SavedSearchService, $log) {
personnelApiMock = PersonnelServiceMock; // this sets the PersonnelServiceMock correctly
console.log(JSON.stringify(PersonnelServiceMock)); // as I see in this line
console.log(JSON.stringify(SavedSearchService));
scope = $rootScope.$new();
ctrl = $controller('memberSearch2Ctrl', {
$scope: scope,
personnelApi: PersonnelServiceMock,
savedSearches: SavedSearchService,
$routeParams: {},
$log: $log
});
}));
iit('upon search $scope.searchResults = PersonnelService.searchPaged(...)', function() {
// however problem lies in the next line
scope.search(); // this calls PersonnelService.search insted of PersonnelServiceMock.search
// even when I have beforeEach(inject(function($rootScope, $controller, >>> PersonnelServiceMock <<<,
scope.$root.$digest();
var expected = personnelApiMock.searchPaged(null, null, null);
var actual = scope.searchResults;
expect(actual).toEqual(expected);
});
});
tried passing in $injector and having injector instantiate PersonnelServiceMock.
the console log says I am actually getting PersonnelServiceMock in return. But still it tries making the ajax call defined in the PersonnelService
beforeEach(inject(function($rootScope, $controller, $injector) {
personnelApiMock = $injector.get('PersonnelServiceMock');
savedSearchService = $injector.get('SavedSearchService');
log = $injector.get('$log');
console.log(JSON.stringify(personnelApiMock));
console.log('==========================================');
console.log(JSON.stringify(savedSearchService));
console.log('******************************************');
scope = $rootScope.$new();
ctrl = $controller('memberSearch2Ctrl', {
$scope: scope,
personnelApi: personnelApiMock,
savedSearches: savedSearchService,
$routeParams: {},
$log: log
});
}));
seems like what is specified in the call to ctrl = $controller('memberSearch2Ctrl', { ...}) is being ignored and what is specified in the controller definition (line ~3) is being used.

Answer 1

The issue is with this block of code:
ctrl = $controller('memberSearch2Ctrl', {
$scope: scope,
personnelApi: PersonnelServiceMock, <!---
savedSearches: SavedSearchService,
$routeParams: {},
$log: $log
});
Should be:
ctrl = $controller('memberSearch2Ctrl', {
$scope: scope,
PersonnelService: PersonnelServiceMock, <!---
savedSearches: SavedSearchService,
$routeParams: {},
$log: $log
});