Karma testcases not working after migration to angular 1.4.3

Question

I have a stable product which uses angular 1.2.23. Of late, I decided to move to angular 1.4.3. After few compatibility issues with all the dependencies, my application is working fine, but all the unit testcases have started failing..After investing I realized that if I upgrade versions of all dependencies but keep angular at the previous version i.e 1.2.23, the testcases work fine..With angular 1.4.3, for some reason the injections of the dependencies in unit tests are failing.

Following is the list of the updated dependencies in bower.json.

  "dependencies": {
"angular-cookies": "1.4.3",
"bootstrap": "3.0.3",
"angular-ui-router": "0.2.15",
"angular-gettext": "2.1.0",
"angular": "1.4.3",
"angular-ui-utils": "3.0.0",
"restangular": "1.4.0",
"angular-route": "1.4.3",
"momentjs": "2.10.6",
"angular-i18n": "1.4.3"
 }

Following is the test file -

describe("Module: x.xyz", function () {
describe("Factory: xyz", function () {
    var service;

    beforeEach(function () {
        module('x.xyz');

        inject(function ($injector) {
            service = $injector.get("xyz");
        });
    });

    describe("Testing service(): ", function () {
        describe('Testing getXYZDescription(): ', function () {
            it('should return the description for the xyz event name passed if it is available', function () {
                expect(service.getXYZDescription('abc')).toBe('abc');
            });
        });
    });
});
});

When I run the above test case, I get service is undefined. Can anyone help?

Answer 1

I ran into a similar issue when upgrading from angular 1.3 to 1.4. In my case, I forgot to upgrade angular-mocks from 1.3 to 1.4. I suspect that mocking functionality was broken out into a separate module in the transition from 1.2 to 1.3, although I can't seem to find documentation to confirm that. In that case, you wouldn't have needed an angular-mocks dependency for your original app, but you would need to add the dependency when upgrading.

You should be able to fix this by adding "angular-mocks": "1.4.x" to your list of dependencies and a link to installed file in your karma config. For completeness, here's a minimal example:

karma.conf.js:

/*global module*/

module.exports = function (config) {
    'use strict';

    config.set({
        basePath: '.',
        frameworks: ['jasmine'],
        files: [
            'node_modules/angular/angular.js',
            'node_modules/angular-mocks/angular-mocks.js',
            '*.js'
        ],
        autoWatch: true,
        singleRun: false,
        browsers: ['Chrome']
    });
};

package.json:

{
  "name": "angular-inject-test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "karma start karma.conf.js"
  },
  "author": "",
  "dependencies": {
    "angular": "1.4.x",
    "angular-mocks": "1.4.x",
    "karma": "^0.13.x",
    "karma-cli": "^0.1.x",
    "karma-jasmine": "^0.3.x",
    "karma-chrome-launcher": "^0.2.x"
  }
}

test.js:

/*global angular, beforeEach, describe, expect, inject, it, module*/


angular.module('x', [])
    .factory('xyz', function () {
        "use strict";
        return {
            getXYZDescription: function (value) {
                return value;
            }
        };
    });


describe("Module: x.xyz", function () {
    "use strict";

    describe("Factory: xyz", function () {
        var service;

        beforeEach(function () {
            module('x');

            inject(function ($injector) {
                service = $injector.get("xyz");
            });
        });

        it('Should echo input', function () {
            expect(service.getXYZDescription('abc')).toBe('abc');
        });
    });
});