Testing a Controller using Jasmine in Karma

Question

I'm trying to test a controller but I'm getting an error

TypeError: Object # has no method 'apply' ReferenceError: inject is not defined

The unit-test.js is

define(['angular',
        'myApp',
        'angularMocks',
        'MyCtrl'
], function() {

describe('Testing controller', function() {
        var $scope = null;
        var ctrl = null;

        beforeEach(angular.module('myApp'));

        beforeEach(inject(function ($injector) {
            $scope = $injector.get('$rootScope');
            $controller = $injector.get('$controller');
        }));


     describe('MyCtrl', function () {
        it('should call test variable', function () {
                $scope = $rootScope.$new();

                ctrl = $controller('MyCtrl', {
                    $scope: $scope
                });

                expect($scope.test).toBe("sth");
            });
        });

    });
});

in MyCtrl I have declared a $scope.test = "sth";

When I change

beforeEach(angular.module('myApp')); to beforeEach(module('myApp'));

I'm getting ReferenceError: module is not defined

I use Karma version: 0.9.8 and AngularJS v1.0.8

Thank you very much!

It seems that you're using requirejs ? If yes i can post an aswer and say to you how implements the config of require.js for karma — Thomas Pons
Yes indeed, I use requirejs but I think both files (karma.conf.js and test-main.js) are correct. — jimakos17
I've post the answer with complete config and modifications on your test file — Thomas Pons

Thomas Pons Thomas Pons · Accepted Answer · 2013-10-03T15:27:54

You have a lot of things to do if you're using requirejs.

First you have to put the karma-requirejs plugin in your package.json

"karma-requirejs": "~0.1.0",

Then you have ti change your config file. You have to add requirejs in frameworks part Then exclude your require main.js

Then add all your librairies files via the pattern config and not include it

You have to add your require main-test.js (config file for test describe at bottom)

module.exports = function (config) {
    config.set({ 
        basePath: '',

        frameworks: ['jasmine', 'requirejs'],

        files: [
            {pattern: 'app/bower_components/jquery/jquery.min.js', included: false},

            {pattern: 'app/bower_components/angular/angular.min.js', included: false},
            {pattern: 'app/bower_components/angular-resource/angular-resource.min.js', included: false},
            {pattern: 'app/bower_components/angular-mocks/angular-mocks.js', included: false},
            {pattern: 'app/scripts/*.js', included: false},
            {pattern: 'app/scripts/**/*.js', included: false},
            {pattern: 'test/spec/**/*Spec.js', included: false},
            'test/main-test.js'
        ],

        exclude: ['app/scripts/main.js'],

        port: 8082,

        logLevel: config.LOG_DEBUG,

        autoWatch: false,

        browsers: ['Chrome'],

        singleRun: false
    });
};

Now create your main-test.js.

In you have to get all your tests files to put it as dependencies.

Then do a classic requirejs config (note in the baseUrl we use /base a karma constant) and finally start karma by code through : window.__karma__.start();

Example :

var tests = [];
for (var file in window.__karma__.files) {
    if (window.__karma__.files.hasOwnProperty(file)) {
        if (/Spec\.js$/.test(file)) {
            tests.push(file);
        }
    }
}

require.config({

    // Karma serves files from '/base'
    baseUrl: '/base/app/scripts',

    paths: {
        jquery: '../bower_components/jquery/jquery.min',
        angular: '../bower_components/angular/angular.min',
        angularMocks: '../bower_components/angular-mocks/angular-mocks',
        ngResource: '../bower_components/angular-resource/angular-resource.min'
    },

    shim: {
        jquery: {
            exports: '$'
        },
        angular: {
            deps: [ 'jquery', 'bootstrap'],
            exports: 'angular'
        },
        ngResource: {
            deps: [ 'angular' ],
            exports: 'ngResource'
        },
        angularMocks: {
            deps: [ 'ngResource' ],
            exports: 'angularMocks'
        }
    },

    priority: [
        'angular'
    ],

    // ask Require.js to load these files (all our tests)
    deps: tests

});

require(tests, function(){
    window.__karma__.start();
});

In your test file :

change beforeEach(angular.module('myApp')); to beforeEach(module('myApp'));

Change the params of your define like that :

define(['angular',
        'myApp',
        'angularMocks',
        'MyCtrl'
], function(angular, myApp, angularMocks, MyCtrl)

To inject controller just do that (You have to put the MyCtrl in param of your require function) :

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

And finally :

it('should call crudListMethods', function () {
    expect(scope.test).toBe("sth");
});

Now it should work ! Hope it helps !

Testing a Controller using Jasmine in Karma

1 Answers