Unit Testing en Angular para eCommerce con Renderizado del Servidor

La implementación de pruebas unitarias en Angular es un aspecto fundamental para garantizar la calidad y robustez de nuestras aplicaciones. Dominar estas técnicas nos permite detectar errores tempranamente y asegurar que nuestro código funcione correctamente ante diferentes escenarios. Veamos cómo configurar un proyecto existente para incorporar pruebas unitarias efectivas.

¿Cómo preparar un proyecto Angular para implementar pruebas unitarias?

Para comenzar nuestro viaje en el mundo del testing en Angular, necesitamos un proyecto base sobre el cual trabajar. El repositorio "Angular testing" nos servirá como punto de partida, ya que cuenta con características avanzadas como Server Side Rendering y la nueva API de Angular.

Para obtener el proyecto, debemos seguir estos pasos:

1. Clonar el repositorio desde GitHub usando el comando: git clone [url-del-repositorio].
2. Navegar hasta la carpeta del proyecto: cd Angular-testing.
3. Instalar las dependencias necesarias: npm install.
4. Iniciar el servidor de desarrollo: ng serve.

Una vez completados estos pasos, podremos acceder a la aplicación a través del navegador, generalmente en el puerto 4200.

¿Qué características tiene el proyecto base?

El proyecto base es un eCommerce completo que incluye:

• Galería de productos con navegación por categorías
• Vista detallada de productos
• Productos relacionados
• Funcionalidad de carrito de compras
• Páginas experimentales para probar diferentes escenarios de testing
• Componente de audio con funcionalidad de reproducción
• Módulo de ubicación que se conecta a una API para obtener la posición

Este último componente será particularmente interesante para nuestras pruebas, ya que requerirá implementar técnicas de "mocking" para la API del navegador, específicamente para getCurrentPosition.

¿Cómo está estructurado el código del proyecto?

La organización del proyecto sigue una arquitectura modular y bien estructurada, lo que facilitará la implementación de pruebas unitarias. Los principales directorios incluyen:

Estructura de carpetas

• domains: Contiene las diferentes funcionalidades o "features" de la aplicación
• shared: Elementos compartidos entre diferentes módulos
  • Componentes reutilizables
  • Directivas
  • Modelos
  • Pipes
  • Servicios

Dentro de cada dominio, como "productos" e "info", encontramos una estructura similar con:

• Componentes
• Páginas
• Servicios específicos

Es importante notar que actualmente el proyecto no contiene archivos de prueba (archivos .spec.ts), que son precisamente los que iremos creando a lo largo de este proceso.

Variedad de elementos para testear

El proyecto incluye una amplia gama de elementos típicos de Angular que podemos someter a pruebas:

• Pipes para transformación de datos
• Directivas personalizadas
• Modelos de datos
• Servicios que utilizan HttpClient
• Servicios que trabajan con Promises mediante fetch

Además, el proyecto ya tiene configurado Server Side Rendering, con configuraciones tanto para el lado del servidor como para Client Side Rendering y Pre-rendering.

¿Qué herramientas podemos utilizar para facilitar la creación de pruebas?

Para el desarrollo de nuestras pruebas unitarias, podemos aprovechar editores de código que integran inteligencia artificial:

• Cursor: Un editor basado en IA, fork de VS Code, que será utilizado en este curso para generar pruebas unitarias con ayuda de inteligencia artificial.
• Visual Studio Code con GitHub Copilot: Una alternativa igualmente válida que ofrece funcionalidades similares.

Estas herramientas nos ayudarán a generar pruebas de manera más eficiente, especialmente cuando nos enfrentemos a componentes complejos o escenarios de prueba desafiantes.

La exploración del código y la familiarización con la estructura del proyecto son pasos fundamentales antes de comenzar a implementar nuestras pruebas unitarias. Te recomendamos navegar por los diferentes módulos y componentes para entender cómo interactúan entre sí y qué aspectos serán más críticos para probar.

El testing es una habilidad esencial para cualquier desarrollador Angular. ¡Anímate a explorar este proyecto y prepárate para dominar las técnicas de pruebas unitarias que mejorarán significativamente la calidad de tus aplicaciones!