From b88daf0198619256b4bea54ab640a7cddd26a53e Mon Sep 17 00:00:00 2001
From: Jake Janicke <jaketripplj@gmail.com>
Date: Wed, 4 Mar 2026 05:07:41 -0600
Subject: [PATCH] Add tests for screen share volume UI presence logic

Signed-off-by: Jake Janicke <jaketripplj@gmail.com>
---
 src/tile/SpotlightTile.test.tsx | 93 +++++++++++++++++++++++++++++++++
 1 file changed, 93 insertions(+)

diff --git a/src/tile/SpotlightTile.test.tsx b/src/tile/SpotlightTile.test.tsx
index a5332194..8b0b29a7 100644
--- a/src/tile/SpotlightTile.test.tsx
+++ b/src/tile/SpotlightTile.test.tsx
@@ -9,6 +9,7 @@ import { test, expect, vi } from "vitest";
 import { isInaccessible, render, screen } from "@testing-library/react";
 import { axe } from "vitest-axe";
 import userEvent from "@testing-library/user-event";
+import { TooltipProvider } from "@vector-im/compound-web";
 
 import { SpotlightTile } from "./SpotlightTile";
 import {
@@ -18,6 +19,7 @@ import {
   mockLocalMedia,
   mockRemoteMedia,
   mockRemoteParticipant,
+  mockRemoteScreenShare,
 } from "../utils/test";
 import { SpotlightTileViewModel } from "../state/TileViewModel";
 import { constant } from "../state/Behavior";
@@ -78,3 +80,94 @@ test("SpotlightTile is accessible", async () => {
   await user.click(screen.getByRole("button", { name: "Expand" }));
   expect(toggleExpanded).toHaveBeenCalled();
 });
+
+test("Screen share volume UI is shown when screen share has audio", async () => {
+  const vm = mockRemoteScreenShare(
+    mockRtcMembership("@alice:example.org", "AAAA"),
+    {},
+    mockRemoteParticipant({}),
+  );
+
+  vi.spyOn(vm, "audioEnabled$", "get").mockReturnValue(constant(true));
+
+  const toggleExpanded = vi.fn();
+  const { container } = render(
+    <TooltipProvider>
+      <SpotlightTile
+        vm={new SpotlightTileViewModel(constant([vm]), constant(false))}
+        targetWidth={300}
+        targetHeight={200}
+        expanded={false}
+        onToggleExpanded={toggleExpanded}
+        showIndicators
+        focusable
+      />
+    </TooltipProvider>,
+  );
+
+  expect(await axe(container)).toHaveNoViolations();
+
+  // Volume menu button should exist
+  expect(screen.queryByRole("button", { name: /volume/i })).toBeInTheDocument();
+});
+
+test("Screen share volume UI is hidden when screen share has no audio", async () => {
+  const vm = mockRemoteScreenShare(
+    mockRtcMembership("@alice:example.org", "AAAA"),
+    {},
+    mockRemoteParticipant({}),
+  );
+
+  vi.spyOn(vm, "audioEnabled$", "get").mockReturnValue(constant(false));
+
+  const toggleExpanded = vi.fn();
+  const { container } = render(
+    <SpotlightTile
+      vm={new SpotlightTileViewModel(constant([vm]), constant(false))}
+      targetWidth={300}
+      targetHeight={200}
+      expanded={false}
+      onToggleExpanded={toggleExpanded}
+      showIndicators
+      focusable
+    />,
+  );
+
+  expect(await axe(container)).toHaveNoViolations();
+
+  // Volume menu button should not exist
+  expect(
+    screen.queryByRole("button", { name: /volume/i }),
+  ).not.toBeInTheDocument();
+});
+
+test("Screen share volume UI is hidden in grid mode", async () => {
+  const vm = mockRemoteScreenShare(
+    mockRtcMembership("@alice:example.org", "AAAA"),
+    {},
+    mockRemoteParticipant({}),
+  );
+
+  vi.spyOn(vm, "audioEnabled$", "get").mockReturnValue(constant(true));
+
+  const { container } = render(
+    <TooltipProvider>
+      <SpotlightTile
+        vm={new SpotlightTileViewModel(constant([vm]), constant(false))}
+        targetWidth={300}
+        targetHeight={200}
+        expanded={false}
+        onToggleExpanded={null} // Grid mode
+        showIndicators
+        focusable
+      />
+    </TooltipProvider>,
+  );
+
+  expect(await axe(container)).toHaveNoViolations();
+
+  // Volume menu button should not exist in grid mode
+  expect(
+    screen.queryByRole("button", { name: /volume/i }),
+  ).not.toBeInTheDocument();
+});