diff --git a/assets/src/components/detours/diversionPage.tsx b/assets/src/components/detours/diversionPage.tsx
index 57c5e3ff1..ad72786d0 100644
--- 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.
)}
- {routingError && }
+ {routingError?.type === "no_route" && (
+
+ You can't route to this location. Please try a different
+ point.
+
+ )}
+ {routingError?.type === "unknown" && }
{
+const RoutingErrorAlert = ({
+ children,
+}: PropsWithChildren): React.ReactElement => {
const [show, setShow] = useState(true)
return (
@@ -264,7 +272,7 @@ const RoutingErrorAlert = (): React.ReactElement => {
show={show}
>
- Something went wrong. Please try again.
+ {children ?? "Something went wrong. Please try again."}
setShow(false)} />
)
diff --git a/assets/tests/components/detours/diversionPage.test.tsx b/assets/tests/components/detours/diversionPage.test.tsx
index 33ee0fad3..4b384cf29 100644
--- 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()
-
- 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
+ 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()
+
+ 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