3

在我的 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()方法。

4

3 回答 3

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();
  }

fakeAsync & tick() 测试示例

于 2019-08-02T20:48:25.370 回答
0

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

jasmine.clock().install()

然后调用：

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

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

jasmine.clock().tick(1)

然后关闭：

jasmine.clock().uninstall()

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

于 2021-08-11T10:40:16.777 回答
0

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

constructor(private modalService: BsModalService) {}

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

save(){
     if (this.modalRef) {
        this.modalRef.hide();
     }
}
于 2019-08-02T21:43:45.543 回答