From 7e935875c665854a93ee4dcff4fdda65e82792f1 Mon Sep 17 00:00:00 2001
From: Josh Larson <jlarson@mbta.com>
Date: Mon, 20 May 2024 12:47:00 -0400
Subject: [PATCH] feat: Allow RoutePropertiesCard to be open to "variants" or
 "stops" by default

---
 .../mapPage/routePropertiesCard.tsx           |  9 ++--
 .../routePropertiesCard.stories.tsx           | 11 +++++
 .../mapPage/routePropertiesCard.test.tsx      | 42 ++++++++++++++++++-
 3 files changed, 58 insertions(+), 4 deletions(-)

diff --git a/assets/src/components/mapPage/routePropertiesCard.tsx b/assets/src/components/mapPage/routePropertiesCard.tsx
index 40e4739b2..6069bdfa0 100644
--- 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/routePropertiesCard.stories.tsx b/assets/stories/skate-components/routePropertiesCard.stories.tsx
index dd1ec3d17..83a81e415 100644
--- a/assets/stories/skate-components/routePropertiesCard.stories.tsx
+++ b/assets/stories/skate-components/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
index a492ea68c..acb8f33e3 100644
--- 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()
     })