$injector:unpr Unknown provider error when testing with Jasmine

Question

So the first time of tackling with unit tests here, I'm trying to initialize the controller of a component using the $componentController mock in angular.mocks.

This is my component file.

import angular from 'angular';

import ProgressCountdownModule from './progress-countdown/progress-countdown';
import CoverModule from './cover/cover';

import template from './game.tmpl.html';
import './game.css';

import GameController from './game.controller.js';

const GameModule = angular.module('game', [ProgressCountdownModule.name, CoverModule.name])
    .component('game', {
        template,
        controller: GameController,
        controllerAs: 'vm'
    });

export default GameModule;

This is (a gist of) my controller:

export default class GameController {
    constructor($stateParams, $timeout, ThemesModel) { /*...*/ }
} 

I have the ThemesModel service as part of common module that is pulled in as a dependency in the main app. Here's the service definition as well:

export default class ThemesModel {
    constructor($http) {
        'ngInject';

        this.$http = $http;
    }

    getThemes = () => this.$http.get('/api/themes');
    getShuffledThemeItems = (theme, levelSeed) => this.$http.get(`/api/themes/${theme}/${levelSeed}`);
}

I mocked (or atleast, tried to) mock the getShuffledItems method in the ThemesModel.

I tried writing a test that checks if controller was valid:

import GameModule from './game';
import GameController from './game.controller';

describe('Game', () => {

    let component, $componentController, $stateParams, $timeout, ThemesModel;

    beforeEach(() => {
        window.module(GameModule);

        window.module($provide => {
            $provide.value('ThemesModel', {
                getShuffledThemeItems: (theme, levelSeed) => {
                    return {
                        then: () => { }
                    };
                }
            });
        });
    });


    beforeEach(inject((_$componentController_, _$timeout_, _ThemesModel_) => {
        $componentController = _$componentController_;
        $timeout = _$timeout_;
        ThemesModel = _ThemesModel_;
    }));

    describe('Controller', () => {
        it('calls ThemesModel.getShuffledThemeItems immediately', () => {

            $stateParams = { /*...*/ }

            spyOn(ThemesModel, 'getShuffledThemeItems').and.callThrough();

            component = $componentController('game', {
                $stateParams,
                $timeout,
                ThemesModel
            });

            expect(ThemesModel.getShuffledThemes).toHaveBeenCalled();
        })
    });

});

When I run karma start with this setup, I end up with the following error:

Game Controller ✗ has an initial state Error: [$injector:unpr] Unknown provider: gameDirectiveProvider <- gameDirective http://errors.angularjs.org/1.6.3/$injector/unpr?p0=gameDirectiveProvider%20%3C-%20gameDirective at webpack:///~/angular/angular.js:66:0 <- spec.bundle.js:4804:12 at webpack:///~/angular/angular.js:4789:0 <- spec.bundle.js:9527:19 at Object.getService [as get] (webpack:///~/angular/angular.js:4944:0 <- spec.bundle.js:9682:32) at webpack:///~/angular/angular.js:4794:0 <- spec.bundle.js:9532:45 at Object.getService [as get] (webpack:///~/angular/angular.js:4944:0 <- spec.bundle.js:9682:32) at $componentController (webpack:///~/angular-mocks/angular-mocks.js:2335:0 <- spec.bundle.js:3158:34) at Object. (webpack:///components/game/game.spec.js:38:24 <- spec.bundle.js:4305:25)

Line 38 of game.spec.js is the line where this happens:

component = $componentController('game', {
                    $stateParams,
                    $timeout,
                    ThemesModel
 });

Generally, I understand that [$injector:unpr] happens when one of the dependencies fail to be defined. But when I checked, all the dependencies to GameController which is tied to the 'game' component were defined!

What do you think I have missed? Are there some dependencies that I am ignoring?

Answer 1

I think, I found it - that because you have not registered your module configuration. This kind of mistakes are hardest to catch:

window.module(GameModule);

needs to be changed to this:

window.module(GameModule.name);