Angular 6 - Jasmine - макет httpClient получить карту и потоки ошибок

Question

Я новичок в угловом тестировании и пытаюсь выяснить, как написать тест, который воспроизводит ответ об ошибке функции HttpClient.get (). По сути, мой сервис имеет как map (), так и catchError () внутри своего pipe (), и я хотел бы изучить оба потока. Вот что у меня есть:

my.service.ts:

getItems(): Observable<ItemViewModels[]> {
    return 
        this.httpClient.get<any>(this.getItemsUrl)
        .pipe(
            map(json => {
                return json.map(itemJson => this.getVmFromItemJson(itemJson));
            }),
            catchError(() => {
                // Log stuff here...
                return of(null);
            })
        );
}

my.service.spec.ts:

it('should catch error and return null if API returns error', () => {
    spyOn(service.httpClient, 'get').and.returnValue(new Observable()); // Mock error here
    service.getItems().subscribe($items => expect($items).toBe(null));
});

it('should return valid view model array if API returns a valid json', () => {
    const mockResponse = [
        new SideNavItemViewModel(1),
        new SideNavItemViewModel(2),
        new SideNavItemViewModel(3)
    ];

    spyOn(service.httpClient, 'get').and.returnValue(of(JSON.stringify(mockResponse)));
    service.getSidenavViewModel().subscribe(x => expect(x).toBe(mockResponse));
});

Таким образом, фактическая проблема заключается в том, что наблюдаемые объекты, которые я высмеиваю, чтобы httpClient возвращался при получении в модульных тестах, похоже, не попадают в функцию .pipe (), что означает, что мои тесты не работают :(

Есть идеи?

Спасибо!

Answer 1

Вы пытались внедрить свой сервис в тест? Я также пытаюсь проверить функцию, которая подписывается на вызов API вместо создания другой подписки:

для ошибок:

it('should display error when server error occurs',
    inject([HttpTestingController, AService],
        (httpMock: HttpTestingController, svc: MyService) => {

        svc.getItems(); // has the subscribe in it

        const callingURL = svc['API']; // your api call eg. data/items

        httpMock.expectOne((req: HttpRequest < any > ) => req.url.indexOf(callingURL) !== -1)
        .error(new ErrorEvent('Customer Error', {
                error: 500
            }), {
            status: 500,
            statusText: 'Internal Server Error'
        });

        httpMock.verify();

        expect(component.svc.Jobs).toBeUndefined();

        fixture.detectChanges();

        // UI check here

    }));

тест данных

it('should display the correct amount of data elements',
    inject([HttpTestingController, AService],
        (httpMock: HttpTestingController, svc: MyService) => {

        svc.getItems();  // has the subscribe in it

        const callingURL = svc['API']; // your api call eg. data/items

        const mockReq = httpMock.expectOne((req: HttpRequest < any > ) => req.url.indexOf(callingURL) !== -1);

        mockReq.flush(mockData);

        httpMock.verify();

        expect(component.svc.data.length).toBe(mockData.length);

        fixture.detectChanges();
        // UI check here

    }));

Итак, в основном эти функции:

• позвоните, получите и подпишитесь
• проверяет, содержится ли ваш api url в вызове http
• высмеивает ответ - вы передаете данные - 'mockData'
• mockReq.flush (mockData); вызовет вызов
• httpMock.verify (); проверим URL и другие вещи
• теперь сервисные данные могут быть проверены - если вы подписываетесь, что-то там устанавливается
• fixture.detectChanges (); - тогда это позволит протестировать компоненты пользовательского интерфейса

Я предпочитаю этот путь, потому что вы можете хранить свою логику и тесты отдельно.