In a proper unit test we want to isolate external dependencies as much as possible to guarantee a reliable test outcome. Http calls represent such external dependencies. Therefore, when testing our Angular components or services that rely on data retrieved via Http, we need to make sure to mock such calls and instead provide some fake data during the test execution. In this lesson we about the new HttpClientTestingModule
and HttpTestingController
that has been added in Angular v4.3.1 to make our life easier.
Serivce:
import { Injectable } from ‘@angular/core‘; import { Observable } from ‘rxjs/Observable‘; import { HttpClient } from ‘@angular/common/http‘; export interface Person { name: string; } @Injectable() export class PeopleService { constructor(private http: HttpClient) {} fetchPeople(): Observable<Person[]> { return this.http .get<Person[]>(‘/api/v1/people‘); } }
Spec:
import { TestBed, inject } from ‘@angular/core/testing‘; import { HttpClientTestingModule, HttpTestingController } from ‘@angular/common/http/testing‘; import { PeopleService } from ‘./people.service‘; describe(‘The PeopleService‘, () => { beforeEach(() => { TestBed.configureTestingModule({ imports: [HttpClientTestingModule], providers: [ PeopleService ] }); }); it(‘should fetch a list of people‘, inject( [PeopleService, HttpTestingController], (peopleService: PeopleService, httpMock: HttpTestingController) => { // execute the call peopleService .fetchPeople() .subscribe(people => { expect(people.length).toBe(2); expect(people[0].name).toBe(‘Juri‘); }); const req = httpMock.expectOne(‘/api/v1/people‘, ‘call to ppl api‘); expect(req.request.method).toBe(‘GET‘); req.flush([ { name: ‘xxx‘ }, { name: ‘xxx‘ } ]); httpMock.verify(); })); });
原文地址:https://www.cnblogs.com/Answer1215/p/8448923.html
时间: 2024-10-25 21:20:06