Split store update test into two + updated custom state compare funct…

…ion test + spacing
supasate · Mar 21, 2020 · 7edaa29 · 7edaa29
1 parent 6dd8265
commit 7edaa29
Show file tree

Hide file tree

Showing 2 changed files with 66 additions and 19 deletions.
diff --git a/src/ConnectedRouter.js b/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 (
@@ -109,7 +109,10 @@ const createConnectedRouter = (structure) => {
     basename: PropTypes.string,
     children: PropTypes.oneOfType([ PropTypes.func, PropTypes.node ]),
     onLocationChanged: PropTypes.func.isRequired,
+<<<<<<< HEAD
 		noInitialPop: PropTypes.bool,
+=======
+>>>>>>> Split store update test into two + updated custom state compare function test + spacing
     stateCompareFunction: PropTypes.func,
   }
 

diff --git a/test/ConnectedRouter.test.js b/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)