angular - el modal de ngx-bootstrap no se oculta durante la prueba

En mi aplicación Angular, estoy escribiendo algunas pruebas de integración donde tengo un modal de ngx-bootstrap

En mis pruebas de integración, estoy probando un Componente que contiene un botón que muestra un modal. Dentro de un modal, hay un botón de "Guardar" que se hace clic durante las pruebas.

Dentro del Componente Modal, el botón dispara un método al hacer clic: (click)=onSave() y así es como se ve el Componente Modal:

constructor(
  protected bsModalRef: BsModalRef,
) {}


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

Todo funciona bien, excepto que el modal no desaparece. Sin embargo, el método onSave() se ejecuta correctamente.

Eso es muy extraño, porque si hago clic manualmente en el botón después de que la prueba haya terminado de ejecutarse, oculta correctamente el modal

Pero durante la prueba, a pesar de que el botón recibe correctamente el clic y desencadena la ejecución del método onSave(), el modal no desaparece.

Nota: aquí no hay espías involucrados y, dado que es una prueba de integración, preferiría no simular el método hide(), sino hacer que funcione realmente durante la prueba y luego afirmar que el modal ha desaparecido correctamente junto con los otros efectos secundarios de mi método personalizado onSave().

Respuesta #1

¿Puedes intentar con esto en su lugar en tu método clickElement en las utilidades de prueba "page-object.ts"?

de:

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

a:

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

Ejemplo de prueba de fakeAsync y tick()

Respuesta #2

Necesitas guardar la referencia del modal en this.modalRef cuando lo estés mostrando.

constructor(private modalService: BsModalService) {}

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

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