如何使用角度 9 中的参数测试 http.post 请求？答案

【问题标题】：How to test http.post request with parameters in angular 9?如何使用角度 9 中的参数测试 http.post 请求？
【发布时间】：2021-02-21 04:05:50
【问题描述】：

我是 Angular 的新手我有一个使用一些参数调用 HTTP 发布请求的服务。现在我想以角度测试该服务功能。

我的服务部分是

import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Injectable } from '@angular/core';

@Injectable({
providedIn: 'root'
})
export class GetProviderService{
      providersData: any;
      constructor(private http: HttpClient) {
       }

getProviders(param: any): any{
   var json = JSON.stringify(param);
const myHeader = new HttpHeaders().set('content-type','application/json');
this.http.post<any>(url, json, {headers: myHeader}).subsribe(data=> {
   this.providerData = data;
   return this.providerData;
   }),
   (erorr) => {
     window.alert("error");
     return null;
   }
}

现在我想介绍带有错误订阅和错误的 getProviders 函数。我该怎么做？

提前谢谢你。

【问题讨论】：

你需要模拟http
@Smutje 如何模拟 http？任何参考或文件？
codecraft.tv/courses/angular/unit-testing/mocks-and-spies

标签： angular code-coverage angular9 angular-unit-test

【解决方案1】：

假设您从某个地方获取 url（例如：getProviders(param: any, url: string) 是测试套件的示例：

import { TestBed  } from '@angular/core/testing';
import { HttpClientTestingModule, HttpTestingController  } from '@angular/common/http/testing';
import { GetProviderService } from './get-provider.service';

describe('GetProviderService', () => {
  let service: GetProviderService;
  let httpMock: HttpTestingController;

  beforeEach(() => {
    TestBed.configureTestingModule({
      imports: [
        HttpClientTestingModule
      ]
    });
    service = TestBed.inject(GetProviderService);
    httpMock = TestBed.inject(HttpTestingController);
  });

  fit('should log success on success', () => {
    const mockUrl = 'http://mockurl.com/test';
    const mockResponse = {hello: 'test'}
    service.getProviders({}, mockUrl);
    httpMock.expectOne(mockUrl).flush(mockResponse);
    // your expects here
  });

  fit('should log error on error', () => {
    const mockUrl = 'http://mockurl.com/test';
    const mockErrorMsg = 'My mock error message'
    const mockError = new ErrorEvent('Network error', {
      message: mockErrorMsg,
    });
    service.getProviders({}, mockUrl);
    httpMock.expectOne(mockUrl).error(mockError);
    // your expects here
  });
});

这里是相关的角度文档： https://angular.io/guide/http#testing-http-requests

这是http指南的一部分，而不是测试指南，可能这就是你没有找到它的原因。

【讨论】：