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