Corriendo los tests

Las pruebas unitarias en Angular te dan confianza para mover el código sin miedo. Aquí verás cómo correr ng test y entender qué validan los unit tests por defecto en app.component.spec.ts, además de un ejemplo claro de cómo un pequeño cambio en el título “App” puede romper el spec y cómo corregirlo.

¿Cómo correr ng test con Karma y Jasmine en Angular?

Correr los tests es directo. Desde la consola, dentro del proyecto, ejecuta el comando y deja que Karma y Jasmine hagan su trabajo. Puede abrirse un browser como Chrome automáticamente.

ng test

• Se levantan los módulos y se detectan los specs automáticamente.
• Puede abrirse Chrome con la vista de resultados.
• Si aparece “el sitio no se puede alcanzar”, cambia localhost por 127.0.0.1 como antes se explicó en la configuración inicial.

¿Qué hace la consola y el browser durante los tests?

• La consola muestra la ejecución y el estado de los specs en tiempo real.
• El browser refleja los resultados y permite ver el detalle de cada prueba.
• Al dar clic en un test, se muestra información extra y se vuelve a correr ese caso individual.

¿Qué validan los unit tests por defecto del app.component.spec.ts?

Al iniciar, todos pasan en verde si la app está intacta. Se listan pruebas como:

• Should create the app.
• Should have as title "App".
• Should enter title in an H1.

Estos unit tests confirman que el componente principal se crea, que el título es el esperado y que aparece en el H1. Al hacer clic en cada caso, verás datos adicionales y su re-ejecución inmediata. Esto acelera el diagnóstico cuando algo falla.

¿Cómo ver resultados y reejecutar un test individual?

• Haz clic sobre el nombre del spec en el browser.
• Observa los detalles que aporta y su estado actualizado.
• Verás el marcador en verde si pasa o en rojo si falla.

¿Cómo provocar y corregir errores cambiando el título App?

Un ajuste mínimo en el código puede romper un spec. Por ejemplo, editar el título en app.component.ts para que ya no sea exactamente "App" (agregar mayúsculas o un signo de admiración) hace que fallen pruebas como “Should have as title "App"” o que el texto esperado “Welcome to App” ya no coincida.

• Cambiar el título en el componente provoca discrepancias con lo que el spec espera.
• Actualizar el texto, por ejemplo “Welcome to App” con signos de admiración, puede arreglar una falla, pero no todas si el nombre “App” también cambió.
• Ajustar el spec para que coincida exactamente con el nuevo valor vuelve todo a success.

En la práctica, esto muestra la utilidad de los tests: si algo básico cambia, lo detectas al instante y decides si corriges el código o actualizas la expectativa.

¿Qué aprendizaje práctico aportan los tests en un caso de pagos?

Imagina un flujo crítico: aceptar pagos. Si un producto cuesta 10,000 pesos y hay interés, puedes probar que el total cobrado sea igual al valor en la tabla más el interés. Si difiere por un centavo, debe fallar. Esa es la esencia de una prueba unitaria bien definida: proteger lo importante con una validación precisa.

¿Tienes dudas o un caso real que quieras validar con specs en Angular? Comenta y lo revisamos juntos.