¿Cómo pruebas componentes y servicios en Angular?

Question

Accepted Answer

Angular incluye un conjunto de pruebas completo (Jasmine + Karma por defecto, aunque muchos equipos usan Jest). Proporciona **`TestBed`** para configurar un módulo de pruebas e instanciar componentes/servicios con sus dependencias — aprovechando la inyección de dependencias para inyectar mocks.

## Por qué es importante

```ts
describe("UserService", () => {
  let service: UserService;
  let httpMock: HttpTestingController;

beforeEach(() => {
    TestBed.configureTestingModule({
      imports: [HttpClientTestingModule], // mock HttpClient
      providers: [UserService],
    });
    service = TestBed.inject(UserService);
    httpMock = TestBed.inject(HttpTestingController);
  });

it("fetches users", () => {
    service.getUsers().subscribe(users => expect(users.length).toBe(2));
    const req = httpMock.expectOne("/api/users"); // assert the request was made
    req.flush([{ id: 1 }, { id: 2 }]);             // provide a fake response
  });
});
```

`HttpClientTestingModule` + `HttpTestingController` te permiten afirmar solicitudes y proporcionar respuestas falsas sin golpear un servidor real.

## Pruebas de un componente

```ts
describe("CounterComponent", () => {
  let fixture: ComponentFixture<CounterComponent>;
  let component: CounterComponent;

beforeEach(() => {
    TestBed.configureTestingModule({ imports: [CounterComponent] }); // standalone
    fixture = TestBed.createComponent(CounterComponent);
    component = fixture.componentInstance;
    fixture.detectChanges(); // trigger initial change detection
  });

it("increments on click", () => {
    const button = fixture.nativeElement.querySelector("button");
    button.click();
    fixture.detectChanges();                     // update the view
    expect(component.count).toBe(1);
    expect(button.textContent).toContain("1");   // assert the rendered DOM
  });
});
```

El `ComponentFixture` da acceso a la instancia del componente **y** su DOM renderizado; debes llamar a `fixture.detectChanges()` para ejecutar la detección de cambios después de las interacciones.

## Simulación de dependencias vía DI

```ts
TestBed.configureTestingModule({
  providers: [{ provide: AuthService, useValue: mockAuthService }], // inject a fake
});
```

La inyección de dependencias de Angular hace que la simulación sea trivial — proporciona una implementación falsa para cualquier dependencia.

## Pruebas asincrónicas

```ts
it("loads async", fakeAsync(() => {
  component.load();
  tick();                  // simulate passage of time / flush microtasks
  fixture.detectChanges();
  expect(component.data).toBeDefined();
}));
```

`fakeAsync`/`tick` (o `waitForAsync`) controlan el tiempo asincrónico de manera determinista.

## Niveles de prueba

```text
Unit:        services, pipes, isolated component logic (fast, most numerous)
Integration: component + template + child components via TestBed
E2E:         full user flows (Cypress, Playwright) — separate from unit tests
```

## Por qué es importante

Las pruebas son una preocupación de primera clase en Angular, y su arquitectura de inyección de dependencias la hace especialmente comprobable — inyectas mocks para cualquier dependencia.

Conocer `TestBed` (configurar + inyectar), `ComponentFixture` (instancia + DOM + `detectChanges`), `HttpClientTestingModule` para HTTP, y ayudantes asincronía (`fakeAsync`/`tick`) cubre la escritura de pruebas unitarias e integración confiables — esencial para las aplicaciones empresariales grandes y duraderas para las que está construido Angular.