Question

如何调试await fixture.whenStable()无法解决的测试情况。

换一种说法：这表明我的组件是什么？

我有一个看起来像这样的规范：

it('should open the modal when ?series is navigated to', async () => {
    const { instance, fixture } = await _render();
    const openSpy = spyOn(instance, 'openModal');
    expect(openSpy).not.toHaveBeenCalled();
    _updateQuery({ series: '' });
    fixture.detectChanges();
    // await fixture.whenStable(); // <- never resolves
    expect(openSpy).toHaveBeenCalled(); // <- fails
});

（我需要使用实际的异步函数来与我的测试库一起使用。）

无论我把它放在函数体中的什么地方，调用await fixture.whenStable()都会挂起–似乎表明在加载组件时就存在该问题。

我什至不了解whenStable()的所作所为。也许如果我做到了，我可以在没有帮助的情况下解决这个问题。

Answer 1

根据{{3}}

fixture.whenStable（）返回一个承诺，该承诺将在JavaScript引擎的任务队列为空时解决。

所以在这种情况下：

class AppComponent implements OnInit {

  someText: Observable<string>;

  ngOnInit() {
    this.someText = of('some string');
  }

}

whenStable解析ngOnInit中的可观察值何时发出其值。

it('after onInit observable should be set', async(async () => {
  component.ngOnInit();
  await fixture.whenStable();
  fixture.detectChanges();
  console.log('after whenStable'); // <- now you gonna see this in console
}));

Answer 2

在我的特定情况下，问题在于我假设生命周期挂钩ngAfterViewchecked仅触发一次，但实际上反复触发。

我正在为该处理程序内的组件上的字段分配一个值，因此该字段的值不断变化（因为需要计算）。

因为该字段的值更改了视图中的内容，并且触发了ngAfterViewChecked，并且正在向其中添加JavaScript引擎的任务队列，所以该组件的状态无法变为“稳定”。 >

@Component({ ... })
export class MyComponent {
    listToRepeatOver = [];

    ngAfterViewChecked() {
        this.listToRepeatOver = getList();
    }
}

我怀疑是什么原因，因为我在Chrome devtools的Elements面板中看到紫色闪烁的效果，这表明DOM在我的组件模板中的元素上发生了变化。（这是在快速连发中发生的。）

经验不足：如果您在生命周期挂钩中进行更新，导致该生命周期挂钩再次触发，那么您将获得此结果。

测试我的组件时，fixture.whenStable（）永远无法解析

2 个答案: