在 Angular HTTP 拦截器中对拦截功能进行单元测试答案

【问题标题】：Unit testing the intercept function in an Angular HTTP interceptor在 Angular HTTP 拦截器中对拦截功能进行单元测试
【发布时间】：2020-04-06 10:35:26
【问题描述】：

我已经编写了一个 Angular 9 HTTP 拦截器，我想在相对隔离的情况下对拦截功能进行单元测试。从我在StackOverflow already 上看到的情况来看，人们建议发出虚假HTTP 请求或return a basic request，因为我使用.pipe 方法（TypeError: next.handle(.. .).pipe 不是函数)

这是我的拦截功能，请问您建议对这个功能进行什么单元测试？

intercept(request: HttpRequest < unknown >, next: HttpHandler): Observable < HttpEvent < unknown >> {
  this.loadingService.show();
  return next.handle(request).pipe(
    catchError((error: HttpErrorResponse) => {
      if (error.status !== 401) {
        this.snackBar.open("There was an error when making your request! " + error.message, 'Okay, I will refresh the page', { duration: 10000 });
      }
      return throwError(error);
    }),
    finalize(
      () => {
        this.loadingService.hide()
      }
    )
  );
}

【问题讨论】：

标签： angular angular-httpclient angular-httpclient-interceptors

【解决方案1】：

我能够通过在提供程序部分添加以下内容来解决我的问题

TestBed.configureTestingModule

通过提供HTTP_INTERCEPTORS HttpClientTestingModule 将使用我制作的拦截器：

{
  provide: HTTP_INTERCEPTORS,
  useClass: LoadingInterceptor,
  multi: true
},

【讨论】：