Integración de Unit Test con Servicios

Aprende a inyectar un servicio en Angular y a probarlo con unit testing paso a paso. Verás cómo usar Angular CLI, el decorador Injectable, la sección providers del componente y la obtención del servicio en pruebas con fixture.debugElement.injector.get. Todo para asegurar que el componente y el servicio mantienen datos consistentes.

¿Cómo se crea e inyecta un servicio en Angular?

Crear y usar un servicio dedicado mejora la organización y reutilización del código. Aquí se define un arreglo de lugares con id y name, y un método para exponerlos.

¿Cómo definir el servicio con injectable y get places?

• Decorar con @Injectable para habilitar la inyección de dependencias.
• Exportar la clase PlacesService.
• Declarar un array de lugares con id y name.
• Exponer un método getPlaces que hace return del arreglo.

import { Injectable } from '@angular/core';

@Injectable()
export class PlacesService {
  places = [
    { id: 1, name: '...' },
    { id: 2, name: '...' },
  ];

  getPlaces() {
    return this.places;
  }
}

¿Cómo inyectarlo con providers en el componente?

• Declarar el servicio en providers del componente para uso exclusivo del componente.
• Inyectar en el constructor con una propiedad private placesService: PlacesService.
• Evitar agregarlo en app.module.ts cuando solo se usa en este componente.

@Component({
  selector: 'app-place',
  providers: [PlacesService],
  template: '...'
})
export class PlaceComponent {
  places = [];

  constructor(private placesService: PlacesService) {
    this.places = this.placesService.getPlaces();
  }
}

¿Cómo se prueba el servicio desde el componente con unit testing?

La meta es validar que el componente expone los mismos datos que el servicio. Se crea un test: “should have the same places as the service”.

¿Cómo obtener el servicio en el test con fixture.debugElement.injector.get?

• Crear el fixture del componente.
• Obtener la instancia del servicio con fixture.debugElement.injector.get.
• Reutilizar las primeras líneas de configuración del test anterior.

it('should have the same places as the service', () => {
  const fixture = TestBed.createComponent(PlaceComponent);
  const app = fixture.componentInstance;

  const placeService = fixture.debugElement.injector.get(PlacesService);
  // comparación abajo
});

¿Cómo hacer la aserción con expect y toEqual?

• Usar expect para comparar referencias de datos.
• Validar que app.places y placeService.places sean iguales con toEqual.

expect(app.places).toEqual(placeService.places);

¿Qué ajustes en el componente hacen pasar el test?

• Declarar el array places en el componente: places = [].
• Asignar en el constructor: this.places = this.placesService.getPlaces().
• Corregir typos en expect si aparecen.
• Confirmar que providers incluye el servicio para que no falle la inyección.

¿Qué comandos y próximos pasos consolidan el aprendizaje?

Asegura la ejecución correcta de las pruebas y sigue las recomendaciones didácticas.

¿Cómo ejecutar ng test y revisar en localhost 9877?

• Correr ng test para lanzar Karma y el navegador.
• Si no abre, ingresar a localhost:9877 manualmente.
• Verificar que pasan los tests del AppComponent generado por Angular 4 y los del PlaceComponent.

¿Qué tareas sugiere el instructor para practicar?

• Implementar al menos cinco unit tests en la app de Plazy Square.
• Revisar el recurso oficial de Angular testing para profundizar.
• Compartir los resultados con la comunidad.
• Prepararse para el siguiente módulo: RxJS.

¿Tienes dudas, ideas de casos de prueba o quieres mostrar tus resultados? Compártelos en comentarios y sigamos mejorando juntos.