Pruebas Unitarias en Angular: Testeo de Componentes y Servicios

¿Cómo probar el layout en Angular asegurando cobertura completa?

Al trabajar en pruebas para garantizar un 100% de cobertura en nuestras funciones frontend, es crítico entender cómo implementar tests efectivos en nuestros componentes de Angular, especialmente en el layout. Aquí te guiamos sobre cómo realizar estas pruebas avanzadas.

¿Cómo configuramos el testbed y los servicios?

Como primer paso, configuramos el testbed, esencial en cualquier prueba en Angular. Nuestro componente layout utiliza dos servicios que debemos gestionar: el bottom sheet y el router.

1. Creación de Stubs para el Bottom Sheet:

   • Define un stub para el servicio BottomSheet con un método open.

   class BottomSheetStub {
     open() {}
   }
   

2. Configuración del Router:

   • Utiliza RouterTestingModule para manejar rutas en pruebas.
   • Define rutas, incluyendo la raíz y una para habilitar el modo de edición.

   RouterTestingModule.withRoutes([
     { path: '', component: LayoutComponent },
     { path: 'app/add', component: LayoutComponent }
   ])
   

¿Cómo evitar errores en los esquemas?

Para evitar errores ligados a componentes no definidos:

• Asegúrate de importar esquemas relacionados con Angular Core, como CUSTOM_ELEMENTS_SCHEMA. Esto previene problemas al usar elementos personalizados:

  schemas: [CUSTOM_ELEMENTS_SCHEMA]
  

¿Cómo implementar y verificar las pruebas?

Con nuestro testbed configurado, avanzamos con las pruebas.

1. Verificar editMode en falso:

   • Navega a la raíz y asegúrate de que editMode es false.
   • Usa el método whenStable para confirmar que el cambio en la aplicación quedó registrado.

   it('should set editMode to false', async () => {
     // Configura el espía para verifyEditMode
     spyOn(component, 'verifyEditMode');
     await fixture.whenStable();
     expect(component.editMode).toBe(false);
     expect(component.verifyEditMode).toHaveBeenCalled();
   });
   

2. Prueba sin errores ng-zone:

   • Usa NgZone para garantizar que se reflejen los cambios correctamente.

   fixture.ngZone.run(() => {
     component.router.navigate(['/']);
   });
   await fixture.whenStable();
   

3. Método Open del servicio Bottom Sheet:

   • Crea un espía para open del servicio BottomSheet.

   it('should open button sheet with ActionsComponent', () => {
     const openSpy = spyOn(component['bottomSheet'], 'open');
     component.openButtonSheet();
     expect(openSpy).toHaveBeenCalled();
     expect(openSpy).toHaveBeenCalledWith(ActionsComponent);
   });
   

¿Qué retos adicionales se pueden abordar?

El siguiente desafío que puedes asumir es asegurarte de que el método verifyEditMode reconoce cuando editMode es true. Además, enfócate en las pruebas de acciones del componente. Considera:

• Stub del Pin Service

  • Agrega métodos como dismiss y resolveActionServer.

• Acciones de prueba en el OpenLink

  • Simula un evento de mouse con preventDefault.

Sumérgete y desarrolla este conjunto de pruebas para perfeccionar tu cobertura en Angular. Al abordar estos retos, mejorando tus habilidades en la implementación de tests, estás fortaleciendo la calidad global de tu aplicación. ¡Adelante, sigue aprendiendo y perfeccionando!