$ injector：unpr未知的提供者錯誤，當測試與茉莉花

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，我結束了以下錯誤：

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)

比賽的38號線.spec.js是發生這種情況的線路：

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

一般來說，我明白在[$injector:unpr]發生時，其中一個依賴關係未能定義。但是當我檢查時，所有依賴於GameController的依賴關係都與'game'組件相關聯！

你認爲我錯過了什麼？我忽略了一些依賴關係嗎？

Answer 1

我想，我發現它 - 因爲你還沒有註冊你的模塊配置。這種錯誤是最難捕捉：

window.module(GameModule); 

需要改變這樣：

window.module(GameModule.name);