diff --git a/src/room/LobbyView.test.tsx b/src/room/LobbyView.test.tsx index 487501af7..a84626dd3 100644 --- a/src/room/LobbyView.test.tsx +++ b/src/room/LobbyView.test.tsx @@ -11,6 +11,7 @@ import { BrowserRouter } from "react-router-dom"; import { TooltipProvider } from "@vector-im/compound-web"; import { type MatrixClient } from "matrix-js-sdk"; import { axe } from "vitest-axe"; +import { ArrowLeftIcon } from "@vector-im/compound-design-tokens/assets/web/icons"; import { LobbyView } from "./LobbyView"; import { E2eeType } from "../e2ee/e2eeType"; @@ -20,6 +21,7 @@ import { type ProcessorState } from "../livekit/TrackProcessorContext"; import { type EncryptionSystem } from "../e2ee/sharedKeyManagement"; import lobbyStyles from "./LobbyView.module.css"; import headerStyles from "../Header.module.css"; +import { AppBar } from "../AppBar"; vi.mock("@livekit/components-react", () => ({ usePreviewTracks: (): unknown[] => [], @@ -60,25 +62,30 @@ const matrixInfo = { function renderLobbyView( props: Partial[0]> = {}, + withAppBar = false, ): ReturnType { const mediaDevices = mockMediaDevices({}); const muteStates = mockMuteStates(); - + const hideHeader = withAppBar ? true : false; + const lobbyView = ( + {}} + confineToRoom={false} + hideHeader={hideHeader} + participantCount={3} + onShareClick={null} + {...props} + /> + ); return render( - {}} - confineToRoom={false} - hideHeader={false} - participantCount={3} - onShareClick={null} - {...props} - /> + {withAppBar && {lobbyView}} + {!withAppBar && lobbyView} , @@ -97,9 +104,10 @@ describe("LobbyView", () => { it("renders without header", () => { const { container } = renderLobbyView({ hideHeader: true }); - expect( - container.getElementsByClassName(headerStyles.header).length, - ).toBeFalsy(); + const els = container.getElementsByClassName(headerStyles.header); + for (const el of els) { + expect(el).not.toBeVisible(); + } }); it("renders with waiting for invite state", () => { @@ -108,4 +116,27 @@ describe("LobbyView", () => { }); expect(getByTestId("lobby_joinCall")).toHaveClass(lobbyStyles.wait); }); + + it("renders with AppBar", async () => { + const { container } = renderLobbyView( + { + waitingForInvite: true, + }, + true, + ); + expect( + container.getElementsByClassName(headerStyles.header).length, + ).toBeTruthy(); + // Check that the primary button uses ArrowLeftIcon (the back/return icon), + // not the default CollapseIcon + const { container: iconContainer } = render(); + const expectedPath = iconContainer.querySelector("path")!.getAttribute("d"); + const primaryButtonPath = container + .querySelector(".leftNav button") + ?.querySelector("path") + ?.getAttribute("d"); + expect(primaryButtonPath).toBe(expectedPath); + expect(container).toMatchSnapshot(); + expect(await axe(container)).toHaveNoViolations(); + }); }); diff --git a/src/room/LobbyView.tsx b/src/room/LobbyView.tsx index d1f1a1346..6c56c983c 100644 --- a/src/room/LobbyView.tsx +++ b/src/room/LobbyView.tsx @@ -52,7 +52,11 @@ import { CallFooter, type FooterSnapshot } from "../components/CallFooter"; import { useCallViewKeyboardShortcuts } from "../useCallViewKeyboardShortcuts"; import { createLobbyFooterViewModel } from "../components/CallFooterViewModel"; import { type ViewModel } from "../state/ViewModel"; -import { useAppBarPrimaryButtonIcon } from "../AppBar"; +import { + useAppBarHidden, + useAppBarPrimaryButtonIcon, + useAppBarTitle, +} from "../AppBar"; interface Props { client: MatrixClient; @@ -89,6 +93,8 @@ export const LobbyView: FC = ({ const { t } = useTranslation(); usePageTitle(matrixInfo.roomName); + useAppBarHidden(hideHeader); + useAppBarTitle(matrixInfo.roomName); useAppBarPrimaryButtonIcon(ArrowLeftIcon); const audioEnabled = useBehavior(muteStates.audio.enabled$); const videoEnabled = useBehavior(muteStates.video.enabled$); diff --git a/src/room/__snapshots__/LobbyView.test.tsx.snap b/src/room/__snapshots__/LobbyView.test.tsx.snap index bd6d6ed16..09c86f02e 100644 --- a/src/room/__snapshots__/LobbyView.test.tsx.snap +++ b/src/room/__snapshots__/LobbyView.test.tsx.snap @@ -1,5 +1,248 @@ // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html +exports[`LobbyView > renders with AppBar 1`] = ` +
+ +
+
+
+
+ + Back to recents + +
+ +
+
+`; + exports[`LobbyView > renders with header and participant count 1`] = `