Testing Angular: How to Unit-test HttpErrorResponse with custom headers using HttpClientTestingModule

Question

Testing Angular: How to Unit-test HttpErrorResponse with custom headers using HttpClientTestingModule

In the code snippet below, I am attempting to find a custom header on error:

login(credentials: Credentials): Observable<any> {
    return this.http.post(loginUrl, credentials)
        .pipe(
            catchError((httpErrorResponse: HttpErrorResponse) => {
                let error = new Error('', httpErrorResponse.status);

                ...
                if (httpErrorResponse.headers.get('customHeaderName')) {
                    error.message = 'Appropriate Response';
                }
                ...
                return throwError(error);
            })
        );
}

While using HttpClientTestingModule, I am trying to test the above code with the following test case:

it('should catch error with custom header', (done) => {
    authService.login(credentials)
        .subscribe({
            next: null,
            error: (error: Error) => {
                expect(error.message).toEqual('Appropriate Response');
            }
        });

    httpMock.expectOne({
        url: apiUrl,
        method: 'POST'
    }).flush([], {status: 403, statusText: 'Forbidden', headers: {'customHeaderName': 'customHeaderValue'}});

    done();
});

One issue I encountered is that while status and statusText are as expected, the headers are not included, so the if block is not activated.

Any thoughts on this?

angular typescript unit-testing karma-jasmine angular-httpclient

Answer 1

Answer №1

Everything seems to be functioning correctly. Below is a practical example using angular version 11 and above

For instance:

auth.service.ts:

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

type Credentials = any;

@Injectable()
export class AuthService {
  constructor(private http: HttpClient) {}
  login(credentials: Credentials): Observable<any> {
    const loginUrl = 'http://localhost:3000/login';
    return this.http.post(loginUrl, credentials).pipe(
      catchError((httpErrorResponse: HttpErrorResponse) => {
        let error = new Error('' + httpErrorResponse.status);
        if (httpErrorResponse.headers.get('customHeaderName')) {
          error.message = 'Appropriate Response';
        }
        return throwError(error);
      })
    );
  }
}

auth.service.spec.ts:

import {
  HttpClientTestingModule,
  HttpTestingController,
} from '@angular/common/http/testing';
import { TestBed } from '@angular/core/testing';
import { AuthService } from './auth.service';

fdescribe('60381453', () => {
  let authService: AuthService;
  let httpMock: HttpTestingController;
  beforeEach(() => {
    TestBed.configureTestingModule({
      imports: [HttpClientTestingModule],
      providers: [AuthService],
    });
    authService = TestBed.inject(AuthService);
    httpMock = TestBed.inject(HttpTestingController);
  });
  it('should catch error with custom header', () => {
    const credentials = { password: '123', email: '<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="126677607761733c66777c7552776a737f627e773c717d7f">[email protected]</a>' };
    const apiUrl = 'http://localhost:3000/login';
    authService.login(credentials).subscribe({
      next: null,
      error: (error: Error) => {
        expect(error.message).toEqual('Appropriate Response');
      },
    });

    httpMock.expectOne({ url: apiUrl, method: 'POST' }).flush([], {
      status: 403,
      statusText: 'Forbidden',
      headers: { customHeaderName: 'customHeaderValue' },
    });
  });
});

unit test result:

https://i.sstatic.net/vcal2.png

Answer 2

Everything seems to be functioning correctly. Below is a practical example using angular version 11 and above

For instance:

auth.service.ts:

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

type Credentials = any;

@Injectable()
export class AuthService {
  constructor(private http: HttpClient) {}
  login(credentials: Credentials): Observable<any> {
    const loginUrl = 'http://localhost:3000/login';
    return this.http.post(loginUrl, credentials).pipe(
      catchError((httpErrorResponse: HttpErrorResponse) => {
        let error = new Error('' + httpErrorResponse.status);
        if (httpErrorResponse.headers.get('customHeaderName')) {
          error.message = 'Appropriate Response';
        }
        return throwError(error);
      })
    );
  }
}

auth.service.spec.ts:

import {
  HttpClientTestingModule,
  HttpTestingController,
} from '@angular/common/http/testing';
import { TestBed } from '@angular/core/testing';
import { AuthService } from './auth.service';

fdescribe('60381453', () => {
  let authService: AuthService;
  let httpMock: HttpTestingController;
  beforeEach(() => {
    TestBed.configureTestingModule({
      imports: [HttpClientTestingModule],
      providers: [AuthService],
    });
    authService = TestBed.inject(AuthService);
    httpMock = TestBed.inject(HttpTestingController);
  });
  it('should catch error with custom header', () => {
    const credentials = { password: '123', email: '<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="126677607761733c66777c7552776a737f627e773c717d7f">[email protected]</a>' };
    const apiUrl = 'http://localhost:3000/login';
    authService.login(credentials).subscribe({
      next: null,
      error: (error: Error) => {
        expect(error.message).toEqual('Appropriate Response');
      },
    });

    httpMock.expectOne({ url: apiUrl, method: 'POST' }).flush([], {
      status: 403,
      statusText: 'Forbidden',
      headers: { customHeaderName: 'customHeaderValue' },
    });
  });
});

unit test result:

https://i.sstatic.net/vcal2.png

Testing Angular: How to Unit-test HttpErrorResponse with custom headers using HttpClientTestingModule

Answer №1

Similar questions

An error occurs when attempting to use object mapping and the rest operator in a return statement due to

Avoid unnecessary re-rendering of React Native components with each update of the state

Please ensure the subscription has completed before proceeding with the loop

How can the id from a post response be obtained in Angular 7 when using json-server?

Wait until a svelte store value is set to true before fetching data (TypeScript)

Instructions on how to link a button to display and conceal content when clicked

The exported instance of sequelize is missing in the Module imports

Why bother specifying types when extending tsconfig?

The requested resource on localhost does not have the 'Access-Control-Allow-Origin' header

Exploring Data in Angular 2: Examining Individual Records

Best practices for utilizing forwardRef and next/dynamic in next.js version 13.4 with the "react-email-editor" component

The completion of RxJS forkJoin is not guaranteed

What is the best way to intentionally make a Node unit test fail when catching a Promise rejection?

What is the best way to implement NgClass on a single iteration within NgFor while utilizing parent/child components?

Adjust the dimensions of an Angular Material 2 dialog by updating the width or height

Error in Typescript occurrence when combining multiple optional types

Mongoose does not compare BCRYPT passwords that are empty

Zod implements asynchronous validation for minimum, maximum, and length constraints

The functionality of Angular material input fields is compromised when the css backface property is applied

Encountering a 500 error code while attempting to send a post request using Angular