angular - Stäng ngx-bootstrap-modalen efter enhetstester

Eftersom jag har aktiverat CSS-stilen i enhetstesterna för min Angular-app, varje gång en komponent som visar en modal från ngx-bootstrap körs, förblir den i webbläsaren även efter att just den komponentens enhetstester har körts klart.

Detta gör det svårt att visuellt kontrollera körningen av de andra testerna och testresultaten:

Svar #1

UPPDATERING: kod uppdaterad för ngx-bootstrap 6+, se nedan för äldre versioner

Lösningen är att säkerställa att modalerna är dolda efter varje test som kör koddelar som kan visa modaler:

import { BsModalService } from 'ngx-bootstrap';

// test definitions ...

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

denna teknik använder hide()-metoden från BsModalService.

Jag har tyckt att det är användbart att ha en hjälpfunktion som jag kan återanvända i mina tester:

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

Gammal kod (för versioner innan ngx-bootstrap 6)

Gammal fungerande lösning tills 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);
    }
  });
}

Svar #2

du kan ta bort det från 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();
});