From 8ccebffda6f48361d17dc5233a99a69f88fe33ba Mon Sep 17 00:00:00 2001 From: Josh Larson Date: Wed, 31 Jul 2024 11:43:05 -0400 Subject: [PATCH 1/4] feat: Suppress "Add detour" dropdown on mobile --- assets/src/components/routeLadder.tsx | 8 +++++- assets/tests/components/ladderPage.test.tsx | 30 +++++++++++++++++++++ 2 files changed, 37 insertions(+), 1 deletion(-) diff --git a/assets/src/components/routeLadder.tsx b/assets/src/components/routeLadder.tsx index 764e909f5..4d992a499 100644 --- a/assets/src/components/routeLadder.tsx +++ b/assets/src/components/routeLadder.tsx @@ -27,6 +27,7 @@ import { ExclamationTriangleFill, PlusSquare } from "../helpers/bsIcons" import { RoutePill } from "./routePill" import { Card, CloseButton, Dropdown } from "react-bootstrap" import { joinTruthy } from "../helpers/dom" +import useScreenSize from "../hooks/useScreenSize" interface Props { route: Route @@ -213,6 +214,11 @@ const RouteLadder = ({ const displayCrowding = someVehicleHasCrowding(vehiclesAndGhosts, route.id) + const screenSize = useScreenSize() + const showDropdown = + inTestGroup(TestGroups.DetoursPilot) && + ["desktop", "tablet"].includes(screenSize) + return ( <>
{ deselectRoute(route.id) }} - showDropdown={inTestGroup(TestGroups.DetoursPilot)} + showDropdown={showDropdown} onClickAddDetour={() => { onAddDetour?.(route) }} diff --git a/assets/tests/components/ladderPage.test.tsx b/assets/tests/components/ladderPage.test.tsx index 0d2f9d850..7bc0bc828 100644 --- a/assets/tests/components/ladderPage.test.tsx +++ b/assets/tests/components/ladderPage.test.tsx @@ -33,6 +33,7 @@ import { fullStoryEvent } from "../../src/helpers/fullStory" import useAlerts from "../../src/hooks/useAlerts" import getTestGroups from "../../src/userTestGroups" import { TestGroups } from "../../src/userInTestGroup" +import { mockScreenSize } from "../testHelpers/mockHelpers" jest.mock("../../src/hooks/useTimepoints", () => ({ __esModule: true, @@ -570,6 +571,35 @@ describe("LadderPage", () => { expect(screen.getByRole("heading", { name: "Create Detour" })).toBeVisible() }) + + test("detour dropdown is not visible on mobile", async () => { + jest.mocked(getTestGroups).mockReturnValue([TestGroups.DetoursPilot]) + mockScreenSize("mobile") + + const mockState = stateFactory.build({ + routeTabs: [ + routeTabFactory.build({ + selectedRouteIds: ["1"], + isCurrentTab: true, + }), + ], + }) + const { container } = render( + + + + + + + + ) + + expect(container.querySelector(".c-route-ladder__header")).toBeVisible() + + expect( + screen.queryByRole("button", { name: "1 Route Options" }) + ).not.toBeInTheDocument() + }) }) const routes: Route[] = [ From 492242456a1fe888bb307eb319eda0ba9fa0002b Mon Sep 17 00:00:00 2001 From: Josh Larson Date: Thu, 1 Aug 2024 17:23:18 -0400 Subject: [PATCH 2/4] fixup! feat: Suppress "Add detour" dropdown on mobile --- assets/src/components/routeLadder.tsx | 10 ++----- assets/tests/components/ladderPage.test.tsx | 29 --------------------- 2 files changed, 2 insertions(+), 37 deletions(-) diff --git a/assets/src/components/routeLadder.tsx b/assets/src/components/routeLadder.tsx index 4d992a499..fd801932c 100644 --- a/assets/src/components/routeLadder.tsx +++ b/assets/src/components/routeLadder.tsx @@ -27,7 +27,6 @@ import { ExclamationTriangleFill, PlusSquare } from "../helpers/bsIcons" import { RoutePill } from "./routePill" import { Card, CloseButton, Dropdown } from "react-bootstrap" import { joinTruthy } from "../helpers/dom" -import useScreenSize from "../hooks/useScreenSize" interface Props { route: Route @@ -68,7 +67,7 @@ export const Header = ({ {showDropdown && (
{ deselectRoute(route.id) }} - showDropdown={showDropdown} + showDropdown={inTestGroup(TestGroups.DetoursPilot)} onClickAddDetour={() => { onAddDetour?.(route) }} diff --git a/assets/tests/components/ladderPage.test.tsx b/assets/tests/components/ladderPage.test.tsx index 7bc0bc828..49bac5013 100644 --- a/assets/tests/components/ladderPage.test.tsx +++ b/assets/tests/components/ladderPage.test.tsx @@ -571,35 +571,6 @@ describe("LadderPage", () => { expect(screen.getByRole("heading", { name: "Create Detour" })).toBeVisible() }) - - test("detour dropdown is not visible on mobile", async () => { - jest.mocked(getTestGroups).mockReturnValue([TestGroups.DetoursPilot]) - mockScreenSize("mobile") - - const mockState = stateFactory.build({ - routeTabs: [ - routeTabFactory.build({ - selectedRouteIds: ["1"], - isCurrentTab: true, - }), - ], - }) - const { container } = render( - - - - - - - - ) - - expect(container.querySelector(".c-route-ladder__header")).toBeVisible() - - expect( - screen.queryByRole("button", { name: "1 Route Options" }) - ).not.toBeInTheDocument() - }) }) const routes: Route[] = [ From f597636d2447afba2e47bccaf1c9b8c3f5454ad8 Mon Sep 17 00:00:00 2001 From: Josh Larson Date: Thu, 1 Aug 2024 17:26:01 -0400 Subject: [PATCH 3/4] fixup! feat: Suppress "Add detour" dropdown on mobile --- assets/tests/components/ladderPage.test.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/assets/tests/components/ladderPage.test.tsx b/assets/tests/components/ladderPage.test.tsx index 49bac5013..0d2f9d850 100644 --- a/assets/tests/components/ladderPage.test.tsx +++ b/assets/tests/components/ladderPage.test.tsx @@ -33,7 +33,6 @@ import { fullStoryEvent } from "../../src/helpers/fullStory" import useAlerts from "../../src/hooks/useAlerts" import getTestGroups from "../../src/userTestGroups" import { TestGroups } from "../../src/userInTestGroup" -import { mockScreenSize } from "../testHelpers/mockHelpers" jest.mock("../../src/hooks/useTimepoints", () => ({ __esModule: true, From 31c7a56531be654dccdd2843d2bacc6fa9ea7b53 Mon Sep 17 00:00:00 2001 From: Josh Larson Date: Thu, 1 Aug 2024 18:43:51 -0400 Subject: [PATCH 4/4] fixup! feat: Suppress "Add detour" dropdown on mobile --- assets/tests/components/__snapshots__/routeLadder.test.tsx.snap | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/assets/tests/components/__snapshots__/routeLadder.test.tsx.snap b/assets/tests/components/__snapshots__/routeLadder.test.tsx.snap index b643546e5..81db6eee7 100644 --- a/assets/tests/components/__snapshots__/routeLadder.test.tsx.snap +++ b/assets/tests/components/__snapshots__/routeLadder.test.tsx.snap @@ -1345,7 +1345,7 @@ exports[`routeLadder renders a route ladder with the new header and detour dropd