Styjun

In our angular webapp we have some NgRx-effects that use different information from different parts of our store. For this we are using the recommended withLatestFrom-approach:

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

While this approach seems to be working fine in production, it feels horrible for unit testing the effects.

For our unit-tests we are currently using jasmine-marbles, jasmine spy-objects and the ngrx MockStore (NgRx 7+). The hard part is to provide the necessary store state, so that the selectors can work properly.

EXAMPLE-EFFECT, for which we do not have a unit-test:

@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*
 )
);

Maybe someone here can provide more insight or a useful link to a piece of documentation we are missing?

I would really appreciate any help in regards if there is a convenient method to unit tests such effects, or how to refactor those effects to be more "testable" (without moving the problem to another piece of code, which we cannot test afterwards).

I suggest to do something like this:

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

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

 effects = TestBed.get(ChapterEffects);
 );

 it('', () => 

 );
);

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()),
 );
 ),
 );

Thats the sees do your effect and test. You want to test if FetchAction will call get request and load LoadAction when request will finish.

First thing is mock someService in testBet:

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

now in your test runtime this.someService will be get: () => of(42) }.

Now lets mock FetchAction. In test actions$ is a Subject so you can call actions$.next(new FetchRequest(7)) (7 is a payload).

Then out effect should emit LoadAction with 42, so:

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