Split store update test into two + updated custom state compare function test + spacing

Author: BlazPocrnja

src/ConnectedRouter.js

@@ -19,7 +19,7 @@ const createConnectedRouter = (structure) => {
     constructor(props) {
       super(props)
 
-      const { store, history, onLocationChanged, stateCompareFunction} = props
+      const { store, history, onLocationChanged, stateCompareFunction } = props
 
       this.inTimeTravelling = false
 
@@ -38,7 +38,7 @@ const createConnectedRouter = (structure) => {
           search: searchInHistory,
           hash: hashInHistory,
           state: stateInHistory,
-				} = history.location
+        } = history.location
 
         // If we do time travelling, the location in store is changed but location in history is not changed
         if (
@@ -105,8 +105,8 @@ const createConnectedRouter = (structure) => {
     }).isRequired,
     basename: PropTypes.string,
     children: PropTypes.oneOfType([ PropTypes.func, PropTypes.node ]),
-		onLocationChanged: PropTypes.func.isRequired,
-		stateCompareFunction: PropTypes.func,
+    onLocationChanged: PropTypes.func.isRequired,
+    stateCompareFunction: PropTypes.func,
   }
 
   const mapDispatchToProps = dispatch => ({

test/ConnectedRouter.test.js

@@ -135,8 +135,8 @@ describe('ConnectedRouter', () => {
 
       expect(onLocationChangedSpy.mock.calls[1][0].state).toEqual({ foo: 'bar'})
     })
-    
-    it('changing store location updates history', () => {
+
+    it('updates history when store location state changes', () => {
       store = createStore(
         combineReducers({
           router: connectRouter(props.history)
@@ -166,9 +166,44 @@ describe('ConnectedRouter', () => {
           },
           action: 'PUSH',
         }
-			})
-			
-			expect(props.history.entries).toHaveLength(3)
+      })
+
+      expect(props.history.entries).toHaveLength(3)
+
+      store.dispatch({
+        type: LOCATION_CHANGE,
+        payload: {
+          location: {
+            pathname: '/',
+            search: '',
+            hash: '',
+            state: { foo: 'baz' }
+          },
+          action: 'PUSH',
+        }
+      })
+
+      expect(props.history.entries).toHaveLength(4)
+    })
+
+    it('does not update history when store location state is unchanged', () => {
+      store = createStore(
+        combineReducers({
+          router: connectRouter(props.history)
+        }),
+        compose(applyMiddleware(routerMiddleware(props.history)))
+      )
+      
+      mount(
+        <Provider store={store}>
+          <ConnectedRouter {...props}>
+            <Route path="/" render={() => <div>Home</div>} />
+          </ConnectedRouter>
+        </Provider>
+      )
+
+      // Need to add PUSH action to history because initial POP action prevents history updates
+      props.history.push({ pathname: "/" })
 
       store.dispatch({
         type: LOCATION_CHANGE,
@@ -181,27 +216,27 @@ describe('ConnectedRouter', () => {
           },
           action: 'PUSH',
         }
-			})
-			
-			expect(props.history.entries).toHaveLength(3)
-			
+      })
+
+      expect(props.history.entries).toHaveLength(3)
+
       store.dispatch({
         type: LOCATION_CHANGE,
         payload: {
           location: {
             pathname: '/',
             search: '',
             hash: '',
-            state: { foo: 'baz' }
+            state: { foo: 'bar' }
           },
           action: 'PUSH',
         }
       })
 
-      expect(props.history.entries).toHaveLength(4)
+      expect(props.history.entries).toHaveLength(3)
     })
-    
-    it('supports custom state compare function', () => {
+
+    it('supports custom location state compare function', () => {
       store = createStore(
         combineReducers({
           router: connectRouter(props.history)
@@ -212,11 +247,20 @@ describe('ConnectedRouter', () => {
       mount(
         <Provider store={store}>
           <ConnectedRouter
-            stateCompareFunction={(a, b) => {
-							return a === undefined  || (a.foo === "baz" && b.foo === 'bar') ? true : false
+            stateCompareFunction={(storeState, historyState) => {
+              // If the store and history states are not undefined,
+              // prevent history from updating when 'baz' is added to the store after 'bar'
+              if (storeState !== undefined && historyState !== undefined) {
+                if (storeState.foo === "baz" && historyState.foo === 'bar') {
+                  return true
+                }
+              }
+
+              // Otherwise return a normal object comparison result
+              return JSON.stringify(storeState) === JSON.stringify(historyState)
             }}
             {...props}
-					>
+          >
             <Route path="/" render={() => <div>Home</div>} />
           </ConnectedRouter>
         </Provider>
@@ -236,7 +280,7 @@ describe('ConnectedRouter', () => {
           },
           action: 'PUSH',
         }
-			})
+      })
 
       expect(props.history.entries).toHaveLength(3)