Angular 单元测试后关闭ngx引导模式

Angular 单元测试后关闭ngx引导模式,angular,typescript,ngx-bootstrap,angular-test,ngx-bootstrap-modal,Angular,Typescript,Ngx Bootstrap,Angular Test,Ngx Bootstrap Modal,因为我已经在Angular应用程序的单元测试中启用了css样式,所以每次显示css的组件都会保留在浏览器中,即使特定组件的单元测试已经完成运行 这使得很难目视检查其他测试的执行情况和测试结果: 更新:为ngx bootstrap 6+更新了代码,请参阅下面的旧版本 解决方案是确保在运行可能显示模态的代码段的每个测试之后隐藏模态: import { BsModalService } from 'ngx-bootstrap'; // test definitions ... afterEach(

因为我已经在Angular应用程序的单元测试中启用了css样式,所以每次显示css的组件都会保留在浏览器中,即使特定组件的单元测试已经完成运行

这使得很难目视检查其他测试的执行情况和测试结果:


更新:为ngx bootstrap 6+更新了代码,请参阅下面的旧版本

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

import { BsModalService } from 'ngx-bootstrap';

// test definitions ...

afterEach(() => {
  const modalService: BsModalService = TestBed.get(BsModalService);
  modalService.hide();
});
此技术使用的是来自的hide()方法

我发现有一个可以在测试中重用的实用函数非常有用:

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

旧代码(适用于ngx引导6之前的版本) ngx引导5之前的旧工作解决方案

import { BsModalService } from 'ngx-bootstrap';

// test definitions ...

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

export function closeModalsAfterEach(upToLevel:number=1){
之后(()=>{
const modalService:BsModalService=TestBed.get(BsModalService);
对于(设标高=1;标高
export function closeModalsAfterEach(upToLevel: number = 1) {
  afterEach(() => {
    const modalService: BsModalService = TestBed.get(BsModalService);

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