在测试角度拦截器时模拟 http 错误

Question

我有一个 Angular HTTP 拦截器，它应该跟踪和取消跟踪每个 http 请求，我正在为它编写测试，我一直在为带有 404 状态代码的 http 请求编写测试。当我运行测试时，我在终端中看到一个未捕获的错误，它告诉我我没有相应地处理错误，但我认为它正在被处理。你能告诉我小姐在哪里吗？

这里是 angular http 拦截器

@Injectable()
export class TrafficInterceptor implements HttpInterceptor {

    constructor(private trafficService: TrafficService) {
    }

    intercept(request: HttpRequest<unknown>, next: HttpHandler): Observable<HttpEvent<unknown>> {
        this.trafficService.trackRequest(request);
        return next.handle(request).pipe(
            catchError((error: HttpErrorResponse) => {
                this.trafficService.unTrackRequest(request);
                return throwError(error);
            }),
            finalize(() => {
                this.trafficService.unTrackRequest(request);
            })
        );
    }
}

这是测试

describe('TrafficInterceptor', () => {
    let interceptor: TrafficInterceptor;
    let trafficStateStore: TrafficStateStore;
    let httpTestingController: HttpTestingController;
    let http: HttpClient;

    const reqURL = '/somewebsite/foo';
    const httpMethods = [
        {method: 'get'},
        {method: 'delete'},
        {method: 'post'},
        {method: 'put'},
        {method: 'patch'}
    ];

    beforeEach(() => {
        TestBed.configureTestingModule({
            imports: [HttpClientTestingModule],
            providers: [
                {provide: HTTP_INTERCEPTORS, useClass: TrafficInterceptor, multi: true},
                TrafficInterceptor,
                TrafficStateStore,
                TrafficService
            ]
        });
        interceptor = TestBed.inject(TrafficInterceptor);
        trafficStateStore = TestBed.inject(TrafficStateStore);

        httpTestingController = TestBed.inject(HttpTestingController);
        http = TestBed.inject(HttpClient);
    });

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

    it('should be created', () => {
        expect(interceptor).toBeTruthy();
    });

    httpMethods.forEach(({method}) => {
        it(`should track and untrack a successfull HTTP - ${method} metod`, () => {
            httpRequest(reqURL, method);
            const req = httpTestingController.expectOne(reqURL);

            expect(trafficStateStore.get('showPendingOverlay')).toBeTrue();
            expect(trafficStateStore.get('isRequestProcessing')).toBeTrue();

            req.flush({});

            expect(trafficStateStore.get('showPendingOverlay')).toBeFalse();
            expect(trafficStateStore.get('isRequestProcessing')).toBeFalse();
        });


        it(`should track and untrack a unsuccessfull HTTP - ${method} metod`, () => {
            httpRequest(reqURL, method);
            const req = httpTestingController.expectOne(reqURL);

            expect(trafficStateStore.get('showPendingOverlay')).toBeTrue();
            expect(trafficStateStore.get('isRequestProcessing')).toBeTrue();

            req.flush('', {status: 404, statusText: 'error'});

            expect(trafficStateStore.get('showPendingOverlay')).toBeFalse();
            expect(trafficStateStore.get('isRequestProcessing')).toBeFalse();
        });
    });

    function httpRequest(url: string, method: string, data?: Record<string, boolean>, params: Record<string, boolean> = {}): void {
        if (data) {
            http[method](url, data, {params}).subscribe();
        } else {
            http[method](url, {params}).subscribe();
        }
    }
});

终端中的错误是 Uncaught [object Object]