feat: Expose Change route or direction button behind a test group

assets/src/components/detours/diversionPage.tsx

@@ -14,6 +14,7 @@ import { OriginalRoute } from "../../models/detour"
 import { joinClasses } from "../../helpers/dom"
 import { AsProp } from "react-bootstrap/esm/helpers"
 import { DetourFinishedPanel } from "./detourFinishedPanel"
+import inTestGroup, { TestGroups } from "../../userInTestGroup"
 
 interface DiversionPageProps {
   originalRoute: OriginalRoute
@@ -91,6 +92,10 @@ export const DiversionPage = ({
     connectionPoints?.end?.name,
   ])
 
+  const changeRoute = inTestGroup(TestGroups.RouteLadderHeaderUpdate)
+    ? () => {}
+    : undefined
+
   return (
     <>
       <article className="l-diversion-page h-100 border-box inherit-box">
@@ -109,6 +114,7 @@ export const DiversionPage = ({
               routeDirection={originalRoute.routeDirection}
               detourFinished={finishDetour !== undefined}
               onFinishDetour={finishDetour}
+              onChangeRoute={changeRoute}
             />
           )}
           {state === DetourState.Finished && editDetour && (

assets/src/userInTestGroup.ts

@@ -7,6 +7,7 @@ export enum TestGroups {
   KeycloakSso = "keycloak-sso",
   MinimalLadderPage = "minimal-ladder-page",
   LateView = "late-view",
+  RouteLadderHeaderUpdate = "route-ladder-header-update",
 }
 
 const inTestGroup = (key: TestGroups): boolean => {

assets/tests/components/detours/diversionPage.test.tsx

@@ -35,6 +35,8 @@ import {
 } from "../../testHelpers/selectors/components/map/markers/stopIcon"
 import { Err, Ok } from "../../../src/util/result"
 import { neverPromise } from "../../testHelpers/mockHelpers"
+import getTestGroups from "../../../src/userTestGroups"
+import { TestGroups } from "../../../src/userInTestGroup"
 
 const DiversionPage = (
   props: Omit<
@@ -71,11 +73,15 @@ beforeEach(() => {
 })
 
 jest.mock("../../../src/api")
+jest.mock("../../../src/userTestGroups")
 
 beforeEach(() => {
   jest.mocked(fetchDetourDirections).mockReturnValue(neverPromise())
   jest.mocked(fetchFinishedDetour).mockReturnValue(neverPromise())
   jest.mocked(fetchNearestIntersection).mockReturnValue(neverPromise())
+  jest
+    .mocked(getTestGroups)
+    .mockReturnValue([TestGroups.RouteLadderHeaderUpdate])
 })
 
 describe("DiversionPage", () => {
@@ -1216,12 +1222,19 @@ describe("DiversionPage", () => {
   })
 
   describe("'Change route or direction' button", () => {
-    /*
-     * This test is here because this button is now part of one of the
-     * components, and we want to make sure that we don't accidentally
-     * render it when we didn't intend to.
-     */
-    test("the button doesn't render yet in context", async () => {
+    test("there is a button saying 'Change route or direction'", async () => {
+      render(<DiversionPage />)
+
+      await waitFor(() => {
+        expect(
+          screen.getByRole("button", { name: "Change route or direction" })
+        ).toBeVisible()
+      })
+    })
+
+    test("the button is not there if the user isn't in the right test group", async () => {
+      jest.mocked(getTestGroups).mockReturnValue([])
+
       render(<DiversionPage />)
 
       expect(