$ injector：unprジャスミンでテストしたときに不明なプロバイダエラー

Question

ここで単体テストに取り組む最初の段階で、angular.mocksの$componentControllerモックを使用してコンポーネントのコントローラを初期化しようとしています。

これは私のコンポーネントファイルです。私は、メインのアプリで依存関係として引かれる共通モジュールの一部としてThemesModelサービスを持っている

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

：

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

一般的に、私は理解しています依存関係の1つが定義されていないと、[$injector:unpr]になります。しかし、私がチェックすると、'game'コンポーネントに結びついているGameControllerへのすべての依存関係が定義されました！

あなたは私が逃したと思いますか？私が無視している依存関係はありますか？

Answer 1

あなたがあなたのモジュール構成を登録していないので、私はそれを見つけたと思います。ミスのこの種は、キャッチする最も困難です：

window.module(GameModule); 

は、このように変更する必要があります

window.module(GameModule.name);