$ injector：unpr使用Jasmine进行测试时出现未知的提供程序错误 [英] $injector:unpr Unknown provider error when testing with Jasmine

问题描述

所以第一次使用单元测试来解决这个问题，我正在尝试使用angular.mocks中的 $ componentController 模拟初始化组件的控制器。

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.

这是我的组件文件。

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) { /*...*/ }
} 

我将 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}`);
}

我嘲笑（或至少，试图）嘲笑 getShuffledItems 方法。

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();
        })
    });

});

当我使用此设置运行 karma start 时，我最终得到以下错误：

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

游戏
控制器$ b $b✗有一个初始状态错误：[$ injector：unpr]未知提供者：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 $ componentControl ler（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）

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)

game.spec.js第38行是发生这种情况的行：

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

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

一般来说，我明白 [$ injector：unpr] 在其中一个依赖项无法定义时发生。但是当我检查时，所有与 GameController 的依赖关系都被定义为'游戏'组件！

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?

推荐答案

我想，我发现它 - 因为你没有注册你的模块配置。这种错误最难捕捉：

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);

需要更改为：

window.module(GameModule.name);

这篇关于$ injector：unpr使用Jasmine进行测试时出现未知的提供程序错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！