Angular 角度单元测试HTTP错误拦截器catchError/ErrorEvent/Error

我的HTTP拦截器有一个非常奇怪的问题，我真的无法处理。更准确地说，当将

ErrorEvent

更改为

Error

时，反之亦然，它覆盖了一个if/else条件，但使另一个条件不在代码覆盖范围内。我用的是Angular 9，Jest 24和RxJS 6

http错误.interceptor.ts

import {
  HttpErrorResponse,
  HttpEvent,
  HttpHandler,
  HttpInterceptor,
  HttpRequest
} from '@angular/common/http';
import { catchError } from 'rxjs/operators';
import { Injectable } from '@angular/core';
import { Observable, throwError } from 'rxjs';

@Injectable()
export class HttpErrorInterceptor implements HttpInterceptor {
  intercept(
    request: HttpRequest<any>,
    next: HttpHandler
  ): Observable<HttpEvent<any>> {
    let errorMessage: string;

    return next.handle(request).pipe(
      catchError((err: HttpErrorResponse) => {
        if (err.error instanceof ErrorEvent) {
          // Client-side error.
          errorMessage = `An error occurred: ${err.error.message}`;
          alert('Network error.');
        } else {
          // Server-side error.
          alert('Server unavailable.');
          errorMessage = `Backend returned code ${err.status}, body was: ${err.error}`;
        }

        return throwError(errorMessage);
      })
    );
  }
}

import { TestBed } from '@angular/core/testing';
import { HttpErrorInterceptor } from './http-error.interceptor';
import {
  HttpClientTestingModule,
  HttpTestingController
} from '@angular/common/http/testing';
import { HTTP_INTERCEPTORS } from '@angular/common/http';
import { RegisterService } from './register.service';

describe('HttpErrorInterceptor', () => {
  let httpErrorInterceptor: HttpErrorInterceptor;
  let httpTestingController: HttpTestingController;
  let registerService: RegisterService;

  beforeEach(async () =>
    TestBed.configureTestingModule({
      imports: [HttpClientTestingModule],
      providers: [
        RegisterService,
        {
          provide: HTTP_INTERCEPTORS,
          useClass: HttpErrorInterceptor,
          multi: true
        }
      ]
    })
  );

  beforeEach(() => {
    httpErrorInterceptor = new HttpErrorInterceptor();
    httpTestingController = TestBed.inject(HttpTestingController);
    registerService = TestBed.inject(RegisterService);
  });

  it('should catch errors when calling fake URL', async () => {
    const fakeURL = 'https://fakeapi.com';
    const fakeDataToBeSend = {
      firstName: 'Daniel',
      lastName: 'Danielecki',
      email: 'daniel.danielecki@foo.com'
    };

    jest.spyOn(window, 'alert').mockImplementation(() => {}); // Note: window.alert = jest.fn() works too, but it contaminates other tests, therefore try to avoid it.

    // Make an HTTP POST request
    await registerService.registerUser(fakeDataToBeSend, fakeURL).subscribe(); // https://github.com/angular/angular/issues/18345 ????

    httpTestingController
      .expectOne(fakeURL)
      .error(new ErrorEvent('Network error.')); //Error type instance can't be passed.

    expect(window.alert).toHaveBeenCalledWith('Network error.');

    // httpTestingController
    //   .expectOne(fakeURL)
    //   .error(new ErrorEvent('Server unavailable.')); //Error type instance can't be passed.

    // expect(window.alert).toHaveBeenCalledWith('Server unavailable.');
  });

现在，在http error.interceptor.ts中，我将

ErrorEvent

更改为

error

，测试将失败。但是，如果在http error.interceptor.spec.ts中出现错误，我将进行如下更改，测试通过。但是，不包括

if

，而包括

else

// httpTestingController
//   .expectOne(fakeURL)
//   .error(new ErrorEvent('Network error.')); //Error type instance can't be passed.

// expect(window.alert).toHaveBeenCalledWith('Network error.');

httpTestingController
  .expectOne(fakeURL)
  .error(new ErrorEvent('Server unavailable.')); //Error type instance can't be passed.

expect(window.alert).toHaveBeenCalledWith('Server unavailable.')