redux-devtools/test/devTools.spec.js

import expect, { spyOn } from 'expect';
import { createStore } from 'redux';
import devTools, { ActionCreators } from '../src/devTools';

function counter(state = 0, action) {
  switch (action.type) {
  case 'INCREMENT': return state + 1;
  case 'DECREMENT': return state - 1;
  default: return state;
  }
}

function counterWithBug(state = 0, action) {
  switch (action.type) {
    case 'INCREMENT': return state + 1;
    case 'DECREMENT': return mistake - 1; // eslint-disable-line no-undef
    case 'SET_UNDEFINED': return undefined;
    default: return state;
  }
}

function doubleCounter(state = 0, action) {
  switch (action.type) {
  case 'INCREMENT': return state + 2;
  case 'DECREMENT': return state - 2;
  default: return state;
  }
}

describe('devTools', () => {
  let store;
  let devToolsStore;

  beforeEach(() => {
    store = devTools()(createStore)(counter);
    devToolsStore = store.devToolsStore;
  });

  it('should perform actions', () => {
    expect(store.getState()).toBe(0);
    store.dispatch({ type: 'INCREMENT' });
    expect(store.getState()).toBe(1);
    store.dispatch({ type: 'INCREMENT' });
    expect(store.getState()).toBe(2);
  });

  it('should rollback state to the last committed state', () => {
    store.dispatch({ type: 'INCREMENT' });
    store.dispatch({ type: 'INCREMENT' });
    expect(store.getState()).toBe(2);

    devToolsStore.dispatch(ActionCreators.commit());
    expect(store.getState()).toBe(2);

    store.dispatch({ type: 'INCREMENT' });
    store.dispatch({ type: 'INCREMENT' });
    expect(store.getState()).toBe(4);

    devToolsStore.dispatch(ActionCreators.rollback());
    expect(store.getState()).toBe(2);

    store.dispatch({ type: 'DECREMENT' });
    expect(store.getState()).toBe(1);

    devToolsStore.dispatch(ActionCreators.rollback());
    expect(store.getState()).toBe(2);
  });

  it('should reset to initial state', () => {
    store.dispatch({ type: 'INCREMENT' });
    expect(store.getState()).toBe(1);

    devToolsStore.dispatch(ActionCreators.commit());
    expect(store.getState()).toBe(1);

    store.dispatch({ type: 'INCREMENT' });
    expect(store.getState()).toBe(2);

    devToolsStore.dispatch(ActionCreators.rollback());
    expect(store.getState()).toBe(1);

    store.dispatch({ type: 'INCREMENT' });
    expect(store.getState()).toBe(2);

    devToolsStore.dispatch(ActionCreators.reset());
    expect(store.getState()).toBe(0);
  });

  it('should toggle an action', () => {
    // stateIndex 0 = @@INIT
    store.dispatch({ type: 'INCREMENT' });
    store.dispatch({ type: 'DECREMENT' });
    store.dispatch({ type: 'INCREMENT' });
    expect(store.getState()).toBe(1);

    devToolsStore.dispatch(ActionCreators.toggleAction(2));
    expect(store.getState()).toBe(2);

    devToolsStore.dispatch(ActionCreators.toggleAction(2));
    expect(store.getState()).toBe(1);
  });

  it('should sweep disabled actions', () => {
    // stateIndex 0 = @@INIT
    store.dispatch({ type: 'INCREMENT' });
    store.dispatch({ type: 'DECREMENT' });
    store.dispatch({ type: 'INCREMENT' });
    store.dispatch({ type: 'INCREMENT' });
    expect(store.getState()).toBe(2);

    devToolsStore.dispatch(ActionCreators.toggleAction(2));
    expect(store.getState()).toBe(3);

    devToolsStore.dispatch(ActionCreators.sweep());
    expect(store.getState()).toBe(3);

    devToolsStore.dispatch(ActionCreators.toggleAction(2));
    expect(store.getState()).toBe(2);

    devToolsStore.dispatch(ActionCreators.sweep());
    expect(store.getState()).toBe(2);
  });

  it('should jump to state', () => {
    store.dispatch({ type: 'INCREMENT' });
    store.dispatch({ type: 'DECREMENT' });
    store.dispatch({ type: 'INCREMENT' });
    expect(store.getState()).toBe(1);

    devToolsStore.dispatch(ActionCreators.jumpToState(0));
    expect(store.getState()).toBe(0);

    devToolsStore.dispatch(ActionCreators.jumpToState(1));
    expect(store.getState()).toBe(1);

    devToolsStore.dispatch(ActionCreators.jumpToState(2));
    expect(store.getState()).toBe(0);

    store.dispatch({ type: 'INCREMENT' });
    expect(store.getState()).toBe(0);

    devToolsStore.dispatch(ActionCreators.jumpToState(4));
    expect(store.getState()).toBe(2);
  });

  it('should set monitor state', () => {
    devToolsStore.dispatch(ActionCreators.setMonitorState({test: 'test'}));
    expect(devToolsStore.getState().monitorState.test).toBe('test');
  });

  it('should recompute', () => {
    store.dispatch({ type: 'INCREMENT' });
    store.dispatch({ type: 'DECREMENT' });
    store.dispatch({ type: 'INCREMENT' });
    expect(store.getState()).toBe(1);

    let stagedActions = [...store.devToolsStore.getState().stagedActions];
    // replace DECREMENT with INCREMENT (stagedAction[0] is @@INIT)
    stagedActions[2] = { type: 'INCREMENT' };
    const committedState = 10;

    devToolsStore.dispatch(ActionCreators.recomputeStates(
      committedState,
      stagedActions
    ));

    expect(store.getState()).toBe(13);
  });

  it('should get the reducer', () => {
    expect(store.getReducer()).toBe(counter);
  });

  it('should replace the reducer', () => {
    store.dispatch({ type: 'INCREMENT' });
    store.dispatch({ type: 'DECREMENT' });
    store.dispatch({ type: 'INCREMENT' });
    expect(store.getState()).toBe(1);

    store.replaceReducer(doubleCounter);
    expect(store.getState()).toBe(2);
  });

  it('should catch and record errors', () => {
    let spy = spyOn(console, 'error');
    let storeWithBug = devTools()(createStore)(counterWithBug);

    storeWithBug.dispatch({ type: 'INCREMENT' });
    storeWithBug.dispatch({ type: 'DECREMENT' });
    storeWithBug.dispatch({ type: 'INCREMENT' });

    let devStoreState = storeWithBug.devToolsStore.getState();
    expect(devStoreState.computedStates[2].error).toMatch(
      /ReferenceError/
    );
    expect(devStoreState.computedStates[3].error).toMatch(
      /Interrupted by an error up the chain/
    );
    expect(spy.calls[0].arguments[0]).toMatch(
      /ReferenceError/
    );

    spy.restore();
  });

  it('should return the last non-undefined state from getState', () => {
    let storeWithBug = devTools()(createStore)(counterWithBug);
    storeWithBug.dispatch({ type: 'INCREMENT' });
    storeWithBug.dispatch({ type: 'INCREMENT' });
    expect(storeWithBug.getState()).toBe(2);

    storeWithBug.dispatch({ type: 'SET_UNDEFINED' });
    expect(storeWithBug.getState()).toBe(2);
  });

  it('should not recompute states on every action', () => {
    let reducerCalls = 0;
    let monitoredStore = devTools()(createStore)(() => reducerCalls++);
    expect(reducerCalls).toBe(1);
    monitoredStore.dispatch({ type: 'INCREMENT' });
    monitoredStore.dispatch({ type: 'INCREMENT' });
    monitoredStore.dispatch({ type: 'INCREMENT' });
    expect(reducerCalls).toBe(4);
  });

  it('should not recompute states when jumping to state', () => {
    let reducerCalls = 0;
    let monitoredStore = devTools()(createStore)(() => reducerCalls++);
    let monitoredDevToolsStore = monitoredStore.devToolsStore;

    expect(reducerCalls).toBe(1);
    monitoredStore.dispatch({ type: 'INCREMENT' });
    monitoredStore.dispatch({ type: 'INCREMENT' });
    monitoredStore.dispatch({ type: 'INCREMENT' });
    expect(reducerCalls).toBe(4);

    monitoredDevToolsStore.dispatch(ActionCreators.jumpToState(0));
    expect(reducerCalls).toBe(4);

    monitoredDevToolsStore.dispatch(ActionCreators.jumpToState(1));
    expect(reducerCalls).toBe(4);

    monitoredDevToolsStore.dispatch(ActionCreators.jumpToState(3));
    expect(reducerCalls).toBe(4);
  });

  describe('Import State', () => {
    let monitoredStore;
    let monitoredDevToolsStore;
    let exportedState;

    beforeEach(() => {
      monitoredStore = devTools()(createStore)(counter);
      monitoredDevToolsStore = monitoredStore.devToolsStore;
      // Set up state to export
      monitoredStore.dispatch({ type: 'INCREMENT' });
      monitoredStore.dispatch({ type: 'INCREMENT' });
      monitoredStore.dispatch({ type: 'INCREMENT' });

      exportedState = monitoredDevToolsStore.getState();
    });

    it('should replay all the steps when a state is imported', () => {
      let importMonitoredStore = devTools()(createStore)(counter);
      let importMonitoredDevToolsStore = importMonitoredStore.devToolsStore;
      // Import exported state
      importMonitoredDevToolsStore.dispatch(ActionCreators.importState(exportedState));
      expect(importMonitoredDevToolsStore.getState()).toEqual(exportedState);
    });

    it('should replace the existing action log with the one imported', () => {
      let importMonitoredStore = devTools()(createStore)(counter);
      let importMonitoredDevToolsStore = importMonitoredStore.devToolsStore;

      importMonitoredStore.dispatch({ type: 'DECREMENT' });
      importMonitoredStore.dispatch({ type: 'DECREMENT' });

      // Import exported state
      importMonitoredDevToolsStore.dispatch(ActionCreators.importState(exportedState));

      expect(importMonitoredDevToolsStore.getState()).toEqual(exportedState);
    });
  });
});