JSONP HTTPリクエストをAngularでテストするにはどうすればよいですか？

Question

サービスでJSONP HTTPリクエストを作成するのに、HttpClientModuleとHttpClientJsonpModuleを使用しています。

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 { } 

このサービスは、指定されたURLからJSONPレスポンスを取得するためにHttpClient classからjsonp方法を使用しています。この回答はJsonpInterceptorによって傍受され、要求が処理されるJsonpClientBackendに送られたと思います。

example.service.ts HttpClientTestingModuleを使用して

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'); 
    } 
} 

、私はので、私はモックと私JSONP HTTPリクエストを洗い流すことができHttpTestingControllerを注入。私がGETするリクエストメソッドを変更した場合は最後に

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); 
    }); 
    }); 
}); 

example.service.spec.tsが、私はエラーに

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

を取得し、このテストは、ように動作します期待される。

私が知ることから、HttpClientTestingModuleはHttpClientTestingBackendを使用しますが、JsonpClientTestingBackendまたは対応するインターセプタはありません。

JSONP HTTPリクエストをAngularでテストするにはどうすればよいですか？

Answer 1

角度現像剤によれば、これはa bugである。ここで回避策があります。

example.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); 
    }); 
    }); 
});