angular - ngx-bootstrap modal döljs inte under test

I min Angular-applikation skriver jag några integrationstester där jag har en ngx-bootstrap-modal

I mina integrationstester testar jag en komponent som innehåller en knapp som öppnar en modal. Inuti modalen finns en "Spara"-knapp som klickas under testerna.

Inuti Modal-komponenten utlöser knappen en metod vid klick: (click)=onSave() och så här ser Modal-komponenten ut:

constructor(
  protected bsModalRef: BsModalRef,
) {}


onSave() {
  // do some stuff (NOTE: this part is actually executed during the test)
  this.bsModalRef.hide();
}

Allt fungerar bra, förutom att modalen inte försvinner. Däremot körs onSave()-metoden korrekt.

Det är mycket konstigt, eftersom om jag manuellt klickar på knappen efter att testet har avslutats för att köra, gömmer den korrekt modalen

Men under testet, trots att knappen korrekt tar emot klicket och utlöser exekveringen av onSave()-metoden, försvinner inte modalen.

Observera: det finns inga spioner involverade här och, eftersom det är ett integrationstest, skulle jag föredra att inte mocka hide()-metoden utan faktiskt få den att fungera under testet och sedan slå fast att modalen korrekt har försvunnit tillsammans med de andra bieffekterna av min anpassade onSave()-metod.

Svar #1

Kan du prova med detta istället i din clickElement-metod i testverktyg "page-object.ts"

från:

clickElement(element: HTMLElement): void {
    element.click();
    this.fixture.detectChanges();
  }

till:

clickElement(element: HTMLElement): void {
    element.dispatchEvent(new MouseEvent('click'));
    this.fixture.detectChanges();
  }

Exempel på fakeAsync och tick()-test

Svar #2

Du behöver spara modalreferensen i this.modalRef när du visar den.

constructor(private modalService: BsModalService) {}

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

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