为具有 Http 的 Angular6 服务编写单元测试答案

【问题标题】：Writing unit test for Angular6 Services having Http为具有 Http 的 Angular6 服务编写单元测试
【发布时间】：2019-03-22 09:46:31
【问题描述】：

我有一个简单的 Angular 6 服务：

import { Injectable } from '@angular/core';

import { HttpClient, HttpHeaders } from '@angular/common/http';

@Injectable({
  providedIn: 'root'
})
export class PlaceholderService {

  todosUrl: string = 'https://jsonplaceholder.typicode.com/todos';

  constructor(private http: HttpClient) { 

  }

  getTodos() {
    return this.http.get(this.todosUrl);
  }
}

我正在尝试为此编写单元测试，我没有这方面的经验。

import { TestBed, getTestBed, inject  } from '@angular/core/testing';
import { PlaceholderService } from './placeholder.service';

import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing';

describe('PlaceholderService', () => {
  let service: PlaceholderService;
  let httpMock: HttpTestingController;

  beforeEach(() => {
    TestBed.configureTestingModule({
      imports: [HttpClientTestingModule],
      providers: [PlaceholderService]
    })

    service = TestBed.get(PlaceholderService);
    httpMock = TestBed.get(HttpTestingController);
  });

  afterEach(() => {
    httpMock.verify();
  })
  it('should retrieve post from the API', () => {
    const dummyTodos = [
      {
        "userId": 1,
        "id": 1,
        "title": "delectus aut autem",
        "completed": false
      },
      {
        "userId": 1,
        "id": 2,
        "title": "quis ut nam facilis et officia qui",
        "completed": false
      },
      {
        "userId": 1,
        "id": 3,
        "title": "fugiat veniam minus",
        "completed": false
      }
    ];

    service.getTodos().subscribe((todos: any) => {
      expect(todos.length).toBe(3);
    })

    const request = httpMock.expectOne(`${service.todosUrl}/todos`);

    expect(request.request.method).toBe('GET');

    request.flush(dummyTodos);



  })


});

这给出了NullInjectorError: No provider for HttpClient! 的错误。

请帮忙

【问题讨论】：

您正在混合从 @angular/http 导入的旧的、已弃用的 Http 服务与从 @angular/common/http 导入的新的、正确的、未弃用的、可测试的和文档化的 HttpClient。停止使用旧的、已弃用的东西。 HttpClient（您应该使用的）指南在这里：angular.io/guide/http

标签： angular

【解决方案1】：

您对此方法的测试应执行以下操作；

验证网址
验证请求方法类型（本例中为 GET）
刷新一些结果并检查服务是否返回该结果

import { TestBed, fakeAsync, tick, getTestBed } from '@angular/core/testing';
import { HttpRequest } from '@angular/common/http';
import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing';
import { PlaceholderService } from './placeholder.service';

describe('Placeholder Service Tests', () => {

    let injector: TestBed;
    let service: PlaceholderService;
    let httpMock: HttpTestingController;

    beforeEach(() => {
        TestBed.configureTestingModule({
            imports: [HttpClientTestingModule],
            providers: [PlaceholderService]
        });

        injector = getTestBed();
        service = injector.get(PlaceholderService);
        httpMock = injector.get(HttpTestingController);
    });

    afterEach(() => {
        httpMock.verify();
    });

    it('should retrieve post from the API', fakeAsync(() => {
        const results = [];

        service.getTodos().subscribe((_:any[]) => expect(results).toBe(_));

        const req = httpMock.expectOne((request: HttpRequest<any>): boolean => {
            expect(request.url).toEqual('https://jsonplaceholder.typicode.com/todos');
            expect(request.method).toBe('GET');
            return true;
        });
        req.flush(results);
        tick();
    }));
});

【讨论】：