如何使用 NgRX 和 Karma 正確測試存儲

Question

我正在嘗試測試三件事：

1. 根據對CourseService.emptyCourseBuffer的調用查看我的 initialState 是否正在更新/未更新

2. 查看ngrx dispatch方法是調用一次還是兩次，基於1。

我已經設法讓 2) 工作，但不知道如何獲得 1)。 在 Angular 中測試調度/NGRX 存儲的正確方法是什么？

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');
    });
  });
});

如果填充了課程緩沖區，我在應該設置課程內容和空緩沖區時收到以下錯誤：

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

我如何解決它？

Answer 1

在進行斷言時，您似乎指的是陳舊的 object (initialState)。

在調用動作調度后嘗試獲取新的 state。

嘗試這個：

  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
      });
    });
  });