mardi 17 octobre 2017

How to correctly test effects in ngrx 4?

There are plenty of tutorials how to test effects in ngrx 3.

However, I've found only 1 or 2 for ngrx4 (where they removed the classical approach via EffectsTestingModule ), e.g. the official tutorial

However, in my case their approach doesn't work.

effects.spec.ts (under src/modules/list/store/list in the link below)

 describe('addItem$', () => {
    it('should return LoadItemsSuccess action for each item', async() => {
      const item = makeItem(Faker.random.word);
      actions = hot('--a-', { a: new AddItem({ item })});

      const expected = cold('--b', { b: new AddUpdateItemSuccess({ item }) });
      // comparing marbles
      expect(effects.addItem$).toBeObservable(expected);
    });
  })

effects.ts (under src/modules/list/store/list in the link below)

...
 @Effect() addItem$ = this._actions$
    .ofType(ADD_ITEM)
    .map<AddItem, {item: Item}>(action => {
      return action.payload
    })
    .mergeMap<{item: Item}, Observable<Item>>(payload => {
      return Observable.fromPromise(this._listService.add(payload.item))
    })
    .map<any, AddUpdateItemSuccess>(item => {
      return new AddUpdateItemSuccess({
        item,
      })
    });
...

Error

 should return LoadItemsSuccess action for each item
        Expected $.length = 0 to equal 1.
        Expected $[0] = undefined to equal Object({ frame: 20, notification: Notification({ kind: 'N', value: AddUpdateItemSuccess({ payload: Object({ item: Object({ title: Function }) }), type: 'ADD_UPDATE_ITEM_SUCCESS' }), error: undefined, hasValue: true }) }).
            at compare (webpack:///node_modules/jasmine-marbles/index.js:82:0 <- karma-test-shim.js:159059:33)
            at Object.<anonymous> (webpack:///src/modules/list/store/list/effects.spec.ts:58:31 <- karma-test-shim.js:131230:42)
            at step (karma-test-shim.js:131170:23)

NOTE: the effects use a service which involves writing to PouchDB. However, the issue doesn't seem related to that and also the effects work in the running app.

The full code is a Ionic 3 app and be found here (just clone, npm i and npm run test)

Aucun commentaire:

Enregistrer un commentaire