Angular2トリガーボタンユニットテストでクリックしてイベント処理を確認します

Question

クリックイベントが正しく処理されているかどうかをテストしようとしています。ボタンのクリックイベントをトリガーして、ルータの適切な呼び出しが実行されたかどうかを確認しようとしています。 stubRouteSpyがナビゲートするコール（最後の失敗を期待）

テンプレートコード登録されなかった理由がわからない：

<div class="col-lg-3 col-md-4 col-xs-6 thumb project" *ngFor="let project of projects"> 
    <div class = "thumbnail"> 
     <img class="img-responsive img-rounded" src="{{project.imgUrl}}" alt=""> 
     <div class = "caption"> 
     <h4 id='titleHeader'>{{project.title}}</h4> 
     <div class="btn-group" role="group" style="all"> 
      <button class="btn btn-primary">Order</button> 
      <button id='customizeButton' class="btn btn-info" (click)="onCustomize(project.id)">Customize</button> 
     </div> 
    </div> 
</div> 

コンポーネントコード：

public errorMessage = ''; 
public projects = []; 

constructor(private router: Router, private projectListService: ProjectListService) { 
} 

public ngOnInit() { 
    this.getProjects(); 
} 

public getProjects() { 
    this.projectListService.getAllProjects() 
     .subscribe(
      (projects) => this.projects = projects, 
      (error) => this.errorMessage = <any> error); 
} 

public onCustomize(id: string) { 
    console.log(id); 
    let navigate = this.router.navigate(['design', id]); 
} 

仕様コード：

describe('GalleryComponent (inline template)',() => { 

    let comp: GalleryComponent; 
    let fixture: ComponentFixture<GalleryComponent>; 
    let projectListService: ProjectListService; 
    let spy: jasmine.Spy; 
    let de: DebugElement[]; 
    let stubRoute: Router; 
    let stubRouteSpy: jasmine.Spy; 

    beforeEach(() => { 
     stubRoute = <Router> { navigate: ([]) => {}}; 
     TestBed.configureTestingModule({ 
      declarations: [GalleryComponent], 
      providers: [ 
       ProjectListService, 
       {provide: Router, useValue: stubRoute}, 
       {provide: Http, useValue: {}} 
       ], 
     }); 

     fixture = TestBed.createComponent(GalleryComponent); 
     comp = fixture.componentInstance; 

     // ProjectListService actually injected into the component 
     projectListService = fixture.debugElement.injector.get(ProjectListService); 

     // Setup spy on the `getAllProjects` method 
     let fakeProjects = [new Project(1, 'title1', ''), new Project(2, 'title2', '')]; 
     spy = spyOn(projectListService, 'getAllProjects') 
      .and.returnValue(Observable.of<Project[]>(fakeProjects)); 

     stubRouteSpy = spyOn(stubRoute, 'navigate'); 
    }); 

    it('should navigate to designer when customize button clicked', async(() => { 
     fixture.detectChanges(); // init 
     fixture.whenStable().then(() => { // wait for async getAllProjects 
      fixture.detectChanges(); // update view with projects 

      fixture.nativeElement.querySelectorAll('#customizeButton')[0].click(); 
      expect(fixture.nativeElement.querySelectorAll('#customizeButton').length).toBe(2); // this pass 

      fixture.detectChanges(); 

      expect(stubRouteSpy.calls.any()).toBe(true, 'navigate called'); // this is false 
     }); 
    })); 
}); 

を

Answer 1

文書hereによれば、インジェクタからのRouterStub。

ドキュメントの例を使用することをお勧めします。

スタブクラス：

class RouterStub { 
    navigateByUrl(url: string) { return url; } 
} 

が提供：

{ provide: Router,  useClass: RouterStub } 

GETインジェクター：

routerStub = fixture.debugElement.injector.get(RouterStub);