What is the best way to test multiple store injections withLatestFrom in NgRx Effects?

Question

What is the best way to test multiple store injections withLatestFrom in NgRx Effects?

Within our angular web application, we have implemented NgRx-effects that rely on various data sources within our store. To achieve this, we have adopted the suggested withLatestFrom strategy:

withLatestFrom(
   this.store.pipe(select(...)),
   this.store.pipe(select(...)),
   ...
)

While this method works effectively in production, it poses challenges when it comes to unit testing the effects.

Currently, our unit tests involve jasmine-marbles, jasmine spy-objects, and the ngrx MockStore (NgRx 7+). The main difficulty lies in providing the necessary store state to ensure that the selectors function correctly.

For instance, in our EXAMPLE-EFFECT, as illustrated below:

@Effect()
getStammdatenDetails$: Observable<Action> = this.actions$.pipe(
   ofType(StammdatenItemDetailActionTypes.REQUEST_DETAILS),
   withLatestFrom(
      this.store.pipe(select(fromRoot.getMetadata)),
      this.store.pipe(select(fromRoot.getCustomerId)),
      this.store.pipe(select(fromRoot.getRouterParams))
   ),
   mergeMap(([action, metadata, customerId, params]) => {
      *effect logic*
   })
);

We are seeking further guidance or helpful resources that could assist us in effectively unit testing such effects. Any insights on streamlining the testing process or refining the effects for better testability would be greatly appreciated.

angular typescript unit-testing testing ngrx

Answer 1

Answer №1

If you're looking for a way to set up your testing environment for ChapterEffects, you can follow this approach:

describe('ChapterEffects', () => {
  const actions$ = new Subject<any>();
  let effects: ChapterEffects;

  beforeEach(() => {
    TestBed.configureTestingModule({
      providers: [
        TestedEffects,
        provideMockActions(() => actions$),
        ...otherMocks,
      ],
    });

    effects = TestBed.get(ChapterEffects);
  });

  it('', () => {

  });
});

Here is the tested effect:

  @Effect()
  fetchData$ = this.actions$.pipe(
    ofType<FetchAction>(ActionTypes.FetchAction),
    switchMap(({ payload }) => {
      return this.someService
        .get(payload)
        .pipe(
          map((data) => new LoadAction(data)),
          catchError(() => new ErrorAction()),
        );
    }),
  );

This is how you can set up your effect and test it. The goal is to verify whether the FetchAction will trigger a get request and load LoadAction once the request is complete.

First, you need to mock the SomeService in your TestBed:

const otherMocks = [ { provide: SomeService, useValue: { get: () => of(42)} }, ]

This means that during testing, this.someService will return { get: () => of(42)} }.

Next, you can mock the FetchAction. Since actions$ is a Subject, you can trigger the action with

actions$.next(new FetchRequest(7))

(7 as the payload).

After that, your effect should emit LoadAction with a value of 42, so:

it('', (done) => {
  effect.fetchData$.subscribe(action => {
    expect(action.payload).toEqual(42);
  }
  done()
  actions$.next(7);
});

Answer 2

If you're looking for a way to set up your testing environment for ChapterEffects, you can follow this approach:

describe('ChapterEffects', () => {
  const actions$ = new Subject<any>();
  let effects: ChapterEffects;

  beforeEach(() => {
    TestBed.configureTestingModule({
      providers: [
        TestedEffects,
        provideMockActions(() => actions$),
        ...otherMocks,
      ],
    });

    effects = TestBed.get(ChapterEffects);
  });

  it('', () => {

  });
});

Here is the tested effect:

  @Effect()
  fetchData$ = this.actions$.pipe(
    ofType<FetchAction>(ActionTypes.FetchAction),
    switchMap(({ payload }) => {
      return this.someService
        .get(payload)
        .pipe(
          map((data) => new LoadAction(data)),
          catchError(() => new ErrorAction()),
        );
    }),
  );

This is how you can set up your effect and test it. The goal is to verify whether the FetchAction will trigger a get request and load LoadAction once the request is complete.

First, you need to mock the SomeService in your TestBed:

const otherMocks = [ { provide: SomeService, useValue: { get: () => of(42)} }, ]

This means that during testing, this.someService will return { get: () => of(42)} }.

Next, you can mock the FetchAction. Since actions$ is a Subject, you can trigger the action with

actions$.next(new FetchRequest(7))

(7 as the payload).

After that, your effect should emit LoadAction with a value of 42, so:

it('', (done) => {
  effect.fetchData$.subscribe(action => {
    expect(action.payload).toEqual(42);
  }
  done()
  actions$.next(7);
});

What is the best way to test multiple store injections withLatestFrom in NgRx Effects?

Answer №1

Similar questions

When no values are passed to props in Vue.js, set them to empty

Is it possible to align the radio-button label above the radio-button in Angular Material 2?

Guide on linking a trust policy to an IAM role through CDK

Alias route for `src` in Ionic 3

Dynamic Introduction Screen - Ionic Version 4.0

Declaring scoped runtime interfaces with Typescript

The object must contain a property 'children', which is required in the type '{ children: any; }' but missing in the type '{}'

The utilization of the rest parameter in combination with generics

Encountering unusual results while utilizing interfaces with overloaded arguments

Adding a component dynamically with a link click in Angular: A step-by-step guide

Tips for utilizing generated *.d.ts files

Encountering difficulty when determining the total cost in the shopping cart

Encountering a 401 Unauthorized error due to CORS origin issue when making a post request with HttpClient in Angular

Issues with Ajax calls in IOS on Ionic Cordova, functioning properly on Android

What is the best way to limit the type of the second argument based on the type of the

Angular reactive form pattern validator restricts input to text, digits, and certain special characters

The error message "Angular formGroup requires a FormGroup instance. Kindly provide one."

What methods can I use to emphasize a row of mat-radio-buttons?

Utilize the function specified in an external file

What is the way to assign a variable to ngClass in Angular?