AngularJS + Karma + Jasmine Controller Unit testing :

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();