AngularでHttpClientリクエストをテストする方法

投稿日: 2022-04-20 2022-10-15
タグ: Angular

序章

AngularのHttpClientには、HTTPリクエストの単体テストを可能にするテストモジュールHttpClientTestingModuleがあります。

注：以降 HttpClient Angular 4.3以降でのみ使用可能です。以下は、Angular4.3以降に適用されます。 Angularでの単体テストを初めて使用する場合は、この紹介を参照してください。

この記事では、を使用してHTTPGETリクエストの単体テストを設定する方法を学習します。 HttpClientTestingModule. これは、テストモジュールの機能を示すのに役立ちます。

前提条件

このチュートリアルを完了するには、次のものが必要です。

Node.jsはローカルにインストールされます。これは、Node.jsのインストール方法とローカル開発環境の作成に従って実行できます。
Angularプロジェクトのセットアップにある程度精通している。

このチュートリアルは、Nodev16.2.0で検証されました。 npm v7.15.1、および @angular/core v12.0.4。

ステップ1—プロジェクトの設定

この投稿では、エンドポイントからデータを取得するサービスと、そのサービスを呼び出してコンポーネントのユーザーのリストにデータを入力するコンポーネントを使用します。 OnInit 針。

使用できます @angular/cli 新しいプロジェクトを作成するには：

ng new angular-httpclienttest-example

次に、新しく作成されたプロジェクトディレクトリに移動します。

cd angular-httpclienttest-example

作成する data.service.ts:

ng generate service data

そして、JSONプレースホルダーと通信します。

src / app / data.service.ts

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

@Injectable({ ... })
export class DataService {
  url = 'https://jsonplaceholder.typicode.com/users';

  constructor(private http: HttpClient) { }

  getData() {
    const req = new HttpRequest('GET', this.url, {
      reportProgress: true
    });

    return this.http.request(req);
  }
}

次に、 app.component.ts ファイル：

src / app.component.ts

import { Component, OnInit } from '@angular/core';
import { HttpEvent, HttpEventType } from '@angular/common/http';

import { DataService } from './data.service';

@Component({ ... })
export class AppComponent implements OnInit {
  users: any;
  
  constructor(private dataService: DataService) {}
  
  ngOnInit() {
    this.populateUsers();
  }

  private populateUsers() {
    this.dataService.getData().subscribe((event: HttpEvent<any>) => {
      switch (event.type) {
        case HttpEventType.Sent:
          console.log('Request sent!');
          break;
        case HttpEventType.ResponseHeader:
          console.log('Response header received!');
          break;
        case HttpEventType.DownloadProgress:
          const kbLoaded = Math.round(event.loaded / 1024);
          console.log(`Download in progress! ${kbLoaded}Kb loaded`);
          break;
        case HttpEventType.Response:
          console.log('Done!', event.body);
          this.users = event.body;
      }
    });
  }
}

そして、 HttpClientmodule に app.module.ts:

src / app.module.ts

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

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

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

この時点で、サービスとクライアントを備えたAngularプロジェクトが作成されます。

ステップ2—テストを追加する

次に、データサービスのスペックファイルを設定し、テストに必要なユーティリティを含めます。 HttpClient リクエスト。の上に HttpClientTestingModule、私たちも必要になります HttpTestingController、リクエストのモックを簡単に作成できます。

data.service.spec.ts

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

import { DataService } from './data.service';

describe('DataService', () => {
  let service: DataService;

  beforeEach(() => {
    TestBed.configureTestingModule({}
      imports: [HttpclientTestingModule],
      providers: [DataService]
    );
    service = TestBed.inject(DataService);
  });
});

を使用します inject 必要なサービスをテストに注入するためのユーティリティ。

これが整ったら、テストロジックを追加できます。

data.service.spec.ts

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

import { DataService } from './data.service';

describe('DataService', () => {
  beforeEach(() => {
    TestBed.configureTestingModule({
      imports: [HttpClientTestingModule],
      providers: [DataService]
    });
  });
  it(
    'should get users',
    inject(
      [HttpTestingController, DataService],
      (httpMock: HttpTestingController, dataService: DataService) => {
        const mockUsers = [
          { name: 'Alice', website: 'example.com' },
          { name: 'Bob', website: 'example.org' }
        ];

        dataService.getData().subscribe((event: HttpEvent<any>) => {
          switch (event.type) {
            case HttpEventType.Response:
              expect(event.body).toEqual(mockUsers);
          }
        });

        const mockReq = httpMock.expectOne(dataService.url);

        expect(mockReq.cancelled).toBeFalsy();
        expect(mockReq.request.responseType).toEqual('json');
        mockReq.flush(mockUsers);

        httpMock.verify();
      }
    )
  );
});

かなりのことが起こっているので、それを分解しましょう：

まず、テストする模擬ユーザーをいくつか定義します。
次に、 getData テストし、返されたobservableをサブスクライブしているサービスのメソッド。
の場合 HttpEventType タイプです Response、応答イベントがモックユーザーと等しいボディを持つようにアサートします。
次に、 HttpTestingController （テストで注入された httpMock）サービスに対して1つのリクエストが行われたことを表明する url 財産。リクエストが予想されない場合は、 expectNone メソッドも使用できます。
これで、モックリクエストに対して任意の数のアサーションを作成できます。ここでは、リクエストはキャンセルされておらず、レスポンスはタイプであると断言します json. さらに、リクエストのメソッドをアサートすることもできます（GET, POST、…）
次に電話します flush モックリクエストで、モックユーザーを渡します。 The flush メソッドは、渡されたデータを使用してリクエストを完了します。
最後に、 verify 私たちの方法 HttpTestingController 未解決の要求がないことを確認するためのインスタンス。

このチュートリアルの目的のために、コメントアウトすることができます app.component.spec.ts.

次のコマンドを実行して、テストの結果を確認します。

ng test

ブラウザでテスト結果を開きます。

Output1 spec, 0 failures, randomized with seed 26321
DataService
should get users

成功したテストメッセージが表示されます。

結論

この記事では、を使用してHTTPGETリクエストの単体テストを設定する方法を学習しました。 HttpClientTestingModule.

Angularについて詳しく知りたい場合は、Angularトピックページで演習とプログラミングプロジェクトを確認してください。

getdocs

13036