CODEWITHSUNDEEP
angularkarma-jasminengrx
methuselah
methuselah

Reputation: 13216

How to properly test store with NgRX and Karma

I am trying to test three things:

  1. To see if my initialState is being updated/not updated based on a call to CourseService.emptyCourseBuffer

  2. To see if the ngrx dispatch method is called once or twice, based on 1.

I have managed to get 2) working, but no idea how to get 1). What is the correct way to test dispatch/NGRX store in Angular?

import { TestBed } from '@angular/core/testing';
import { MockStore, provideMockStore } from '@ngrx/store/testing';
import { CourseService } from './course.service';
import { CourseContentElementType, CourseContentType } from './course-content/course-content';
import { UtilService } from '../../services/util.service';
import { CourseContentButtonEventType } from './course-content/course-content-button/course-content-button';
import { State } from '../../../builder/builder.reducer';
import { Store } from '@ngrx/store';

describe('CourseService unit tests', () => {
  let store: Store<State>;
  const initialState = {
    course: {
      modules: [
        {
          title: 'Untitled module',
          content: [
            {
              id: 1,
              uid: `${CourseContentElementType.CARD}-${UtilService.generateRandomString(10)}`,
              body: {
                text: 'Welcome',
              },
              type: CourseContentType.TEXT,
              button: [
                {
                  uid: `${CourseContentElementType.BUTTON}-${UtilService.generateRandomString(10)}`,
                  title: 'Get Started',
                  event: [
                    {
                      id: 1,
                      action: CourseContentButtonEventType.OPEN_EXTERNAL_URL,
                      value: 'https://en.wikipedia.org/wiki/Educational_technology',
                    },
                    { id: 2, action: CourseContentButtonEventType.END },
                  ],
                  isEnabled: true,
                },
              ],
            },
          ],
        },
      ],
    },
  };

  beforeEach(() => {
    TestBed.configureTestingModule({
      providers: [provideMockStore({ initialState })],
    });
    store = TestBed.inject(MockStore);
  });

  describe('emptyCourseBuffer()', () => {
    it('should not set course content and empty buffer if course buffer is not populated', () => {
      const storeSpy = spyOn(store, 'dispatch').and.callThrough();
      CourseService.emptyCourseBuffer(null, store);
      expect(storeSpy).toHaveBeenCalledTimes(1);
      expect(initialState.course.modules[0].content[0].body.text).toEqual('Welcome');
    });

    it('should set course content and empty buffer if course buffer is populated', () => {
      const storeSpy = spyOn(store, 'dispatch').and.callThrough();
      CourseService.emptyCourseBuffer(initialState.course, store);
      expect(storeSpy).toHaveBeenCalledTimes(2);
      expect(initialState.course.modules[0].content[0].body.text).toEqual('Testing');
    });
  });
});

I get the following error at should set course content and empty buffer if course buffer is populated:

Error: Expected 'Welcome' to equal 'Testing'.

How do I fix it?

Upvotes: 0

Views: 971

Answers (1)

AliF50
AliF50

Reputation: 18869

It seems you are referring to a stale object (initialState) when doing your assertions.

Try getting the new state after dispatch of actions has been called.

Try this:

  describe('emptyCourseBuffer()', () => {
    it('should not set course content and empty buffer if course buffer is not populated', (done) => { // add Jasmine done handler
      const storeSpy = spyOn(store, 'dispatch').and.callThrough();
      CourseService.emptyCourseBuffer(null, store);
      expect(storeSpy).toHaveBeenCalledTimes(1);
      store.subscribe(state => {
        console.log({ state }); // log it to see the structure
        expect(state.course.modules[0].content[0].body.text).toEqual('Welcome');
        done(); // call done to let Jasmine know you're done with the test
      });
    });

    it('should set course content and empty buffer if course buffer is populated', (done) => {
      const storeSpy = spyOn(store, 'dispatch').and.callThrough();
      CourseService.emptyCourseBuffer(initialState.course, store);
      expect(storeSpy).toHaveBeenCalledTimes(2);
      store.subscribe(state => {
        console.log({ state }); // log it to see the structure
        expect(state.course.modules[0].content[0].body.text).toEqual('Testing');
        done(); // call done to let Jasmine know you're done with the test
      });
    });
  });

Upvotes: 1

Related Questions