jfairbank / redux-saga-test-plan

Test Redux Saga with an easy plan.
http://redux-saga-test-plan.jeremyfairbank.com
MIT License
1.25k stars 127 forks source link

[Question] Level of output nesting in console #291

Open goodwin64 opened 5 years ago

goodwin64 commented 5 years ago

I'm testing URL interaction using push from the react-router package. Having the same 2 objects serialized in console, I have no idea what's the difference between them.

Output: Screenshot from 2019-07-30 17-05-41

SagaTestError: 
put expectation unmet:

Expected
--------
{ '@@redux-saga/IO': true,
  combinator: false,
  type: 'PUT',
  payload: 
   { channel: undefined,
     action: 
      { type: '@@router/CALL_HISTORY_METHOD',
        payload: { method: 'push', args: [Object] } } } }

Actual:
------
1. { '@@redux-saga/IO': true,
  combinator: false,
  type: 'PUT',
  payload: 
   { channel: undefined,
     action: 
      { type: '@@router/CALL_HISTORY_METHOD',
        payload: { method: 'push', args: [Object] } } } }

    at new SagaTestError (/home/mdonchenko/WebstormProjects/tbs-ui/node_modules/redux-saga-test-plan/lib/shared/SagaTestError.js:17:57)
    at /home/mdonchenko/WebstormProjects/tbs-ui/node_modules/redux-saga-test-plan/lib/expectSaga/expectations.js:67:13
    at /home/mdonchenko/WebstormProjects/tbs-ui/node_modules/redux-saga-test-plan/lib/expectSaga/index.js:563:7
    at Array.forEach (<anonymous>)
    at checkExpectations (/home/mdonchenko/WebstormProjects/tbs-ui/node_modules/redux-saga-test-plan/lib/expectSaga/index.js:562:18)
    at process._tickCallback (internal/process/next_tick.js:68:7)

And a code:

// sagas

import { push } from 'connected-react-router';
// ...

export function* updateUrlFieldSaga(action: routines.updateUrlFieldAction) {
  const prevParams = yield select(routeParamsSelector);
  const nextParams = {
    ...prevParams,
    ...action.payload,
  };
  const search = queryString.stringify(nextParams);
  yield put(push({ search })); // <----------------- (1)
}

export function* watchTicketSagas() {
  yield all([
    takeEvery(routines.UPDATE_URL_FIELD_CREATE_TICKET_FORM, updateUrlFieldSaga),
  ]);
}
  // sagas.test.ts

  import { push } from 'connected-react-router';
  // ...

  describe('updateUrlFieldSaga', () => {
    it('should store ticket params in url', () => {
      const mockState: Partial<IRootState> = {
        router: {
          location: {
            search: '?subtopicId=8&callMe=false',
          },
        },
      };
      const action: routines.updateUrlFieldAction = {
        type: routines.UPDATE_URL_FIELD_CREATE_TICKET_FORM,
        payload: {
          callMe: true,
          subtopicId: 1,
          topicId: 2,
        },
      };

      return expectSaga(sut.updateUrlFieldSaga, action)
        .withState(mockState)
        .put(push({ search: '?subtopicId=1&callMe=true' })) // <----------------- (2)
        .run()
        ;
    });
  });

BTW, previously I tested push in another case and it worked:

    it('should show browser notification and redirects to contacts page', () => {
      window.alert = jest.fn();
      const action: routines.createContactActionSuccess = {
        payload: { contactId: 123 },
        type: routines.createContactRoutine.SUCCESS,
      };

      return expectSaga(sut.notifyAboutContactCreation, action)
        .put(push({ pathname: RoutingService.contactsPageUrl }))
        .run()
        .then(() => {
          return expect(window.alert).toBeCalledWith('contact created with id "123"');
        })
        ;
    });
samueledirito commented 4 years ago

Any update on this? Thank you!

alexlouden commented 3 years ago

I just discovered that it's possible to expand the depth of nesting, to see the expanded args: [Object]s. See this commit: https://github.com/jfairbank/redux-saga-test-plan/commit/ac14172c13150673b64f4685786b5b7a56f0eb7d