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