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

【问题标题】：ngx-bootstrap modal does not hide during testngx-bootstrap 模态在测试期间不隐藏
【发布时间】：2021-08-11 20:29:37
【问题描述】：

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

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

在 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()方法的执行，但是modal并没有消失。

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

【问题讨论】：

我相信实际测试需要更多细节，您是使用dispatcher api触发点击吗？
问题出在this method 中使用的this test case
快速查看您的测试可能存在一些异步问题，您是否尝试过使用 fakeasync 和 tick()？
@Lucho 在这种情况下，您通常会看到操作完成（在这种情况下模式关闭）然后测试完成执行。相反，在我的情况下，即使测试完成，模态仍然打开。更奇怪的是，在业力测试的 Chrome 窗口中，如果我点击按钮，模式会正确关闭。
是的，正如我提到的，由于 js 异步性质，哪个“预期”让你失望了？然后我可以写一个我的意思的例子

标签： angular typescript ngx-bootstrap angular-test ngx-bootstrap-modal

【解决方案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() 测试

【讨论】：

感谢您的回答，但不幸的是它并没有解决问题:(
你用 fakeAsync & tick 试过了吗？
更新了帖子中的示例

【解决方案2】：

显示模态引用时，需要将模态引用保存在 this.modalRef 中。

constructor(private modalService: BsModalService) {}

ngOnInit() {
    this.modalRef = this.modalService.show(this.template, 
    { class: 'modal-md' });
}

save(){
     if (this.modalRef) {
        this.modalRef.hide();
     }
}

【讨论】：

我尝试使用这种方法，而不是使用bsModalRef，但这并不能解决问题

【解决方案3】：

我遇到了同样的问题，我首先通过模拟 setTimeout 来解决它

jasmine.clock().install()

然后调用：

this.modalService.hide(this.modalRef.id)

然后调用（如果您在选项中将动画设置为 true，则使用 300 而不是 1）

jasmine.clock().tick(1)

然后关闭：

jasmine.clock().uninstall()

但是，当我使用 this.modalRef.hide() 时，它仍然不起作用:(

【讨论】：