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
+          {withAppBar && <AppBar>{lobbyView}</AppBar>}
-            client={mockClient}
+          {!withAppBar && lobbyView}
-            matrixInfo={matrixInfo}
-            muteStates={muteStates}
-            onEnter={() => {}}
-            confineToRoom={false}
-            hideHeader={false}
-            participantCount={3}
-            onShareClick={null}
-            {...props}
-          />
         </TooltipProvider>
       </MediaDevicesContext>
     </BrowserRouter>,
@@ -97,9 +104,10 @@ describe("LobbyView", () => {
 
   it("renders without header", () => {
     const { container } = renderLobbyView({ hideHeader: true });
-    expect(
+    const els = container.getElementsByClassName(headerStyles.header);
-      container.getElementsByClassName(headerStyles.header).length,
+    for (const el of els) {
-    ).toBeFalsy();
+      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();
+  });
 });

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<Props> = ({
   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$);

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`] = `
+<div>
+  <div
+    class="bar"
+    style="display: none;"
+  >
+    <header
+      class="header"
+    >
+      <div
+        class="nav leftNav"
+      >
+        <button
+          aria-labelledby="_r_36_"
+          class="_icon-button_1215g_8"
+          data-kind="primary"
+          role="button"
+          style="--cpd-icon-button-size: 24px;"
+          tabindex="0"
+        >
+          <div
+            class="_indicator-icon_147l5_17"
+            style="--cpd-icon-button-size: 100%;"
+          >
+            <svg
+              aria-hidden="true"
+              fill="currentColor"
+              height="1em"
+              viewBox="0 0 24 24"
+              width="1em"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M12.207 5.293a1 1 0 0 1 0 1.414L7.914 11H18.5a1 1 0 1 1 0 2H7.914l4.293 4.293a1 1 0 0 1-1.414 1.414l-6-6a1 1 0 0 1 0-1.414l6-6a1 1 0 0 1 1.414 0"
+              />
+            </svg>
+          </div>
+        </button>
+      </div>
+      <h1
+        class="_typography_6v6n8_153 _font-body-lg-semibold_6v6n8_74"
+      >
+        Test Room
+      </h1>
+      <div
+        class="nav rightNav"
+      />
+    </header>
+  </div>
+  <div
+    class="inRoom"
+  >
+    <div
+      class="content"
+    >
+      <div
+        class="preview"
+      >
+        <video
+          disablepictureinpicture=""
+          playsinline=""
+          tabindex="-1"
+        />
+        <div
+          class="avatarContainer"
+        >
+          <div>
+            <span
+              aria-label="@user:example.org"
+              class="_avatar_va14e_8 _avatar-imageless_va14e_55"
+              data-color="6"
+              data-type="round"
+              role="img"
+              style="--cpd-avatar-size: NaNpx;"
+            >
+              T
+            </span>
+          </div>
+        </div>
+        <div
+          class="buttonBar"
+        >
+          <button
+            aria-disabled="true"
+            class="_button_1nw83_8 join wait"
+            data-kind="primary"
+            data-size="md"
+            data-testid="lobby_joinCall"
+            role="button"
+            tabindex="0"
+          >
+            Join call
+          </button>
+        </div>
+      </div>
+      <a
+        class="_link_k9ljz_8"
+        data-kind="primary"
+        data-size="md"
+        href="/"
+        rel="noreferrer noopener"
+      >
+        Back to recents
+      </a>
+    </div>
+    <div
+      class="footer"
+      data-testid="footer-container"
+    >
+      <div
+        class="settingsLogoContainer"
+      >
+        <button
+          aria-labelledby="_r_3c_"
+          class="_icon-button_1215g_8 settingsOnlyShowWide"
+          data-kind="secondary"
+          data-testid="settings-bottom-left"
+          role="button"
+          style="--cpd-icon-button-size: 32px;"
+          tabindex="0"
+        >
+          <div
+            class="_indicator-icon_147l5_17"
+            style="--cpd-icon-button-size: 100%;"
+          >
+            <svg
+              aria-hidden="true"
+              fill="currentColor"
+              height="1em"
+              viewBox="0 0 24 24"
+              width="1em"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+              />
+            </svg>
+          </div>
+        </button>
+      </div>
+      <div
+        class="buttons"
+      >
+        <button
+          aria-labelledby="_r_3h_"
+          class="_button_1nw83_8 settingsOnlyShowNarrow _has-icon_1nw83_60 _icon-only_1nw83_53"
+          data-kind="secondary"
+          data-size="lg"
+          data-testid="settings-bottom-center"
+          role="button"
+          tabindex="0"
+        >
+          <svg
+            aria-hidden="true"
+            fill="currentColor"
+            height="24"
+            viewBox="0 0 24 24"
+            width="24"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+            />
+          </svg>
+        </button>
+        <button
+          aria-busy="false"
+          aria-checked="false"
+          aria-disabled="true"
+          aria-labelledby="_r_3m_"
+          class="_button_1nw83_8 _has-icon_1nw83_60 _icon-only_1nw83_53"
+          data-kind="primary"
+          data-size="lg"
+          data-testid="incall_mute"
+          role="switch"
+          tabindex="0"
+        >
+          <svg
+            aria-hidden="true"
+            fill="currentColor"
+            height="24"
+            viewBox="0 0 24 24"
+            width="24"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M8 8v-.006l6.831 6.832-.002.002 1.414 1.415.003-.003 1.414 1.414-.003.003L20.5 20.5a1 1 0 0 1-1.414 1.414l-3.022-3.022A7.95 7.95 0 0 1 13 19.938V21a1 1 0 0 1-2 0v-1.062A8 8 0 0 1 4 12a1 1 0 1 1 2 0 6 6 0 0 0 8.587 5.415l-1.55-1.55A4.005 4.005 0 0 1 8 12v-1.172L2.086 4.914A1 1 0 0 1 3.5 3.5zm9.417 6.583 1.478 1.477A7.96 7.96 0 0 0 20 12a1 1 0 0 0-2 0c0 .925-.21 1.8-.583 2.583M8.073 5.238l7.793 7.793q.132-.495.134-1.031V6a4 4 0 0 0-7.927-.762"
+            />
+          </svg>
+        </button>
+        <button
+          aria-busy="false"
+          aria-checked="false"
+          aria-disabled="true"
+          aria-labelledby="_r_3r_"
+          class="_button_1nw83_8 _has-icon_1nw83_60 _icon-only_1nw83_53"
+          data-kind="primary"
+          data-size="lg"
+          data-testid="incall_videomute"
+          role="switch"
+          tabindex="0"
+        >
+          <svg
+            aria-hidden="true"
+            fill="currentColor"
+            height="24"
+            viewBox="0 0 24 24"
+            width="24"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M2.747 2.753 4.35 4.355l.007-.003L18 17.994v.012l3.247 3.247a1 1 0 0 1-1.414 1.414l-2.898-2.898A2 2 0 0 1 16 20H6a4 4 0 0 1-4-4V8c0-.892.292-1.715.785-2.38L1.333 4.166a1 1 0 0 1 1.414-1.414M18 15.166 6.834 4H16a2 2 0 0 1 2 2v4.286l3.35-2.871a1 1 0 0 1 1.65.76v7.65a1 1 0 0 1-1.65.76L18 13.715z"
+            />
+          </svg>
+        </button>
+        <button
+          aria-labelledby="_r_40_"
+          class="_button_1nw83_8 endCall _has-icon_1nw83_60 _icon-only_1nw83_53 _destructive_1nw83_110"
+          data-kind="primary"
+          data-size="lg"
+          data-testid="incall_leave"
+          role="button"
+          tabindex="0"
+        >
+          <svg
+            aria-hidden="true"
+            fill="currentColor"
+            height="24"
+            viewBox="0 0 24 24"
+            width="24"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="m2.765 16.02-2.47-2.416A1.02 1.02 0 0 1 0 12.852q0-.456.295-.751a15.6 15.6 0 0 1 5.316-3.786A15.9 15.9 0 0 1 12 7q3.355 0 6.39 1.329a16 16 0 0 1 5.315 3.772q.295.294.295.751t-.295.752l-2.47 2.416a1.047 1.047 0 0 1-1.396.108l-3.114-2.363a1.1 1.1 0 0 1-.322-.376 1.1 1.1 0 0 1-.108-.483v-2.27a13.6 13.6 0 0 0-2.12-.524C13.459 9.996 12 9.937 12 9.937s-1.459.059-2.174.175q-1.074.174-2.121.523v2.271q0 .268-.108.483a1.1 1.1 0 0 1-.322.376l-3.114 2.363a1.047 1.047 0 0 1-1.396-.107"
+            />
+          </svg>
+        </button>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
 exports[`LobbyView > renders with header and participant count 1`] = `
 <div>
   <div