From a69b85ff85e29485df055e17ebc6adc84dbb729f Mon Sep 17 00:00:00 2001 From: Kayla Firestack Date: Wed, 28 Feb 2024 09:40:03 -0500 Subject: [PATCH] refactor: extract original route query into byRole like API (#2430) --- .../components/detours/diversionPage.test.tsx | 117 +++++------------- .../components/detours/diversionPage.tsx | 11 ++ 2 files changed, 43 insertions(+), 85 deletions(-) diff --git a/assets/tests/components/detours/diversionPage.test.tsx b/assets/tests/components/detours/diversionPage.test.tsx index 4daf0ae33..ca4a7edf7 100644 --- a/assets/tests/components/detours/diversionPage.test.tsx +++ b/assets/tests/components/detours/diversionPage.test.tsx @@ -8,7 +8,10 @@ import shapeFactory from "../../factories/shape" import { latLngLiteralFactory } from "../../factories/latLngLiteralFactory" import stopFactory from "../../factories/stop" import userEvent from "@testing-library/user-event" -import { finishDetourButton } from "../../testHelpers/selectors/components/detours/diversionPage" +import { + finishDetourButton, + originalRouteShape, +} from "../../testHelpers/selectors/components/detours/diversionPage" const DiversionPage = ( props: Partial> @@ -47,9 +50,7 @@ describe("DiversionPage", () => { test("can click on route shape to start detour", async () => { const { container } = render() - fireEvent.click( - container.querySelector(".c-detour_map--original-route-shape")! - ) + fireEvent.click(originalRouteShape.get(container)) expect(screen.getByTitle("Detour Start")).not.toBeNull() expect(screen.queryByTitle("Detour End")).toBeNull() @@ -58,13 +59,9 @@ describe("DiversionPage", () => { test("can click on route shape again to end detour", async () => { const { container } = render() - fireEvent.click( - container.querySelector(".c-detour_map--original-route-shape")! - ) + fireEvent.click(originalRouteShape.get(container)) - fireEvent.click( - container.querySelector(".c-detour_map--original-route-shape")! - ) + fireEvent.click(originalRouteShape.get(container)) expect(screen.getByTitle("Detour End")).not.toBeNull() }) @@ -72,17 +69,13 @@ describe("DiversionPage", () => { test("when end point has been set, finish detour button is visible", async () => { const { container } = render() - fireEvent.click( - container.querySelector(".c-detour_map--original-route-shape")! - ) + fireEvent.click(originalRouteShape.get(container)) expect( screen.getByRole("button", { name: "Finish Detour", hidden: true }) ).not.toBeVisible() - fireEvent.click( - container.querySelector(".c-detour_map--original-route-shape")! - ) + fireEvent.click(originalRouteShape.get(container)) expect(screen.getByRole("button", { name: "Finish Detour" })).toBeVisible() }) @@ -90,9 +83,7 @@ describe("DiversionPage", () => { test("clicking on map while drawing a detour adds a point", async () => { const { container } = render() - fireEvent.click( - container.querySelector(".c-detour_map--original-route-shape")! - ) + fireEvent.click(originalRouteShape.get(container)) fireEvent.click(container.querySelector(".c-vehicle-map")!) @@ -104,15 +95,11 @@ describe("DiversionPage", () => { test("detour points are correctly rendered when detour is complete", async () => { const { container } = render() - fireEvent.click( - container.querySelector(".c-detour_map--original-route-shape")! - ) + fireEvent.click(originalRouteShape.get(container)) fireEvent.click(container.querySelector(".c-vehicle-map")!) - fireEvent.click( - container.querySelector(".c-detour_map--original-route-shape")! - ) + fireEvent.click(originalRouteShape.get(container)) expect( container.querySelectorAll(".c-detour_map-circle-marker--detour-point") @@ -122,9 +109,7 @@ describe("DiversionPage", () => { test("clicking on 'Undo' removes last point from detour", async () => { const { container } = render() - fireEvent.click( - container.querySelector(".c-detour_map--original-route-shape")! - ) + fireEvent.click(originalRouteShape.get(container)) fireEvent.click(container.querySelector(".c-vehicle-map")!) @@ -145,9 +130,7 @@ describe("DiversionPage", () => { test("clicking on 'Undo' removes the start point when there are no waypoints", async () => { const { container } = render() - fireEvent.click( - container.querySelector(".c-detour_map--original-route-shape")! - ) + fireEvent.click(originalRouteShape.get(container)) fireEvent.click(screen.getByRole("button", { name: "Undo" })) @@ -157,13 +140,9 @@ describe("DiversionPage", () => { test("clicking on 'Undo' removes the end point when the detour is finished", async () => { const { container } = render() - fireEvent.click( - container.querySelector(".c-detour_map--original-route-shape")! - ) + fireEvent.click(originalRouteShape.get(container)) - fireEvent.click( - container.querySelector(".c-detour_map--original-route-shape")! - ) + fireEvent.click(originalRouteShape.get(container)) fireEvent.click(screen.getByRole("button", { name: "Undo" })) @@ -174,15 +153,11 @@ describe("DiversionPage", () => { test("clicking on 'Clear' removes the entire detour", async () => { const { container } = render() - fireEvent.click( - container.querySelector(".c-detour_map--original-route-shape")! - ) + fireEvent.click(originalRouteShape.get(container)) fireEvent.click(container.querySelector(".c-vehicle-map")!) - fireEvent.click( - container.querySelector(".c-detour_map--original-route-shape")! - ) + fireEvent.click(originalRouteShape.get(container)) fireEvent.click(screen.getByRole("button", { name: "Clear" })) @@ -201,15 +176,11 @@ describe("DiversionPage", () => { const { container } = render() await act(async () => { - fireEvent.click( - container.querySelector(".c-detour_map--original-route-shape")! - ) + fireEvent.click(originalRouteShape.get(container)) }) await act(async () => { - fireEvent.click( - container.querySelector(".c-detour_map--original-route-shape")! - ) + fireEvent.click(originalRouteShape.get(container)) }) waitFor(() => expect(screen.getByText(stop.name)).toBeInTheDocument()) @@ -222,15 +193,11 @@ describe("DiversionPage", () => { const { container } = render() await act(async () => { - fireEvent.click( - container.querySelector(".c-detour_map--original-route-shape")! - ) + fireEvent.click(originalRouteShape.get(container)) }) await act(async () => { - fireEvent.click( - container.querySelector(".c-detour_map--original-route-shape")! - ) + fireEvent.click(originalRouteShape.get(container)) }) waitFor(() => expect(screen.getAllByText(stop.name)).toHaveLength(1)) @@ -239,13 +206,9 @@ describe("DiversionPage", () => { test("When 'Finish Detour' button is clicked, shows 'Share Detour Details' screen", async () => { const { container } = render() - fireEvent.click( - container.querySelector(".c-detour_map--original-route-shape")! - ) + fireEvent.click(originalRouteShape.get(container)) - fireEvent.click( - container.querySelector(".c-detour_map--original-route-shape")! - ) + fireEvent.click(originalRouteShape.get(container)) await userEvent.click(finishDetourButton.get()) @@ -260,13 +223,9 @@ describe("DiversionPage", () => { test("'Share Detour Details' screen has alert describing that the detour is not editable", async () => { const { container } = render() - fireEvent.click( - container.querySelector(".c-detour_map--original-route-shape")! - ) + fireEvent.click(originalRouteShape.get(container)) - fireEvent.click( - container.querySelector(".c-detour_map--original-route-shape")! - ) + fireEvent.click(originalRouteShape.get(container)) await userEvent.click(finishDetourButton.get()) @@ -278,13 +237,9 @@ describe("DiversionPage", () => { test("'Share Detour Details' screen has back button to edit detour again", async () => { const { container } = render() - fireEvent.click( - container.querySelector(".c-detour_map--original-route-shape")! - ) + fireEvent.click(originalRouteShape.get(container)) - fireEvent.click( - container.querySelector(".c-detour_map--original-route-shape")! - ) + fireEvent.click(originalRouteShape.get(container)) await userEvent.click(finishDetourButton.get()) @@ -294,13 +249,9 @@ describe("DiversionPage", () => { test("'Share Detour Details' screen has button to copy details", async () => { const { container } = render() - fireEvent.click( - container.querySelector(".c-detour_map--original-route-shape")! - ) + fireEvent.click(originalRouteShape.get(container)) - fireEvent.click( - container.querySelector(".c-detour_map--original-route-shape")! - ) + fireEvent.click(originalRouteShape.get(container)) await userEvent.click(finishDetourButton.get()) @@ -312,13 +263,9 @@ describe("DiversionPage", () => { const { container } = render() - fireEvent.click( - container.querySelector(".c-detour_map--original-route-shape")! - ) + fireEvent.click(originalRouteShape.get(container)) - fireEvent.click( - container.querySelector(".c-detour_map--original-route-shape")! - ) + fireEvent.click(originalRouteShape.get(container)) await userEvent.click(finishDetourButton.get()) diff --git a/assets/tests/testHelpers/selectors/components/detours/diversionPage.tsx b/assets/tests/testHelpers/selectors/components/detours/diversionPage.tsx index 97a056c33..98158d755 100644 --- a/assets/tests/testHelpers/selectors/components/detours/diversionPage.tsx +++ b/assets/tests/testHelpers/selectors/components/detours/diversionPage.tsx @@ -1,3 +1,14 @@ +import { expect } from "@jest/globals" import { byRole } from "testing-library-selector" export const finishDetourButton = byRole("button", { name: "Finish Detour" }) + +export const originalRouteShape = { + get(container: HTMLElement): Element { + const maybeShape = container.querySelector( + ".c-detour_map--original-route-shape" + ) + expect(maybeShape).not.toBeNull() + return maybeShape as Element + }, +}