Jasmine Inject not working

Question

So I have an angular 1.5 app that I compile with Typescript and then bundle it via Browserify.

Now when I want to test it with Karma and Jasmine I get an error as soon as I want to inject a service (it works fine in the browser with strict-di enabled).

Does someone see where the error is?

CacheServiceTest.ts

import {CacheService} from "../../../app/services/CacheService";
import {Application} from "../../../app/Application";

describe("AppComponent", () => {
    beforeEach(() => {
        angular.mock.module(Application.name);
    });

    it("should contain CacheService", () => {
        inject((CacheService:CacheService) => {
            console.log(CacheService);
        });
    });
});

Karma config

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", "browserify"],

        // list of files / patterns to load in the browser
        files: [
            "node_modules/angular/angular.js",
            "node_modules/angular-mocks/angular-mocks.js",
            "node_modules/ngLeague/dist/ngLeague.js",
            "node_modules/angular-localforage/dist/angular-localForage.js",
            "app/**/*.ts",
            "tests/unit/**/*.ts",

            // JSON fixture
            {
                pattern:  "tests/fixtures/**/*.json",
                watched:  true,
                served:   true,
                included: false
            }
        ],

        // 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: {
            "app/**/*.ts": ["browserify", "ng-annotate"],
            "tests/unit/**/*.ts": ["browserify", "ng-annotate"],
            "dist/ngCache.js": "coverage"
        },

        // Browserify config
        browserify: {
            debug: true,
            plugin: [
                ["tsify", {target: "ES5"}]
            ]
        },

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

        coverageReporter: {
            type : "html",
            dir : "tests/coverage/"
        },

        // 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: ["PhantomJS"],

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

Error

forEach@/home/kme/Documents/ngCache/node_modules/angular/angular.js:322:24
    loadModules@/home/kme/Documents/ngCache/node_modules/angular/angular.js:4548:12
    createInjector@/home/kme/Documents/ngCache/node_modules/angular/angular.js:4470:30
    workFn@/home/kme/Documents/ngCache/node_modules/angular-mocks/angular-mocks.js:2954:60
    inject@/home/kme/Documents/ngCache/node_modules/angular-mocks/angular-mocks.js:2934:46
    /tmp/fe42636aeb0f927c8dcd9afa7c80f051.browserify:16447:15 <- tests/unit/services/CacheServiceTest.ts:14:15
    /home/kme/Documents/ngCache/node_modules/angular/angular.js:4588:53

'Does someone see where the error is?' No. You have posted the stack, not error message itself. CacheService source code won't hurt, too. — Estus Flask
Thats the error that is thrown, the whole one. But I found it, localforage wasn't loaded — Itrulia
That's error stack, not the whole message. It designates where the problem took place, not what the problem is. The one can't expect to receive qualified help on SO without giving all necessary information. — Estus Flask
I know what the difference between a stacktrace and an error message is, but I guess you don't know the frameworks. This is the whole error message since the error that was thrown is empty. Since I use the unminified version of angular the stacktrace is thrown with it. If you still don't get it I then I can't help you. — Itrulia

Itrulia Itrulia · Accepted Answer · 2016-05-12T15:19:17

-7

votes

localforage wasn't loaded, duhh..

Jasmine Inject not working

CacheServiceTest.ts

Karma config

Error

1 Answers