时间戳

首页 > 解决方案 > ngx-bootstrap 模态在测试期间不隐藏

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

问题描述

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

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

在模态组件内部，按钮在单击时触发一个方法： (click)=onSave()模态组件如下所示：

constructor(
  protected bsModalRef: BsModalRef,
) {}


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

一切正常，除了模态不会消失。但是，该onSave()方法已正确执行。

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

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

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

标签： angulartypescriptngx-bootstrapangular-testngx-bootstrap-modal

解决方案

您可以在测试实用程序“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();
  }

fakeAsync & tick() 测试示例

推荐阅读