Pruebas Unitarias Avanzadas en Formularios Reactivos de Angular

¿Qué es lo que necesitamos probar en nuestras pruebas unitarias con formularios reactivos en Angular?

Para quienes trabajamos con Angular, las pruebas unitarias son esenciales para asegurar el correcto funcionamiento de nuestros formularios reactivos. En la clase anterior, revisamos las pruebas básicas que verifican que los controles creados con el FormBuilder cumplan con las definiciones establecidas. Ahora, nos enfocaremos en las áreas faltantes de nuestro diagrama de cobertura: eliminar un elemento del array y guardar los cambios en el servidor.

¿Cómo probamos la eliminación de un elemento en el array?

Para probar la eliminación de un elemento en nuestro array de formularios, lo primero que hacemos es crear un grupo de pruebas centrado en el método deleteAsset. La idea es simular la adición y eliminación de un componente para asegurarnos de que se lleven a cabo los pasos correctos. Usamos la función removeTheFormControl para este propósito.

componente.addAsset();
componente.deleteAsset();
expect(Object.keys(assets.controls)).toEqual([]);

De esta manera, garantizamos que el control agregado sea correctamente eliminado, verificándolo con la consola.

¿Cómo probamos la conexión con el servidor y el guardado de cambios?

Esta parte del proceso es crítica, ya que implica verificar que nuestros datos sean enviados correctamente al servidor. Para ello, nos centramos en un método que crea un modelo nuevo basado en la información del formulario. Este modelo es guardado en el repositorio, suscribiéndonos a los resultados para garantizar el comportamiento esperado.

Una técnica eficiente es usar "spies" para simular las suscripciones y realizar pruebas más efectivas:

spyOn(navigateService, 'goToPins');
spyOn(snackBarService, 'open').and.returnValue(of(true));

componente.savePins().then(() => {
  expect(navigateService.goToPins).toHaveBeenCalled();
  expect(snackBarService.open).toHaveBeenCalledWith('Your pin is saved', 'Cool', { duration: 2000 });
});

Al resolver las promesas inmediatamente, validamos que la navegación y el uso del snackbar se ejecuten correctamente.

¿Qué beneficios aportan estas pruebas?

El uso de pruebas unitarias, especialmente con observables y spies en Angular, nos ofrece varias ventajas:

• Confianza en el código: Ayuda a estar seguros de que el formulario y las interacciones con el servidor funcionan como deberían.
• Cobertura del código: Al ampliar nuestras pruebas, aumentamos el rango de líneas verificadas, minimizando errores futuros.
• Facilidad de mantenimiento: Conforme el código evoluciona, estas pruebas actúan como una red de seguridad para cambios no anticipados.

Esto concluye nuestra sección de pruebas unitarias con formularios reactivos y conexiones al servidor. Es un proceso que, aunque detallado, es crucial para el desarrollo robusto en Angular. Ahora, vamos a continuar nuestro aprendizaje enfocándonos en nuevas técnicas para el manejo del DOM en las próximas sesiones. ¡Sigamos aprendiendo!