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 来做到这一点，它会返回一个promise。当 Promise 解决时，我们可以继续测试。

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

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