feat: Allow RoutePropertiesCard to be open to "variants" or "stops" b…

…y default
mbta · May 20, 2024 · fafcc08 · fafcc08
1 parent f9074b3
commit fafcc08
Show file tree

Hide file tree

Showing 3 changed files with 58 additions and 4 deletions.
diff --git a/assets/src/components/mapPage/routePropertiesCard.tsx b/assets/src/components/mapPage/routePropertiesCard.tsx
@@ -224,20 +224,23 @@ const VariantPicker = ({
   }
 }
 
+export type RoutePropertiesCardOpened = "variants" | "stops" | null
+
 const RoutePropertiesCard = ({
   routePatterns,
   selectedRoutePatternId,
   selectRoutePattern,
   onClose,
+  defaultOpened = null,
 }: {
   routePatterns: ByRoutePatternId<RoutePattern>
   selectedRoutePatternId: RoutePatternId
   selectRoutePattern: (routePattern: RoutePattern) => void
   onClose?: () => void
+  defaultOpened?: RoutePropertiesCardOpened
 }) => {
-  const [openedDetails, setOpenedDetails] = useState<
-    "variants" | "stops" | null
-  >(null)
+  const [openedDetails, setOpenedDetails] =
+    useState<RoutePropertiesCardOpened>(defaultOpened)
 
   const selectedRoutePattern = routePatterns[selectedRoutePatternId]
   const route: Route | null = useRoute(selectedRoutePattern?.routeId)

diff --git a/assets/stories/skate-components/molecules/routePropertiesCard.stories.tsx b/assets/stories/skate-components/molecules/routePropertiesCard.stories.tsx
@@ -95,3 +95,14 @@ export const WithInboundSelected: Story = {
     selectedRoutePatternId: routePattern3.id,
   },
 }
+
+export const WithVariantsOpenedByDefault: Story = {
+  args: {
+    defaultOpened: "variants",
+  },
+}
+export const WithStopsOpenedByDefault: Story = {
+  args: {
+    defaultOpened: "stops",
+  },
+}
diff --git a/assets/tests/components/mapPage/routePropertiesCard.test.tsx b/assets/tests/components/mapPage/routePropertiesCard.test.tsx
@@ -3,6 +3,7 @@ import React from "react"
 import { render, screen } from "@testing-library/react"
 import "@testing-library/jest-dom/jest-globals"
 import RoutePropertiesCard, {
+  RoutePropertiesCardOpened,
   patternDisplayName,
 } from "../../../src/components/mapPage/routePropertiesCard"
 import { routePatternFactory } from "../../factories/routePattern"
@@ -34,12 +35,14 @@ const RoutePropertiesCardWithDefaults = ({
   selectedRoutePatternId = routePattern1.id,
   onClose = () => {},
   selectRoutePattern = (_routePattern) => {},
+  defaultOpened,
 }: {
   routes?: Route[]
   routePatterns?: ByRoutePatternId<RoutePattern>
   selectedRoutePatternId?: RoutePatternId
   onClose?: () => void
   selectRoutePattern?: (routePattern: RoutePattern) => void
+  defaultOpened?: RoutePropertiesCardOpened
 }) => {
   const thing = (
     <RoutesProvider routes={routes}>
@@ -48,6 +51,7 @@ const RoutePropertiesCardWithDefaults = ({
         selectedRoutePatternId={selectedRoutePatternId}
         selectRoutePattern={selectRoutePattern}
         onClose={onClose}
+        defaultOpened={defaultOpened}
       />
     </RoutesProvider>
   )
@@ -335,14 +339,50 @@ describe("<RoutePropertiesCard/>", () => {
       )
       expect(mockOnClose).toHaveBeenCalled()
     })
+  })
+
+  describe("Sections", () => {
+    test("Starts out with no sections open", async () => {
+      render(<RoutePropertiesCardWithDefaults />)
+
+      expect(screen.getByText("Show outbound stops")).toBeInTheDocument()
+      expect(screen.getByText("Show variants")).toBeInTheDocument()
+    })
+
+    test("Can open the sections", async () => {
+      render(<RoutePropertiesCardWithDefaults />)
+
+      await userEvent.click(screen.getByText("Show variants"))
+      expect(screen.getByText("Hide variants")).toBeInTheDocument()
+
+      await userEvent.click(screen.getByText("Show outbound stops"))
+      expect(screen.getByText("Hide outbound stops")).toBeInTheDocument()
+    })
 
-    test("Only one details section is open at a time", async () => {
+    test("Opening one section closes the other one", async () => {
       render(<RoutePropertiesCardWithDefaults />)
 
       await userEvent.click(screen.getByText("Show variants"))
       expect(screen.getByText("Hide variants")).toBeInTheDocument()
 
       await userEvent.click(screen.getByText("Show outbound stops"))
+      expect(screen.getByText("Show variants")).toBeInTheDocument()
+      expect(screen.getByText("Hide outbound stops")).toBeInTheDocument()
+
+      await userEvent.click(screen.getByText("Show variants"))
+      expect(screen.getByText("Show outbound stops")).toBeInTheDocument()
+    })
+
+    test("Can have the variants section open by default", async () => {
+      render(<RoutePropertiesCardWithDefaults defaultOpened="variants" />)
+
+      expect(screen.getByText("Show outbound stops")).toBeInTheDocument()
+      expect(screen.getByText("Hide variants")).toBeInTheDocument()
+    })
+
+    test("Can have the stops section open by default", async () => {
+      render(<RoutePropertiesCardWithDefaults defaultOpened="stops" />)
+
       expect(screen.getByText("Hide outbound stops")).toBeInTheDocument()
       expect(screen.getByText("Show variants")).toBeInTheDocument()
     })