Configuración de testing por default

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.