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