Angular asynchronous testing with Observable using karma

I am currently working on testing an asynchronous scenario. Here is a snippet of my component:

  ngOnInit(private service: MyService) {
    this.isLoading = true;
    this.service.getData().subscribe((data) => {
      this.data = data;
      this.isLoading = false;
    });
  }

In the code above, I set isLoading to true initially and then update it to false once the data is fetched successfully. This behavior is what I'm trying to test. I have attempted using tick(), whenStable() methods but so far have not been able to capture isLoading being true.

If anyone has any suggestions or solutions, I would greatly appreciate your help. Thank you.

Answer №1

it('should test the getData method of the service', done => {
  const testData = {};
  spyOn(component['service'], 'getData').and.returnValue(of(testData));
  component['service'].getData().pipe(delay(500)).subscribe(data => {
    expect(component.data).toBe(testData);
    expect(component.isLoading).toBeFalsy();
    done();
  });
  
  expect(component.isLoading).toBeTruthy();
});

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

Steps to implement Angular routerLink on an image for seamless navigation to a different component

Is there a way to create an interactive image that leads to other sections within Angular? The intention is for this particular image to serve as a miniature profile picture of the existing user, located in the navigation bar. <img ngSrc="{{User.photo ...

Issue with Angular4: Unable to select [selected] attribute on initial load

Here is a code snippet to select a department: <select name="department" class="form-control select" [(ngModel)]="departments" formControlName="departmentControl"> <option *ngFor="let department of departments" [ngValue]="department" [se ...

The Typescript generics are unable to be assigned to type T

Take a look at my code snippet: interface IDoc { doSomething(): void } class IDocFoo implements IDoc { doSomething(): void { console.log('Do doSomething'); } } class IDocFactory { getIDocInstance<T extends IDoc>(): T { re ...

Is it feasible for a React-based shell to host or load an Angular component using Module Federation in Webpack 5?

I am currently developing a web application using Angular that will be embedded or loaded from another web application built with React. I am unsure if this integration can be achieved using webpack 5's module federation. Module federation involves l ...

Tips for setting up nested folders using Node.js on a Windows machine:

Is there a way to use Nodejs in Windows 10/11 to create a parent folder and then add a new folder inside of that parent folder, like this: parent/child within the Documents folder? ...

How can you display or list the props of a React component alongside its documentation on the same page using TypeDoc?

/** * Definition of properties for the Component */ export interface ComponentProps { /** * Name of something */ name: string, /** * Action that occurs when component is clicked */ onClick: () => void } /** * @category Componen ...

Utilizing References in React Components

One of the challenges I am facing involves a Container that needs references to some of its child components: const Container = () => { const blocks: HTMLDivElement[] = []; return ( <div> <Navigation currentBlock={currentBlock} ...

The issue of a mocked MobX store in Jest not resetting between tests is causing problems

I have a straightforward login component and a MobX store that holds user information. I am testing the integration using Jest. The application is built with Create React App, so my tests are based on that. This is what my Login component looks like: cons ...

Issue with readonly is preventing the ability to alter the font color of the input

I need to change the font color of a disabled input. When it is disabled, it appears gray and I want it to be black instead. I attempted to use readonly but that did not have the desired effect, and now the input is showing [object Object]. Below is my HTM ...

The module 'NgAutoCompleteModule' was declared unexpectedly by the 'AppModule'. To fix this issue, make sure to add a @Pipe/@Directive/@Component annotation

Currently, I am attempting to integrate an autocomplete feature into my Angular 2/4+ project. Despite trying various libraries, none of them seem to be working correctly. Each one presents me with a similar error message: Unexpected module 'NgAutoCom ...

Having trouble resolving all parameters for 'Router' in Angular 2 testing with Router

Currently, I am in the process of testing a component that has Router injected in the constructor (TypeScript): constructor( private _router: Router, private dispatcher: Observer<Action>, fb: FormBuilder ) { ... } Here are the test cases ...

Function `getEventMap` that retrieves the specific "EventMap" associated with an EventTarget T

In the file lib.dom.d.ts, there is a defined interface: interface EventTarget { addEventListener(type: string, callback: EventListenerOrEventListenerObject | null, options?: AddEventListenerOptions | boolean): void; dispatchEvent(event: Event): boo ...

Encountering an Angular 12 error 401 upon refreshing the page

Currently, I am working on a login form using angular 12 with Spring Boot that includes basic authentication spring security. When a user successfully logs in, they are directed to the main page which offers CRUD actions as depicted in the images linked be ...

Assessing the validity of a boolean condition as either true or false while iterating through a for loop

I am facing an issue that involves converting a boolean value to true or false if a string contains the word "unlimited". Additionally, I am adding a subscription to a set of values and need to use *NgIf to control page rendering based on this boolean. &l ...

Handle errors originating from unsuccessful connections to a server named "Event" when using RxJS's fromEvent method

Using rxjs fromEvent to establish a connection with a named sse Event, I am looking to handle an Error in case of connection loss namedEvent() { try { const eventSource = new EventSource( 'adress' ); return fromEvent ...

Need help inserting an image into the div when the ngif condition is true, and when the ngif condition is false

Essentially, I have a situation where I am using an *ngIf condition on a div that also contains an image. This is for a login page where I need to display different versions based on the type of user. However, I'm facing an issue where the image does ...

The binding properties of ngIf and hidden do not work properly when the condition is passed from typescript

My goal is to create a dynamic form by parsing a JSON file and binding hidden/ngIf based on a condition. I am passing the condition from the typescript file and using it in the HTML file as well. Here are the changes in my code: product.component.ts expo ...

What is the best way to leverage the Nextjs Link tag while also incorporating the data-dismiss attribute?

Currently, I am working on a Next.js project. In the mobile view, my navigation menu utilizes a modal to toggle the navbar. However, I have encountered an issue where when I click on a navigation link, the data gets dismissed but the link itself does not n ...

Is it better to convert fields extracted from a JSON string to Date objects or moment.js instances when using Angular and moment.js together?

When working on editing a user profile, the API call returns the following data structure: export class User { username: string; email: string; creationTime: Date; birthDate: Date; } For validating and manipulating the birthDate val ...

Connecting HTML to an AngularFirestore collection using snapshotChanges

In my mobile app, I am using AngularFirestore2v5/rxjs to connect a hybrid Ionicv3/Angularv4 app to a Firestore collection. While binding UI with AngularFirestore.valueChanges works fine, switching to snapshotChanges for retrieving the id is causing some is ...