From 013e2afd4b42281eb5c361aae4d397836990d493 Mon Sep 17 00:00:00 2001 From: Josh Larson Date: Mon, 23 Sep 2024 11:39:23 -0400 Subject: [PATCH] fixup! feat: Activate detour flow --- assets/src/models/createDetourMachine.ts | 32 +++++++++++++++---- .../detours/diversionPage.activate.test.tsx | 30 ++++++++++++++++- 2 files changed, 55 insertions(+), 7 deletions(-) diff --git a/assets/src/models/createDetourMachine.ts b/assets/src/models/createDetourMachine.ts index 633621aa1..09c90751f 100644 --- a/assets/src/models/createDetourMachine.ts +++ b/assets/src/models/createDetourMachine.ts @@ -499,8 +499,18 @@ export const createDetourMachine = setup({ }, states: { "Selecting Duration": { - initial: "No Duration Selected", + initial: "Begin", states: { + Begin: { + always: [ + { + guard: ({ context: { selectedDuration } }) => + selectedDuration === undefined, + target: "No Duration Selected", + }, + { target: "Duration Selected" }, + ], + }, "No Duration Selected": {}, "Duration Selected": { on: { @@ -516,7 +526,7 @@ export const createDetourMachine = setup({ on: { "detour.share.activate-modal.select-duration": { - target: "Selecting Duration.Duration Selected", + target: "Selecting Duration", actions: assign({ selectedDuration: ({ event }) => event.duration, }), @@ -527,8 +537,18 @@ export const createDetourMachine = setup({ }, }, "Selecting Reason": { - initial: "No Reason Selected", + initial: "Begin", states: { + Begin: { + always: [ + { + guard: ({ context: { selectedReason } }) => + selectedReason === undefined, + target: "No Reason Selected", + }, + { target: "Reason Selected" }, + ], + }, "No Reason Selected": {}, "Reason Selected": { on: { @@ -543,10 +563,10 @@ export const createDetourMachine = setup({ }, on: { "detour.share.activate-modal.back": { - target: "Selecting Duration.Duration Selected", + target: "Selecting Duration", }, "detour.share.activate-modal.select-reason": { - target: "Selecting Reason.Reason Selected", + target: "Selecting Reason", actions: assign({ selectedReason: ({ event }) => event.reason, }), @@ -559,7 +579,7 @@ export const createDetourMachine = setup({ Confirming: { on: { "detour.share.activate-modal.back": { - target: "Selecting Reason.Reason Selected", + target: "Selecting Reason", }, "detour.share.activate-modal.activate": { target: "Done", diff --git a/assets/tests/components/detours/diversionPage.activate.test.tsx b/assets/tests/components/detours/diversionPage.activate.test.tsx index 4e9993030..c641b9868 100644 --- a/assets/tests/components/detours/diversionPage.activate.test.tsx +++ b/assets/tests/components/detours/diversionPage.activate.test.tsx @@ -160,7 +160,9 @@ describe("DiversionPage activate workflow", () => { }) test("clicking the activate button shows the first screen of the activate flow modal", async () => { - await diversionPageOnSelectDurationModalScreen() + await diversionPageOnReviewScreen() + + await userEvent.click(activateDetourButton.get()) expect( screen.getByRole("heading", { name: "Share Detour Details" }) @@ -224,6 +226,19 @@ describe("DiversionPage activate workflow", () => { expect(step1Heading.query()).not.toBeInTheDocument() expect(step2Heading.get()).toBeVisible() }) + + test("re-opening the modal after selecting an option keeps that option selected", async () => { + await diversionPageOnSelectDurationModalScreen() + + await userEvent.click(threeHoursRadio.get()) + await userEvent.click(cancelButton.get()) + + await userEvent.click(activateDetourButton.get()) + + expect(step1Heading.query()).toBeVisible() + expect(threeHoursRadio.get()).toBeChecked() + expect(nextButton.get()).toBeEnabled() + }) }) describe("from the reason-selection screen on the activate modal", () => { @@ -292,6 +307,19 @@ describe("DiversionPage activate workflow", () => { expect(step2Heading.query()).not.toBeInTheDocument() expect(step3Heading.get()).toBeVisible() }) + + test("returning to this screen after hitting the 'Back' button leaves the option selected", async () => { + await diversionPageOnSelectReasonModalScreen() + + await userEvent.click(paradeRadio.get()) + await userEvent.click(backButton.get()) + await userEvent.click(nextButton.get()) + + expect(step2Heading.get()).toBeVisible() + + expect(paradeRadio.get()).toBeChecked() + expect(nextButton.get()).toBeEnabled() + }) }) describe("from the confirmation screen on the activate modal", () => {