Question

我有一个简单的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!。

请帮助

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

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

1 个答案: