Angular 6 Testing - Сервис со ссылкой на помощника, который использует HttpClient - PullRequest
Новая
       3

Angular 6 Testing - Сервис со ссылкой на помощника, который использует HttpClient

0 голосов
/ 24 мая 2018

На прошлой неделе я обновил наше приложение с Angular 5.8 до 6. С этим я изменил использование HttpModule и Http на использование HttpClientModule и HttpClient.Пока все хорошо, интерфейс работает, как и ожидалось.Только сейчас некоторые сервисные тесты не проходят, и я пытаюсь их исправить.В основном у меня есть два типа сервисов:

  1. Сервис, который напрямую использует HttpClient.

    CustomService: 

    import { HttpClient } from "@angular/common/http";
import { Injectable } from "@angular/core";
import { map } from "rxjs/operators";
import { Observable} from "rxjs";

@Injectable()
export class CustomService {
    constructor(private readonly http: HttpClient) { }

    someMethod(): Observable<boolean> {
        return this.http.get("api/some-url").pipe(
            map(res => <boolean>res) }))
        );
    }
}

  2. Сервис, который использует ServiceHelper, который использует HttpClient.

    CustomService: 

    import { HttpHeaders } from "@angular/common/http";
import { Injectable } from "@angular/core";
import { Observable } from "rxjs";

import { SomeRequest } from "../Models/SomeRequest";
import { SomeResult } from "../Models/SomeResult";
import { ServiceHelper } from "./../Helpers/servicehelper";

@Injectable()
export class CustomService {
    constructor(readonly serviceHelper: ServiceHelper) { }

    someMethod(): Observable<SomeResult> {
        const request = {} as SomeRequest;
        const headers = new HttpHeaders({ "Content-Type": "application/json" });
        const options = { headers: headers };

        return this.serviceHelper
            .post<SomeRequest, SomeResult>("api/some-url", request, options);
    }
}

    ServiceHelper: 

    import { HttpClient } from "@angular/common/http";
import { Injectable } from "@angular/core";
import { map } from "rxjs/operators";
import { Observable } from "rxjs";

import { Result } from "../Models/Result";

@Injectable()
export class ServiceHelper {
    constructor(readonly http: HttpClient) { }

    post<Req, Res extends Result>(url: string, request: Req, options): Observable<Res> {
        return this.http.post(url, request, options).pipe(
            map(data => (data as any) as Res)
        );
    }
}

Тесты дляпервый сервис уже работает снова, выполнив что-то вроде этого: 

import { TestBed } from "@angular/core/testing";
import { HttpClientTestingModule, HttpTestingController } from "@angular/common/http/testing";
import { HttpResponse } from "@angular/common/http";

import { CustomService } from "./custom.service";

describe("service tests", () => {
    let service: CustomService;
    let httpClient: HttpTestingController;

    beforeEach(() => {
        TestBed.configureTestingModule({
            imports: [HttpClientTestingModule],
            providers: [CustomService]
        });
        service = TestBed.get(CustomService);
        httpClient = TestBed.get(HttpTestingController);
    });

    it("should pass", () => {
        service.someMethod().subscribe(result => {
            expect(result).toBe(true);
        });

        httpClient.expectOne("api/some-url").event(
            new HttpResponse<boolean>({ body: true }));
    });
});

Для второго сервиса (который использует ServiceHelper) я хочу сделать что-то подобное выше в выражении beforeEach.Я попробовал несколько вещей в configureTestingModule с добавлением провайдеров и / или импортов, но в основном я получаю StaticInjectorError после запуска тестов.

Как я могу написать тесты для второго типа сервисов?Надеюсь, кто-то может помочь мне дальше!

1 Ответ

0 голосов
/ 24 мая 2018

Исправлено это путем добавления {обеспечить: ServiceHelper, useClass: ServiceHelper} в массив поставщиков.Фиксированный configureTestingModule выглядит так: 

TestBed.configureTestingModule({
        imports: [HttpClientTestingModule],
        providers: [
            CustomService,
            { provide: ServiceHelper, useClass: ServiceHelper }
        ]
    })
...