tweak: Update detour panel titles / buttons to match hi-fi language (#…

…2853)
mbta · Oct 16, 2024 · 829201a · 829201a
1 parent ba6bd8e
commit 829201a
Show file tree

Hide file tree

Showing 9 changed files with 46 additions and 63 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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: {