经常在使用Angular进行HTTP请求测试时编写的测试代码

首先

在进行WebAPI通信部分的测试时,有两个必须编写的测试代码,记得要做个备忘录,不要忘记。

环境

    • Angular v16

 

    Karma+Jasmine

是否执行了符合预期的HTTP请求

it('GETリクエストが行われている', () => {
    service.fetchHogeList$().subscribe();
    const req = httpTestingController.expectOne('https://hoge/test');
    expect('GET').toEqual(req.request.method);
});

期望一个

确认已经收到使用期望的URL和通信类型(如POST或GET)发出的请求。

我们是否成功获取到了预期的数据?

it('期待通りのデータが取得できている', fakeAsync(() => {
    const expected: HogeListModel[] = [
      {
        hogeId: 'hogeId1',
        hogeName: 'hogehoge',
      }
    ];
    service.fetchHogeList$().subscribe(actual => {
      expect(expected).toEqual(actual);
    });

    const req = httpTestingController.expectOne('https://hoge/test');
    req.flush(expected);
}));

仿同步运行

可以用同步的方式来测试非同步的操作。

支持异步操作

    • Promise

 

    setTimeout など

在这个测试中虽然没有使用,但是如果使用tick()函数,可以测试特定时间后的状态。

冲洗

通过模拟服务器的响应,在这个测试中将数据作为响应返回。
可以同步测试异步的HTTP请求。

请为我提供完整的测试代码。

import { TestBed, fakeAsync } from '@angular/core/testing';

import { AppService, HogeListModel } from './app.service';
import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing';

describe('AppService', () => {
  let service: AppService;
  let httpTestingController: HttpTestingController;

  beforeEach(() => {
    TestBed.configureTestingModule({
      imports: [
        HttpClientTestingModule
      ]
    });
    service = TestBed.inject(AppService);
    httpTestingController = TestBed.inject(HttpTestingController);
  });


  it('GETリクエストが行われている', () => {
    service.fetchHogeList$().subscribe();
    const req = httpTestingController.expectOne('https://hoge/test');
    expect('GET').toEqual(req.request.method);
  });

  it('期待通りのデータが取得できている', fakeAsync(() => {
    const expected: HogeListModel[] = [
      {
        hogeId: 'hogeId1',
        hogeName: 'hogehoge',
      }
    ];
    service.fetchHogeList$().subscribe(actual => {
      expect(expected).toEqual(actual);
    });

    const req = httpTestingController.expectOne('https://hoge/test');
    req.flush(expected);
  }));
});

HttpClientTestingModule是一个用于进行HTTP请求测试的模块。

用于测试HttpClient的模块。
可以模拟请求和刷新。
https://angular.jp/api/common/http/testing/HttpTestingController#httptestingcontroller

正在测试的代码。

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

@Injectable({
  providedIn: 'root'
})
export class AppService {

  constructor(
    private readonly httpClient: HttpClient,
  ) { }

  public fetchHogeList$(): Observable<HogeListModel[]> {
    return this.httpClient.get<HogeListModel[]>(
      'https://hoge/test'
    );
  }
}

export interface HogeListModel {
  hogeId: string;
  hogeName: string;
}
广告
将在 10 秒后关闭
bannerAds