如何在 Angular 中测试 JSONP HTTP 请求？

Question

我正在使用HttpClientModule和HttpClientJsonpModule在服务中发出 JSONP HTTP 请求。

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule, HttpClientJsonpModule } from '@angular/common/http';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule,
    HttpClientJsonpModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

此服务使用HttpClient 类中的jsonp方法从指定的 URL 获取 JSONP 响应。我认为这个响应被JsonpInterceptor拦截并发送到处理请求的JsonpClientBackend。

例子.service.ts

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

@Injectable()
export class ExampleService {
  url = "https://archive.org/index.php?output=json&callback=callback";

  constructor(private http: HttpClient) { }

  getData() {
    return this.http.jsonp(this.url, 'callback');
  }
}

使用HttpClientTestingModule，我注入了HttpTestingController以便我可以模拟和刷新我的 JSONP HTTP 请求。

示例.service.spec.ts

import { TestBed, inject } from '@angular/core/testing';
import { 
  HttpClientTestingModule,
  HttpTestingController
} from '@angular/common/http/testing';

import { ExampleService } from './example.service';

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

  beforeEach(() => {
    TestBed.configureTestingModule({
      imports: [HttpClientTestingModule],
      providers: [ExampleService]
    });

    service = TestBed.get(ExampleService);
    httpMock = TestBed.get(HttpTestingController);
  });

  describe('#getData', () => {
    it('should return an Observable<any>', () => {
      const dummyData = { id: 1 };

      service.getData().subscribe(data => {
        expect(data).toEqual(dummyData);
      });

      const req = httpMock.expectOne(service.url); // Error
      expect(req.request.method).toBe('JSONP');
      req.flush(dummyData);
    });
  });
});

最后，我得到了错误

Error: Expected one matching request for criteria "Match URL: https://archive.org/index.php?output=json&callback=callback", found none.

如果我将请求方法更改为 GET，则此测试按预期工作。

据我所知， HttpClientTestingModule 使用 HttpClientTestingBackend 但没有 JsonpClientTestingBackend 或相应的拦截器。

如何在 Angular 中测试 JSONP HTTP 请求？

Answer 1

根据 Angular 开发人员的说法，这是一个错误。这是目前的解决方法。

示例.service.spec.ts

import { TestBed, inject } from '@angular/core/testing';
// Import the HttpClientJsonpModule, HttpBackend, and JsonpClientBackend
import { HttpClientJsonpModule, HttpBackend, JsonpClientBackend } from '@angular/common/http';
import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing';

import { ExampleService } from './example.service';

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

  beforeEach(() => {
    TestBed.configureTestingModule({
      imports: [HttpClientTestingModule],
      // Use the HttpBackend instead of the JsonpClientBackend
      providers: [ExampleService, { provide: JsonpClientBackend, useExisting: HttpBackend }]
    });

    service = TestBed.get(ExampleService);
    httpMock = TestBed.get(HttpTestingController);
  });

  describe('#getData', () => {
    it('should return an Observable<any>', () => {
      const dummyData = { id: 1 };

      service.getData().subscribe(data => {
        expect(data).toEqual(dummyData);
      });
      // Pass a function to the expectOne method
      const req = httpMock.expectOne(request => request.url === service.url);
      expect(req.request.method).toBe('JSONP');
      req.flush(dummyData);
    });
  });
});