Angular 5 - 在 Jasmine / Karma 测试中使用 HTTP 拦截器作为模拟 HTTP 请求答案

【问题标题】：Angular 5 - Using HTTP Interceptors as mock HTTP requests in Jasmine / Karma testsAngular 5 - 在 Jasmine / Karma 测试中使用 HTTP 拦截器作为模拟 HTTP 请求
【发布时间】：2020-05-18 03:07:01
【问题描述】：

在使用 Jasmine 和 Karma 为使用 Angular 编写的组件编写的用例测试中，您可以使用 HTTP 拦截器作为模拟 HTTP 请求和响应吗？如果是，使用拦截器的一个例子是什么？

【问题讨论】：

标签： angular mocking httprequest karma-jasmine angular-http-interceptors

【解决方案1】：

不需要使用HTTPInterceptors，如果你只想使用mocked HTTP请求，你可以简单地使用mocked Services。假设您有一个像这样的简单 data.service.ts：

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

@Injectable()
export class DataService {

    constructor(private http: HttpClient) {

    }

    getData(): Observable<Data[]> {
      return this.http.get<Data[]>(url);
    }
}

您可以在名为 mockData.service.ts 的文件中模拟您的：

import { Injectable } from '@angular/core';
import 'rxjs/add/observable/of';
import { Observable } from 'rxjs/Observable';

@Injectable()
export class MockDataService {
// Your data goes either here or import it via an external file
data: Data[] = [
...
];
constructor() {

}

// Use the same name for the method here
getData(): Observable<Data[]> {
  return Obersvable.of(this.data);
}

在您的测试文件 component.spec.ts 中，您只需在 TestBed.configureTestingModule 中使用像这样的模拟数据服务：

providers: [
            {
                provide: DataService,
                useClass: MockDataService
            }
]

只需定义在您正在测试的组件中使用的所有 http 方法并提供相应的数据。

希望这会有所帮助！

【讨论】：

我的任务目前不涉及使用服务，但基本上我想模拟一个 500 Internal Server Error 对我正在发出的一些实际 HTTP 请求的响应。不确定这是如何发挥作用的。
抱歉我误会了你。您是否已经检查了 documentation 的 Http 拦截器？到目前为止，您尝试过什么？
我实际上做了其他事情。从发布new StackOverflow question 开始，我使用了 HttpClient。我没有阅读有关 Http 拦截器的文档，但我将这个问题留给其他人投票。

【解决方案2】：

我已经实现如下 1. 在服务中定义一个变量来表示模拟响应，例如 isMockResponse = true。 2. 我创建了一个配置文件，其中包含 URL 与响应 JSON 文件的映射。像这样

{ POST : { "/login": { responseFile: loginResponse.json}}}

我将 responseFile 保存在资产文件夹下，并确保在生产版本中应排除响应文件文件夹。（您可以在 angular.json 文件中定义它） 3. 在 assets/offline/response/loginResponse.json 位置创建 loginResponse.json 文件 4. 在拦截器中，我正在检查标志 isMockResponse，如果它为真，则重定向请求以从 assets 文件夹中获取文件，而不是转到服务器。

 let rspFile = "/assets/offline/response/" + extn + ".json";
  Utility.log("rspFile " + rspFile);
  const dupReq = request.clone({ url: rspFile, method: "get" });
  return next.handle(dupReq);

其中 extn 是我从配置文件中获取的“loginResponse”。这样，您不需要自定义代码。如果 isMockresponse= false 您只需像这样将请求转发到服务器

return next.handle(request);

【讨论】：