Test redux-devtools

package.json

@@ -53,6 +53,7 @@
     "react-dom": "^15.0.0",
     "react-redux": "^4.4.6",
     "redux": "^3.6.0",
+    "redux-devtools": "^3.3.2",
     "redux-immutable": "^3.0.11",
     "redux-mock-store": "^1.2.1",
     "rewire": "^2.5.2",

test/ConnectedRouter.test.js

@@ -1,16 +1,20 @@
 import React, { Children, Component, PropTypes } from 'react'
 import configureStore from 'redux-mock-store'
+import { createStore, combineReducers } from 'redux'
+import { ActionCreators, instrument } from 'redux-devtools'
 import { createMemoryHistory } from 'history'
 import { Route } from 'react-router'
 import { mount } from 'enzyme'
 import createConnectedRouter from '../src/ConnectedRouter'
 import { onLocationChanged } from '../src/actions'
 import plainStructure from '../src/structure/plain'
 import immutableStructure from '../src/structure/immutable'
+import { connectRouter, ConnectedRouter } from '../src'
 
 describe('ConnectedRouter', () => {
   let props
   let store
+  let history
   let onLocationChangedSpy
 
   beforeEach(() => {
@@ -20,13 +24,16 @@ describe('ConnectedRouter', () => {
     )
     createConnectedRouter.__Rewire__('onLocationChanged', onLocationChangedSpy)
 
+    // Reset history
+    history = createMemoryHistory()
+
     // Mock props
     props = {
       action: 'POP',
       location: {
         pathname: '/path/to/somewhere',
       },
-      history: createMemoryHistory(),
+      history,
     }
 
     // Mock store
@@ -63,8 +70,8 @@ describe('ConnectedRouter', () => {
       expect(onLocationChangedSpy.mock.calls)
         .toHaveLength(0)
 
-      props.history.push('/new-location')
-      props.history.push('/new-location-2')
+      history.push('/new-location')
+      history.push('/new-location-2')
 
       expect(onLocationChangedSpy.mock.calls)
         .toHaveLength(2)
@@ -89,7 +96,7 @@ describe('ConnectedRouter', () => {
 
       wrapper.unmount()
 
-      props.history.push('/new-location-after-unmounted')
+      history.push('/new-location-after-unmounted')
 
       expect(onLocationChangedSpy.mock.calls)
         .toHaveLength(1)
@@ -115,8 +122,8 @@ describe('ConnectedRouter', () => {
       expect(onLocationChangedSpy.mock.calls)
         .toHaveLength(0)
 
-      props.history.push('/new-location')
-      props.history.push('/new-location-2')
+      history.push('/new-location')
+      history.push('/new-location-2')
 
       expect(onLocationChangedSpy.mock.calls)
         .toHaveLength(2)
@@ -134,19 +141,82 @@ describe('ConnectedRouter', () => {
       expect(onLocationChangedSpy.mock.calls)
         .toHaveLength(0)
 
-      props.history.push('/new-location')
+      history.push('/new-location')
 
       expect(onLocationChangedSpy.mock.calls)
         .toHaveLength(1)
 
       wrapper.unmount()
 
-      props.history.push('/new-location-after-unmounted')
+      history.push('/new-location-after-unmounted')
 
       expect(onLocationChangedSpy.mock.calls)
         .toHaveLength(1)
     })
   })
+
+  describe('Redux DevTools', () => {
+    let devToolsStore
+
+    beforeEach(() => {
+      // Set initial URL before syncing
+      history.push('/foo')
+
+      // Create redux store with router state
+      store = createStore(
+        connectRouter(history)(combineReducers({ test: (state = 'test') => (state) })),
+        instrument()
+      )
+      devToolsStore = store.liftedStore
+    })
+
+    it('resets to the initial url', () => {
+      mount(
+        <ContextWrapper store={store}>
+          <ConnectedRouter {...props}>
+            <div>Test</div>
+          </ConnectedRouter>
+        </ContextWrapper>
+      )
+
+      let currentPath
+      const historyUnsubscribe = history.listen(location => {
+        currentPath = location.pathname
+      })
+
+      history.push('/bar')
+      devToolsStore.dispatch(ActionCreators.reset())
+
+      expect(currentPath).toEqual('/foo')
+
+      historyUnsubscribe()
+    })
+
+    it('handles toggle after history change', () => {
+      mount(
+        <ContextWrapper store={store}>
+          <ConnectedRouter {...props}>
+            <div>Test</div>
+          </ConnectedRouter>
+        </ContextWrapper>
+      )
+
+      let currentPath
+      const historyUnsubscribe = history.listen(location => {
+        currentPath = location.pathname
+      })
+
+      history.push('/foo2') // DevTools action #1
+      history.push('/foo3') // DevTools action #2
+
+      // When we toggle an action, the devtools will revert the action
+      // and we therefore expect the history to update to the previous path
+      devToolsStore.dispatch(ActionCreators.toggleAction(2))
+      expect(currentPath).toEqual('/foo2')
+
+      historyUnsubscribe()
+    })
+  })
 })
 
 class ContextWrapper extends Component {

yarn.lock

@@ -3620,6 +3620,20 @@ redeyed@~1.0.0:
   dependencies:
     esprima "~3.0.0"
 
+redux-devtools-instrument@^1.0.1:
+  version "1.8.0"
+  resolved "https://registry.yarnpkg.com/redux-devtools-instrument/-/redux-devtools-instrument-1.8.0.tgz#db1840ed3d8152af6792913698e3424c119de9aa"
+  dependencies:
+    lodash "^4.2.0"
+    symbol-observable "^1.0.2"
+
+redux-devtools@^3.3.2:
+  version "3.3.2"
+  resolved "https://registry.yarnpkg.com/redux-devtools/-/redux-devtools-3.3.2.tgz#f427f71964e2b3785b68834b6e4fe99d8da75b5e"
+  dependencies:
+    lodash "^4.2.0"
+    redux-devtools-instrument "^1.0.1"
+
 redux-immutable@^3.0.11:
   version "3.0.11"
   resolved "https://registry.yarnpkg.com/redux-immutable/-/redux-immutable-3.0.11.tgz#ba7b00361904f2034e7841741bd4a6be66eea1ac"