Tips on how to retrieve a stubbed Observable<void> in RxJS

Currently, I am attempting to stub an API and would like to retrieve a stubbed response from my Service.

The method in my service appears as follows:

public addItem(item): Observable<void> {
    this.listOfItems.push(item);
    return of();
}

As for my component method, it looks something like this:

public submit(): void {
   this.service.addItem(this.item)
       .subscribe(() => console.log('working'));
}

Regrettably, the current setup does not trigger the subscribe function and nothing is displayed in the console log.

What can I do to return an empty Observable<void> that can be subscribed to?

Answer №1

Void signifies nothing, consider utilizing undefined.

send back of(undefined);

Alternatively, you could resort to the rather unsightly any workaround, though it is deemed acceptable for testing purposes in order to simplify the recreation of properly typed mocks and save time by quickly casting to any in my opinion.

send back <any>of(true);

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

Ways to obtain the scrollWidth and offSetWidth of a div that is being utilized as an ngx-datatable-cell-template within an ngx-datatable

How can I retrieve the scrollWidth and offSetWidth of a div that is included in a child component being loaded as an ngx-datatable-cell-template inside ngx-datatable? I am consistently receiving values of 0. I have added a template variable for the div el ...

Angular i18n simplifies the process of internationalizing and local

Is there a way to display different labels based on the user without using conditionals? I want to maintain consistency in this large project. For example: When User 1 is logged in: <h1>Hello, I am User 1</h1> When User 2 is logged in: < ...

The parameter cannot be assigned a value of type 'string' as it requires a value that matches the format '`${string}` | `${string}.${string}` | `${string}.${number}`'

I recently updated my react-hook-forms from version 6 to version 7. Following the instructions in the migration guide, I made changes to the register method. However, after making these changes, I encountered the following error: The argument being pass ...

Develop a universal function for inserting information into an array within a data set

I need assistance with my Typescript code. I am currently working on a method that pushes data into an array in a mongoose collection. However, the issue I'm facing is that the value is not being passed dynamically to the Key field in the $set operato ...

Angular 2 User Interface with Drag-and-Drop Functionality

I have been searching for a solution that would allow me to drag HTML elements and place them anywhere on the screen. After exploring different options, I came across 2 packages: https://github.com/valor-software/ng2-dragula https://github.com/akser ...

A data type that exclusively accepts values from an enumerated list without mandating the inclusion of every possible value within the enum

Here's a code snippet I'm working with: enum Foo { a, b, c } type Bar = { [key in keyof typeof Foo]: string; } const test: Bar = { a: 'a', b: 'b' }; I'm encountering an issue where the code is complaining ...

I'm struggling to transfer information from my form to TypeScript in Angular

Currently, I am working on developing a fullstack application using Node.js and Angular (material UI). However, I have encountered an issue that I need help with. I am trying to figure out how to retrieve data from an Angular form for a small web resource ...

Troubleshooting connectivity problems: SocketIO integration with microservices on a Kubernetes platform

I have organized my system using microservices architecture, with separate services for client interactions, orders, payments, and more. Each of these services runs on its own express server. Now, I am looking to integrate real-time feedback functionality ...

"Exploring the world of Typescript's return statements and the

I'm currently grappling with a design dilemma in typescript. Within my controller, I perform a validation process that can either return a 422 response, which ends the thread, or a validated data object that needs to be utilized further. Here's a ...

Having trouble retrieving the default selected value using the index in Angular Material's mat-button-toggle functionality

I'm encountering an issue with setting the default value for a toggle button group. The code is simple and the toggle buttons are correctly fetching values from the index, but I can't seem to get one of them to be default selected. I tried settin ...

ag-grid-angular failing to present information in a table layout

I have implemented ag-grid-angular to showcase data in a structured table format, but the information appears jumbled up in one column. The data for my ag-grid is sourced directly from the raw dataset. https://i.stack.imgur.com/sjtv5.png Below is my com ...

Obtain a hidden item using *ngIf in Angular for testing purposes

Snippet of HTML Code: <div *ngIf="state"> <p>some text<p> <button (click)="increment()" class="myButton">Increment</button> </div> My Component Structure: @Component( ...

Headerbar overlapping Div when scrolling

I'm currently trying to create a fixed header bar that allows the content of the page to scroll beneath it rather than displaying above it. This functionality is working on multiple pages, but I'm experiencing issues with my calendar page. When ...

In Angular 12, the search button's response data does not appear in the template until the button is clicked twice

Check out my search input box and button code snippet <div class="col-lg-8"> <input #text class="form-control" placeholder="Search Customer" required/> </div> <button type="button" cla ...

Exploring the functionalities of class methods within an Angular export function

Is it possible to utilize a method from an exported function defined in a class file? export function MSALInstanceFactory(): IPublicClientApplication { return new PublicClientApplication({ auth: AzureService.getConfiguration(), <-------- Com ...

Learn how to utilize React lazy effectively in components that utilize Redux compose without any similarities to type 'IntrinsicAttributes'

Here is the structure of a component that is exported with compose from redux. This component is called TestInspector.tsx export interface TestInspectorProps { closeInspector: () => void; onExpand: () => void; isFullScreen: boolean; selected ...

retrieve data from URL parameters (navigation backward)

When navigating from the main page to the transaction page and then to the details page, I have implemented a go back feature on the details page. Using the state, I pass data when navigating back so that I can access it again from the transaction page. H ...

Navigating the way: Directing all TypeScript transpiled files to the build folder

I am currently working on a project using Angular2/Typescript, and I have the tsconfig.js file below: { "compilerOptions": { "module": "commonjs", "moduleResolution": "node", "target": "es5", "sourceMap": true, ...

Unpacking the information in React

My goal is to destructure coinsData so I can access the id globally and iterate through the data elsewhere. However, I am facing an issue with TypeScript on exporting CoinProvider: Type '({ children }: { children?: ReactNode; }) => void' is no ...

Is it possible that Typescript does not use type-guard to check for undefined when verifying the truthiness of a variable?

class Base {} function log(arg: number) { console.log(arg); } function fn<T extends typeof Base>( instance: Partial<InstanceType<T>>, key: keyof InstanceType<T>, ) { const val = instance[key]; if (val) { ...