[for launch] fix: Detour in ladder needs to match on route ids, not n…

…ame (#2935)
mbta · Jan 24, 2025 · de0a54c · de0a54c
1 parent b65ff66
commit de0a54c
Show file tree

Hide file tree

Showing 3 changed files with 106 additions and 5 deletions.
diff --git a/assets/src/components/routeLadders.tsx b/assets/src/components/routeLadders.tsx
@@ -67,7 +67,7 @@ const RouteLadders = ({
   // const skateDetours = useActiveDetoursByRoute(socket, selectedRouteIds)
   const allActiveSkateDetours = useActiveDetours(socket)
 
-  const skateDetoursByRoute = Object.values(allActiveSkateDetours).reduce(
+  const skateDetoursByRouteName = Object.values(allActiveSkateDetours).reduce(
     (acc: ByRouteId<DetoursMap>, cur: SimpleDetour) => {
       acc[cur.route] = { ...acc[cur.route], [cur.id]: cur }
       return acc
@@ -80,9 +80,10 @@ const RouteLadders = ({
       routesWithAlerts.push(routeId)
     }
   }
-  for (const routeId in skateDetoursByRoute) {
-    if (Object.keys(skateDetoursByRoute[routeId]).length > 0) {
-      routesWithAlerts.push(routeId)
+  for (const routeName in skateDetoursByRouteName) {
+    if (Object.keys(skateDetoursByRouteName[routeName]).length > 0) {
+      const route = selectedRoutes.find((route) => route.name == routeName)
+      if (route) routesWithAlerts.push(route.id)
     }
   }
 
@@ -108,7 +109,7 @@ const RouteLadders = ({
           hasAlert={routesWithAlerts.includes(route.id)}
           onAddDetour={onAddDetour}
           onOpenDetour={onOpenDetour}
-          skateDetoursForRoute={skateDetoursByRoute[route.id]}
+          skateDetoursForRoute={skateDetoursByRouteName[route.name]}
         />
       ))}
     </div>

diff --git a/assets/tests/components/__snapshots__/routeLadders.test.tsx.snap b/assets/tests/components/__snapshots__/routeLadders.test.tsx.snap
@@ -388,6 +388,79 @@ exports[`RouteLadders renders a route ladder 1`] = `
     <div
       class="c-incoming-box"
     />
+    <div
+      class="c-route-ladder__header card"
+    >
+      <div
+        class="card-body"
+      >
+        <div
+          class="c-route-ladder__dropdown"
+        >
+          <div
+            class="border-box inherit-box dropdown"
+          >
+            <button
+              aria-expanded="false"
+              aria-labelledby="route-pill:r6: route-options-toggle:r7:"
+              class="c-route-ladder__dropdown-button d-none d-sm-flex dropdown-toggle btn btn-primary"
+              id="react-aria-:r8:"
+              type="button"
+            >
+              <svg
+                aria-hidden="true"
+                class="bi bi-three-dots-vertical"
+                fill="currentColor"
+                height="16"
+                viewBox="0 0 16 16"
+                width="16"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0m0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0m0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0"
+                />
+              </svg>
+              <span
+                class="visually-hidden"
+                id="route-options-toggle:r7:"
+              >
+                Route Options
+              </span>
+            </button>
+          </div>
+        </div>
+        <div
+          class="c-route-pill c-route-pill--silver c-route-pill--large-format c-route-pill--dynamic-size"
+          id="route-pill:r6:"
+        >
+          SL3
+        </div>
+        <div
+          class="c-route-ladder__close-button-container"
+        >
+          <button
+            aria-label="Close"
+            class="btn-close p-2"
+            type="button"
+          />
+        </div>
+      </div>
+    </div>
+    <div
+      class="c-route-ladder__controls"
+    >
+      <button
+        class="c-route-ladder__reverse"
+      >
+        <span
+          class="c-route-ladder__reverse-icon"
+        >
+          <svg />
+        </span>
+        Reverse
+      </button>
+    </div>
+    loading...
   </div>
 </DocumentFragment>
 `;
diff --git a/assets/tests/components/routeLadders.test.tsx b/assets/tests/components/routeLadders.test.tsx
@@ -20,6 +20,7 @@ jest.mock("../../src/hooks/useTimepoints", () => ({
 const routes: Route[] = [
   routeFactory.build({ id: "1", name: "1" }),
   routeFactory.build({ id: "28", name: "28" }),
+  routeFactory.build({ id: "743", name: "SL3" }),
 ]
 const timepointsByRouteId: TimepointsByRouteId = {
   "1": [
@@ -136,6 +137,32 @@ describe("RouteLadders", () => {
       expect(routeAlert.get()).toBeVisible()
     })
 
+    test("renders with a skate detour on a route where route name and id don't match", () => {
+      jest
+        .mocked(useTimepoints)
+        .mockImplementationOnce(() => timepointsByRouteId)
+      jest.mocked(useActiveDetours).mockReturnValue({
+        "1": simpleDetourFactory.build({ id: 1, route: "SL3" }),
+        "2": simpleDetourFactory.build({ id: 2, route: "SL3" }),
+      })
+
+      render(
+        <RoutesProvider routes={routes}>
+          <RouteLadders
+            selectedRouteIds={routes.map((route) => route.id)}
+            selectedVehicleId={undefined}
+            deselectRoute={jest.fn()}
+            reverseLadder={jest.fn()}
+            toggleCrowding={jest.fn()}
+            ladderDirections={{}}
+            ladderCrowdingToggles={{}}
+          />
+        </RoutesProvider>
+      )
+
+      expect(routeAlert.get()).toBeVisible()
+    })
+
     test("doesn't render without an active detour", () => {
       jest
         .mocked(useTimepoints)