经常在使用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;
}