[Added] location.state support in .atPath (#138)

* [Added] location.state support in .atPath

* improve naming with historyState

Author: andreacasasrdrg

src/models.ts

@@ -18,7 +18,7 @@ interface WrapResponse extends Response {
 
 interface Wrap {
   withNetwork: (responses: WrapResponse[]) => Wrap
-  atPath: (path: string) => Wrap
+  atPath: (path: string, historyState: object) => Wrap
   withProps: (props: object) => Wrap
   debugRequests: () => Wrap
   mount: () => object
@@ -29,6 +29,7 @@ interface WrapOptions {
   responses: WrapResponse[]
   props: object
   path: string
+  historyState?: object
   hasPath: boolean
   debug: boolean
 }
@@ -57,7 +58,7 @@ interface Config {
 }
 
 interface BrowserHistory extends History {
-  push: (path: string) => void
+  push: (path: string, historyState?: object) => void
 }
 
 export {

src/wrap.tsx

@@ -98,9 +98,9 @@ const withNetwork = (responses: Response[] = []) => {
   return wrapWith()
 }
 
-const atPath = (path: string) => {
+const atPath = (path: string, historyState: object) => {
   const options = getOptions()
-  updateOptions({ ...options, path, hasPath: true })
+  updateOptions({ ...options, historyState, path, hasPath: true })
   return wrapWith()
 }
 
@@ -112,7 +112,7 @@ const debugRequests = () => {
 
 const getMount = () => {
   const { portal, changeRoute, history, mount } = getConfig()
-  const { Component, props, responses, path, hasPath, debug } = getOptions()
+  const { Component, props, responses, path, hasPath, debug, historyState } = getOptions()
 
   if (portal) {
     setupPortal(portal)
@@ -125,7 +125,7 @@ const getMount = () => {
     console.warn(
       'Read about changeRoute in: https://github.com/mercadona/wrapito#changeRoute',
     )
-    history.push(path)
+    history.push(path, historyState)
   }
 
   if (hasPath && !history) {

tests/atPath.test.js

@@ -62,3 +62,10 @@ it('should render an app with a routing logic between pages', () => {
 
   expect(container).toHaveTextContent('Categories')
 })
+
+it('should render an app with a location state', async () =>{
+  configure({ history })
+  wrap(MyAppWithRouting).atPath('/page-using-location-state', {title: "title"}).mount()
+
+  expect(await screen.findByText('title')).toBeInTheDocument()
+}) 

tests/components.mock.js

@@ -1,7 +1,7 @@
 import React, { Component, Fragment, useState, useEffect } from 'react'
 import { createPortal } from 'react-dom'
 import { Provider, useDispatch, useSelector } from 'react-redux'
-import { Router, BrowserRouter, Switch, Route } from 'react-router-dom'
+import { Router, BrowserRouter, Switch, Route, useLocation } from 'react-router-dom'
 import { createBrowserHistory } from 'history'
 import { createStore, applyMiddleware } from 'redux'
 import thunk from 'redux-thunk'
@@ -73,6 +73,17 @@ const Categories = () => {
   return <div>Categories</div>
 }
 
+const PageUsingLocationState = () => {
+  const [title, setTitle] = useState()
+  const location = useLocation()
+
+  useEffect(() => {
+    if (location.state) setTitle(location.state.title)
+  },[location.state])
+
+  return <div>{title}</div>
+}
+
 export const history = createBrowserHistory()
 
 export const MyAppWithRouting = () => {
@@ -86,6 +97,12 @@ export const MyAppWithRouting = () => {
           component={ Categories }
           exact={ true }
         />
+        <Route 
+          component={ PageUsingLocationState } 
+          key="page-using-location-state" 
+          path="/page-using-location-state" 
+          exact={true}
+        />
       </Switch>
     </Router>
   )