fix: Moved "Return to Regular Route" into root directions list (#2521)

* Test out moving the "return to route" to the root directions list * Only add Regular Route after detour is finished * Updated wording to match figma * Added check: "regular route" only appears when detour is finished Co-authored-by: Kayla Firestack <[email protected]>
mbta · Mar 29, 2024 · fc5df73 · fc5df73
1 parent 80e31cf
commit fc5df73
Show file tree

Hide file tree

Showing 4 changed files with 80 additions and 9 deletions.
diff --git a/assets/src/components/detours/diversionPage.tsx b/assets/src/components/detours/diversionPage.tsx
@@ -68,7 +68,6 @@ export const DiversionPage = ({
         ,
         "Turn-by-Turn Directions:",
         ...(directions?.map((v) => v.instruction) ?? []),
-        "Return to Regular Route",
         ,
         "Connection Points:",
         connectionPoints?.start?.name ?? "N/A",

diff --git a/assets/src/components/detours/diversionPanel.tsx b/assets/src/components/detours/diversionPanel.tsx
@@ -63,14 +63,13 @@ export const DiversionPanel = ({
             <ListGroup as="ol">
               {directions.map((d) => (
                 <ListGroup.Item key={d.instruction} as="li">
-                  {d.instruction}
+                  {d.instruction == "Regular Route" ? (
+                    <strong className="fw-medium">{d.instruction}</strong>
+                  ) : (
+                    d.instruction
+                  )}
                 </ListGroup.Item>
               ))}
-              {detourFinished && (
-                <ListGroup.Item as="li">
-                  <strong className="fw-medium">Return to Regular Route</strong>
-                </ListGroup.Item>
-              )}
             </ListGroup>
           ) : (
             <DirectionsHelpText />

diff --git a/assets/src/hooks/useDetour.ts b/assets/src/hooks/useDetour.ts
@@ -88,7 +88,14 @@ export const useDetour = ({ routePatternId, shape }: OriginalRoute) => {
   )
 
   const coordinates = isOk(detourShape) ? detourShape.ok.coordinates : []
-  const directions = isOk(detourShape) ? detourShape.ok.directions : undefined
+  // Only append direction "Regular Route" after detour is finished
+  const directions = isOk(detourShape)
+    ? finishedDetour
+      ? detourShape.ok.directions?.concat({
+          instruction: "Regular Route",
+        })
+      : detourShape.ok.directions
+    : undefined
 
   const canAddWaypoint = () => startPoint !== null && endPoint === null
   const addWaypoint = canAddWaypoint()

diff --git a/assets/tests/components/detours/diversionPage.test.tsx b/assets/tests/components/detours/diversionPage.test.tsx
@@ -242,6 +242,72 @@ describe("DiversionPage", () => {
     expect(screen.queryByTitle("Detour End")).toBeNull()
   })
 
+  test("shows 'Regular Route' text when the detour is finished", async () => {
+    jest.mocked(fetchDetourDirections).mockResolvedValue(
+      ok(
+        detourShapeFactory.build({
+          directions: [
+            { instruction: "Turn left on Main Street" },
+            { instruction: "Turn right on High Street" },
+            { instruction: "Turn sharp right on Broadway" },
+          ],
+        })
+      )
+    )
+
+    jest
+      .mocked(fetchFinishedDetour)
+      .mockResolvedValue(finishedDetourFactory.build())
+
+    const { container } = render(<DiversionPage />)
+
+    act(() => {
+      fireEvent.click(originalRouteShape.get(container))
+    })
+
+    act(() => {
+      fireEvent.click(originalRouteShape.get(container))
+    })
+
+    expect(await screen.findByText("Regular Route")).toBeVisible()
+  })
+
+  test("does not show 'Regular Route' when detour is not finished", async () => {
+    jest.mocked(fetchDetourDirections).mockResolvedValue(
+      ok(
+        detourShapeFactory.build({
+          directions: [
+            { instruction: "Turn left on Main Street" },
+            { instruction: "Turn right on High Street" },
+            { instruction: "Turn sharp right on Broadway" },
+          ],
+        })
+      )
+    )
+
+    jest
+      .mocked(fetchFinishedDetour)
+      .mockResolvedValue(finishedDetourFactory.build())
+
+    const { container } = render(<DiversionPage />)
+
+    expect(screen.queryByText("Regular Route")).not.toBeInTheDocument()
+
+    act(() => {
+      fireEvent.click(originalRouteShape.get(container))
+    })
+
+    act(() => {
+      fireEvent.click(originalRouteShape.get(container))
+    })
+
+    expect(await screen.findByText("Regular Route")).toBeVisible()
+
+    fireEvent.click(screen.getByRole("button", { name: "Undo" }))
+
+    expect(screen.queryByText("Regular Route")).not.toBeInTheDocument()
+  })
+
   test("missed stops are filled in when detour is complete", async () => {
     const stop1 = stopFactory.build()
     const stop2 = stopFactory.build()
@@ -410,7 +476,7 @@ describe("DiversionPage", () => {
           "Turn left on Main Street",
           "Turn right on High Street",
           "Turn sharp right on Broadway",
-          "Return to Regular Route",
+          "Regular Route",
           ,
           "Connection Points:",
           start.name,