Introducción
En el desarrollo de aplicaciones modernas, escribir código que funcione ya no es suficiente. También necesitamos que sea confiable, mantenible y fácil de escalar. En este contexto, las pruebas unitarias se convierten en una pieza clave del desarrollo frontend, especialmente cuando trabajamos con frameworks robustos como Angular.
Angular incluye desde el inicio herramientas que facilitan la creación y ejecución de pruebas unitarias, permitiendo validar el comportamiento de componentes, servicios y otras partes de la aplicación de forma automática.
¿Qué son las pruebas unitarias?
Las pruebas unitarias son tests que verifican el funcionamiento de una unidad mínima de código, como:
- Un método.
- Un componente.
- Un servicio.
- Un pipe.
El objetivo es comprobar que esa unidad se comporte correctamente de manera aislada, sin depender de otras partes del sistema.
¿Por qué usar pruebas unitarias en Angular?
Implementar pruebas unitarias en Angular trae múltiples beneficios:
- Detectan errores de forma temprana.
- Facilitan el mantenimiento del código.
- Permiten refactorizar con mayor seguridad.
- Mejoran la calidad y estabilidad de la aplicación.
- Aumentan la confianza del equipo al desplegar cambios.
En proyectos grandes o de larga duración, las pruebas unitarias dejan de ser opcionales y se vuelven imprescindibles.
Herramientas de testing en Angular
Angular utiliza principalmente dos herramientas:
Jasmine
Framework de testing que permite:
- Definir pruebas (describe, it).
- Crear expectativas (expect).
- Simular comportamientos (spies).
Karma
Ejecutor de pruebas que:
- Corre los tests en navegadores reales.
- Muestra los resultados en consola.
- Permite generar reportes de cobertura.
Estructura básica de una prueba unitaria
describe('CompromisoComponent', () => {
let component: CompromisoComponent;
let fixture: ComponentFixture;
beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [CompromisoComponent]
}).compileComponents();
fixture = TestBed.createComponent(CompromisoComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('debería crearse el componente', () => {
expect(component).toBeTruthy();
});
});
TestBed: el corazón del testing en Angular
TestBed es una utilidad que simula el módulo de Angular para pruebas. Permite declarar:
- Componentes.
- Servicios.
- Módulos.
- Proveedores (providers).
- Mocks.
Gracias a TestBed, podemos probar componentes sin necesidad de levantar toda la aplicación.
Pruebas de servicios
Los servicios suelen probarse de forma aislada, usando inyección de dependencias.
Ejemplo:
it('debería retornar datos', () => {
const service = TestBed.inject(ComunService);
expect(service).toBeTruthy();
});
Para servicios con HTTP, se recomienda usar HttpClientTestingModule y HttpTestingController.
Uso de mocks y spies
Para evitar dependencias reales (APIs, backend, etc.), se utilizan mocks y spies.
Ejemplo con Jasmine:
spyOn(alertService, 'success'); component.guardar(); expect(alertService.success).toHaveBeenCalled();
Esto permite verificar comportamientos sin ejecutar la lógica real.
Pruebas asíncronas
Angular maneja mucha lógica asíncrona. Para ello se usan herramientas como:
- fakeAsync.
- tick().
- async.
- waitForAsync.
Ejemplo:
it('debería cargar datos', fakeAsync(() => { component.cargar(); tick(); expect(component.data.length).toBeGreaterThan(0); }));
Cobertura de pruebas
Angular permite generar reportes de cobertura con:
ng test --code-coverage
Esto genera un reporte donde se visualiza:
-
Líneas cubiertas.
-
Funciones probadas.
-
Porcentaje total de cobertura.
Una buena práctica es mantener una cobertura mayor al 80%.
CONCLUSIÓN
Las pruebas unitarias en Angular no solo ayudan a encontrar errores, sino que mejoran la calidad del código y la confianza del desarrollador. Aunque al inicio pueden parecer una carga adicional, a largo plazo ahorran tiempo, reducen errores y facilitan la evolución del proyecto.
- Debes estar logueado para realizar comentarios