Having trouble implementing catchError in a unit test for an HttpInterceptor in Angular 11

I am facing challenges in completing a unit test for my HttpInterceptor. The interceptor serves as a global error handler and is set to trigger on catchError(httpResponseError). While the interceptor functions perfectly fine on my website, I am struggling to create a successful unit test for the code.

Below is the code snippet for the Interceptor:

import { HttpErrorResponse, HttpEvent, HttpHandler, HttpInterceptor, HttpRequest} from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable, throwError } from 'rxjs';
import { retry, tap, catchError } from 'rxjs/operators';
import { HttpServiceError } from '../models/httpServiceError.model';
import { LoggingService, LogLevel } from '../services/logging.service';

@Injectable({
    providedIn: 'root'
})

export class HttpResponseInterceptorService implements HttpInterceptor{
  public logLevel!: LogLevel;

  constructor(private readonly loggingService: LoggingService) { 
// Intentionally left blank    
  }

  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    return next.handle(request)
      .pipe(
        retry(1),
        tap(() => console.log('ResponseInterceptor called')),
        catchError((error:HttpErrorResponse) => {          
          console.log('HttpErrorResponse caught')
          this.handleHttpError(error);
          return throwError(error);
        }))
  }

  // Additional code for handling errors and logging messages

In my testing environment, only the first `console.log` statement actually gets triggered instead of the expected behavior.

Furthermore, here's an excerpt from my spec file:

import { HttpClient, HttpErrorResponse, HttpEvent, HttpHandler, HttpRequest, HttpResponse, HTTP_INTERCEPTORS } from '@angular/common/http';
import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing';
import { fakeAsync, inject, TestBed } from '@angular/core/testing';
import { of } from 'rxjs';
import { take } from 'rxjs/operators';
import { LoggingService } from '../services/logging.service';

import { HttpResponseInterceptorService } from './httpresponseinterceptor.service';

describe('HttpResponseInterceptorService', () => {
  let interceptor: HttpResponseInterceptorService;  
  let httpMock: HttpTestingController;
  let loggingService: LoggingService;
  let httpClient: HttpClient;

  beforeEach(() => {
    // TestBed configuration and injection setup
  });

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

  // Detailed unit test cases with specific expectations
  

The tests involving triggering error responses have not been successful so far. All ideas and suggestions are greatly appreciated!

Thank you, Bjarne

Answer №1

It seems like the issue lies with the 'retry(1)' function in your code. If you want to successfully handle errors using the catchError method, you need to make sure that you call numberOfRetry + 1 times for your API.

You could potentially resolve this by attempting the following approach:

    let req = httpMock.expectOne("/api");
    req.error(new ErrorEvent('404 First Error'), errorResponse);
    req = httpMock.expectOne("/api");
    req.error(new ErrorEvent('404 Second Error'), errorResponse);

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What methods can be utilized to gauge loading speed in Angular2?

Currently, I am working with Angular2 and I am looking to measure the loading time of my application. Within the app, there are 3 child components, two of which contain very heavy content that affects performance. In an attempt to improve this, I have ut ...

What are some ways to enhance this TypeScript code using Functional Programming with the FP-TS library?

i am struggling to write some typescript code using fp-ts Below are the tasks that i want the algorithm to carry out: Once a path is received from the command line, it should check if the given path exists search for all files in the directory and locat ...

Is it possible to simulate JNI methods in my android application for the purpose of Junit testing?

Hey there, I'm facing a challenge with writing Junit tests for an Android project that includes JNI methods due to its usage of webkit. Is there a way I can solely test the Android methods without needing to test the JNI methods? Here's a snippe ...

What allows mapped types to yield primitive outputs when using {[P in keyof T]}?

Check out this innovative mapped type example that utilizes the power of keyof: type Identity<T> = { [P in keyof T]: T[P]; }; Have you ever wondered why Identity<number> results in the primitive number type, rather than an object type? Is th ...

A detailed guide on preserving session in Angular 4: a step-by-step approach

I am a beginner with Angular 4 and I'm unsure of how to implement session functionality. Can someone please explain the step-by-step process of implementing this feature in Angular 4, including where to write the necessary code? Below is an example co ...

retrieve the key associated with a translated value using ngx-translate

Using @ngx-translate along with localize-router has posed a challenge for me. I am unable to resolve a valid slug from a localized URL. For example, if the translation of 'about' is 'asd', then: routerLink="about/{{'about' ...

javascript assign array to object key

Looking at this basic array: const arr = [ { "id": 2, "color": "red" }, { "id": 1, "color": "blue" }, { "id": 2, "color": "yellow" ...

The error message states that the argument type '(src: Observable<any>) => Observable<any>' cannot be assigned to a parameter of type 'OperatorFunction<Object, any>'

Encountering a typescript error when trying to start the app. Not sure where I'm going wrong. It seems like it could be an issue with the rxjs version, but struggling to find the right solution. Seeing incompatible types on my system and not getting r ...

Contrasting @Input with Dependency Injection in Angular 10

Is there a way to pass values from a parent component to a child component without using the @Input decorator? I'm thinking about creating an instance of the Parent class in the constructor (Dependency Injection) and then accessing the variable value ...

Creating a new Angular library with SASS using Angular CLI

I'm currently working on an Angular6 app where I need to create a library. However, after generating the library project, I noticed that Angular CLI is automatically creating components with .css files instead of .scss files. Is there any way I can f ...

Discover the power and ease of combining Angular with OIDC Implicit Flow for seamless

I have integrated the angular-auth-oidc-client package for authentication in my Angular application with our OIDC server. While using the implicit flow, some users face log out issues when the access token expires. To address this, I decided to implement t ...

Searching for several arrays in Angular

Hello everyone, I have an API that returns data like this: [ [{ "id": 1, "qte": 12, "date_creation": "2020-08-17T00:00:00+02:00", "date_update": "2020-08-17T00:00:00 ...

Monitor the change in values upon pressing the submit button on Angular

I am currently working with an edit form that contains data in the input fields. <ng-form #infoForm="ngForm" novalidate> <div> <label for="firstName">First Name :</label> <input type=" ...

Tips for creating a typescript module definition that exports a module dependency as one of its members

Let's consider a particular situation: I am in the process of creating typescript definitions for two commonJS modules, A and B. Module B has a dependency on module A, and to make things easier, B directly exports A as a property B.A so that users do ...

The Axios GET method retrieves a response in the form of a string that represents an object

I have developed a function that triggers an axios Request. I am working with typescript and I am avoiding the use of any for defining return data types of both the function and the axios request itself. The issue arises when the returned object contains ...

Issues with Angular 2 Cli setup

Exploring the world of Angular 2, I decided to dive into the installation process of angular2 cli. However, upon executing 'ng new newapp' after installation, an unexpected error appeared where 'mg' was referenced rather than 'ng&a ...

What is the proper way to link a component so that it refreshes whenever a value is modified?

Currently, I have developed a basic application that is designed to retrieve the current weather information for a specific location. By default, this application sets a particular location but offers buttons in one of its components for users to change th ...

Tips for troubleshooting the error message: "The relative import path "$fresh/dev.ts" is not prefaced with / or ./ or ../"

My editor is showing a TypeScript error for a Deno module I am working on. The import path "$fresh/dev.ts" should be prefixed with / or ./ or ../ I have an import_map.json file set up with the following content. { "imports": { "$fre ...

Guide to customizing the layout preview specifically for certain components in Storybook, without affecting all components

Currently working on my storybook project and facing an issue. I'm aiming to have the layout centered in the preview section. I attempted export const parameters = { layout: 'centered', }; in the .storybook/preview.js file However, this c ...

Error: Angular7 Unable to locate namespace 'google'

I am currently utilizing the import { MapsAPILoader } from '@agm/core'; package to enable auto-complete address search functionality. However, I have encountered an error message stating cannot find namespace 'google'. The error occu ...