Creando unit tests para componentes

Crear un test de componente en Angular es más simple de lo que parece. Con Angular CLI, TestBed y un test básico con expect, puedes verificar que tu componente exista y se inicialice correctamente. Aquí verás el flujo esencial para generar el componente, configurar el entorno de pruebas y ejecutar el spec.

¿Cómo generar un componente con Angular CLI?

Antes de escribir el test, conviene crear el componente con la utilidad de línea de comandos. Esto agiliza el trabajo y prepara la estructura de archivos necesaria.

• Ejecuta el comando para generar el componente.

ng g c place

• Se crean archivos: CSS, HTML, .ts y el spec.ts del componente.
• Puedes limpiar el spec.ts eliminando los tests iniciales para empezar desde cero.

Este enfoque aprovecha la Angular CLI para producir un PlaceComponent y su prueba asociada. Así mantienes orden y consistencia desde el inicio.

¿Cómo configurar el entorno de pruebas con TestBed?

La base de la prueba de un componente en Angular está en TestBed. Se configura el módulo de testing y se declaran los componentes que participarán, igual que en el app module con sus declarations.

• Usa beforeEach para preparar el entorno antes de cada test.
• Declara el PlaceComponent dentro de declarations en configureTestingModule.
• Cierra la configuración y deja listo el ambiente de ejecución.

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

Punto clave: las declarations en este módulo de pruebas equivalen a las de tu app module. Esto asegura que el componente exista en el contexto correcto.

¿Cómo escribir y ejecutar un test básico de componente?

La verificación inicial es comprobar que el componente se crea. Para esto se obtiene un fixture, se accede a la componentInstance y se evalúa con expect que sea truthy.

• Crea el fixture con TestBed.createComponent.
• Obtén la instancia con fixture.debugElement.componentInstance.
• Valida con expect(app).toBeTruthy().

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

Para ejecutar las pruebas:

ng test

• Se abre un navegador y verás los resultados de los specs.
• El test del PlaceComponent debe pasar si la instancia existe.
• También se ejecutan los tests del AppComponent generados previamente.

Este flujo refuerza habilidades clave: uso de Angular CLI para scaffolding, configuración de TestBed con declarations, manejo de fixture y debugElement, y aserciones con expect y toBeTruthy.

¿Te gustaría que el siguiente paso sea inyectar un servicio en la prueba y validarlo? Cuéntame en los comentarios qué servicio probarías primero y por qué.