要解决“Angular单元测试 - 模拟REST服务调用”问题,可以按照以下步骤进行:
RestService
的服务。import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
@Injectable({
providedIn: 'root'
})
export class RestService {
constructor(private http: HttpClient) {}
getData() {
return this.http.get('/api/data');
}
postData(data: any) {
return this.http.post('/api/data', data);
}
}
RestService
。例如,在一个名为ExampleComponent
的组件中调用getData
和postData
方法。import { Component } from '@angular/core';
import { RestService } from './rest.service';
@Component({
selector: 'app-example',
template: `
`
})
export class ExampleComponent {
constructor(private restService: RestService) {}
getData() {
this.restService.getData().subscribe((data: any) => {
console.log(data);
});
}
postData() {
const data = { name: 'John Doe' };
this.restService.postData(data).subscribe((response: any) => {
console.log(response);
});
}
}
RestService
的测试文件,并使用HttpClientTestingModule
来模拟REST服务调用。例如,创建一个名为rest.service.spec.ts
的文件。import { TestBed } from '@angular/core/testing';
import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing';
import { RestService } from './rest.service';
describe('RestService', () => {
let httpTestingController: HttpTestingController;
let restService: RestService;
beforeEach(() => {
TestBed.configureTestingModule({
imports: [ HttpClientTestingModule ],
providers: [ RestService ]
});
httpTestingController = TestBed.inject(HttpTestingController);
restService = TestBed.inject(RestService);
});
afterEach(() => {
httpTestingController.verify();
});
it('should get data', () => {
const testData = { id: 1, name: 'Test Data' };
restService.getData().subscribe((data: any) => {
expect(data).toEqual(testData);
});
const req = httpTestingController.expectOne('/api/data');
expect(req.request.method).toBe('GET');
req.flush(testData);
});
it('should post data', () => {
const testData = { name: 'John Doe' };
restService.postData(testData).subscribe((response: any) => {
expect(response).toBeTruthy();
});
const req = httpTestingController.expectOne('/api/data');
expect(req.request.method).toBe('POST');
expect(req.request.body).toEqual(testData);
req.flush({});
});
});
在以上代码示例中,我们使用HttpClientTestingModule
来模拟HTTP请求和响应。HttpTestingController
用于捕获HTTP请求,并进行验证。我们使用expectOne
方法来检查是否有一个请求匹配了指定的URL,并使用flush
方法来返回模拟的HTTP响应。在每个测试之后,我们使用verify
方法来验证是否有剩余的未处理的请求。
通过按照上述步骤,您就可以进行Angular单元测试 - 模拟REST服务调用。