refactor: put isViewOpen logic into usePanelStateForViewState hook

mbta · Nov 28, 2023 · 26a627d · 26a627d
1 parent a7d5dbd
commit 26a627d
Show file tree

Hide file tree

Showing 5 changed files with 72 additions and 54 deletions.
diff --git a/assets/src/components/nav.tsx b/assets/src/components/nav.tsx
@@ -7,7 +7,6 @@ import TopNav from "./nav/topNav"
 import MobilePortraitNav from "./nav/mobilePortraitNav"
 import { StateDispatchContext } from "../contexts/stateDispatchContext"
 import { usePanelStateFromStateDispatchContext } from "../hooks/usePanelState"
-import { OpenView } from "../state/pagePanelState"
 
 interface Props {
   children?: React.ReactNode
@@ -17,11 +16,7 @@ const Nav: React.FC<Props> = ({ children }) => {
   const [, dispatch] = useContext(StateDispatchContext)
   const deviceType = useScreenSize()
 
-  const {
-    currentView: { openView, selectedVehicleOrGhost },
-  } = usePanelStateFromStateDispatchContext()
-  const isViewOpen =
-    openView !== OpenView.None || (selectedVehicleOrGhost && true) || false
+  const { isViewOpen } = usePanelStateFromStateDispatchContext()
 
   const navVisibilityStyle = isViewOpen ? "hidden" : "visible"
 

diff --git a/assets/src/hooks/usePanelState.ts b/assets/src/hooks/usePanelState.ts
@@ -3,6 +3,7 @@ import { TabMode } from "../components/propertiesPanel/tabPanels"
 import { StateDispatchContext } from "../contexts/stateDispatchContext"
 import { Dispatch } from "../state"
 import {
+  OpenView,
   PagePath,
   VehicleType,
   ViewState,
@@ -37,8 +38,9 @@ export const usePanelStateForViewState = (
   view: ViewState,
   dispatch: Dispatch
 ) => {
+  const currentView = view.state[view.currentPath]
   return {
-    currentView: view.state[view.currentPath],
+    currentView,
     setPath: (path: PagePath) => {
       if (path !== view.currentPath) {
         dispatch(setPath(path))
@@ -52,5 +54,9 @@ export const usePanelStateForViewState = (
     openNotificationDrawer: () => dispatch(openNotificaitonDrawer()),
     closeView: () => dispatch(closeView()),
     openPreviousView: () => dispatch(openPreviousView()),
+    isViewOpen:
+      currentView.openView !== OpenView.None ||
+      (currentView.selectedVehicleOrGhost && true) ||
+      false,
   }
 }
diff --git a/assets/tests/components/nav.test.tsx b/assets/tests/components/nav.test.tsx
@@ -8,11 +8,7 @@ import Nav from "../../src/components/nav"
 import useScreenSize from "../../src/hooks/useScreenSize"
 import getTestGroups from "../../src/userTestGroups"
 import { TestGroups } from "../../src/userInTestGroup"
-import { StateDispatchProvider } from "../../src/contexts/stateDispatchContext"
-import stateFactory from "../factories/applicationState"
-import { viewFactory } from "../factories/pagePanelStateFactory"
-import { OpenView } from "../../src/state/pagePanelState"
-import vehicleFactory from "../factories/vehicle"
+import { mockUsePanelState } from "../testHelpers/usePanelStateMocks"
 
 jest.mock("../../src/hooks/useScreenSize", () => ({
   __esModule: true,
@@ -24,13 +20,16 @@ jest.mock("userTestGroups", () => ({
   default: jest.fn(() => []),
 }))
 
+jest.mock("../../src/hooks/usePanelState")
+
 beforeEach(() => {
+  mockUsePanelState({ isViewOpen: false })
   ;(getTestGroups as jest.Mock).mockReturnValue([])
 })
 
 describe("Nav", () => {
   test("renders mobile nav content", () => {
-    ;(useScreenSize as jest.Mock).mockImplementationOnce(() => "mobile")
+    jest.mocked(useScreenSize).mockReturnValueOnce("mobile")
 
     const result = render(
       <BrowserRouter>
@@ -43,9 +42,9 @@ describe("Nav", () => {
   })
 
   test("renders mobile landscape / tablet portrait nav content", () => {
-    ;(useScreenSize as jest.Mock).mockImplementationOnce(
-      () => "mobile_landscape_tablet_portrait"
-    )
+    jest
+      .mocked(useScreenSize)
+      .mockReturnValueOnce("mobile_landscape_tablet_portrait")
 
     const result = render(
       <BrowserRouter>
@@ -58,53 +57,22 @@ describe("Nav", () => {
   })
 
   test("renders mobile landscape / tablet portrait nav content with nav elements hidden when a view is open", () => {
+    mockUsePanelState({ isViewOpen: true })
     jest
       .mocked(useScreenSize)
       .mockReturnValueOnce("mobile_landscape_tablet_portrait")
-    const dispatch = jest.fn()
 
     const result = render(
-      <StateDispatchProvider
-        state={stateFactory.build({
-          view: viewFactory.currentState({ openView: OpenView.Swings }).build(),
-        })}
-        dispatch={dispatch}
-      >
-        <BrowserRouter>
-          <Nav>Hello, world!</Nav>
-        </BrowserRouter>
-      </StateDispatchProvider>
-    )
-
-    expect(result.getByTitle("Route Ladders")).not.toBeVisible()
-  })
-
-  test("renders mobile landscape / tablet portrait nav content with nav elements hidden when a vehicle is selected", () => {
-    jest
-      .mocked(useScreenSize)
-      .mockReturnValueOnce("mobile_landscape_tablet_portrait")
-    const dispatch = jest.fn()
-
-    const result = render(
-      <StateDispatchProvider
-        state={stateFactory.build({
-          view: viewFactory
-            .currentState({ selectedVehicleOrGhost: vehicleFactory.build() })
-            .build(),
-        })}
-        dispatch={dispatch}
-      >
-        <BrowserRouter>
-          <Nav>Hello, world!</Nav>
-        </BrowserRouter>
-      </StateDispatchProvider>
+      <BrowserRouter>
+        <Nav>Hello, world!</Nav>
+      </BrowserRouter>
     )
 
     expect(result.getByTitle("Route Ladders")).not.toBeVisible()
   })
 
   test("renders tablet nav content", () => {
-    ;(useScreenSize as jest.Mock).mockImplementationOnce(() => "tablet")
+    jest.mocked(useScreenSize).mockReturnValueOnce("tablet")
 
     const result = render(
       <BrowserRouter>
@@ -117,7 +85,7 @@ describe("Nav", () => {
   })
 
   test("renders nav item with title 'Search Map' if in map test group", () => {
-    ;(getTestGroups as jest.Mock).mockReturnValue([TestGroups.MapBeta])
+    jest.mocked(getTestGroups).mockReturnValue([TestGroups.MapBeta])
 
     render(
       <BrowserRouter>
@@ -130,6 +98,8 @@ describe("Nav", () => {
   })
 
   test("renders desktop nav content", () => {
+    jest.mocked(useScreenSize).mockReturnValueOnce("desktop")
+
     const result = render(
       <BrowserRouter>
         <Nav>Hello, world!</Nav>

diff --git a/assets/tests/hooks/usePanelState.test.tsx b/assets/tests/hooks/usePanelState.test.tsx
@@ -140,6 +140,53 @@ describe("usePanelStateForViewState", () => {
       expect(currentView).not.toEqual(otherState)
     })
   })
+
+  describe("isViewOpen", () => {
+    test("returns false when no view open", () => {
+      const path = PagePath.Ladders
+      const pageViewState = pageViewFactory.build({
+        openView: OpenView.None,
+        selectedVehicleOrGhost: null,
+      })
+
+      const { isViewOpen } = usePanelStateForViewState(
+        viewFactory.build({ state: { [path]: pageViewState } }),
+        jest.fn()
+      )
+
+      expect(isViewOpen).toBeFalsy()
+    })
+
+    test("returns true when a view is open", () => {
+      const path = PagePath.Ladders
+      const pageViewState = pageViewFactory.build({
+        openView: OpenView.Swings,
+        selectedVehicleOrGhost: null,
+      })
+
+      const { isViewOpen } = usePanelStateForViewState(
+        viewFactory.build({ state: { [path]: pageViewState } }),
+        jest.fn()
+      )
+
+      expect(isViewOpen).toBeTruthy()
+    })
+
+    test("returns true when a view is open", () => {
+      const path = PagePath.Ladders
+      const pageViewState = pageViewFactory.build({
+        openView: OpenView.None,
+        selectedVehicleOrGhost: vehicleFactory.build(),
+      })
+
+      const { isViewOpen } = usePanelStateForViewState(
+        viewFactory.build({ state: { [path]: pageViewState } }),
+        jest.fn()
+      )
+
+      expect(isViewOpen).toBeTruthy()
+    })
+  })
 })
 
 describe("usePanelStateFromStateDispatchContext", () => {

diff --git a/assets/tests/testHelpers/usePanelStateMocks.tsx b/assets/tests/testHelpers/usePanelStateMocks.tsx
@@ -15,7 +15,7 @@ export function mockUsePanelState(
     openLateView: jest.fn(),
     openSwingsView: jest.fn(),
     setTabMode: jest.fn(),
-
+    isViewOpen: false,
     ...(values || {}),
   })
 }