Integración de Unit Test con Servicios

Contenido del curso

Inicio del curso

1
Angular 4: configuración a despliegue profesional
02:13 min

Introducción a Angular 4

Setup del Ambiente de Trabajo

Conceptos Básicos

Directivas

Angular UI

Ruteo

Servicios

Conexión Remota (Http y Sockets)

Pipes

Animaciones en Angular

Testing en Angular

Autenticación y Protección de Rutas

RxJS

Publicando nuestro proyecto

72
Publicando en Firebase Hosting
07:39 min

Fin del curso

73
Conclusión ¿Qué aprendimos en el curso?
01:20 min
74
Reto final del curso - realiza un nuevo modulo de PlatziSquare de acuerdo con las historias de usuario
01:25 min

Sesiones en vivo

Contenido Bonus

80
Actualización de angular, versión 6.0
04:25 min

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:007:18

Integración de Unit Test con Servicios

Curso de Angular 4

Clase 58 de 80

Clase 58 / 80

Recursos

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.

Resumen

¿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.

Comentarios (6)6 comentarios

Pablo José

Hace 9 años

Hola Eduardo, estuvo excelente el curso.
Solo quería compartir la pantalla de cómo queda finalmente el test, ya que no vi en el video cuando se importó el servicio “PlacesService” en providers -> providers: [PlacesService]

Saludos!

Mauro Gomez

no viste con cuidado, https://platzi.com/clases/angular/concepto/testing-en-angular/integracion-de-unit-test-con-servicios/material/?time=155

Diego Burlando

Creamos el Servicio

importamos el @Injectable()
Exportamos la class PlacesServices
Creamos los valores de los places en un Array
Creamos el método que regrese los Places

Vamos al archivo del componente

Declaramos places = []; dentro de el componente fuera del constructor
Llamamos al método que retorna los places.
Declaramos la variable privada en el constructor placesService:PlacesService
Importamos la clase PlacesServices
Exportamos el servicio de manera individual al componente con la propiedad providers

Vamos a component.spec

Agregamos un nuevo test con un nuevo servicio llamado placeService = fixture.debugElement.injector.get(PlacesService);
Hacemos la evaluación expect(app.places).toEqual(planService.places)

Y probamos…

Efraín Girón Romero

Hace 7 años

Nos ayuda a probar nuestra app de una manera programática, para evitar que al modificar algo falle otra cosa.

Esto mejora la manera de diseñar un sistema.

Tipos de test Isolados o unit test • Son aquellos que no dependen de ningún otro test o estado de nuestra aplicación, estos son de mucha ayuda ya que te dan mejores resultados por que prueban unidades especificas por si solas. No isolados • Son un poco mas funcionales donde hay un proceso como un conjunto de test en secuencia.

El archivo de configuración para los test es el archivo app.component.spec.ts

Los unit test tienen la siguiente estructura:

describe('AppComponent', () => { //Cuerpo del unit test });

AppComponent se refiere a lo que estamos probando, que en este caso seria ese componente, pero podría cambiarse por otra cosa.

Después dentro de la función anónima que es el segundo parámetro de la prueba se pone el cuerpo de la misma.

Antes de cada uno de los test se puede correr una función que nos sirva para configurar el ambiente con el que iniciara el unit test:

describe('AppComponent', () => { beforeEach(async(() => { Aquí deben ir las funciones; })); });

Por ejemplo: Podemos usar TestBed que es un modulo que nos probé de funciones que pueden ayudarnos con los test.

describe('AppComponent', () => { beforeEach(async(() => { TestBed.configureTestingModule({ declarations: [ AppComponent ], }).compileComponents(); })); });

En este caso usamos la función configureTestingModule para crear un modulo en el que podamos correr el componente, ya que no se puede usar un componente que no es parte de un modulo, por lo que por parámetro le mandamos la declaración del componente que vamos a utilizar, y luego compilamos los componentes del modulo.

Después tenemos la estructura de los test:

it('should create the app', () => { });

El test se define de esta manera con 2 parámetros que son la descripción del mismo y su cuerpo.

it('should create the app', () => { const fixture = TestBed.createComponent(AppComponent); const app = fixture.debugElement.componentInstance; expect(app).toBeTruthy(); });

En este caso se revisara si el componente es creado. Por lo que usaremos el método de TestBed para crear el componente luego asignamos a la constante app el componente completo y evaluamos si existe dicho componente.

También se podría cambiar el cambiar la evaluación para que el test verifique otra cosa, por ejemplo:

it(should have as title 'platzi-test', () => { const fixture = TestBed.createComponent(AppComponent); const app = fixture.debugElement.componentInstance; expect(app.title).toEqual('platzi-test'); });

Que el componente tenga un titulo igual al del texto que se envía como parámetro.

it('should render title in a h1 tag', () => { const fixture = TestBed.createComponent(AppComponent); fixture.detectChanges(); const compiled = fixture.debugElement.nativeElement; expect(compiled.querySelector('h1').textContent).toContain('Welcome to platzi-test!'); });

Esto evalúa que el h1 en el componente contenga el texto del parámetro, se usa la función detectChanges(); para tomar el html ya que este debe ser renderizado primero, luego se toma el elemento nativo en compiled y ya con el se puede seleccionar un elemento para evaluarlo

El comando que se usa para correr los test es: ng test

Cuando se complete el proceso se abrirá el navegador con la pagina correspondiente se debe cambiar localhost por 192.127.0.1

Para traer un servicio en un test hacemos lo siguiente:

const nombreServicio = fixture.debugElement.injector.get(NombreServicio);

Y la constante tendrá el servicio que hemos traído.

Carlos Uriel de Jesus Sánchez González

Hace 8 años

Muy buen ejemplo

Diego Vallejo

ng g s place/place

Benjamin Castillo Eguez

Genial! todo se entiende perfectamente.

Inicio del curso

Angular 4: configuración a despliegue profesional

Introducción a Angular 4

Versionamiento en Angular

Qué es Angular 4 y el salto de versiones

Typescript: qué es

Cómo monetizar una app directorio comercial

Setup del Ambiente de Trabajo

Herramientas de trabajo y Angular CLI

Generación y estructura de Angular 4

RETO: Haz un cambio simple en el proyecto.

Conceptos Básicos

Para qué nos sirven los Módulos y Componentes

Tipos de Data Binding y String Interpolation

Property Binding

Event Binding

ngModel y two way binding en Angular

Directivas en Angular 4 y ngFor

Cómo usar ngIf en Angular 4.0

Instalando librerías con NPM (Google Maps)

Directivas

ngStyle y ngClass en Angular: estilos condicionales

Directiva ngSwitch

Cómo crear directivas de atributo en Angular

Host Listeners

HostBinding en Angular: controla estilos desde directivas

Angular UI

Angular Material y Bootstrap

Configurando e implementando Bootstrap en nuestro proyecto

Ruteo

Qué hace el router en Angular 4

Implementación de Rutas en el Proyecto

Href vs router link: navegación angular

Resaltando el link activo con CSS para indicar visualmente en que componente nos encontramos

Parámetros de ruta con routerLink en Angular

Parámetros tipo Query

Creando una vista de detalle para el proyecto

Página de contacto Angular desde cero

Servicios

Servicios en Angular para compartir datos

Creando nuestro propio servicio

Configurando Firebase en nuestro proyecto

Guardando Records en Firebase

Obteniendo records desde Firebase

Obteniendo coordenadas usando Geocoding

Reto: Crear una vista para editar records

Mostrando marcadores en el Mapa de Google

Conexión Remota (Http y Sockets)

Funcionamiento de los llamados Http y Sockets

Qué es una arquitectura cliente - servidor

Enviando llamados tipo POST

Enviando llamados tipo GET

Formateando respuestas del servidor con el operador map()

Manejando errores HTTP

Pipes

Utilidad de los Pipes en Angular 4

Usando los pipes por defecto de Angular

Parámetros en pipes

Creando nuestro propio pipe

Animaciones en Angular

Configurando animaciones en nuestro proyecto

Transiciones

Callbacks

Solución al Reto: Añadiendo animaciones a nuestra aplicación

Testing en Angular

Introducción a unit tests

Configuración de testing por default

Corriendo los tests

Creando unit tests para componentes

Integración de Unit Test con Servicios

Autenticación y Protección de Rutas

Cómo funcionan los JSON Web Tokens

Preparación de vistas para login y registro

Registrando usuarios

Loggeando usuarios

Guardias canActivate en Angular: Proteger rutas con autenticación

Cómo integrar Facebook login con Firebase

Logout en Angular con Firebase

RxJS

Cómo funciona RxJS con metáfora de oficina