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

Question

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

Answer 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 方法并提供相应的数据。

希望对您有所帮助！

Answer 2

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

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

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

 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"。这样，您不需要自定义 code.In isMockresponse= false 的情况，您只需像这样将请求转发到服务器

return next.handle(request);

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

Angular 5 - Using HTTP Interceptors as mock HTTP requests in Jasmine / Karma tests

mocking

httprequest

karma-jasmine

angular-http-interceptors

angular