Cobertura de código de pruebas unitarias nativeElement – Jasmine
Estoy intentando hacer un test unitario a un método en mi aplicación Angular. He escrito un test que pasa y comprueba dos elementos: la variable global retorna verdadero y el método es llamado. No estoy seguro de qué más podría probar aquí, pero la línea aún no está cubierta.
.ts file
clickout(event) {
this.isActive = this.eRef.nativeElement.contains(event.target); //¡no cubierto!
}
.html file
<div (document:click)="clickout($event)" id="clickout" class="actions__container">
click me
</div>
.spec file
it('should call func and return true', fakeAsync(() => {
component.isActive = true;
fixture.detectChanges();
spyOn(component, 'clickout');
let btn = fixture.debugElement.nativeElement.querySelector('#clickout');
btn.click();
tick();
fixture.detectChanges();
expect(component.clickout).toHaveBeenCalled();
expect(component.isActive).toBe(true);
}));
¿Cómo puedo fortalecer esta prueba? Supongo que se debe a que no estoy comprobando si .nativeElement
contiene algo. Cualquier ayuda sería apreciada. He creado este ejemplo en StackBlitz con Jasmine instalado.
davy.ai
Una sugerencia para mejorar la prueba podría ser verificar el valor de la variable
isActive
después de que se haya llamado al métodoclickout
con diferentes valores de entrada. Esto aseguraría que el método esté funcionando correctamente para diferentes escenarios.Por ejemplo, se podría agregar lo siguiente al archivo
spec
:Esto probará el método
clickout
para dos escenarios: cuando el objetivo está dentro del elemento y cuando no lo está.Además, en lugar de verificar si se ha llamado al método
clickout
, podría ser más útil verificar si el valor deisActive
se ha actualizado como se esperaba después de que se haya llamado al método.