Corriendo los tests

Contenido del curso

Inicio del curso

1
Angular 4: configuración a despliegue profesional
02:13 min

Introducción a Angular 4

Setup del Ambiente de Trabajo

Conceptos Básicos

Directivas

Angular UI

Ruteo

Servicios

Conexión Remota (Http y Sockets)

Pipes

Animaciones en Angular

Testing en Angular

Autenticación y Protección de Rutas

RxJS

Publicando nuestro proyecto

72
Publicando en Firebase Hosting
07:39 min

Fin del curso

73
Conclusión ¿Qué aprendimos en el curso?
01:20 min
74
Reto final del curso - realiza un nuevo modulo de PlatziSquare de acuerdo con las historias de usuario
01:25 min

Sesiones en vivo

Contenido Bonus

80
Actualización de angular, versión 6.0
04:25 min

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:003:56

Corriendo los tests

Curso de Angular 4

Clase 56 de 80

Clase 56 / 80

Recursos

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.

Inicio del curso

Angular 4: configuración a despliegue profesional

Introducción a Angular 4

Versionamiento en Angular

Qué es Angular 4 y el salto de versiones

Typescript: qué es

Cómo monetizar una app directorio comercial

Setup del Ambiente de Trabajo

Herramientas de trabajo y Angular CLI

Generación y estructura de Angular 4

RETO: Haz un cambio simple en el proyecto.

Conceptos Básicos

Para qué nos sirven los Módulos y Componentes

Tipos de Data Binding y String Interpolation

Property Binding

Event Binding

ngModel y two way binding en Angular

Directivas en Angular 4 y ngFor

Cómo usar ngIf en Angular 4.0

Instalando librerías con NPM (Google Maps)

Directivas

ngStyle y ngClass en Angular: estilos condicionales

Directiva ngSwitch

Cómo crear directivas de atributo en Angular

Host Listeners

HostBinding en Angular: controla estilos desde directivas

Angular UI

Angular Material y Bootstrap

Configurando e implementando Bootstrap en nuestro proyecto

Ruteo

Qué hace el router en Angular 4

Implementación de Rutas en el Proyecto

Href vs router link: navegación angular

Resaltando el link activo con CSS para indicar visualmente en que componente nos encontramos

Parámetros de ruta con routerLink en Angular

Parámetros tipo Query

Creando una vista de detalle para el proyecto

Página de contacto Angular desde cero

Servicios

Servicios en Angular para compartir datos

Creando nuestro propio servicio

Configurando Firebase en nuestro proyecto

Guardando Records en Firebase

Obteniendo records desde Firebase

Obteniendo coordenadas usando Geocoding

Reto: Crear una vista para editar records

Mostrando marcadores en el Mapa de Google

Conexión Remota (Http y Sockets)

Funcionamiento de los llamados Http y Sockets

Qué es una arquitectura cliente - servidor

Enviando llamados tipo POST

Enviando llamados tipo GET

Formateando respuestas del servidor con el operador map()

Manejando errores HTTP

Pipes

Utilidad de los Pipes en Angular 4

Usando los pipes por defecto de Angular

Parámetros en pipes

Creando nuestro propio pipe

Animaciones en Angular

Configurando animaciones en nuestro proyecto

Transiciones

Callbacks

Solución al Reto: Añadiendo animaciones a nuestra aplicación

Testing en Angular

Introducción a unit tests

Configuración de testing por default

Corriendo los tests

Creando unit tests para componentes

Integración de Unit Test con Servicios

Autenticación y Protección de Rutas

Cómo funcionan los JSON Web Tokens

Preparación de vistas para login y registro

Registrando usuarios

Loggeando usuarios

Guardias canActivate en Angular: Proteger rutas con autenticación

Cómo integrar Facebook login con Firebase

Logout en Angular con Firebase

RxJS

Cómo funciona RxJS con metáfora de oficina