Necesito probar esto, pero soy nuevo en pruebas y no tengo idea, estoy trabajando con angular, solo quiero probar la función de cierre y tal vez si se procesa.
Este es el html.
<div class="modal active" *ngIf="active" id="modal"> <div class="modal-dialog modal-lg" role="document"> <div class="modal-content"> <div class="modal-header"> <h1 class="modal-title">{{tittle}}</h1> <button type="button" class="close" (click)="close()"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> <ng-content select="[modal-body]"></ng-content> <div modal-body> <h5 class="modal-description">{{description}}</h5> </div> </div> <div class="modal-footer"> <ng-content select="[modal-footer]"></ng-content> <button type="button" class="btn btn-secondary" (click)="close()">Close</button> </div> </div> </div> <div class="modal-background" (click)="close()"></div> </div>Y este es el modal.component.ts
import { Component, Input, Output, EventEmitter } from '@angular/core'; @Component({ selector: 'app-modal', templateUrl: './modal.component.html', styleUrls: ['./modal.component.css'] }) export class ModalComponent { @Input() tittle: string = '' @Input() description: string = '' @Input() active: boolean = false; @Output() activeChange = new EventEmitter<boolean>(); close() { this.active = false; this.activeChange.emit(this.active); } }Para probar si EventEmitter emite un evento al hacer clic en background div , debe escribir una prueba usando spyOn como esta:
it('should emit event for closing a modal on click event on background div', () => { spyOn(component.activeChange, 'emit'); component.close(); expect(component.activeChange.emit).toHaveBeenCalled(); }); Asegúrese de tener acceso al component , al tener estas líneas en el bloque beforeEach :
beforeEach(() => { fixture = TestBed.createComponent(ModalComponent); component = fixture.componentInstance; fixture.detectChanges(); });