Testing en Angular

Este curso está dirigido a desarrolladores Angular con experiencia básica en el framework que necesitan incorporar una práctica de testing sistemática a su flujo de trabajo.

Cubre la configuración del entorno de testing con Angular CLI, la estructura de pruebas con Jasmine, el uso de TestBed para aislar componentes y servicios, los patrones de tests para Input/Output, DOM binding y renderización condicional, el uso de SPY para interceptar dependencias en tests de servicios, la depuración de suites fallidas y el análisis del informe de cobertura.

Al finalizar, el participante será capaz de escribir, organizar y mantener una suite de tests que cubra componentes y servicios con un mínimo del 80% de cobertura en el archivo objetivo.

Al finalizar el curso, el participante será capaz de:

• Diseñar tests de componente sin dependencias en Angular usando TestBed, verificando la creación del componente, su renderización inicial y el estado tras detectChanges.
• Integrar tests de Input/Output en un componente Angular, comprobando que los valores de @Input se reflejan en el DOM y que los eventos @Output se emiten con el payload esperado.
• Diseñar tests del DOM de un componente que validen renderización condicional, binding de propiedades y respuesta a eventos de usuario mediante queries del fixture.
• Diseñar tests de componente con dependencias de servicio usando mocks o stubs en TestBed, aislando el componente bajo prueba de la implementación real del servicio.
• Integrar tests de servicios usando SPY para interceptar dependencias, verificando que el servicio bajo prueba invoca sus dependencias con los argumentos esperados y maneja correctamente los valores retornados.
• Depurar una suite de tests fallidos en Angular identificando la causa raíz del fallo —configuración de TestBed incorrecta, spy mal definido o async no gestionado— y aplicando la corrección hasta que la suite pasa.
• Adaptar la cobertura de una suite de tests analizando el informe de coverage generado por ng test --code-coverage, identificando líneas no cubiertas e incorporando los casos de prueba necesarios para alcanzar un mínimo del 80% en el archivo objetivo.

1. Entorno y base de testing en Angular

Configuración del entorno con Angular CLI 17+; archivos de test generados al crear componentes y servicios; estructura de directorios típica; introducción a Jasmine: describe, it, expect y matchers básicos; beforeEach y afterEach; tests síncronos y asíncronos con fakeAsync/tick y async/await; tipos de pruebas en Angular: unitarias, de integración y E2E; beneficios del testing y relación con TDD y BDD.

2. Tests de componentes sin dependencias

Configuración de TestBed.configureTestingModule para un componente standalone; creación del fixture y acceso a la instancia; ciclo detectChanges y cuándo es obligatorio; assertions sobre propiedades del componente; errores frecuentes al configurar el módulo de test y cómo diagnosticarlos.

3. Tests de componentes con dependencias y DOM

Binding de @Input: asignar valores y verificar su reflejo en el DOM; @Output y EventEmitter: suscribirse al evento y verificar el payload emitido; queries del fixture: DebugElement, nativeElement, By.css; renderización condicional con @if y ngIf; simulación de eventos de usuario —click, input—; inyección de dependencias de servicio con mocks y stubs en TestBed; diferencia entre mock, stub y spy.

4. Tests de servicios con SPY

Tests de servicios sin dependencias externas; inyección del servicio vía TestBed.inject; uso de spyOn para interceptar métodos de dependencias; configuración de returnValue, callFake y callThrough; verificación de que el servicio llama a sus dependencias con los argumentos correctos; tests de servicios que consumen otros servicios encadenados.

5. Depuración y cobertura

Lectura e interpretación de errores de Jasmine: NullInjectorError, fixture no actualizado, spy no configurado, operación async sin resolver; estrategia de depuración: aislar el test fallido con fdescribe/fit, revisar el stack trace y verificar la configuración del módulo; generación del informe de coverage con ng test --code-coverage; lectura del informe HTML: statements, branches, functions y lines; identificación de líneas no cubiertas y diseño de casos de prueba para alcanzar el umbral del 80%.

• Node.js LTS, v20 o v22, instalado desde nodejs.org.
• Angular CLI 17 o superior instalado globalmente: npm install -g @angular/cli.
• Visual Studio Code con la extensión Angular Language Service.

Se requiere experiencia práctica en TypeScript intermedio —tipos, clases, decoradores, async/await— y Angular fundamentals: componentes, servicios, inyección de dependencias y ciclo de vida.

Es necesario conocer la Angular CLI y haber creado y ejecutado al menos un proyecto Angular. No es necesario tener experiencia previa en testing.