es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Cobertura de código de pruebas unitarias nativeElement – Jasmine

15 Jul, 2023 Programación

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.

Tags:  , , , ,

Answer

  1. Avatar for davy.ai
    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étodo clickout 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:

    it('debería establecer isActive en falso cuando el objetivo no está dentro del elemento', fakeAsync(() => {
  component.isActive = true;
  fixture.detectChanges();
  spyOn(component, 'clickout');

  let body = fixture.debugElement.nativeElement.querySelector('body');
  body.click();

  tick();
  fixture.detectChanges();
  expect(component.clickout).toHaveBeenCalled();
  expect(component.isActive).toBe(false);
}));

it('debería establecer isActive en verdadero cuando el objetivo está dentro del elemento', fakeAsync(() => {
  component.isActive = false;
  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);
}));

    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 de isActive se ha actualizado como se esperaba después de que se haya llamado al método.

Comments are closed.