feat(ts/components/diversionPage): show specific error when route can…

…not get to point (#2543)
mbta · Apr 18, 2024 · c5bee5a · c5bee5a
1 parent 891d9ee
commit c5bee5a
Show file tree

Hide file tree

Showing 2 changed files with 50 additions and 25 deletions.
diff --git a/assets/src/components/detours/diversionPage.tsx b/assets/src/components/detours/diversionPage.tsx
@@ -123,7 +123,13 @@ export const DiversionPage = ({
               Detour is not editable from this screen.
             </Alert>
           )}
-          {routingError && <RoutingErrorAlert />}
+          {routingError?.type === "no_route" && (
+            <RoutingErrorAlert>
+              You can&apos;t route to this location. Please try a different
+              point.
+            </RoutingErrorAlert>
+          )}
+          {routingError?.type === "unknown" && <RoutingErrorAlert />}
           <DetourMap
             originalShape={originalRoute.shape.points}
             center={originalRoute.center}
@@ -254,7 +260,9 @@ const DiversionPagePanelFooter = ({
 // If we just use the `dismissible` prop, the close button is
 // positioned absolutely in a way that looks weird, so we need to wrap
 // the Alert in our own show state logic.
-const RoutingErrorAlert = (): React.ReactElement => {
+const RoutingErrorAlert = ({
+  children,
+}: PropsWithChildren): React.ReactElement => {
   const [show, setShow] = useState<boolean>(true)
 
   return (
@@ -264,7 +272,7 @@ const RoutingErrorAlert = (): React.ReactElement => {
       show={show}
     >
       <BsIcons.ExclamationTriangleFill />
-      Something went wrong. Please try again.
+      {children ?? "Something went wrong. Please try again."}
       <CloseButton onClick={() => setShow(false)} />
     </Alert>
   )

diff --git a/assets/tests/components/detours/diversionPage.test.tsx b/assets/tests/components/detours/diversionPage.test.tsx
@@ -9,7 +9,11 @@ import {
 } from "@testing-library/react"
 import React, { ComponentProps } from "react"
 import "@testing-library/jest-dom/jest-globals"
-import { fetchDetourDirections, fetchFinishedDetour } from "../../../src/api"
+import {
+  FetchDetourDirectionsError,
+  fetchDetourDirections,
+  fetchFinishedDetour,
+} from "../../../src/api"
 import { DiversionPage as DiversionPageDefault } from "../../../src/components/detours/diversionPage"
 import shapeFactory from "../../factories/shape"
 import { latLngLiteralFactory } from "../../factories/latLngLiteralFactory"
@@ -121,27 +125,40 @@ describe("DiversionPage", () => {
     ).toHaveLength(1)
   })
 
-  test("when adding a point results in a routing error, displays an alert", async () => {
-    jest
-      .mocked(fetchDetourDirections)
-      .mockResolvedValue(Err({ type: "unknown" }))
-
-    const { container } = render(<DiversionPage />)
-
-    await act(async () => {
-      fireEvent.click(originalRouteShape.get(container))
-    })
-
-    await act(async () => {
-      fireEvent.click(container.querySelector(".c-vehicle-map")!)
-    })
-
-    await waitFor(async () =>
-      expect(
-        screen.getByText("Something went wrong. Please try again.")
-      ).toBeVisible()
-    )
-  })
+  test.each<{
+    title: string
+    directionsResult: Err<FetchDetourDirectionsError>
+    alertError: string
+  }>([
+    {
+      title: "No Route",
+      directionsResult: Err({ type: "no_route" }),
+      alertError:
+        "You can't route to this location. Please try a different point.",
+    },
+    {
+      title: "Unknown",
+      directionsResult: Err({ type: "unknown" }),
+      alertError: "Something went wrong. Please try again.",
+    },
+  ])(
+    "when adding a point results in a `$title` routing error, displays an alert",
+    async ({ alertError, directionsResult }) => {
+      jest.mocked(fetchDetourDirections).mockResolvedValue(directionsResult)
+
+      const { container } = render(<DiversionPage />)
+
+      act(() => {
+        fireEvent.click(originalRouteShape.get(container))
+      })
+
+      act(() => {
+        fireEvent.click(container.querySelector(".c-vehicle-map")!)
+      })
+
+      expect(await screen.findByRole("alert")).toHaveTextContent(alertError)
+    }
+  )
 
   test("routing error alert can be dismissed", async () => {
     jest