From 829201a94a61a62feb3c428789d051e3d13d170a Mon Sep 17 00:00:00 2001
From: Hannah Purcell <69368883+hannahpurcell@users.noreply.github.com>
Date: Wed, 16 Oct 2024 14:47:43 -0400
Subject: [PATCH] tweak: Update detour panel titles / buttons to match hi-fi
 language (#2853)

---
 .../detourPanels/detourFinishedPanel.tsx      |  4 +-
 .../detours/detourPanels/drawDetourPanel.tsx  |  2 +-
 .../detoursListPage.openDetour.test.tsx.snap  |  8 +--
 .../detoursListPage.openDetour.test.tsx       |  5 +-
 .../detours/diversionPage.activate.test.tsx   | 13 ++--
 .../components/detours/diversionPage.test.tsx | 63 +++++++------------
 assets/tests/components/mapPage.test.tsx      |  3 +-
 .../notificationCard.openDetour.test.tsx      |  5 +-
 .../components/detours/diversionPage.tsx      |  6 ++
 9 files changed, 46 insertions(+), 63 deletions(-)

diff --git a/assets/src/components/detours/detourPanels/detourFinishedPanel.tsx b/assets/src/components/detours/detourPanels/detourFinishedPanel.tsx
index 112399934..a9d2115ed 100644
--- a/assets/src/components/detours/detourPanels/detourFinishedPanel.tsx
+++ b/assets/src/components/detours/detourPanels/detourFinishedPanel.tsx
@@ -19,7 +19,7 @@ export const DetourFinishedPanel = ({
 }: DetourFinishedPanelProps) => (
   <Panel as="article">
     <Panel.Header className="">
-      <h1 className="c-diversion-panel__h1 my-3">Share Detour Details</h1>
+      <h1 className="c-diversion-panel__h1 my-3">View Draft Detour</h1>
     </Panel.Header>
 
     <Panel.Body className="d-flex flex-column">
@@ -30,7 +30,7 @@ export const DetourFinishedPanel = ({
           variant="outline-primary"
           onClick={onNavigateBack}
         >
-          <BsIcons.ArrowLeft /> Edit Detour
+          <BsIcons.ArrowLeft /> Edit
         </Button>
 
         <Form.Control
diff --git a/assets/src/components/detours/detourPanels/drawDetourPanel.tsx b/assets/src/components/detours/detourPanels/drawDetourPanel.tsx
index 83c880461..1904487e6 100644
--- a/assets/src/components/detours/detourPanels/drawDetourPanel.tsx
+++ b/assets/src/components/detours/detourPanels/drawDetourPanel.tsx
@@ -31,7 +31,7 @@ export const DrawDetourPanel = ({
 }: DrawDetourPanelProps) => (
   <Panel as="article" className="c-diversion-panel">
     <Panel.Header>
-      <h1 className="c-diversion-panel__h1 my-3">Create Detour</h1>
+      <h1 className="c-diversion-panel__h1 my-3">Draw Detour</h1>
     </Panel.Header>
 
     <Panel.Body className="d-flex flex-column">
diff --git a/assets/tests/components/detours/__snapshots__/detoursListPage.openDetour.test.tsx.snap b/assets/tests/components/detours/__snapshots__/detoursListPage.openDetour.test.tsx.snap
index 4dbe2b0ef..3ebde0096 100644
--- a/assets/tests/components/detours/__snapshots__/detoursListPage.openDetour.test.tsx.snap
+++ b/assets/tests/components/detours/__snapshots__/detoursListPage.openDetour.test.tsx.snap
@@ -405,7 +405,7 @@ exports[`Detours Page: Open a Detour renders detour details in an open drawer on
               <h1
                 class="c-diversion-panel__h1 my-3"
               >
-                Share Detour Details
+                View Draft Detour
               </h1>
             </header>
             <div
@@ -432,7 +432,7 @@ exports[`Detours Page: Open a Detour renders detour details in an open drawer on
                       fill-rule="evenodd"
                     />
                   </svg>
-                   Edit Detour
+                   Edit
                 </button>
                 <textarea
                   class="flex-grow-1 mb-3 form-control"
@@ -1169,7 +1169,7 @@ exports[`Detours Page: Open a Detour renders detour details modal to match mocke
             <h1
               class="c-diversion-panel__h1 my-3"
             >
-              Share Detour Details
+              View Draft Detour
             </h1>
           </header>
           <div
@@ -1196,7 +1196,7 @@ exports[`Detours Page: Open a Detour renders detour details modal to match mocke
                     fill-rule="evenodd"
                   />
                 </svg>
-                 Edit Detour
+                 Edit
               </button>
               <textarea
                 class="flex-grow-1 mb-3 form-control"
diff --git a/assets/tests/components/detours/detoursListPage.openDetour.test.tsx b/assets/tests/components/detours/detoursListPage.openDetour.test.tsx
index 0e03e3665..57b0400be 100644
--- a/assets/tests/components/detours/detoursListPage.openDetour.test.tsx
+++ b/assets/tests/components/detours/detoursListPage.openDetour.test.tsx
@@ -15,6 +15,7 @@ import getTestGroups from "../../../src/userTestGroups"
 import { detourListFactory } from "../../factories/detourListFactory"
 import { TestGroups } from "../../../src/userInTestGroup"
 import { detourStateMachineFactory } from "../../factories/detourStateMachineFactory"
+import { viewDraftDetourHeading } from "../../testHelpers/selectors/components/detours/diversionPage"
 
 jest
   .useFakeTimers({ doNotFake: ["setTimeout"] })
@@ -55,9 +56,7 @@ describe("Detours Page: Open a Detour", () => {
     await userEvent.click(await screen.findByText("Headsign Z"))
 
     // Render modal based on mocked value, which is a detour-in-progress
-    expect(
-      await screen.findByRole("heading", { name: "Share Detour Details" })
-    ).toBeVisible()
+    expect(viewDraftDetourHeading.get()).toBeVisible()
 
     // Finally, check snapshot
     await waitFor(() => expect(baseElement).toMatchSnapshot())
diff --git a/assets/tests/components/detours/diversionPage.activate.test.tsx b/assets/tests/components/detours/diversionPage.activate.test.tsx
index fb741d386..d5a2e90e5 100644
--- a/assets/tests/components/detours/diversionPage.activate.test.tsx
+++ b/assets/tests/components/detours/diversionPage.activate.test.tsx
@@ -14,6 +14,7 @@ import {
   activateDetourButton,
   originalRouteShape,
   reviewDetourButton,
+  viewDraftDetourHeading,
 } from "../../testHelpers/selectors/components/detours/diversionPage"
 import {
   fetchDetourDirections,
@@ -152,9 +153,7 @@ describe("DiversionPage activate workflow", () => {
     test("does not show the activate flow modal before clicking the activate button", async () => {
       await diversionPageOnReviewScreen()
 
-      expect(
-        screen.getByRole("heading", { name: "Share Detour Details" })
-      ).toBeVisible()
+      expect(viewDraftDetourHeading.get()).toBeVisible()
       expect(step1Heading.query()).not.toBeInTheDocument()
     })
 
@@ -163,9 +162,7 @@ describe("DiversionPage activate workflow", () => {
 
       await userEvent.click(activateDetourButton.get())
 
-      expect(
-        screen.getByRole("heading", { name: "Share Detour Details" })
-      ).toBeVisible()
+      expect(viewDraftDetourHeading.get()).toBeVisible()
       expect(step1Heading.get()).toBeVisible()
     })
   })
@@ -356,9 +353,7 @@ describe("DiversionPage activate workflow", () => {
 
       await userEvent.click(activateButton.get())
 
-      expect(
-        screen.queryByRole("heading", { name: "Share Detour Details" })
-      ).not.toBeInTheDocument()
+      expect(viewDraftDetourHeading.query()).not.toBeInTheDocument()
       expect(
         screen.getByRole("heading", { name: "Active Detour" })
       ).toBeVisible()
diff --git a/assets/tests/components/detours/diversionPage.test.tsx b/assets/tests/components/detours/diversionPage.test.tsx
index 986778ce4..bd301af02 100644
--- a/assets/tests/components/detours/diversionPage.test.tsx
+++ b/assets/tests/components/detours/diversionPage.test.tsx
@@ -25,8 +25,11 @@ import {
 import { stopFactory } from "../../factories/stop"
 import userEvent from "@testing-library/user-event"
 import {
+  drawDetourHeading,
+  editDetourButton,
   originalRouteShape,
   reviewDetourButton,
+  viewDraftDetourHeading,
 } from "../../testHelpers/selectors/components/detours/diversionPage"
 import {
   finishedDetourFactory,
@@ -1071,7 +1074,7 @@ describe("DiversionPage", () => {
     })
   })
 
-  test("When 'Review Detour' button is clicked, shows 'Share Detour Details' screen", async () => {
+  test("When 'Review Detour' button is clicked, shows 'View Draft Detour' screen", async () => {
     const { container } = render(<DiversionPage />)
 
     act(() => {
@@ -1084,15 +1087,11 @@ describe("DiversionPage", () => {
 
     await userEvent.click(reviewDetourButton.get())
 
-    expect(
-      screen.queryByRole("heading", { name: "Create Detour" })
-    ).not.toBeInTheDocument()
-    expect(
-      screen.getByRole("heading", { name: "Share Detour Details" })
-    ).toBeVisible()
+    expect(drawDetourHeading.query()).not.toBeInTheDocument()
+    expect(viewDraftDetourHeading.get()).toBeVisible()
   })
 
-  test("When the finished-detour API call errors and 'Review Detour' button is clicked, shows 'Share Detour Details' screen", async () => {
+  test("When the finished-detour API call errors and 'Review Detour' button is clicked, shows 'View Draft Detour' screen", async () => {
     jest.mocked(fetchFinishedDetour).mockRejectedValue("NOPE")
 
     const { container } = render(<DiversionPage />)
@@ -1107,15 +1106,11 @@ describe("DiversionPage", () => {
 
     await userEvent.click(reviewDetourButton.get())
 
-    expect(
-      screen.queryByRole("heading", { name: "Create Detour" })
-    ).not.toBeInTheDocument()
-    expect(
-      screen.getByRole("heading", { name: "Share Detour Details" })
-    ).toBeVisible()
+    expect(drawDetourHeading.query()).not.toBeInTheDocument()
+    expect(viewDraftDetourHeading.get()).toBeVisible()
   })
 
-  test("When the detour-directions API call errors and 'Review Detour' button is clicked, shows 'Share Detour Details' screen", async () => {
+  test("When the detour-directions API call errors and 'Review Detour' button is clicked, shows 'View Draft Detour' screen", async () => {
     jest.mocked(fetchDetourDirections).mockRejectedValue("NOPE")
 
     const { container } = render(<DiversionPage />)
@@ -1130,15 +1125,11 @@ describe("DiversionPage", () => {
 
     await userEvent.click(reviewDetourButton.get())
 
-    expect(
-      screen.queryByRole("heading", { name: "Create Detour" })
-    ).not.toBeInTheDocument()
-    expect(
-      screen.getByRole("heading", { name: "Share Detour Details" })
-    ).toBeVisible()
+    expect(drawDetourHeading.query()).not.toBeInTheDocument()
+    expect(viewDraftDetourHeading.get()).toBeVisible()
   })
 
-  test("'Share Detour Details' screen has alert describing that the detour is not editable", async () => {
+  test("'View Draft Detour' screen has alert describing that the detour is not editable", async () => {
     const { container } = render(<DiversionPage />)
 
     act(() => {
@@ -1156,7 +1147,7 @@ describe("DiversionPage", () => {
     )
   })
 
-  test("'Share Detour Details' screen disables the 'Undo' and 'Clear' buttons", async () => {
+  test("'View Draft Detour' screen disables the 'Undo' and 'Clear' buttons", async () => {
     const { container } = render(<DiversionPage />)
 
     act(() => {
@@ -1175,7 +1166,7 @@ describe("DiversionPage", () => {
     })
   })
 
-  test("'Share Detour Details' screen has back button to edit detour again", async () => {
+  test("'View Draft Detour' screen has back button to edit detour again", async () => {
     const { container } = render(<DiversionPage />)
 
     act(() => {
@@ -1188,10 +1179,10 @@ describe("DiversionPage", () => {
 
     await userEvent.click(reviewDetourButton.get())
 
-    expect(screen.getByRole("button", { name: "Edit Detour" })).toBeVisible()
+    expect(editDetourButton.get()).toBeVisible()
   })
 
-  test("'Share Detour Details' screen returns to editing screen when edit detour button is clicked", async () => {
+  test("'View Draft Detour' screen returns to editing screen when edit detour button is clicked", async () => {
     const { container } = render(<DiversionPage />)
 
     act(() => {
@@ -1204,14 +1195,10 @@ describe("DiversionPage", () => {
 
     await userEvent.click(reviewDetourButton.get())
 
-    await userEvent.click(
-      await screen.findByRole("button", { name: "Edit Detour" })
-    )
+    await userEvent.click(editDetourButton.get())
 
     await waitFor(() => {
-      expect(
-        screen.queryByRole("button", { name: "Edit Detour" })
-      ).not.toBeInTheDocument()
+      expect(editDetourButton.query()).not.toBeInTheDocument()
       expect(
         screen.getByRole("button", { name: "Review Detour" })
       ).toBeVisible()
@@ -1221,7 +1208,7 @@ describe("DiversionPage", () => {
     })
   })
 
-  test("'Share Detour Details' screen has button to copy details", async () => {
+  test("'View Draft Detour' screen has button to copy details", async () => {
     const { container } = render(<DiversionPage />)
 
     act(() => {
@@ -1237,7 +1224,7 @@ describe("DiversionPage", () => {
     expect(screen.getByRole("button", { name: "Copy Details" })).toBeVisible()
   })
 
-  test("'Share Detour Details' screen copies text content to clipboard when clicked copy details button", async () => {
+  test("'View Draft Detour' screen copies text content to clipboard when clicked copy details button", async () => {
     const stops = stopFactory.buildList(4)
     const [start, end] = stopFactory.buildList(2)
 
@@ -1409,9 +1396,7 @@ describe("DiversionPage", () => {
         />
       )
 
-      expect(
-        await screen.findByRole("heading", { name: "Create Detour" })
-      ).toBeInTheDocument()
+      expect(await drawDetourHeading.find()).toBeInTheDocument()
       expect(
         screen.queryByRole("button", { name: "Change route or direction" })
       ).toBeInTheDocument()
@@ -1927,8 +1912,6 @@ describe("DiversionPage", () => {
       </RoutesProvider>
     )
 
-    expect(
-      screen.getByRole("heading", { name: "Share Detour Details" })
-    ).toBeVisible()
+    expect(viewDraftDetourHeading.get()).toBeVisible()
   })
 })
diff --git a/assets/tests/components/mapPage.test.tsx b/assets/tests/components/mapPage.test.tsx
index 8a0a01111..62b54ce4e 100644
--- a/assets/tests/components/mapPage.test.tsx
+++ b/assets/tests/components/mapPage.test.tsx
@@ -95,6 +95,7 @@ import { mockUsePanelState } from "../testHelpers/usePanelStateMocks"
 import getTestGroups from "../../src/userTestGroups"
 import { TestGroups } from "../../src/userInTestGroup"
 import { fetchNearestIntersection } from "../../src/api"
+import { drawDetourHeading } from "../testHelpers/selectors/components/detours/diversionPage"
 
 jest.mock("../../src/hooks/useLocationSearchResults", () => ({
   useLocationSearchResults: jest.fn(() => null),
@@ -1850,7 +1851,7 @@ describe("<MapPage />", () => {
         })
       )
 
-      expect(screen.getByText("Create Detour")).toBeVisible()
+      expect(drawDetourHeading.get()).toBeVisible()
     })
 
     test("dismisses the detour modal on escape key", async () => {
diff --git a/assets/tests/components/notificationCard.openDetour.test.tsx b/assets/tests/components/notificationCard.openDetour.test.tsx
index eb8c8f4b3..4abf955fb 100644
--- a/assets/tests/components/notificationCard.openDetour.test.tsx
+++ b/assets/tests/components/notificationCard.openDetour.test.tsx
@@ -13,6 +13,7 @@ import { detourListFactory } from "../factories/detourListFactory"
 import getTestGroups from "../../src/userTestGroups"
 import { TestGroups } from "../../src/userInTestGroup"
 import { detourStateMachineFactory } from "../factories/detourStateMachineFactory"
+import { viewDraftDetourHeading } from "../testHelpers/selectors/components/detours/diversionPage"
 
 jest.mock("../../src/api")
 jest.mock("../../src/helpers/fullStory")
@@ -63,8 +64,6 @@ describe("NotificationCard", () => {
     await userEvent.click(screen.getByRole("button", { name: /Detour/ }))
     // Render modal based on mocked value, which is a detour-in-progress
 
-    expect(
-      screen.getByRole("heading", { name: "Share Detour Details" })
-    ).toBeVisible()
+    expect(viewDraftDetourHeading.get()).toBeVisible()
   })
 })
diff --git a/assets/tests/testHelpers/selectors/components/detours/diversionPage.tsx b/assets/tests/testHelpers/selectors/components/detours/diversionPage.tsx
index 312f54589..f5d2706cb 100644
--- a/assets/tests/testHelpers/selectors/components/detours/diversionPage.tsx
+++ b/assets/tests/testHelpers/selectors/components/detours/diversionPage.tsx
@@ -5,6 +5,12 @@ export const reviewDetourButton = byRole("button", { name: "Review Detour" })
 export const activateDetourButton = byRole("button", {
   name: "Activate Detour",
 })
+export const editDetourButton = byRole("button", { name: "Edit" })
+
+export const viewDraftDetourHeading = byRole("heading", {
+  name: "View Draft Detour",
+})
+export const drawDetourHeading = byRole("heading", { name: "Draw Detour" })
 
 export const originalRouteShape = {
   interactive: {