Angular 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!"); 
});