AngularJS + Karma + Jasmine Controller Unit testing : - angularjs

Question

I have the following unit test code in which first test is passing, but the second one is failing and I am not able to figure it out.
Unit test code
describe('List controller', function () {
beforeEach(angular.mock.module('myApp'));
var $controller, $rootScope, $scope, $state;
beforeEach(inject(function (_$controller_, _$rootScope_) {
$controller = _$controller_;
$rootScope = _$rootScope_;
$scope = $rootScope.$new();
}));
describe('Parameter Group List', function() {
it('should exists', function () {
$controller = $controller('baseController', {'$scope': $scope});
expect($scope.prepareSidebarMenu).toBeDefined();
});
it('should exists', function () {
$state = {};
$scope.header = {};
$state.current = {};
var parameterGroups = '';
$scope.header.title = '';
$controller = $controller('listController', {'$scope': $scope, 'parameterGroups': parameterGroups });
expect($scope.truncateCharacters).toBeDefined();
});
});
});
and I am trying to test following controllers.
Base controller
(function () {
'use strict';
angular.module('PpmApp')
.controller('baseController', ['$scope', '$injector', baseController]);
function baseController($scope, $injector) {
var $state = $injector.get('$state');
$scope.header = {
title: "Plan Parameter Manager"
};
$scope.sidebarMenuInfo = {
name: $state.current.name,
parameterGroupId: null,
hideSidebar: true
};
$scope.prepareSidebarMenu = function (sidebarMenuInfo) {
angular.extend($scope.sidebarMenuInfo, sidebarMenuInfo);
};
}
})();
List controller
(function () {
'use strict';
angular.module('PpmApp')
.controller('listController', ['$scope', '$injector', 'parameterGroups', listController]);
function listController($scope, $injector, parameterGroups) {
var $state = $injector.get('$state');
var apiService = $injector.get('apiService');
var utilService = $injector.get('utilService');
var constantsProvider = $injector.get('constantsProvider');
$scope.header.title = "Parameter Manager Overview";
$scope.prepareSidebarMenu({
name: $state.current.name,
hideSidebar: true
});
var titleMaxLength = 47;
var descriptionMaxLength = 270;
$scope.parameterGroups = parameterGroups;
$scope.createPopupInfo = {};
$scope.createPopupInfo.validationErrors = {};
$scope.createPopupInfo.validationErrors.isError = false;
$scope.createPopupInfo.years = utilService.populateYearsForParameterGroup();
$scope.createPopupInfo.months = constantsProvider.months;
$scope.truncateCharacters = function (text, type) {
if (type == 'title' && text.length > titleMaxLength) {
return text.substring(0, titleMaxLength) + '...';
} else if (type == 'description' && text.length > descriptionMaxLength) {
return text.substring(0, descriptionMaxLength) + '...';
}
return text;
};
}
})();
My Unit test result is
$ karma start
07 02 2018 12:41:00.734:WARN [karma]: No captured browser, open http://localhost :9876/
07 02 2018 12:41:00.746:INFO [karma]: Karma v0.13.22 server started at http://lo calhost:9876/
07 02 2018 12:41:00.751:INFO [launcher]: Starting browser Chrome
07 02 2018 12:41:02.946:INFO [Chrome 63.0.3239 (Windows 7 0.0.0)]: Connected on socket doxoZRvKoJYdYozhAAAA with id 67949004
parameterGroupListController
Parameter Group List
√should exists
×should exists
TypeError: $scope.prepareSidebarMenu is not a function
at new parameterGroupListController (C:/ZS/JIM-PPM/PlanManagerWeb/Ji mPPM/app/controllers/parameter-group-list.js:14:16)
at Object.instantiate (C:/ZS/JIM-PPM/PlanManagerWeb/JimPPM/resources /angular.js:5112:14)
at $controller (C:/ZS/JIM-PPM/PlanManagerWeb/JimPPM/resources/angula r.js:11083:28)
at C:/ZS/JIM-PPM/PlanManagerWeb/JimPPM/node_modules/angular-mocks/an gular-mocks.js:2314:14
at UserContext.<anonymous> (C:/ZS/JIM-PPM/PlanManagerWeb/JimPPM/test s/parameter-group.spec.js:24:27)
Chrome 63.0.3239 (Windows 7 0.0.0): Executed 2 of 2 (1 FAILED) (0.038 secs / 0 s ecs)
TOTAL: 1 FAILED, 1 SUCCESS
1) should exists
parameterGroupListController Parameter Group List
TypeError: $scope.prepareSidebarMenu is not a function
at new parameterGroupListController (C:/ZS/JIM-PPM/PlanManagerWeb/JimPPM/app /controllers/parameter-group-list.js:14:16)
at Object.instantiate (C:/ZS/JIM-PPM/PlanManagerWeb/JimPPM/resources/angular .js:5112:14)
at $controller (C:/ZS/JIM-PPM/PlanManagerWeb/JimPPM/resources/angular.js:110 83:28)
at C:/ZS/JIM-PPM/PlanManagerWeb/JimPPM/node_modules/angular-mocks/angular-mo cks.js:2314:14
at UserContext.<anonymous> (C:/ZS/JIM-PPM/PlanManagerWeb/JimPPM/tests/parame ter-group.spec.js:24:27)

Answer 1

listController expects that prepareSidebarMenu is defined on scope, and it's not. If it is supposed to be defined by baseController and inherited from parent scope, it should be stubbed in listController test:
$scope.prepareSidebarMenu = jasmine.createSpy();
$controller = $controller('listController', {'$scope': $scope, 'parameterGroups': parameterGroups });
expect($scope.prepareSidebarMenu).toHaveBeenCalledWith(...);
expect($scope.truncateCharacters).toBeDefined();