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

Question

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

Answer 1

无需使用HTTPInterceptors，如果您只想使用模拟的HTTP请求，则可以简单地使用模拟服务。让我们说你有一个像这样的简单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方法，并提供相应的数据。

希望这可以帮助！