-
Notifications
You must be signed in to change notification settings - Fork 8
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: Deactivate detour flow (#2805)
- Loading branch information
1 parent
1154994
commit 27de03c
Showing
9 changed files
with
224 additions
and
31 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,32 @@ | ||
| import React from "react" | ||
| import { Button, Modal } from "react-bootstrap" | ||
|
|
||
| export const DeactivateDetourModal = ({ | ||
| onDeactivate, | ||
| onCancel, | ||
| }: { | ||
| onDeactivate: () => void | ||
| onCancel: () => void | ||
| }) => { | ||
| return ( | ||
| <Modal show animation={false}> | ||
| <Modal.Header role="heading">Return to regular route?</Modal.Header> | ||
| <Modal.Body> | ||
| Are you sure that you want to stop this detour and return to the regular | ||
| route? | ||
| </Modal.Body> | ||
| <Modal.Footer> | ||
| <Button variant="outline-primary" onClick={onCancel}> | ||
| Cancel | ||
| </Button> | ||
| <Button | ||
| variant="ui-alert" | ||
| onClick={onDeactivate} | ||
| className="text-white" | ||
| > | ||
| Confirm | ||
| </Button> | ||
| </Modal.Footer> | ||
| </Modal> | ||
| ) | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
133 changes: 133 additions & 0 deletions
133
assets/tests/components/detours/diversionPage.deactivate.test.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,133 @@ | ||
| import React from "react" | ||
| import { | ||
| DiversionPage as DiversionPageDefault, | ||
| DiversionPageProps, | ||
| } from "../../../src/components/detours/diversionPage" | ||
| import { originalRouteFactory } from "../../factories/originalRouteFactory" | ||
| import { beforeEach, describe, expect, jest, test } from "@jest/globals" | ||
| import "@testing-library/jest-dom/jest-globals" | ||
| import getTestGroups from "../../../src/userTestGroups" | ||
| import { TestGroups } from "../../../src/userInTestGroup" | ||
| import { act, fireEvent, render } from "@testing-library/react" | ||
| import userEvent from "@testing-library/user-event" | ||
| import { | ||
| activateDetourButton, | ||
| originalRouteShape, | ||
| reviewDetourButton, | ||
| } from "../../testHelpers/selectors/components/detours/diversionPage" | ||
| import { | ||
| fetchDetourDirections, | ||
| fetchFinishedDetour, | ||
| fetchNearestIntersection, | ||
| fetchRoutePatterns, | ||
| fetchUnfinishedDetour, | ||
| putDetourUpdate, | ||
| } from "../../../src/api" | ||
| import { neverPromise } from "../../testHelpers/mockHelpers" | ||
| import { byRole } from "testing-library-selector" | ||
|
|
||
| beforeEach(() => { | ||
| jest.spyOn(global, "scrollTo").mockImplementationOnce(jest.fn()) | ||
| }) | ||
|
|
||
| const DiversionPage = (props: Partial<DiversionPageProps>) => ( | ||
| <DiversionPageDefault | ||
| originalRoute={originalRouteFactory.build()} | ||
| showConfirmCloseModal={false} | ||
| onConfirmClose={() => null} | ||
| {...props} | ||
| /> | ||
| ) | ||
|
|
||
| jest.mock("../../../src/api") | ||
| jest.mock("../../../src/userTestGroups") | ||
|
|
||
| beforeEach(() => { | ||
| jest.mocked(fetchDetourDirections).mockReturnValue(neverPromise()) | ||
| jest.mocked(fetchUnfinishedDetour).mockReturnValue(neverPromise()) | ||
| jest.mocked(fetchFinishedDetour).mockReturnValue(neverPromise()) | ||
| jest.mocked(fetchNearestIntersection).mockReturnValue(neverPromise()) | ||
| jest.mocked(fetchRoutePatterns).mockReturnValue(neverPromise()) | ||
| jest.mocked(putDetourUpdate).mockReturnValue(neverPromise()) | ||
|
|
||
| jest | ||
| .mocked(getTestGroups) | ||
| .mockReturnValue([TestGroups.DetoursPilot, TestGroups.DetoursList]) | ||
| }) | ||
|
|
||
| const diversionPageOnActiveDetourScreen = async ( | ||
| props?: Partial<DiversionPageProps> | ||
| ) => { | ||
| const { container } = render(<DiversionPage {...props} />) | ||
|
|
||
| act(() => { | ||
| fireEvent.click(originalRouteShape.get(container)) | ||
| }) | ||
| act(() => { | ||
| fireEvent.click(originalRouteShape.get(container)) | ||
| }) | ||
| await userEvent.click(reviewDetourButton.get()) | ||
| await userEvent.click(activateDetourButton.get()) | ||
| await userEvent.click(threeHoursRadio.get()) | ||
| await userEvent.click(nextButton.get()) | ||
| await userEvent.click(constructionRadio.get()) | ||
| await userEvent.click(nextButton.get()) | ||
| await userEvent.click(activateButton.get()) | ||
|
|
||
| return { container } | ||
| } | ||
|
|
||
| const nextButton = byRole("button", { name: "Next" }) | ||
| const activateButton = byRole("button", { name: "Activate detour" }) | ||
| const threeHoursRadio = byRole("radio", { name: "3 hours" }) | ||
| const constructionRadio = byRole("radio", { name: "Construction" }) | ||
|
|
||
| const activeDetourHeading = byRole("heading", { name: "Active Detour" }) | ||
| const pastDetourHeading = byRole("heading", { name: "Past Detour" }) | ||
| const returnModalHeading = byRole("heading", { | ||
| name: "Return to regular route?", | ||
| }) | ||
|
|
||
| const regularRouteButton = byRole("button", { name: "Return to regular route" }) | ||
| const confirmButton = byRole("button", { name: "Confirm" }) | ||
| const cancelButton = byRole("button", { name: "Cancel" }) | ||
|
|
||
| describe("DiversionPage deactivate workflow", () => { | ||
| test("clicking the 'Return to regular route' button keeps existing headers on the screen", async () => { | ||
| await diversionPageOnActiveDetourScreen() | ||
|
|
||
| await userEvent.click(regularRouteButton.get()) | ||
| expect(activeDetourHeading.get()).toBeVisible() | ||
|
|
||
| expect(pastDetourHeading.query()).not.toBeInTheDocument() | ||
| }) | ||
|
|
||
| test("clicking the 'Return to regular route' button opens the deactivate modal", async () => { | ||
| await diversionPageOnActiveDetourScreen() | ||
|
|
||
| await userEvent.click(regularRouteButton.get()) | ||
| expect(returnModalHeading.get()).toBeVisible() | ||
| }) | ||
|
|
||
| test("clicking the 'Return to regular route' button from the the deactivate modal deactivates the detour", async () => { | ||
| await diversionPageOnActiveDetourScreen() | ||
|
|
||
| await userEvent.click(regularRouteButton.get()) | ||
| await userEvent.click(confirmButton.get()) | ||
|
|
||
| expect(activeDetourHeading.query()).not.toBeInTheDocument() | ||
| expect(pastDetourHeading.get()).toBeVisible() | ||
| }) | ||
|
|
||
| test("clicking the 'Cancel' button from the the deactivate modal closes the modal", async () => { | ||
| await diversionPageOnActiveDetourScreen() | ||
|
|
||
| await userEvent.click(regularRouteButton.get()) | ||
| await userEvent.click(cancelButton.get()) | ||
|
|
||
| expect(activeDetourHeading.get()).toBeVisible() | ||
| expect(pastDetourHeading.query()).not.toBeInTheDocument() | ||
|
|
||
| expect(returnModalHeading.query()).not.toBeInTheDocument() | ||
| }) | ||
| }) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters