From 26a627dac2eb87e7193cd9f009b36900e76b2240 Mon Sep 17 00:00:00 2001 From: Eddie Maldonado Date: Tue, 28 Nov 2023 17:48:01 -0500 Subject: [PATCH] refactor: put isViewOpen logic into usePanelStateForViewState hook --- assets/src/components/nav.tsx | 7 +-- assets/src/hooks/usePanelState.ts | 8 ++- assets/tests/components/nav.test.tsx | 62 +++++-------------- assets/tests/hooks/usePanelState.test.tsx | 47 ++++++++++++++ .../tests/testHelpers/usePanelStateMocks.tsx | 2 +- 5 files changed, 72 insertions(+), 54 deletions(-) diff --git a/assets/src/components/nav.tsx b/assets/src/components/nav.tsx index 1bd3a9231..0e7624d2b 100644 --- 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 = ({ 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 index 04c139f62..20c261b91 100644 --- 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 index 08b15b465..103f2e055 100644 --- 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( @@ -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( @@ -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( - - - - - - ) - - 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( - - - - - + + + ) 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( @@ -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( @@ -130,6 +98,8 @@ describe("Nav", () => { }) test("renders desktop nav content", () => { + jest.mocked(useScreenSize).mockReturnValueOnce("desktop") + const result = render( diff --git a/assets/tests/hooks/usePanelState.test.tsx b/assets/tests/hooks/usePanelState.test.tsx index 03d8564a6..b9e236f38 100644 --- 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 index c13583930..fa7add1f3 100644 --- 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 || {}), }) }