Can't setup Karma and Jasmine for Angularjs

Question

I've tried several tutorials and looked at many of the solutions provided here. I am new to Angular and currently trying to set up testing for a rather big SPA.

Following this tutorial I have completed:

Angularjs application setup
Karma setup
Our first test

The karma config file is basically the default content, with some references in files and exclude:

// list of files/patterns to load in the browser
 files: [
    'bower_components/angular/angular.js',
    'bower_components/angular-mocks/angular-mocks.js',
    'app/app.js',
    'JavaScript.spec.js'
],

I reinstalled the entire test implementation and now the simple test works again. But trying to write a test for a controller does not work:

here is the error message

I changed the path referencing the bower_components and app files in the karma config file. Now the shell running karma returns an error message from the app.js file, saying:

   Uncaught ReferenceError: Logging is not defined

Writing a test identical to the one from doucmentation, gives the following error:

Here is the test code:

describe('nyKladdController', function () {
    beforeEach(module('app'));

    var $controller; 
    beforeEach(inject(function (_$controller_) {
        $controller = _$controller_; 
    }));


    describe('$scope.mixTable', function () {
        it('is false', function () {
            var $scope = {};
            var controller = $controller('nyKladdController', { $scope: $scope }); 
            expect($scope.mixTable).toBeFalsy();
        });
    }); 
});

As you can see from the error message: after the app module, the test file start loading the app dependencies. Here is the app.js file:

(function () {
    'use strict';
    angular.module('app', [
        'ngAnimate', 'ngRoute', 'ngSanitize', 'ngResource', 'ngMessages',
        'AdalAngular', 'config', 'angular.filter',
        'ui.bootstrap', 'ui.mask', 'ui.select', 'ui.validate',
        'angular-loading-bar', 'ui.tree', 'ui.tree-filter', 'checklist-model'
    ]);
})();

In other words: how can i get my tests to load the app dependecies as well.

Try to remove your bower_components and node_modules folders and reinstall all your dependencies. — Nikolaj Dam Larsen
– Nikolaj Dam Larsen, Commented Sep 22, 2017 at 8:33

Øystein Seel · Accepted Answer · 2017-09-27 08:50:27Z

I had to load in all the app dependencies from app.js in to karma.config file. Now the files array in karma config looks like this:

// list of files / patterns to load in the browser
files: [
    //bower modules
    './bower_components/angular/angular.js',
    './bower_components/angular-mocks/angular-mocks.js',
    './bower_components/angular-ui-mask/src/mask.js',
    './bower_components/angular-ui-select/dist/select.js',
    './bower_components/angular-ui-tree-filter/dist/angular-ui-tree-filter.js',
    './bower_components/angular-ui-tree/dist/angular-ui-tree.js',
    './bower_components/angular-ui-validate/dist/validate.js',
    './bower_components/angular-loading-bar/build/loading-bar.js',
    // node modules
    './node_modules/angular-animate/angular-animate.js',
    './node_modules/angular-route/angular-route.js', 
    './node_modules/angular-sanitize/angular-sanitize.js',
    './node_modules/angular-resource/angular-resource.js', 
    './node_modules/angular-messages/angular-messages.js',
    './node_modules/adal-angular/dist/adal-angular.min.js',
    './node_modules/angular-filter/dist/angular-filter.js',
    './node_modules/angular-ui-bootstrap/dist/ui-bootstrap.js', 
    './node_modules/bower-config/lib/Config.js',
    './node_modules/checklist-model/checklist-model.js',
    //app file
    './app/app.js',
    './app/common/config/config.js',
    //test files etc..
    'JavaScript.spec.js',
    './app/produkt/ny/controllers/*.js' // tester å hente inn controller som refereres i test filen
],

Nikolaj Dam Larsen · Accepted Answer · 2017-09-22 07:53:23Z

0

This may be because Karma is loading the source files in the wrong order. For Angular to work properly, each module must be loaded before any component, services, etc. associated with that module.

To fix this, you can change your Karma configuration to ensure your module files are loaded first.

// list of files / patterns to load in the browser
files: [
    '../../bower_components/angular/angular.js',
    '../../bower_components/angular-mocks/angular-mocks.js',
    'app/**/*.module.js',
    'app/**/*.js'
],

This is assuming you're using some kind of naming convention for angular modules (like *.module.js as in the above example). Otherwise you'll have to list the paths to the modules individually.

edited Sep 22, 2017 at 7:53

answered Sep 22, 2017 at 7:18

Nikolaj Dam Larsen

5,7246 gold badges37 silver badges46 bronze badges

7 Comments

Øystein Seel Over a year ago

There are no .module.js files in the project. Shouldn't I only need to load the files i need for testing in the karma.config file?

Nikolaj Dam Larsen Over a year ago

The file where you declare your angular module, like this: angular.module('app', []) is your module file. That needs to be loaded before any other of your angular files by Karma. Some use the naming convension app.module.js for this (and other) module files, to easily distinguish them.

Øystein Seel Over a year ago

I understand, now i added the app.js file at the top of files: , but I am still having the same issue

Nikolaj Dam Larsen Over a year ago

Try to include the angular.mocks.js dependency as well. Check my updated answer. Your path might be different though, so do double check.

Øystein Seel Over a year ago

angular.mocks.js is already included. yes I will double check my path

|

Sibiraj · Accepted Answer · 2017-09-22 10:58:46Z

0

add beforeEach(module("your-module-name")); => your angular application name from app.js"

describe('check a controller', function () {

    beforeEach(module("your module name")); // I think you missed this.

    var scope, checkController; 

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

        checkController = function () {
            return $controller('nyKladdController', {
                '$scope': scope
            });
        }; 
    }));

    it('has a dummy spec to test 2 + 2', function () {
        // An intentionally failing test. No code within expect() will never equal 4.
        expect(2 + 2).toEqual(4);
    });

});

karma.conf

files: [     // sample order. Include your files accordingly
            'src/bower_components/angular/angular.min.js',
            'src/bower_components/angular-mocks/angular-mocks.js',
             // some sample libraries 
            'src/bower_components/angular-cookies/angular-cookies.min.js',
            'src/bower_components/angular-ui-router/release/angular-ui-router.min.js',
            'src/bower_components/angular-resource/angular-resource.min.js',
            'src/bower_components/angular-sanitize/angular-sanitize.min.js',
            'src/bower_components/angular-loading-bar/build/loading-bar.min.js',

            'src/app/app.js',
            'src/app/**/*.js',
            'tests/unit/**/*.spec.js'
        ],
exclude: []

edited Sep 22, 2017 at 10:58

answered Sep 22, 2017 at 9:12

Sibiraj

4,7968 gold badges37 silver badges59 bronze badges

3 Comments

Øystein Seel Over a year ago

I added the line, but the reference error is still the same. The test i have written now is identical to the test example on the angularjs documentation. This means that I am missing som import under files in the karma.config file

Sibiraj Over a year ago

did you check the repo I gave? @ØysteinSeel. Can you share your sample test via github

Øystein Seel Over a year ago

yes I've been under /tests/unit and looked at the files, I am referincing the module name in the same way in my solution

Collectives™ on Stack Overflow

Can't setup Karma and Jasmine for Angularjs

3 Answers 3

Comments

7 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

7 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related