how to unit test select from "@angular-redux/store" in angular 10?

Question

I am having a reducer defined as :

export const dummy_reducer = (state: any = INITIAL_STATE, action: any): any => {


  const actionOptions = (actionType) => ({
    GET_EMPLOYEE_DETAILS: () => {
      return tassign(state, {
        emp_name: action.payload.emp_name
      });
    },

and I am using it in my component.ts as follows:

 @select(["dummy_reducer", "emp_name"])
  emp_name$: Observable<any>;

Also when the component is getting initialised ,I am using the emp_name$ to subscribe like below:

ngOnInit() { this.emp_name$.subscribe((details) => { ......... } }); }

Now my question is how can i write unit test for this particular component, when i am running ng test,I am getting error as :

 Cannot read property 'subscribe' of undefined ...

at this ngOnInIt(). Any suggestion on how to fix it??. Please let me know how can i write a successful spec file for this.

Answer 1

You need to import NgReduxTestingModule, then having @select('loading') loading$: Observable<boolean> inside the component we can test it:

const stub = MockNgRedux.getSelectorStub('loading');
stub.next(false);
stub.next(true);
stub.complete();

component.loading$
  .toArray()
  .subscribe(
    actualSequence => expect(actualSequence).toEqual([ false, true ]),
    null,
    done);

You can even mock the data inside beforeEach function so it will be available for all tests :)

Code refence taken from here check it for more tests examples