时间戳

首页 > 解决方案 > Angular 5 - 在 Jasmine / Karma 测试中使用 HTTP 拦截器作为模拟 HTTP 请求

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

问题描述

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

标签： angularmockinghttprequestkarma-jasmineangular-http-interceptors

解决方案

不需要使用 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 方法并提供相应的数据。

希望这可以帮助！

推荐阅读