javascript - 如何在Angular2中正确实现detectChanges()？

我在 Jasmine 中有以下代码:

    it('should pass on writing secondvalue in the input', async(() => {

      const fixture=TestBed.createComponent(AppComponent);
      const app=fixture.debugElement.nativeElement.querySelector("input").getAttribute("value");
      expect(app).toContain("firstvalue");
      fixture.detectChanges();
      expect(app).toContain("secondvalue");

      }));

问题是，一旦我运行测试，测试就会失败。我希望它能够等待，因为有detectChanges()，但事实并非如此。

如何正确实现:WAITING输入的第二个值输入，然后检查该值是否为“secondvalue”。

Fixture.detectChanges()不应该像偶数阻止程序那样工作，例如，当有人开始在其上书写时，它等待输入被触发吗？

最佳答案

更改组件状态时，请运行detectChanges，以便传播更改。

例如，

pageTitle: string;
ngOnInit() {
    this.pageTitle = 'first title';
}

并在模板中:

<h4>{{pageTitle}}</h4>

在测试中:

const fixture = TestBed.createComponent(AppComponent);
const h4 = fixture.debugElement.query(By.css('h4'));

console.log(component.pageTitle); // 'first title'
console.log(h4.nativeElement.textContent); // ''
fixture.detectChanges(); // Propagates ngOnInit changes
console.log(h4.nativeElement.textContent); // 'first title'

component.pageTitle = 'second title'; // Here we change state
console.log(component.pageTitle); // 'second title'
console.log(h4.nativeElement.textContent); // 'first title'
fixture.detectChanges(); // Propagate changes
console.log(h4.nativeElement.textContent); // 'second title'

一个典型的用例是检查依赖状态的事物，例如在模板中:

<div id="xxx" *ngIf="over18">Restricted content</div>

在组件中:

over18: boolean = false;

在测试中:

it('should show restricted content if over 18', () => {
    component.over18 = true; // change state from the default one
    fixture.detectChanges(); // propagate changes to view

    // now we can actually test
    const divElem = fixture.debugElement.query(By.css('div#xxx')); // would be null if not shown in DOM
    expect(divElem).toBeTruthy();
});

请注意，我正在测试组件逻辑。我认为，如果我在输入中输入“asdf”，将检查其值是否将更新，这超出了单元测试的范围-该功能由HTML标准/ Angular团队提供。