コンポーネントをテストします。これはルートパラメータに依存します

Question

angular2でルーティングされたコンポーネントのテストについて質問があります。

ここには単純なコンポーネントがあり、パラメータは'foo'のルートに依存します。コンポーネント内の属性fooは、パラメータの値に設定されます。

import {Component, OnInit} from '@angular/core'; 
import {ActivatedRoute, Params} from '@angular/router'; 

@Component({ 
    selector: 'my-component', 
    templateUrl: './my-component.html' 
}) 
export class MyComponent implements OnInit 
{ 
    foo: string; 

    constructor(
     private route: ActivatedRoute 
    ) 
    { 
    } 

    ngOnInit() 
    { 
     this.route.params.subscribe((params: Params) => { 
      this.foo = params['foo']; 
     }); 
    } 
} 

ここで、ルートでコンポーネントを作成する場合、パラメータが正しく設定されることをテストします。だからどこかでexpect(component.foo).toBe('3');を持っていたい。

import {TestBed, ComponentFixture, async} from '@angular/core/testing'; 
import {DebugElement} from '@angular/core'; 
import {By} from '@angular/platform-browser'; 
import {Params, ActivatedRoute} from '@angular/router'; 

import {Observable} from 'rxjs'; 

import {MyComponent} from './MyComponent'; 

describe('MyComponent',() => { 
    let mockParams, mockActivatedRoute; 

    let component: MyComponent; 
    let fixture: ComponentFixture<MyComponent>; 
    let debugElement: DebugElement; 
    let element: HTMLElement; 

    beforeEach(async(() => { 
     mockParams = Observable.of<Params>({foo: '3'}); 
     mockActivatedRoute = {params: mockParams}; 

     TestBed.configureTestingModule({ 
      declarations: [ 
       MyComponent 
      ], 
      providers: [ 
       {provide: ActivatedRoute, useValue: mockActivatedRoute} 
      ] 
     }).compileComponents(); 
    })); 

    beforeEach(() => { 
     fixture = TestBed.createComponent(MyComponent); 
     component = fixture.componentInstance; 

     debugElement = fixture.debugElement; 
     element = debugElement.nativeElement; 

     fixture.detectChanges(); 
    }); 

    it('should set foo to "3"',() => { 
     expect(component.foo).toBe('3'); 
    }); 
}); 

私の問題は、私は、ルートの解決が終了するまで、待つように、と私はexpect()を行うことができますかわからないということです。そして、この例では、テストは失敗し、 "未定義が '3'になると予想されます。"

誰かが私を喜ばせることができますか？

ありがとうございました！

Answer 1

さて、angle2テストのドキュメントで少し読んで、私は彼らのActivatedRouteStubクラスを見ました。私はこのスタブクラスを作成し、私の元のモックをこの新しいクラスに置き換えました。今それは働いています（2番目のbeforeEachの行mockActivatedRoute.testParams = {foo: '3'};を認識してください）。

import {TestBed, ComponentFixture, async} from '@angular/core/testing'; 
import {DebugElement} from '@angular/core'; 
import {By} from '@angular/platform-browser'; 
import {Params, ActivatedRoute} from '@angular/router'; 

import {Observable} from 'rxjs'; 

import {MyComponent} from './MyComponent'; 

import { BehaviorSubject } from 'rxjs/BehaviorSubject'; 

@Injectable() 
export class ActivatedRouteStub 
{ 
    private subject = new BehaviorSubject(this.testParams); 
    params = this.subject.asObservable(); 

    private _testParams: {}; 
    get testParams() { return this._testParams; } 
    set testParams(params: {}) { 
     this._testParams = params; 
     this.subject.next(params); 
    } 
} 

describe('MyComponent',() => { 
    let mockParams, mockActivatedRoute; 

    let component: MyComponent; 
    let fixture: ComponentFixture<MyComponent>; 
    let debugElement: DebugElement; 
    let element: HTMLElement; 

    beforeEach(async(() => { 
     mockActivatedRoute = new ActivatedRouteStub(); 

     TestBed.configureTestingModule({ 
      declarations: [ 
       MyComponent 
      ], 
      providers: [ 
       {provide: ActivatedRoute, useValue: mockActivatedRoute} 
      ] 
     }).compileComponents(); 
    })); 

    beforeEach(() => { 
     fixture = TestBed.createComponent(MyComponent); 
     component = fixture.componentInstance; 

     debugElement = fixture.debugElement; 
     element = debugElement.nativeElement; 

     mockActivatedRoute.testParams = {foo: '3'}; 

     fixture.detectChanges(); 
    }); 

    it('should set foo to "3"',() => { 
     expect(component.foo).toBe('3'); 
    }); 
}); 

これは正しい方法だと思いますか？