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