zoukankan      html  css  js  c++  java
  • [Angular + Unit Testing] Mock HTTP Requests made with Angular’s HttpClient in Unit Tests

    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();
      }));
    
    });
  • 相关阅读:
    代码review之 isInfoEnable()
    sdk、jdk、jre、jvm、jdt、cdt分别都是什么东西
    思考总结: 决胜21点 开篇 概率问题
    Java多线程开发系列之四:玩转多线程(线程的控制2)
    Java多线程开发系列之四:玩转多线程(线程的控制1)
    Java多线程开发系列之三:线程这一辈子(线程的生命周期)
    Java多线程开发系列之二:如何创建多线程
    [系列] Gin框架
    [系列] Gin框架
    [系列] Gin 框架
  • 原文地址:https://www.cnblogs.com/Answer1215/p/8448923.html
Copyright © 2011-2022 走看看