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();
      }));
    
    });
  • 相关阅读:
    初始WebApi(1)
    百度编辑器UEditor,保存图片的配置问题
    通过简单的ajax验证是否存在已有的用户名
    .NET MVC中登录过滤器拦截的两种方法
    MySQL数据库innodb_rollback_on_timeout参数
    MySQL如何删除#sql开头的临时表
    SQL基础(2)
    ORDER BY导致索引使用不理想
    SQL基础
    MySQL传统点位复制在线转为GTID模式复制
  • 原文地址:https://www.cnblogs.com/Answer1215/p/8448923.html
Copyright © 2011-2022 走看看