Angular ErrorInterceptor 单元测试未按预期工作

Question

我有一个使用错误拦截器的 Angular 9 项目。代码如下：

constructor(private notificationService: NotificationService) { }

intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    return next.handle(request).pipe(
        retry(2),
        catchError(err => {
            return throwError(this.handleError(err));
        })
    );
}

private handleError(err) {
    let errorMessage = '';
    if (err instanceof ErrorEvent) {
        errorMessage = `Error: ${err.error.message}`;
    } else if (err instanceof HttpErrorResponse) { 
        errorMessage = this.handleServerSideError(err);
    } else if (err instanceof Error) { // server side body error
        errorMessage = `Error: ${err.message}`;
    }

    if(errorMessage != "")
    {
        this.notificationService.showError(errorMessage, this.somethingWentWrong);
    }

    return errorMessage;
}

private handleServerSideError(err: HttpErrorResponse): string {
    let errorMessage = '';
    switch (err.status) {
        case 401:
            errorMessage = this.getInvalidCredentials;
            break;
        case 403:
            errorMessage = this.getNotauthorised;
            break;
        case 409:
            errorMessage = this.actionAlreadyBeingPerformed;
            break;
    }
    return errorMessage;
}

但是我写的测试不起作用。它说它是成功的，但是如果我将 expect->toEqual 更改为另一个字符串，它仍然是成功的。所以我的单元测试不起作用。我有一种感觉，我做错了什么，但我不知道是什么。我要测试的内容如下“测试失败的获取请求”。您可以在下面找到代码：

beforeEach(() => {
    TestBed.configureTestingModule({
        imports: [ HttpClientTestingModule, ToastrModule.forRoot() ],
        providers: [ ErrorInterceptor,
            NotificationService,
            { provide: HTTP_INTERCEPTORS, useClass: ErrorInterceptor, multi: true }
          ]
    });
    
    notificationService = TestBed.inject(NotificationService);
    httpClient = TestBed.inject(HttpClient);
    httpMock = TestBed.inject(HttpTestingController);
    errorInterceptor = TestBed.inject(ErrorInterceptor);
});

it('should handle error of type Error',() => { 
    var notificationServiceSpy = spyOn(notificationService, "showError");
    
    // Make an HTTP GET request
    httpClient.get<Data>("url").subscribe(
        (error: Error) => {
            expect(error.message).toEqual("Error: the error message");
            expect(notificationServiceSpy).toHaveBeenCalledWith("Error: the error message", "Er is iets mis gegaan")
        }
    );

    // The following `expectOne()` will match the request's URL.
    const req = httpMock.expectOne("url")

    // Respond with mock error
    req.flush('', { status: 401, statusText: 'the error message' });
});

Answer 1

• 首先，您需要使用error 方法而不是flush

• 那么这是一个异步测试，所以你需要在测试完成时告诉jasmine，例如使用done函数：

  it('should handle error of type Error',(done) => { 
    var notificationServiceSpy = spyOn(notificationService, "showError");
  
    // Make an HTTP GET request
    httpClient.get<Data>("url").subscribe(() => {},
        (error: Error) => {
            expect(error.message).toEqual("Error: the error message");
            expect(notificationServiceSpy).toHaveBeenCalledWith("Error: the error message", "Er is iets mis gegaan");
           done(); // Inform jasmine that test is over
        }
    );
  
    // The following `expectOne()` will match the request's URL.
    const req = httpMock.expectOne("url")
  
    // Respond with mock error
    req.error(new HttpErrorResponse({error: 'the error message', status: 401}) as any);
  });