Cómo probar solicitudes HttpClient en Angular

Introducción

Angular HttpClienttiene un módulo de prueba, HttpClientTestingModule, que le permite realizar pruebas unitarias de solicitudes HTTP.

Nota: Dado que HttpClientsolo está disponible a partir de Angular 4.3, lo siguiente se aplica a Angular 4.3 y versiones posteriores. Consulta esta introducción si no tienes experiencia con las pruebas unitarias en Angular.

En este artículo, aprenderá a configurar pruebas unitarias para una solicitud HTTP GET mediante HttpClientTestingModule. Esto le ayudará a demostrar las capacidades del módulo de pruebas.

Prerrequisitos

Para completar este tutorial, necesitarás:

• Node.js instalado localmente, lo cual puedes hacer siguiendo Cómo instalar Node.js y crear un entorno de desarrollo local .
• Algunos conocimientos sobre la configuración de un proyecto Angular .

Este tutorial fue verificado con Node v16.2.0, npmv7.15.1 y @angular/corev12.0.4.

Paso 1: Configuración del proyecto

Para esta publicación, trabajaremos con un servicio que obtiene datos de un punto final y un componente que llama a ese servicio para completar una lista de usuarios en el OnInitenlace del componente.

Puedes utilizar @angular/clipara crear un nuevo proyecto:

ng new angular-httpclienttest-example

Luego, navegue hasta el directorio del proyecto recién creado:

cd angular-httpclienttest-example

Crear un data.service.ts:

ng generate service data

Y que se comunique con el marcador de posición JSON:

src/app/data.service.ts

import { Injectable } from '@angular/core';import { HttpClient, HttpRequest } from '@angular/common/http';@Injectable({ ... })export class DataService {  url = 'https://jsonplaceholder.typicode.com/users';  constructor(private http: HttpClient) { }  getData() {    const req = new HttpRequest('GET', this.url, {      reportProgress: true    });    return this.http.request(req);  }}

Luego, modifica el app.component.tsarchivo:

src/app.componente.ts

import { Component, OnInit } from '@angular/core';import { HttpEvent, HttpEventType } from '@angular/common/http';import { DataService } from './data.service';@Component({ ... })export class AppComponent implements OnInit {  users: any;    constructor(private dataService: DataService) {}    ngOnInit() {    this.populateUsers();  }  private populateUsers() {    this.dataService.getData().subscribe((event: HttpEventany) = {      switch (event.type) {        case HttpEventType.Sent:          console.log('Request sent!');          break;        case HttpEventType.ResponseHeader:          console.log('Response header received!');          break;        case HttpEventType.DownloadProgress:          const kbLoaded = Math.round(event.loaded / 1024);          console.log(`Download in progress! ${kbLoaded}Kb loaded`);          break;        case HttpEventType.Response:          console.log('Done!', event.body);          this.users = event.body;      }    });  }}

Y añade el HttpClientmodulea app.module.ts:

src/app.module.ts

import { NgModule } from '@angular/core';import { BrowserModule } from '@angular/platform-browser';import { HttpClientModule } from '@angular/common/http';import { AppComponent } from './app.component';@NgModule({  declarations: [    AppComponent  ],  imports: [    BrowserModule,    HttpClientModule  ],  providers: [],  bootstrap: [AppComponent]})export class AppModule { }

En este punto, tendrás un proyecto Angular con un servicio y un cliente.

Paso 2: Agregar pruebas

Ahora configuraremos un archivo de especificaciones para nuestro servicio de datos e incluiremos las utilidades necesarias para probar las HttpClientsolicitudes. Además de HttpClientTestingModule, también necesitaremos HttpTestingController, lo que facilita la simulación de solicitudes:

datos.servicio.spec.ts

import { TestBed, inject } from '@angular/core/testing';import { HttpEvent, HttpEventType } from '@angular/common/http';import {  HttpClientTestingModule,  HttpTestingController} from '@angular/common/http/testing';import { DataService } from './data.service';describe('DataService', () = {  let service: DataService;  beforeEach(() = {    TestBed.configureTestingModule({}      imports: [HttpclientTestingModule],      providers: [DataService]    );    service = TestBed.inject(DataService);  });});

Usamos la injectutilidad para inyectar los servicios necesarios en nuestra prueba.

Con esto en su lugar, podemos agregar nuestra lógica de prueba:

datos.servicio.spec.ts

import { TestBed, inject } from '@angular/core/testing';import { HttpEvent, HttpEventType } from '@angular/common/http';import {  HttpClientTestingModule,  HttpTestingController} from '@angular/common/http/testing';import { DataService } from './data.service';describe('DataService', () = {  beforeEach(() = {    TestBed.configureTestingModule({      imports: [HttpClientTestingModule],      providers: [DataService]    });  });  it(    'should get users',    inject(      [HttpTestingController, DataService],      (httpMock: HttpTestingController, dataService: DataService) = {        const mockUsers = [          { name: 'Alice', website: 'example.com' },          { name: 'Bob', website: 'example.org' }        ];        dataService.getData().subscribe((event: HttpEventany) = {          switch (event.type) {            case HttpEventType.Response:              expect(event.body).toEqual(mockUsers);          }        });        const mockReq = httpMock.expectOne(dataService.url);        expect(mockReq.cancelled).toBeFalsy();        expect(mockReq.request.responseType).toEqual('json');        mockReq.flush(mockUsers);        httpMock.verify();      }    )  );});

Están sucediendo muchas cosas, así que vamos a desglosarlo:

• Primero definimos un par de usuarios simulados con los que realizaremos pruebas.
• Luego llamamos al getDatamétodo en el servicio que estamos probando y nos suscribimos al observable devuelto.
• Si HttpEventTypees de tipo Response, afirmamos que el evento de respuesta tenga un cuerpo igual a nuestros usuarios simulados.
• Luego, utilizamos HttpTestingController(inyectado en la prueba como httpMock) para afirmar que se realizó una solicitud a la urlpropiedad del servicio. Si no se espera ninguna solicitud, expectNonetambién se puede utilizar el método.
• Ahora podemos hacer cualquier cantidad de afirmaciones sobre la solicitud simulada. Aquí afirmamos que la solicitud no se ha cancelado y que la respuesta es del tipo json. Además, podríamos afirmar el método de la solicitud ( GET, POST, …)
• A continuación, invocamos flushla solicitud simulada y pasamos nuestros usuarios simulados. El flushmétodo completa la solicitud utilizando los datos que se le pasan.
• Por último, llamamos al verifymétodo en nuestra HttpTestingControllerinstancia para asegurarnos de que no haya solicitudes pendientes por realizar.

Para los fines de este tutorial, puedes comentar app.component.spec.ts.

Vea el resultado de su prueba ejecutando el siguiente comando:

ng test

Abra los resultados de la prueba en el navegador:

Output1 spec, 0 failures, randomized with seed 26321DataServiceshould get users

Mostrará un mensaje de prueba exitosa.

Conclusión

En este artículo, aprendió cómo configurar pruebas unitarias para una solicitud HTTP GET utilizando HttpClientTestingModule.

Si desea obtener más información sobre Angular, consulte nuestra página de temas de Angular para ver ejercicios y proyectos de programación.