more test coverage

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<Parameters<typeof LobbyView>[0]> = {},
+  withAppBar = false,
 ): ReturnType<typeof render> {
   const mediaDevices = mockMediaDevices({});
   const muteStates = mockMuteStates();
-
+  const hideHeader = withAppBar ? true : false;
+  const lobbyView = (
+    <LobbyView
+      client={mockClient}
+      matrixInfo={matrixInfo}
+      muteStates={muteStates}
+      onEnter={() => {}}
+      confineToRoom={false}
+      hideHeader={hideHeader}
+      participantCount={3}
+      onShareClick={null}
+      {...props}
+    />
+  );
   return render(
     <BrowserRouter>
       <MediaDevicesContext value={mediaDevices}>
         <TooltipProvider>
-          <LobbyView
-            client={mockClient}
-            matrixInfo={matrixInfo}
-            muteStates={muteStates}
-            onEnter={() => {}}
-            confineToRoom={false}
-            hideHeader={false}
-            participantCount={3}
-            onShareClick={null}
-            {...props}
-          />
+          {withAppBar && <AppBar>{lobbyView}</AppBar>}
+          {!withAppBar && lobbyView}
         </TooltipProvider>
       </MediaDevicesContext>
     </BrowserRouter>,
@@ -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(<ArrowLeftIcon />);
+    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();
+  });
 });