From 941daf79c21ee1c3f696dfc85d3b429086237256 Mon Sep 17 00:00:00 2001
From: Kayla Firestack <firestack@users.noreply.github.com>
Date: Tue, 11 Jun 2024 17:05:09 -0400
Subject: [PATCH] fix(ts/models/createDetourMachine): clear detour when
 selecting route pattern (#2658)

---
 assets/src/models/createDetourMachine.ts      |  1 +
 .../components/detours/diversionPage.test.tsx | 72 +++++++++++++++++++
 2 files changed, 73 insertions(+)

diff --git a/assets/src/models/createDetourMachine.ts b/assets/src/models/createDetourMachine.ts
index dbed2af7d..c3838a4af 100644
--- a/assets/src/models/createDetourMachine.ts
+++ b/assets/src/models/createDetourMachine.ts
@@ -219,6 +219,7 @@ export const createDetourMachine = setup({
           on: {
             "detour.route-pattern.open": {
               target: "Pick Route Pattern",
+              actions: "detour.clear",
             },
             "detour.edit.clear-detour": {
               target: ".Pick Start Point",
diff --git a/assets/tests/components/detours/diversionPage.test.tsx b/assets/tests/components/detours/diversionPage.test.tsx
index 4d6287c4c..8a0e0844a 100644
--- a/assets/tests/components/detours/diversionPage.test.tsx
+++ b/assets/tests/components/detours/diversionPage.test.tsx
@@ -1283,6 +1283,78 @@ describe("DiversionPage", () => {
         await screen.getByRole("heading", { name: "Choose route" })
       ).toBeVisible()
     })
+
+    test("when clicked, clears any existing detour state", async () => {
+      jest
+        .mocked(getTestGroups)
+        .mockReturnValue([TestGroups.DetourRouteSelection])
+
+      const route = routeFactory.build()
+      const routePatterns = routePatternFactory.buildList(2, {
+        routeId: route.id,
+      })
+      jest.mocked(fetchRoutePatterns).mockResolvedValue(routePatterns)
+
+      const { container } = render(
+        <RoutesProvider routes={[route]}>
+          <DiversionPage
+            originalRoute={{
+              route,
+              routePattern: routePatterns[0],
+            }}
+          />
+        </RoutesProvider>
+      )
+
+      act(() => {
+        fireEvent.click(originalRouteShape.get(container))
+      })
+      act(() => {
+        fireEvent.click(container.querySelector(".c-vehicle-map")!)
+      })
+      act(() => {
+        fireEvent.click(originalRouteShape.get(container))
+      })
+
+      // Assert that we have detour points
+      expect(await screen.findByTitle("Detour Start")).toBeVisible()
+      expect(screen.getByTitle("Detour End")).toBeVisible()
+      expect(
+        container.querySelector(".c-detour_map-circle-marker--detour-point")
+      ).toBeVisible()
+
+      // Assert that drawing is gone on route selection mode
+      await userEvent.click(
+        screen.getByRole("button", { name: "Change route or direction" })
+      )
+
+      expect(screen.queryByTitle("Detour Start")).not.toBeInTheDocument()
+      expect(screen.queryByTitle("Detour End")).not.toBeInTheDocument()
+      expect(
+        container.querySelector(".c-detour_map-circle-marker--detour-point")
+      ).not.toBeInTheDocument()
+
+      // Assert that detour is still cleared when returning to drawing detours
+      await userEvent.click(
+        screen.getByRole("button", { name: "Start drawing detour" })
+      )
+
+      expect(screen.queryByTitle("Detour Start")).not.toBeInTheDocument()
+      expect(screen.queryByTitle("Detour End")).not.toBeInTheDocument()
+      expect(
+        container.querySelector(".c-detour_map-circle-marker--detour-point")
+      ).not.toBeInTheDocument()
+
+      // Assert that route is still clickable
+      act(() => {
+        fireEvent.click(originalRouteShape.get(container))
+      })
+      expect(await screen.findByTitle("Detour Start")).toBeVisible()
+      expect(screen.queryByTitle("Detour End")).not.toBeInTheDocument()
+      expect(
+        container.querySelector(".c-detour_map-circle-marker--detour-point")
+      ).not.toBeInTheDocument()
+    })
   })
 
   describe("'Route Selection Panel'", () => {