angular - ngx-bootstrap 模态在测试期间不会隐藏

Question

在我的 Angular 应用程序中，我正在编写一些集成测试，其中我有一个 ngx-bootstrap modal

在我的集成测试中，我正在测试一个组件，其中包含一个弹出模式的按钮。在模态框内，有一个“保存”按钮，在测试期间可以单击该按钮。

在模态组件中，按钮在点击时触发一个方法: (click)=onSave() 这就是模态组件的样子:

constructor(
  protected bsModalRef: BsModalRef,
) {}


onSave() {
  // do some stuff (NOTE: this part is actually executed during the test)
  this.bsModalRef.hide();
}

一切正常，除了模式不会消失。然而 onSave() 方法被正确执行。

这很奇怪，因为如果我在测试运行完成后手动点击按钮，它会正确地隐藏模态

但在测试期间，尽管按钮正确接收到点击并触发了 onSave() 方法的执行，但模态框并没有消失。

注意:这里没有 spy ，因为这是一个集成测试，我宁愿不要模拟 hide() 方法，而是让它在测试期间实际工作，然后断言模态与我的自定义 onSave() 方法的其他副作用一起正确消失了。

Answer 1

您能否在测试实用程序“page-object.ts”的 clickElement 方法中尝试使用此方法

来自:

clickElement(element: HTMLElement): void {
    element.click();
    this.fixture.detectChanges();
  }

到:

clickElement(element: HTMLElement): void {
    element.dispatchEvent(new MouseEvent('click'));
    this.fixture.detectChanges();
  }

Example fakeAsync & tick() 测试