Improve test coverage

src/AppBar.test.tsx

@@ -5,21 +5,33 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE in the repository root for full details.
 */
 
+import { type FC, type ReactNode } from "react";
 import { render } from "@testing-library/react";
 import { describe, expect, it } from "vitest";
 import { TooltipProvider } from "@vector-im/compound-web";
 
-import { AppBar } from "./AppBar";
+import { AppBar, useAppBarSubtitle, useAppBarTitle } from "./AppBar";
+
+const content = <p>This is the content.</p>;
+
+function snapshotAppBar(content: ReactNode): void {
+  const { container } = render(
+    <TooltipProvider>
+      <AppBar>{content}</AppBar>
+    </TooltipProvider>,
+  );
+  expect(container).toMatchSnapshot();
+}
 
 describe("AppBar", () => {
-  it("renders", () => {
-    const { container } = render(
-      <TooltipProvider>
-        <AppBar>
-          <p>This is the content.</p>
-        </AppBar>
-      </TooltipProvider>,
-    );
-    expect(container).toMatchSnapshot();
+  it("renders", () => snapshotAppBar(content));
+
+  it("renders with title and subtitle", () => {
+    const TestComponent: FC = () => {
+      useAppBarTitle("Title");
+      useAppBarSubtitle("Subtitle");
+      return content;
+    };
+    snapshotAppBar(<TestComponent />);
   });
 });

src/__snapshots__/AppBar.test.tsx.snap

@@ -42,3 +42,56 @@ exports[`AppBar > renders 1`] = `
   </p>
 </div>
 `;
+
+exports[`AppBar > renders with title and subtitle 1`] = `
+<div>
+  <div
+    class="bar"
+  >
+    <header>
+      <button
+        aria-labelledby="_r_6_"
+        class="_icon-button_1215g_8 primaryButton"
+        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 11.034a1 1 0 0 0 .29.702l.005.005c.18.18.43.29.705.29h8a1 1 0 0 0 0-2h-5.586L22 3.445a1 1 0 0 0-1.414-1.414L14 8.617V3.031a1 1 0 1 0-2 0zm0 1.963a1 1 0 0 0-.29-.702l-.005-.004A1 1 0 0 0 11 12H3a1 1 0 1 0 0 2h5.586L2 20.586A1 1 0 1 0 3.414 22L10 15.414V21a1 1 0 0 0 2 0z"
+            />
+          </svg>
+        </div>
+      </button>
+      <h1
+        class="_typography_6v6n8_153 _font-body-lg-medium_6v6n8_79 title"
+      >
+        Title
+      </h1>
+      <span
+        class="_typography_6v6n8_153 _font-body-lg-regular_6v6n8_69 subtitle"
+      >
+        Subtitle
+      </span>
+      <div
+        class="secondaryButton"
+      />
+    </header>
+  </div>
+  <p>
+    This is the content.
+  </p>
+</div>
+`;

src/room/RingingAudioRenderer.test.tsx

@@ -0,0 +1,59 @@
+/*
+Copyright 2026 Element Creations Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE in the repository root for full details.
+*/
+
+import { expect, type MockedFunction, test, vi } from "vitest";
+import { act, render } from "@testing-library/react";
+import { BehaviorSubject } from "rxjs";
+
+import { useAudioContext } from "../useAudioContext";
+import { createRingingMedia } from "../state/media/RingingMediaViewModel";
+import { alice, aliceId } from "../utils/test-fixtures";
+import { constant } from "../state/Behavior";
+import { RingingAudioRenderer } from "./RingingAudioRenderer";
+import { prefetchSounds } from "../soundUtils";
+
+vi.mock("../useAudioContext");
+vi.mock("../soundUtils");
+
+test("ringtone plays on loop while ringing", () => {
+  (prefetchSounds as MockedFunction<typeof prefetchSounds>).mockResolvedValue({
+    sound: new ArrayBuffer(0),
+  });
+  const endSoundLooping = vi.fn().mockReturnValue(Promise.resolve());
+  const playSoundLooping = vi.fn().mockReturnValue(endSoundLooping);
+  (useAudioContext as MockedFunction<typeof useAudioContext>).mockReturnValue({
+    playSound: vi.fn(),
+    playSoundLooping,
+    soundDuration: {},
+  });
+
+  const pickupState$ = new BehaviorSubject<"ringing" | "timeout" | "decline">(
+    "ringing",
+  );
+  const vm = createRingingMedia({
+    id: aliceId,
+    userId: alice.userId,
+    displayName$: constant("Alice"),
+    mxcAvatarUrl$: constant(undefined),
+    intent: "audio",
+    pickupState$,
+  });
+
+  // Begin ringing
+  render(<RingingAudioRenderer vm={vm} muted={false} />);
+  expect(playSoundLooping).toHaveBeenCalledExactlyOnceWith(
+    "ringtone",
+    expect.any(Number),
+  );
+  expect(endSoundLooping).not.toHaveBeenCalled();
+  vi.clearAllMocks();
+
+  // End ringing
+  act(() => pickupState$.next("decline"));
+  expect(playSoundLooping).not.toHaveBeenCalled();
+  expect(endSoundLooping).toHaveBeenCalledExactlyOnceWith();
+});