Karma / Jasmine not finding AngularJS controller (says it is undefined)

Question

This is my karma/karma.conf.js:

// Karma configuration
// Generated on Mon Jan 04 2016 16:17:18 GMT-0500 (EST)

module.exports = function(config) {
  config.set({

    // base path that will be used to resolve all patterns (eg. files, exclude)
    basePath: '',


    // frameworks to use
    // available frameworks: https://npmjs.org/browse/keyword/karma-adapter
    frameworks: ['jasmine'],


    // list of files / patterns to load in the browser
    files: [
      '../angular.js',
      'node_modules/angular-mocks/angular-mocks.js',
      '../post.js',
      'tests/test_post.js'
    ],



    // list of files to exclude
    exclude: [
    ],


    // preprocess matching files before serving them to the browser
    // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
    preprocessors: {
    },


    // test results reporter to use
    // possible values: 'dots', 'progress'
    // available reporters: https://npmjs.org/browse/keyword/karma-reporter
    reporters: ['progress'],


    // web server port
    port: 9876,


    // enable / disable colors in the output (reporters and logs)
    colors: true,


    // level of logging
    // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
    logLevel: config.LOG_INFO,


    // enable / disable watching file and executing tests whenever any file changes
    autoWatch: true,


    // start these browsers
    // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
    browsers: ['Chrome'],


    // Continuous Integration mode
    // if true, Karma captures browsers, runs the tests and exits
    singleRun: true,

    // Concurrency level
    // how many browser should be started simultaneous
    concurrency: Infinity
  })
}

and this is my karma/tests/test_post.js:

describe('Controller: MainCtrl', function() {
    beforeEach(module('PostPageApp'));

    var ctrl;

    beforeEach(inject(function($controller) {
        ctrl = $controller('MainCtrl');
    }));

    it('Show have an add and logout function', function() {
        expect(ctrl.add).toBeDefined();
    });
});

and this is ../post.js:

angular.module("PostPageApp", ["BaseApp"])
    .controller("MainCtrl", ["$http", "$window", "BaseService", function($http, $window, BaseService) {

        var self = this;

        self.add = function() {
            BaseService.add.post(self.post, function() {
                self.cerrorMessages = BaseService.cerrorMessages;
            });
        };

        self.logoutUser = function() {
            BaseService.logout();
        };

    }]);

Now, when I do karma start, it returns this:

TypeError: Cannot read property 'add' of undefined
        at Object.<anonymous> (/home/user/Documents/CMS/CMSApp/static/js/karma/tests/test_post.js:11:20)
Chromium 47.0.2526 (Ubuntu 0.0.0): Executed 1 of 1 (1 FAILED) (0 secs / 0.075 seChromium 47.0.2526 (Ubuntu 0.0.0): Executed 1 of 1 (1 FAILED) ERROR (0.118 secs / 0.075 secs)

It cannot read the property add of undefined even though I have the line ctrl = $controller('MainCtrl');. Any idea why it is saying that the controller is undefined?

Answer 1

The style in which you wrote your controller is very similar in the way to which you would write a service (using 'this' instead of '$scope'). I've never actually seen a controller written this way, and may make it more difficult to unit test it.

The main problem I see in your test is that the ctrl variable isn't being assigned to any scope in the statement,

beforeEach(inject(function($controller) {
    ctrl = $controller('MainCtrl');
}));

If you used $scope instead of this, the test would typically look like:

describe('Controller: MainCtrl', function() {
    beforeEach(module('PostPageApp'));

    var ctrl, scope;

    beforeEach(inject(function($controller, $scope) {
        scope = $rootScope.$new();
        ctrl = $controller('MainCtrl', {
            scope: $scope
        });
    }));

    it('should have an add function', function() {
        expect(scope.add).toBeDefined();
    });
});

And the controller itself would use $scope instead of this.

angular.module("PostPageApp", ["BaseApp"])
    .controller("MainCtrl", ["$http", "$window", "$scope", "BaseService", function($http, $window, $scope, BaseService) {

        var scope = $scope;

        scope.add = function() {
            BaseService.add.post(scope.post, function() {
                scope.cerrorMessages = BaseService.cerrorMessages;
            });
        };

        scope.logoutUser = function() {
            BaseService.logout();
        };

    }]);

That's one way of doing it, but it seems like you don't want to use $scope. I'm guessing this is because you just don't want to expose your controller globally, which is fine. You're way may even be better than the traditional way. I Googled around a bit and found Unit testing with 'this'. It looks pretty helpful and was an interesting read; although I wish he had included the source code that he was testing. It looks like he just used vanilla JavaScript, which is easier to test than Angular in my opinion.

I know I didn't give you a complete testing solution for the way that you wrote your controller, but I hope that I could help you pinpoint the problem and give you a better understanding of unit testing Angular controllers in general.