<SideDrawer> testing with React Router

src/BaseRoutesMock.test.jsx

@@ -19,15 +19,24 @@ const ColorModeContext = createContext({toggleColorMode: () => {}})
  * @return {Object} React component
  */
 export function MockRoutes({contentElt}) {
+  return (
+    <MockElement>
+      <MemoryRouter>
+        <Routes>
+          <Route path="/*" element={contentElt}/>
+        </Routes>
+      </MemoryRouter>
+    </MockElement>
+  )
+}
+
+export const MockElement = ({children}) => {
   const {theme, colorMode} = useTheme()
+
   return (
     <ColorModeContext.Provider value={colorMode}>
       <ThemeProvider theme={theme}>
-        <MemoryRouter>
-          <Routes>
-            <Route path="/*" element={contentElt} />
-          </Routes>
-        </MemoryRouter>
+        {children}
       </ThemeProvider>
     </ColorModeContext.Provider>
   )

src/Components/SideDrawer.jsx

@@ -8,6 +8,7 @@ import {useIsMobile} from './Hooks'
 import MobileDrawer from './MobileDrawer'
 import {PropertiesPanel, NotesPanel} from './SideDrawerPanels'
 import {getHashParams} from '../utils/location'
+import {useLocation} from 'react-router-dom'
 
 /**
  * SideDrawer contains the ItemPanel and CommentPanel and allows for
@@ -85,16 +86,17 @@ export default function SideDrawerWrapper() {
   const openDrawer = useStore((state) => state.openDrawer)
   const toggleIsCommentsOn = useStore((state) => state.toggleIsCommentsOn)
   const setSelectedIssueId = useStore((state) => state.setSelectedIssueId)
+  const location = useLocation()
 
   useEffect(() => {
-    const issueHash = getHashParams(window.location, 'i')
+    const issueHash = getHashParams(location, 'i')
     if (issueHash !== undefined) {
       const extractedCommentId = issueHash.split(':')[1]
       setSelectedIssueId(Number(extractedCommentId))
       openDrawer()
       toggleIsCommentsOn()
     }
-  }, [])
+  }, [location])
 
   return (
     <>

src/Components/SideDrawer.test.jsx

@@ -1,10 +1,10 @@
 import React from 'react'
-import {render, screen} from '@testing-library/react'
-import {MockRoutes, MOCK_SELECTED_ELEMENT} from '../BaseRoutesMock.test'
+import {render, screen, waitFor} from '@testing-library/react'
+import {MockRoutes, MOCK_SELECTED_ELEMENT, MockElement} from '../BaseRoutesMock.test'
 import SideDrawerWrapper from './SideDrawer'
 import {act, renderHook} from '@testing-library/react-hooks'
 import useStore from '../store/useStore'
-// import {addHashParams, getHashParams, ISSUE_PREFIX} from '../utils/location'
+import {MemoryRouter} from 'react-router-dom'
 
 
 test('side drawer notes', () => {
@@ -58,24 +58,25 @@ test('side drawer - issues id in url', () => {
 })
 
 
-// test('side drawer - issues id in url', () => {
-//   const {result} = renderHook(() => useStore((state) => state))
-
-//   // rying to set the url -- but don't think it is working
-//   addHashParams(window.location, ISSUE_PREFIX, {id: '1257156364'})
-//   // I am not sure if getHashParams is working
-//   const issueHash = getHashParams(window.location, 'i')
+test('side drawer - opened via URL', async () => {
+  const {result} = renderHook(() => useStore((state) => state))
 
-//   // the previous test is testing the rest of the process
-//   const extractedCommentId = issueHash.split(':')[1]
-//   act(() => {
-//     result.current.setSelectedIssueId(Number(extractedCommentId))
-//     result.current.toggleIsCommentsOn()
-//     result.current.openDrawer()
-//   })
-//   render(<MockRoutes contentElt={<SideDrawerWrapper/>}/>)
-//   expect(screen.getByText('Note')).toBeInTheDocument()
-//   expect(screen.getByText('BLDRS-LOCAL_MODE-ID:1257156364')).toBeInTheDocument()
-// })
+  const {getByText} = render(
+      <MemoryRouter initialEntries={['/v/p/index.ifc#i:1257156364::c:-26.91,28.84,112.47,-22,16.21,-3.48']}>
+        <MockElement>
+          <SideDrawerWrapper />
+        </MockElement>
+      </MemoryRouter>,
+  )
 
+  await waitFor(() => {
+    expect(getByText('Note')).toBeInTheDocument()
+    expect(getByText('BLDRS-LOCAL_MODE-ID:1257156364')).toBeInTheDocument()
+  })
 
+  // reset the store
+  act(() => {
+    result.current.setSelectedElement({})
+    result.current.toggleIsCommentsOn()
+  })
+})