Clase 23 de 23 • Curso de Pruebas Unitarias en Angular
Contenido del curso
Pruebas unitarias en Angular con Yes y herramientas IA
Unit Testing en Angular para eCommerce con Renderizado del Servidor
Configuración de Jest para pruebas unitarias en Angular
Cobertura de Código: Configuración y Análisis en Angular
quiz de Introducción y Configuración de Pruebas
Uso de Expectator para Testing en Angular
Pruebas de Pipes en Angular con Spectator y Jest
Generación de Pruebas Unitarias con Inteligencia Artificial
Testing de Servicios en Angular con Jest y Spectator
Creación de Datos Simulados con la Librería Faker.js
Pruebas Unitarias para Servicios con Inyección de Dependencias en Angular
Pruebas Unitarias con Mocking en MetaTax Service
Pruebas de Servicios HTTP Client en Angular con Spectarer y Jest
quiz de Pruebas de Servicios y Dependencias
Pruebas Unitarias con fetch en JavaScript y Mocking de Servicios
Mocking de APIs Globales en JavaScript para Pruebas Unitarias
Pruebas Unitarias de Componentes en Angular con Spectator
Pruebas de Componentes con Data Test ID y Selectores CSS
Pruebas de Espionaje en Componentes sin Dependencias
Unit Testing para Componentes con Inyección de Dependencias
quiz de Pruebas de Componentes
Mocking y pruebas unitarias en Angular: Inyección de dependencias
Pruebas Complejas en Angular: Testing de Componentes y Servicios
Pruebas de Mocking y Deferred Components en Angular
Pruebas de Interacción en Componentes Angular: Galería de Imágenes
Pruebas Unitarias en Angular con Spector y AI
La implementación de pruebas unitarias en Angular es fundamental para garantizar la calidad del código y la estabilidad de las aplicaciones. Utilizando herramientas como Jest y Spectator, podemos automatizar la verificación de componentes y servicios, asegurando que funcionen correctamente incluso después de realizar cambios. La inteligencia artificial también puede ser una gran aliada en este proceso, aunque requiere de nuestra guía y experiencia para obtener resultados óptimos.
Cuando trabajamos con componentes Angular que tienen múltiples inyecciones de dependencias, es importante asegurarnos de que todas ellas estén correctamente configuradas en nuestras pruebas. En el caso del componente ProductDetail, ya habíamos abordado la inyección más compleja (ProductService), pero aún quedaban pendientes otras como Cart y MetaTagService.
Para estas dependencias adicionales, podemos utilizar el enfoque de MockProvider que nos proporciona Spectator. A diferencia del caso más complejo donde necesitábamos configurar valores iniciales específicos, para servicios más simples podemos aprovechar las capacidades de mocking por defecto:
// Ejemplo de MockProvider para Cart
providers: [
MockProvider(Cart)
]
Este enfoque es mucho más sencillo cuando solo necesitamos espiar funciones sin configurar comportamientos específicos. El MockProvider por defecto ya nos proporciona esta funcionalidad, lo que simplifica considerablemente nuestro código de prueba.
Para probar la funcionalidad de añadir productos al carrito, necesitamos verificar que al hacer clic en el botón correspondiente, se ejecute el método adecuado del servicio. No es necesario probar que el producto realmente se agregue al carrito, ya que esa es responsabilidad del servicio Cart y debería probarse por separado.
Primero, añadimos un atributo data-testid al botón para facilitar su selección:
it('debería agregar un producto', () => {
const cartService = spectator.inject(Cart);
const button = spectator.query(byTestId('add-to-cart')) as HTMLButtonElement;
spectator.click(button);
expect(cartService.addToCart).toHaveBeenCalledWith(mockProduct);
});
En esta prueba:
Es importante destacar que Spectator maneja automáticamente la detección de cambios después del clic, por lo que no necesitamos invocarla manualmente.
A lo largo del curso, hemos visto varias prácticas recomendadas para escribir pruebas efectivas en Angular:
Usar data-testid para seleccionar elementos: Esto hace que nuestras pruebas sean más robustas ante cambios en la estructura del DOM.
Reutilizar servicios inyectados: Es mejor obtener los servicios una vez y reutilizarlos en diferentes pruebas, en lugar de inyectarlos repetidamente.
Enfocarse en responsabilidades específicas: Cada componente o servicio debe probarse según sus propias responsabilidades, sin intentar verificar el comportamiento de sus dependencias.
Aprovechar las capacidades de Spectator: Esta biblioteca nos ahorra mucho código repetitivo y simplifica la escritura de pruebas.
Buscar una cobertura de al menos 80%: Este es un buen objetivo para asegurar que la mayoría del código está siendo verificado.
La inteligencia artificial puede ser una gran aliada para escribir pruebas unitarias, pero requiere de contexto y buenos ejemplos para generar código útil. Durante el curso, vimos que la IA a veces puede proponer casos innecesarios o utilizar métodos inadecuados.
Para aprovechar al máximo la IA en la escritura de pruebas:
Las pruebas unitarias son una de las áreas donde la delegación a la IA tiene más sentido, ya que los modelos de lenguaje pueden comprender el código y su propósito. Sin embargo, tu experiencia sigue siendo crucial para identificar dónde y cómo aplicar estas pruebas efectivamente.
El testing en Angular, combinado con herramientas como Jest, Spectator y la asistencia de IA, nos permite crear aplicaciones más robustas y mantenibles. Aunque Jest aún no está completamente soportado por el equipo de Angular, hemos visto cómo configurarlo adecuadamente en nuestros proyectos, y también podríamos utilizar alternativas como Jasmine o Vitest según nuestras preferencias.
Las pruebas unitarias son una inversión que paga dividendos a largo plazo, asegurando que nuestras aplicaciones sigan funcionando correctamente a medida que evolucionan. ¿Has implementado pruebas unitarias en tus proyectos Angular? Comparte tu experiencia en los comentarios.