サービスでJSONPメソッドをテストする方法-Angular

私はテストを書いた簡単な電子メールサブスクリプションアプリケーションを作成していますが、今のところうまくいきました。

簡単にするために、私が問題に直面している正確な部分を説明したいと思います。

my-service.ts：

export class MyService {

  mailChimpEndpoint =
    'https://gmail.us10.list-manage.com/subscribe/post-json?u=aaa7182511d7bd278fb9d510d&id=01681f1b55&amp';

  constructor(private _http: HttpClient) {}

  submitForm(email: string){

        const params = new HttpParams()

        .set('EMAIL', email)
        .set('subscribe','Subscribe')
        .set('b_aaa7182511d7bd278fb9d510d_01681f1b55','')

        const mailChimpUrl = this.mailChimpEndpoint + params.toString();

        return this._http.jsonp<MailChimpResponse>(mailChimpUrl, 'c')
  }

}

上記は、APIを呼び出すサービスの簡単なメソッドです

サービスファイルへのリンク： https://stackblitz.com/edit/angular-testing-imniaf?file=app%2Fmy-service.ts

今私は、上記の方法のためのテストケース記述しようとしていますsubmitForm中に

my-service.spec.ts

  it('check subscribeEmail function has been called in service', (done: DoneFn) => {
    const service = TestBed.get(MyService);
    service.submitForm('[email protected]').subscribe(
        response => {
            expect(response).toEqual(mockServiceData);
        }
    )

    const reqMock = httpTestingController.expectOne(request => request.url === mailChimpEndpoint);
    expect(reqMock.request.method).toBe('GET');
    reqMock.flush(mockServiceData);
  });

このスペックファイルへのリンク： https://stackblitz.com/edit/angular-testing-imniaf?file=app%2Fmy-service.spec.ts

これは私が立ち往生しているところです、そして上記のコードは次のようにエラーをスローします、

エラー：条件「Matchbyfunction：」に一致するリクエストが1つ必要ですが、見つかりませんでした。

完全に機能するstackblitzリンク：

https://stackblitz.com/edit/angular-testing-ajoov8

このテストに合格するのを手伝ってください。

ここで動作するデモコードを見てください

1. 削除する必要がありますuseClass:)

2. mailChimpEndpoint値を修正しました。

3. 修正済み expect(reqMock.request.method).toBe('JSONP');

4. 削除されましたdone: DoneFn。

  it('check subscribeEmail function has been called in service', () => {
    const service = TestBed.get(MyService);
    service.submitForm('[email protected]').subscribe(
        response => {
            console.log(response)
            expect(response).toEqual(mockServiceData);
        }
    )

    const reqMock = httpTestingController.expectOne(req => req.url === mailChimpEndpoint);
    expect(reqMock.request.method).toBe('JSONP');
    reqMock.flush(mockServiceData);
  });

HttpClient スパイでなければなりません、そしてあなたはそれを主張することができます。

TestBed.configureTestingModule({
  // add this to the definition of the testing module
  providers: [{
    provide: HttpClient,
    useValue: {
      jsonp: jasmine.createSpy('httpClient.jsonp'),
    }
  }]
})

そしてテストで

  it('check subscribeEmail function has been called in service', (done: DoneFn) => {
    const service = TestBed.get(MyService);
    const httpClient = TestBed.get(HttpClient);

    const expected: any = Symbol();
    (httpClient.jsonp as any).and.returnValue(expected);

    const actual = service.submitForm('[email protected]');
    expect(actual).toBe(expected);
    expect(httpClient.jsonp).toHaveBeenCalledWith(provideValueHere, 'c');
  });

そして今、あなたのテストはそのようになるはずです：

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

import { MyService } from './my-service';

describe('MyService', () => {
  beforeEach(() => TestBed.configureTestingModule({
      providers: [
        MyService,
        {
          provide: HttpClient,
          useValue: {
            jsonp: jasmine.createSpy('httpClient.jsonp'),
          }
        }
      ]
    }).compileComponents());

  it('check subscribeEmail function has been called in service', () => {
    const httpClient = TestBed.get(HttpClient);
    const service = TestBed.get(MyService);

    const expected: any = Symbol();
    (httpClient.jsonp as any).and.returnValue(expected);

    const actual = service.submitForm('[email protected]');
    expect(actual).toBe(expected);
    expect(httpClient.jsonp).toHaveBeenCalledWith('https://gmail.us10.list-manage.com/subscribe/post-json?u=aaa7182511d7bd278fb9d510d&id=01681f1b55&[email protected]&subscribe=Subscribe&b_aaa7182511d7bd278fb9d510d_01681f1b55=', 'c');
  });
});