Estoy intentando realizar una prueba unitaria de un método en mi aplicación Angular. He escrito una prueba que pasa y verifica dos elementos: la variable global devuelve verdadero y se llama al método. No estoy seguro de qué más podría probar aquí, pero la línea aún no está cubierta.
archivo .ts
clickout(event) { this.isActive = this.eRef.nativeElement.contains(event.target); //not covered! }archivo .html
<div (document:click)="clickout($event)" id="clickout" class="actions__container"> click me </div>archivo .spec
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 confirmar esta prueba? Supongo que es porque no estoy buscando para ver si .nativeElement contiene algo. Cualquier ayuda apreciada. He creado este ejemplo de stackBlitz con jasmine instalado.
Genial enlace de StackBlitz, puede ser útil.
La razón por la que no está cubierto es porque spyOn(component, 'clickout') se deshace de los detalles de implementación de clickout . Una vez que espiamos el método, decimos stub este método (no lo llame cuando se llame) pero tenemos acceso a si se llamó, con qué argumentos se llamó y cuántas veces se llamó.
Para obtener lo mejor de ambos mundos, debe agregar un .and.callThrough() en spyOn para no perder los detalles de implementación.
it('should call func and return true', fakeAsync(() => { component.isActive = true; fixture.detectChanges(); // spy on the method and call its actual implementation when it is called spyOn(component, 'clickout').and.callThrough(); let btn = fixture.debugElement.nativeElement.querySelector('#clickout'); btn.click(); tick(); fixture.detectChanges(); expect(component.clickout).toHaveBeenCalled(); expect(component.isActive).toBe(true); })); Con .and.callThrough() , la línea que no está cubierta ahora debería estar cubierta. Dicho esto, podría causar un error de nativeElement o contains undefined.