Question

所以第一次在这里处理单元测试时，我试图使用angular.mocks中的$componentController模拟来初始化组件的控制器。

这是我的组件文件。

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;

这是我的控制者的一个要点：

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

我将ThemesModel服务作为公共模块的一部分，作为主应用程序中的依赖项引入。这里也是服务定义：

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

我嘲笑（或至少，试图）模仿ThemesModel中的getShuffledItems方法。

我尝试编写一个检查控制器是否有效的测试：

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时，我最终会出现以下错误：

游戏调节器 ✗有一个初始状态错误：[$ injector：unpr]未知提供者：gameDirectiveProvider＆lt; - gameDirective http://errors.angularjs.org/1.6.3/ $注射器/ unpr？P0 = gameDirectiveProvider％20％3 C-％20gameDirective 在webpack：///~/angular/angular.js：66：0＆lt; - spec.bundle.js：4804：12 在webpack：///~/angular/angular.js：4789：0＆lt; - spec.bundle.js：9527：19 at Object.getService [as get]（webpack：///~/angular/angular.js：4944：0＆lt; - spec.bundle.js：9682：32）在webpack：///~/angular/angular.js：4794：0＆lt; - spec.bundle.js：9532：45 at Object.getService [as get]（webpack：///~/angular/angular.js：4944：0＆lt; - spec.bundle.js：9682：32） at $ componentController（webpack：///~/angular-mocks/angular-mocks.js：2335：0＆lt ;- spec.bundle.js：3158：34）在对象。（webpack：///components/game/game.spec.js:38:24＆lt; - spec.bundle.js：4305：25）

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

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

通常，我理解当其中一个依赖项无法定义时会发生[$injector:unpr]。但是当我检查时，定义了与GameController组件绑定的'game'的所有依赖项！

你觉得我错过了什么？是否存在一些我无视的依赖？

Answer 1

我想，我找到了 - 因为你没有注册你的模块配置。这种错误最难抓住：

window.module(GameModule);

需要更改为：

window.module(GameModule.name);

$ injector：unpr使用Jasmine进行测试时出现未知的提供程序错误

1 个答案: