Configuración de testing por default

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:007:41

Configuración de testing por default

Curso de Angular 4

Clase 55 de 80

Clase 55 / 80

Recursos

Aprende a configurar y leer tus primeros Unit Tests en Angular 4 con confianza. Aquí verás cómo el scaffolding del CLI ya incluye una plataforma de testeo lista para usar con Karma, Jasmine y TestBed, además de cómo interpretar el archivo app.component.spec.ts sin añadir complejidad innecesaria.

¿Cómo iniciar el entorno de testing en Angular 4?

Angular 4 genera un proyecto con testing preconfigurado. Desde la consola puedes crear uno nuevo y abrirlo en tu IDE. El CLI incluye un setup que permite correr pruebas sin tocar configuraciones adicionales.

Crear proyecto con Angular CLI y nombre descriptivo.
Navegar al directorio y abrir en el IDE.
Ubicar el archivo de pruebas base: app.component.spec.ts.

Comandos usados en consola:

ng new "platzi test angular cuatro"
cd platzi test ng cuatro

¿Qué archivos y frameworks incluye por defecto?

El entorno integra Karma y Jasmine. Con TestBed se abstrae la configuración necesaria para ejecutar pruebas. Esto permite declarar componentes y simular un módulo de Angular durante el test, sin depender del app.module.ts real.

¿Dónde están los Unit Tests iniciales?

En app.component.spec.ts encontrarás:

Un bloque principal con describe que indica el sujeto bajo prueba: el AppComponent.
Tres pruebas con it: creación del componente, verificación del título y verificación del contenido en un H1.
Configuración previa con beforeEach para iniciar cada test en limpio.

¿Cómo se organiza un Unit Test con TestBed y beforeEach?

Cada grupo de pruebas inicia con describe: ahí se define el alcance. Luego, con beforeEach, se prepara el ambiente de forma repetible: reiniciar estado, crear la aplicación y compilar componentes. Esta rutina garantiza consistencia entre ejecuciones.

describe: nombra lo que se prueba.
beforeEach: prepara el estado por prueba.
TestBed.configureTestingModule: crea un módulo de prueba.
compileComponents: compila las declaraciones antes de ejecutar los tests.

Ejemplo de configuración base:

beforeEach(() => {
  TestBed.configureTestingModule({
    declarations: [AppComponent]
  }).compileComponents();
});

¿Por qué crear un módulo de prueba con configureTestingModule?

En el entorno de test no existe el app.module.ts. Un componente solo funciona si está registrado en un módulo. TestBed soluciona esto creando un módulo temporal con declarations que incluyen el AppComponent. Así el componente es instanciable durante la prueba.

¿Qué hace compileComponents y cuándo corre?

compileComponents compila las declaraciones definidas. Se ejecuta en el beforeEach, por lo que cada prueba inicia con el componente listo para ser creado e interactuado. Evita fallas por plantillas no compiladas.

¿Cómo validar creación, propiedades y HTML con Jasmine?

Cada prueba se define con it. Para operaciones asíncronas se usa async. El flujo común es crear un fixture con TestBed, obtener la instancia del componente y hacer aserciones con expect.

fixture: crea y conecta el componente con su plantilla.
componentInstance: acceso a la clase del componente.
detectChanges: dispara la detección de cambios para renderizar el HTML.
nativeElement y querySelector: permiten leer el DOM renderizado.
toBeTruthy: afirma que una instancia existe.

¿Cómo crear el componente y afirmar con toBeTruthy?

La primera prueba valida que el componente se crea correctamente. Con que exista, pasa.

it('should create the app', async(() => {
  const fixture = TestBed.createComponent(AppComponent);
  const app = fixture.componentInstance;
  expect(app).toBeTruthy();
}));

La segunda prueba comprueba la propiedad de título igual a "app".

it('should have as title "app"', async(() => {
  const fixture = TestBed.createComponent(AppComponent);
  const app = fixture.componentInstance;
  expect(app.title).toBe('app');
}));

¿Cómo leer el DOM con nativeElement y querySelector?

Para validar el contenido del H1 es necesario renderizar la plantilla con detectChanges y consultar el DOM.

it('should render title in a h1 tag', async(() => {
  const fixture = TestBed.createComponent(AppComponent);
  fixture.detectChanges();
  const compiled = fixture.nativeElement;
  expect(compiled.querySelector('h1').textContent)
    .toContain('Welcome to App');
}));

Así se confirma que el texto "Welcome to" más el title del componente se muestra dentro de un H1 tras el render.

¿Te surgen dudas o encontraste variaciones útiles? Comparte tus hallazgos y enlaces en los comentarios para enriquecer el aprendizaje colectivo.

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