Guía Completa sobre Pruebas Unitarias en Angular 16

Nahum Ramírez — Tue, 28 May 2024 03:50:49 +0000

Las pruebas unitarias son una parte esencial del desarrollo de software, ya que garantizan que cada componente de nuestra aplicación funcione correctamente. En este artículo, veremos cómo realizar pruebas unitarias en Angular 16, una de las versiones no tan recientes pero potentes de este popular framework.

¿Qué son las Pruebas Unitarias?

Son pruebas automáticas que validan el comportamiento de una unidad de código, como una función o un componente. Estas pruebas son fundamentales para asegurar que el código funcione según lo esperado y para facilitar el mantenimiento y la evolución de la aplicación.

Beneficios de las Pruebas Unitarias en Angular

Detección Temprana de Errores: Permiten identificar y corregir errores en etapas tempranas del desarrollo.
Facilitan el Refactorizado: Al tener una suite de pruebas, podemos refactorizar el código con confianza, sabiendo que cualquier cambio que rompa la funcionalidad será detectado.
Mejoran la Documentación: Las pruebas actúan como una documentación viva del comportamiento esperado de la aplicación.
Aumentan la Confianza en el Código: Desarrolladores y stakeholders pueden tener mayor confianza en la estabilidad y la calidad del código.

Configuración Inicial

Para empezar a trabajar con pruebas unitarias en Angular 16, necesitamos tener configurado nuestro entorno de desarrollo. Asumiremos que ya tienes Node.js y Angular CLI instalados.

1.- Crear un Nuevo Proyecto Angular:

ng new angular-testing
cd angular-testing

2.- Instalar Dependencias Necesarias:
Angular ya viene con Jasmine y Karma configurados para pruebas unitarias. Jasmine es el framework de pruebas y Karma es el ejecutor de pruebas.

Estructura de una Prueba Unitaria en Angular

Supongamos que tenemos un servicio simple llamado DataService:

// src/app/data.service.ts
import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class DataService {
  getData(): string {
    return 'Hello, Angular 16!';
  }
}

Crear la Prueba Unitaria

Vamos a crear una prueba unitaria para este servicio.

// src/app/data.service.spec.ts
import { TestBed } from '@angular/core/testing';
import { DataService } from './data.service';

describe('DataService', () => {
  let service: DataService;

  beforeEach(() => {
    TestBed.configureTestingModule({});
    service = TestBed.inject(DataService);
  });

  it('should be created', () => {
    expect(service).toBeTruthy();
  });

  it('should return "Hello, Angular 16!"', () => {
    const data = service.getData();
    expect(data).toBe('Hello, Angular 16!');
  });
});

Desglose de la Prueba

Configuración del Módulo de Pruebas: TestBed.configureTestingModule se usa para configurar y compilar el entorno de pruebas para el servicio.
Inyección del Servicio: TestBed.inject(DataService) se usa para obtener una instancia del servicio que queremos probar.
Expectativas: Utilizamos expect para verificar que el servicio se crea correctamente y que el método getData devuelve el valor esperado.

Pruebas Unitarias de Componentes

Vamos a crear un componente simple y escribir pruebas unitarias para él.

// src/app/hello.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-hello',
  template: '<h1>{{ title }}</h1>'
})
export class HelloComponent {
  title = 'Hello, Angular 16!';
}

Crear la Prueba Unitaria para el Componente

// src/app/hello.component.spec.ts
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { HelloComponent } from './hello.component';

describe('HelloComponent', () => {
  let component: HelloComponent;
  let fixture: ComponentFixture<HelloComponent>;

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

    fixture = TestBed.createComponent(HelloComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });

  it('should have title "Hello, Angular 16!"', () => {
    const compiled = fixture.nativeElement as HTMLElement;
    expect(compiled.querySelector('h1')?.textContent).toBe('Hello, Angular 16!');
  });
});

Desglose de la Prueba de Componente

Configuración del Módulo de Pruebas: Se declara el componente HelloComponent en el módulo de pruebas.
Creación del Componente: TestBed.createComponent se usa para crear una instancia del componente.
Detección de Cambios: fixture.detectChanges se llama para actualizar el DOM con los cambios del componente.
Expectativas: Verificamos que el componente se crea correctamente y que el título se renderiza como se espera.

Ejecutar las Pruebas

Para ejecutar las pruebas, simplemente corre el siguiente comando:

ng test

Este comando ejecutará Karma, que abrirá un navegador y ejecutará todas las pruebas unitarias, mostrando los resultados en tiempo real.

Conclusión

Las pruebas unitarias son una herramienta poderosa para mantener la calidad del código en proyectos Angular. Angular 16 proporciona un entorno robusto y fácil de usar para escribir y ejecutar estas pruebas. Al seguir buenas prácticas y realizar pruebas constantes, puedes asegurarte de que tu aplicación sea confiable y fácil de mantener.

Espero que esta guía te haya proporcionado una comprensión clara y útil sobre cómo implementar pruebas unitarias en Angular 16.

DEV Community: Nahum Ramírez