Testing an HTTP error Observable with Jasmine and RxJS simulations

I encountered a similar issue, but due to commenting constraints on other questions, I had to create a new one. The problem lies in a jasmine test where a function is expected to manage an error from a service call. The service call returns an RxJS `Observable` of an `HttpResponse`, yet the function under test does not seem to receive any response from the service, even when using a spy to simulate the error. Here's the code structure:

component.ts:

public thingThatCallsService() {
    this.foo = false;
    this.service.bar()
        .subscribe(
            (res) => {log(res)},
            (err) => {
                log(err) // Logs empty string during test
                if (err.status === 400) this.foo = true;
            }
        );
}

mockService.ts: (Used by the test suite instead of the actual service)

public bar() {
    return of(new HttpResponse());
}

test.ts:

it("sets foo to true if bar returns an error", fakeAsync(() => {
    spyOn(service, "bar").and.returnValue(
        throwError(() => new HttpErrorResponse({status: 400}))
    );
    component.thingThatCallsService();
    tick();
    componentFixture.detectChanges();
    expect(service.bar).toHaveBeenCalled();
    expect(component.foo).toBeTrue(); // Failing consistently
}))

Similar questions like this and this lack suitable solutions – some suggest returning a string rather than an object with a `status` field, or provide outdated/inaccurate code snippets.

It's worth mentioning that the code functions correctly outside the test environment; when the service encounters an error with a specific status code, `foo` is indeed set to true.

If you have any insights on how to properly handle errors thrown by the `Observable` for subscription handling, your guidance would be greatly appreciated. Thank you!

Answer №1

Could you please attempt the following to check if it resolves the issue?

spyingOn(service, "bar").and.returnValue(
        throwingError(() => ({ status: 400 }))
    );

Additionally, examine the log results in this situation too. I am uncertain why HttpErrorResponse is not functioning as expected.

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 is the best way to transform an array of objects into a nested array through shuffling

I am dealing with a diverse array of objects, each structured in a specific way: data = [ { content: { ..., depth: 1 }, subContent: [] }, { content: { ..., depth: 2 ...

Creating typed props is important when utilizing the Material UI makeStyles function

Currently, I'm in the process of transitioning some of my React components to the latest makeStyles/useStyles hook API from Material UI. As far as I know, I can still accept classes as a prop from parent components by passing the props to useStyles: ...

How can we ensure a generic async function with a return type that is also generic in Typescript?

I'm currently working on a function that retries an async function multiple times before rejecting. I want to make sure the typescript typings of the retry function are maintained and also ensure that the passed function is of type PromiseLike. Creat ...

In order to set a condition for the mat date picker to display a text box in Angular if the selected date is for someone under 18 years old

I need assistance with displaying a text field based on age validation. The requirement is to show the input field only if the age is less than 18. Below is the code snippet I am currently working with: <form [formGroup]="form"> ...

What is the best way to utilize mapping and filtering distinct values in an array using TypeScript?

What is the best way to filter and map distinct elements from an array into another array? I've experimented with various methods but keep encountering a syntax error stating "Illegal return statement". My objective is to display only unique items f ...

Creating TypeScript declaration file for exporting JavaScript function

I'm a beginner with TypeScript and I want to learn how to create a declaration file for a custom JavaScript function. I attempted to do this, however, I encountered an error stating "Could not find a declaration file for module './main'." Ad ...

typescript loop with a callback function executed at the conclusion

I am struggling with this code and it's driving me crazy. addUpSpecificDaysOfWeek(daysInMonth: any, callbackFunction: any){ var data = []; var that = this; daysMonth.forEach(function(day){ that.statsService.fetchData(that.userid, d ...

Encountering the error message "Received 1 argument, when expecting 4" while attempting to utilize a vuex getter in TypeScript

I encountered an issue while unit testing a getter function. The error message Expected 4 arguments, but got 1. appeared when I attempted to use the getter. My application was built using Quasar and utilizes TypeScript. The value of HttpMocks.mockToken is ...

What are the steps to incorporating a personalized component into an extension?

I am working on a TypeScript file that includes a class inheriting cc.Component. My goal is to package this file as an extension and make it easily accessible within the editor, allowing users to add it to a node with ease. What steps should I take to ac ...

Retrieving a specific data point from the web address

What is the most efficient way to retrieve values from the window.location.href? For instance, consider this sample URL: http://localhost:3000/brand/1/brandCategory/3. The structure of the route remains consistent, with only the numbers varying based on u ...

Issue: Unable to inject a service into a subscriber in NestJS

Currently, I am working on setting up a subscriber in NestJS to listen for create, update or delete events using TypeORM. When any of these events occur, my goal is to utilize an injected service to generate a new revision entry. However, I have encounter ...

Utilizing the String Enum for mapping an interface with an index

Using Typescript, I aim to make use of my string enumeration: export const enum MutationKeys { registerUser = 'registration/REGISTER', registerUserCompleted = 'registration/REGISTER_COMPLETED' } This allows the string values t ...

Resolving Typescript custom path problem: module missing

While working on my TypeScript project with Express.js, I decided to customize the paths in my express tsconfig.json file. I followed this setup: https://i.stack.imgur.com/zhRpk.png Next, I proceeded to import my files using absolute custom paths without ...

Unable to invoke the AppComponent function within ngOnInit due to error message: "Object does not have the specified property or method"

I'm a novice in Angular and I am attempting to invoke my function setCenter2() from the AppComponent class within the ngOnInit function of the same class. Is this achievable? Whenever I try to call my function by clicking on the map (using OpenStreetM ...

Can a form be submitted using ViewChild in Angular5?

Can a form be submitted using ViewChild in Angular5? If so, how can it be achieved? I attempted to do this but was unsuccessful My Attempt: <form #form="ngForm" (submit)="submitForm(form)" novalidate> <input required type="text" #codeReques ...

Creating a TypeScript frozen set: A step-by-step guide

Imagine having a group of values that you want to protect from being edited, as shown below: // These values should not be editable. const listenedKeys = new Set(['w', 'a', 's', 'd']) // This value can be accessed w ...

I am experiencing difficulties with TypeORM connecting to my Postgres database

Currently, I am utilizing Express, Postgres, and TypeORM for a small-scale website development project. However, I am encountering challenges when it comes to establishing a connection between TypeORM and my Postgres database. index.ts ( async ()=>{ ...

Error: The TypeScript aliases defined in tsconfig.json cannot be located

Having trouble finding the user-defined paths in tsconfig.json – TypeScript keeps throwing errors... Tried resetting the entire project, using default ts configs, double-checked all settings, and made sure everything was up-to-date. But still no luck. H ...

Tips for showing various tooltip text when iterating through a list?

I am currently working on a project where I am looping through a list and attempting to assign different tooltip text to various icons. However, I am struggling with the implementation. Here is a snippet of my code: <React.Fragment key={sv.key ...

Having trouble with Angular router.navigate not functioning properly with route guard while already being on a component?

I am currently troubleshooting an issue with the router.navigate(['']) code that is not redirecting the user to the login component as expected. Instead of navigating to the login component, I find myself stuck on the home component. Upon adding ...