How to mock objects inside $scope or $window in AngularJs tests using Karma and Jasmine?

Question

I am new to testing AngularJs controllers with Karma and Jasmine.

I'm trying to test this controller:

angular.module('app.dashboard.admin', [])
    .controller('AdminCtrl', function (locale, $log, $scope, $window, $state) {

        $scope.translation = $window.translation()[locale];
        $scope.showAdminBoard = false;
        $scope.initModel = {
            disableProgress: false,
            message: $scope.translation['admin_platform_init'],
            error: ''
        };

        $scope.adminPrivileges = {};

        $scope.onGetAdminPrivileges = function () {
            return $scope.adinPrivileges;
        }

Here's my test code:

'use strict';

describe('dashboard.admin module', function () {
    beforeEach(function(){
        module('app.dashboard.admin');
    });

    var auth, scope, ctrl, window;

    beforeEach(inject(function ($controller, $rootScope, $window) {
        auth = Auth;
        scope = $rootScope.$new(); //get a childscope
        window = {
            translation: $window.translation
        };

        ctrl = $controller("AdminCtrl", {$scope: scope, $window: window});
    }));

    describe('Admin Controller', function () {
        it('should inject controller', function () {
            expect(ctrl).toBeDefined();
        });
    });
});

However, when I try to execute this test code I get this error:

TypeError: undefined is not an object (evaluating '$scope.translation['admin_platform_init']') (line 11)
        views/dashboard.admin/admin.js:11:40
        [native code]
        instantiate@bower_components/angular/angular.js:4786:61
        $controller@bower_components/angular/angular.js:10607:39
        bower_components/angular-mocks/angular-mocks.js:2249:23
        views/dashboard.admin/admin.spec.js:113:27
        invoke@bower_components/angular/angular.js:4771:24
        WorkFn@bower_components/angular-mocks/angular-mocks.js:3130:26
        loaded@http://localhost:9876/context.js:151:17
        inject@bower_components/angular-mocks/angular-mocks.js:3097:28
        views/dashboard.admin/admin.spec.js:106:22
        global code@views/dashboard.admin/admin.spec.js:3:9
        Expected undefined to be defined.
        views/dashboard.admin/admin.spec.js:118:37
        loaded@http://localhost:9876/context.js:151:17

I have tried to mock the $window object and overriding angular's $window object, but I wasn't successful.

I have checked the dependencies in my karma.conf.js file and they're all there.

I have also checked these questions:

Karma-Jasmine: How to test $translate.use?

jasmine mock window object

but the proposed solutions didn't really help.

Thus, I'm trying to find a way to mock the $scope.translation['admin_platform_init'] object in order to be able to execute my tests.

Can someone please point me in the right direction?

Thank you.

What's the point of mocking $window if you still stick to real window, `translation: $window.translation` ? If `translation` is supposed to be a function, then make it a function that returns the necessary object. — Estus Flask, Feb 02 '17 at 19:20

score 0 · Answer 1 · answered Feb 02 '17 at 19:58

0

try this instead of $window.translation

window = {
    translation: function () {
        return {
            "admin_platform_init": "This is test message"
        };
    }
};

answered Feb 02 '17 at 19:58

1Mayur

3,419
5
40
64

I tried your suggestion, but I still get the same error. – m-oliv Feb 03 '17 at 09:18

score 0 · Accepted Answer · answered Feb 06 '17 at 10:37

I managed to solve my problem by importing the 'app' module.

The test code after the fix looks like this:

'use strict';

describe('dashboard.admin module', function () {
    beforeEach(function(){
        module('app');
        module('app.dashboard.admin');
    });

    var auth, scope, ctrl, window;

    beforeEach(inject(function ($controller, $rootScope, $window) {
        auth = Auth;
        scope = $rootScope.$new(); //get a childscope
        window = {
            translation: $window.translation
        };

        ctrl = $controller("AdminCtrl", {$scope: scope, $window: window});
    }));

    describe('Admin Controller', function () {
        it('should inject controller', function () {
            expect(ctrl).toBeDefined();
        });
    });
});

How to mock objects inside $scope or $window in AngularJs tests using Karma and Jasmine?

2 Answers2