Angular Academy · Lección

Simular servicios y dependencias

Proporcionar dobles de prueba mediante DI

Simular servicios y dependencias es una lección gratuita de Angular Academy en CoddyKit. Esta es la lección 3 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Angular Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Angular Academy incluye 4 lecciones en total.

Por qué simular dependencias

Una prueba de componentes debe aislar el componente. Si inyecta un servicio basado en HttpClient, no querrá realizar llamadas de red reales. En su lugar, proporcione un sustituto de prueba: un objeto falso que devuelva datos controlados para que las pruebas sean rápidas y deterministas.

Proporcionar un objeto falso mediante useValue

El sustituto más sencillo es un objeto normal proporcionado mediante useValue. Proporciónelo con el mismo token de inyección que solicita el componente.

const fakeApi = { getUser: () => of({ name: 'Ada' }) };
TestBed.configureTestingModule({
  imports: [ProfileComponent],
  providers: [{ provide: UserApi, useValue: fakeApi }],
});

Espías de Jasmine

jasmine.createSpyObj crea un objeto falso con métodos espía, lo que permite establecer valores de retorno y comprobar las llamadas.

const apiSpy = jasmine.createSpyObj<UserApi>('UserApi', ['getUser']);
apiSpy.getUser.and.returnValue(of({ name: 'Ada' }));
TestBed.configureTestingModule({
  providers: [{ provide: UserApi, useValue: apiSpy }],
});

Comprobar que se llamó al servicio

Después de interactuar con el componente, compruebe que el espía recibió los argumentos esperados.

fixture.componentInstance.load(7);
fixture.detectChanges();
expect(apiSpy.getUser).toHaveBeenCalledWith(7);
expect(apiSpy.getUser).toHaveBeenCalledTimes(1);

Devolver Observables desde simulaciones

Los servicios suelen devolver Observables. Utilice of() de RxJS para los casos correctos síncronos y throwError() para los errores, de modo que pueda probar ambas ramas.

import { of, throwError } from 'rxjs';

apiSpy.getUser.and.returnValue(of({ name: 'Ada' }));     // success
apiSpy.getUser.and.returnValue(throwError(() => new Error('boom'))); // error

useClass para objetos falsos reutilizables

Cuando un objeto falso se reutiliza en muchas especificaciones, defina una clase y conéctela mediante useClass.

class FakeUserApi {
  getUser() { return of({ name: 'Test' }); }
}
TestBed.configureTestingModule({
  providers: [{ provide: UserApi, useClass: FakeUserApi }],
});

Simular HttpClient con HttpTestingController

Para probar servicios que realizan llamadas HTTP sin simular todo el servicio, importe provideHttpClientTesting() y vacíe las solicitudes mediante HttpTestingController.

import { provideHttpClient } from '@angular/common/http';
import { provideHttpClientTesting, HttpTestingController } from '@angular/common/http/testing';

TestBed.configureTestingModule({
  providers: [provideHttpClient(), provideHttpClientTesting()],
});

Vaciar una solicitud HTTP

Espere una solicitud, respóndala con datos simulados y, después, compruebe que no queden llamadas inesperadas.

const http = TestBed.inject(HttpTestingController);
service.load();
const req = http.expectOne('/api/users/7');
expect(req.request.method).toBe('GET');
req.flush({ name: 'Ada' });
http.verify();

Sobrescribir un proveedor por especificación

A veces una prueba necesita un simulacro diferente. Use TestBed.overrideProvider() antes de createComponent.

TestBed.overrideProvider(UserApi, {
  useValue: { getUser: () => throwError(() => new Error('fail')) },
});
const fixture = TestBed.createComponent(ProfileComponent);

Simular solo lo necesario

Un buen doble implementa únicamente los métodos que el componente utiliza realmente. Simular en exceso acopla la prueba a los detalles internos; simular por defecto permite que se filtren efectos secundarios reales. Ajústese al contrato público del que depende el componente.

Crear espías de métodos de servicios reales

También puede conservar un servicio real y crear un espía de uno de sus métodos mediante spyOn(instance, 'method'), lo que resulta útil cuando la mayor parte del servicio no causa problemas, pero es necesario interceptar una llamada.

const svc = TestBed.inject(AnalyticsService);
spyOn(svc, 'track');
fixture.componentInstance.onClick();
expect(svc.track).toHaveBeenCalledWith('click');

Comprobación rápida

¿Cómo consigue que un objeto simulado compruebe las llamadas Y controle los valores devueltos?

Resumen

Reemplazó las dependencias reales por dobles mediante useValue, useClass y los espías de Jasmine; devolvió Observables con of/throwError; probó HTTP mediante HttpTestingController; y sobrescribió proveedores por especificación. Simule únicamente el contrato que utiliza el componente.

Preguntas frecuentes

¿La lección «Simular servicios y dependencias» es gratis?

Sí — el texto completo de «Simular servicios y dependencias» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Angular Academy, actualiza a CoddyKit PRO. El curso de Angular Academy incluye 4 lecciones en total.

¿Qué aprenderé en «Simular servicios y dependencias»?

Proporcionar dobles de prueba mediante DI Practicas Angular Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.

¿Necesito experiencia previa para empezar Angular Academy?

No se requiere experiencia previa. Angular Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 3 de 4.

¿Cuánto tiempo toma la lección «Simular servicios y dependencias»?

La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.

¿Puedo escribir y ejecutar código en esta lección de Angular Academy?

Sí. Cada lección de Angular Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.

Todas las lecciones de este curso

← Volver a Angular Academy