Как выполнить модульное тестирование перехватчика Http-ошибок Angular typcript, который отлавливает ошибки из наблюдаемой по трубопроводу?

Question

Я провожу эксперимент, в котором я изучаю английский и машинописный текст, тестируя чужой код (например, автоматизированный модуль и сквозные тесты).После того, как я получу его на тестирование, я планирую переназначить его для домашнего проекта, над которым я работаю, для университетского класса.

Я по крайней мере на полпути через модульное тестирование кода отсюда: http://jasonwatmore.com/post/2018/05/16/angular-6-user-registration-and-login-example-tutorial

Я пытался в течение некоторого времени получить следующий код в модульном тесте, но все, что япытались из моих собственных идей или идей из интернета до сих пор безуспешно:

import { HttpInterceptor, HttpRequest, HttpHandler, HttpEvent } from "@angular/common/http";
import { AuthenticationService } from "src/app/authenticationService/AuthenticationService";
import { Observable, throwError } from "rxjs";
import { catchError } from "rxjs/operators";
import { Injectable } from "@angular/core";

@Injectable()
export class ErrorInterceptor implements HttpInterceptor {
    constructor(private authenticationService: AuthenticationService) {}

    intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
        console.log('before error handle')
        return next.handle(request).pipe(catchError(err => {

            console.log('in error handle')

            if (err.status === 401) { 
                // auto logout if 401 response returned from api
                this.authenticationService.logout();
                location.reload(true);
            }

            const error = err.error.message || err.statusText;
            return throwError(error);
        }))
    }

}

Следующий тестовый код и несколько вариантов были неудачными, чтобы сообщение «in error handle» отображалось вжурнал консоли:

import { ErrorInterceptor } from "./ErrorInterceptor";
import { of, throwError, defer } from "rxjs";

describe('ErrorInterceptor', () => {
    let errorInterceptor;
    let authenticationServiceSpy;

    beforeEach(() => {
        authenticationServiceSpy = jasmine.createSpyObj('AuthenticationService', ['logout']);
        errorInterceptor = new ErrorInterceptor(authenticationServiceSpy);
    })

    it('should create', () => {
        expect(errorInterceptor).toBeTruthy();
    })

    describe('intercept', () => {
        let httpRequestSpy;
        let httpHandlerSpy;
        const error = {status: 401, statusText: 'error'};

        it('should auto logout if 401 response returned from api', () => {
            //arrange
            httpRequestSpy = jasmine.createSpyObj('HttpRequest', ['doesNotMatter']);
            httpHandlerSpy = jasmine.createSpyObj('HttpHandler', ['handle']);
            httpHandlerSpy.handle.and.returnValue({
                pipe: () => {
                return fakeAsyncResponseWithError({});
                }
            });

            //act
            errorInterceptor.intercept(httpRequestSpy, httpHandlerSpy);

            //assert
            //TBD

            function fakeAsyncResponseWithError<T>(data: T) {
                return defer(() => throwError(error));
            }
        })
    })
})

Answer 1

Несколько вопросов здесь.

• Во-первых, ваше возвращаемое значение из httpHandlerSpy.handle() должно быть Observable, поскольку в нем уже есть оператор канала, а затем код HttpInterceptor может направить его в catchError по мере необходимости.
• Во-вторых, HttpInterceptor возвращает Observable, и для того, чтобы он был «выполнен», его необходимо подписать.

Я собрал Stackblitz , чтобы продемонстрировать, как я 'Подходим к этому.

Из Stackblitz, вот спецификация (it функция):

it('should auto logout if 401 response returned from api', () => {
    //arrange
    httpRequestSpy = jasmine.createSpyObj('HttpRequest', ['doesNotMatter']);
    httpHandlerSpy = jasmine.createSpyObj('HttpHandler', ['handle']);
    httpHandlerSpy.handle.and.returnValue(throwError(
        {error: 
            {message: 'test-error'}
        }
    ));
    //act
    errorInterceptor.intercept(httpRequestSpy, httpHandlerSpy)
        .subscribe(
            result => console.log('good', result), 
            err => { 
                console.log('error', err);
                expect(err).toEqual('test-error');
            }
        );

    //assert

})

Надеюсь, это поможет.