Question

我在茉莉花中有以下代码：

    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（）但它没有。

如何正确实现：等待输入的第二个值输入并检查该值是否为“secondvalue”。

fixture.detectChanges（）不应该像一个偶数阻塞程序，例如当有人开始写入时，它会等待输入被触发吗？

Answer 1

当您更改组件状态时，运行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();
});

请注意，我正在测试组件逻辑。检查我是否输入＆＃34; asdf＆＃34;在我认为，在单位测试范围之外，它的值将会更新 - 这个功能由HTML标准/ Angular团队提供。

如何在Angular2中正确实现detectChanges（）？

1 个答案: