首页 > Web开发 > 详细

[Angular + Unit Testing] Mock HTTP Requests made with Angular’s HttpClient in Unit Tests

时间:2018-02-14 21:53:30      阅读:60      评论:0      收藏:0      [点我收藏+]

标签:repr   one   class   port   con   return   pos   present   people   

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();
  }));

});

 

[Angular + Unit Testing] Mock HTTP Requests made with Angular’s HttpClient in Unit Tests

标签:repr   one   class   port   con   return   pos   present   people   

原文:https://www.cnblogs.com/Answer1215/p/8448923.html

(0)
(0)
   
举报
评论 一句话评论(0
0条  
登录后才能评论!
© 2014 bubuko.com 版权所有 鲁ICP备09046678号-4
打开技术之扣,分享程序人生!
             

鲁公网安备 37021202000002号