web-dev-qa-db-ja.com

Angular2の単体テスト/モックウィンドウプロパティ（TypeScript）

私はAngular2のサービスのためにいくつかのユニットテストを構築しています。

私のサービスには次のコードがあります。

var hash: string; hash = this.window.location.hash;

ただし、このコードを含むテストを実行すると、失敗します。

Windowのすべての機能を利用するのは素晴らしいことですが、PhantomJsを使用しているので、これが可能だとは思いません（同じ結果が得られるChromeも試しました） 。

AngularJsでは、$ Window（または少なくとも問題のプロパティ）をモックすることに頼っていましたが、Angular2の単体テストに関するドキュメントがあまりないため、これを行う方法はわかりません。

誰でも助けることができますか？

unit-testingtypescriptangularphantomjskarma-jasmine
14
Rhys

Angular 2では、@Inject()関数を使用して、次のように文字列トークンを使用して名前を付けることにより、ウィンドウオブジェクトを挿入できます。

  constructor( @Inject('Window') private window: Window) { }

の中に @NgModuleその後、同じ文字列を使用して提供する必要があります。

@NgModule({
    declarations: [ ... ],
    imports: [ ... ],
    providers: [ { provide: 'Window', useValue: window } ],
})
export class AppModule {
}

次に、トークン文字列を使用してモックすることもできます

beforeEach(() => {
  let windowMock: Window = <any>{ };
  TestBed.configureTestingModule({
    providers: [
      ApiUriService,
      { provide: 'Window', useFactory: (() => { return windowMock; }) }
    ]
  });

これは、Angular 2.1.1、2016-10-28現在の最新版）で機能しました。

Angular 4.0.0 AOT。 https://github.com/angular/angular/issues/1564 では機能しません

23
Klas Mellbourn

RC4メソッドprovide()が廃止されたため、RC4後にこれを処理する方法は次のとおりです。

  let myMockWindow: Window;

  beforeEach(() => {
    myMockWindow = <any> { location: <any> {hash: 'WAOW-MOCK-HASH'}};
    addProviders([SomeService, {provide: Window, useValue: myMockWindow}]);
  });

それがどのように機能するかを理解するには、しばらく時間がかかります。

4
ulou