角2：テストでテンプレートが更新されない

Question

私はこの作業をしようとしています。

it('should have expected <h1> text', async(() => { 
    let fixture = TestBed.createComponent(AppComponent); 
    fixture.detectChanges(); 

    const sectionEl = fixture.debugElement.query(By.css("section")); 

    spyOn(fixture.debugElement.componentInstance, "runMe"); 

    sectionEl.nativeElement.click(); 
    expect(fixture.debugElement.componentInstance.runMe).toHaveBeenCalled(); 

    expect(sectionEl.nativeElement.textContent).toBe("changed!"); 

ので、runMe機能は、セクションのテキストを変更しませんでしたが、スパイはrunMeが呼び出された示しています。

Answer 1

もっと完全な例を見ずには分かりにくいです。しかし、クリックすると、通常は非同期のイベント処理が行われます。したがって、イベントの処理が完了するまで待つ必要があります。テストでは、私たちができることは約束を返すfixture.whenStableを呼び出すことです。約束が解決したらテストを続けることができます。

sectionEl.nativeElement.click(); 
fixture.whenStable().then(() => { 
    expect(fixture.debugElement.componentInstance.runMe).toHaveBeenCalled(); 

    fixture.detectChanges(); 
    expect(sectionEl.nativeElement.textContent).toBe("changed!"); 
});