单元测试后关闭 ngx-bootstrap 模态

Question

由于我在我的 Angular 应用程序的单元测试中启用了 css 样式，所以每次显示 modal from ngx-bootstrap 的组件都会保留在浏览器中，即使在之后该特定组件的单元测试已完成 运行。

这使得很难直观地检查其他测试的执行情况和测试结果：

Answer 1

UPDATE：为 ngx-bootstrap 6+ 更新代码，旧版本见下文

解决方案是确保在每次运行可能显示模态的代码片段的测试后隐藏模态：

import { BsModalService } from 'ngx-bootstrap';

// test definitions ...

afterEach(() => {
  const modalService: BsModalService = TestBed.inject(BsModalService);
  modalService.hide();
});

此技术使用 BsModalService.

中的 hide() 方法

我发现拥有一个可以在我的测试中重复使用的实用函数很有用：

export function closeModalsAfterEach() {
  afterEach(() => {
    const modalService: BsModalService = TestBed.inject(BsModalService);
    modalService.hide();
  });
}

---

旧代码（对于 ngx-bootstrap 6 之前的版本）

在 ngx-bootstrap 5

之前的旧工作解决方案

import { BsModalService } from 'ngx-bootstrap';

// test definitions ...

afterEach(() => {
  const modalService: BsModalService = TestBed.get(BsModalService);
  modalService.hide(1);
});

---

export function closeModalsAfterEach(upToLevel: number = 1) {
  afterEach(() => {
    const modalService: BsModalService = TestBed.get(BsModalService);

    for (let level = 1; level <= upToLevel; level++) {
      modalService.hide(level);
    }
  });
}

Answer 2

您可以将其从 DOM

中删除

afterEach(() => {
  // const modalService: BsModalService = TestBed.get(BsModalService);
  // modalService.hide(1);
  const htmlCollection = document.getElementsByTagName('modal-container');
  if (htmlCollection.length > 0 && htmlCollection[0] != null)
    htmlCollection[0].remove();
});