fix unit tests

src/components/MediaMuteAndSwitchButton.stories.tsx

@@ -62,7 +62,7 @@ export const AudioMute: Story = {
     const canvas = within(canvasElement);
     // Both the mute button and the chevron trigger currently share the aria-label "Edit"
     // (both are TODO placeholders in the component). The mute button is first in the DOM.
-    const muteButton = canvas.getByLabelText("Unmute microphone");
+    const muteButton = canvas.getByTestId("incall_mute");
     await userEvent.click(muteButton);
     await expect(args.onMuteClick).toHaveBeenCalled();
   },

src/components/MediaMuteAndSwitchButton.test.tsx

@@ -9,13 +9,16 @@ import { describe, expect, test, vi } from "vitest";
 import { act, render, screen, type RenderResult } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { type JSX, useState } from "react";
+import { TooltipProvider } from "@vector-im/compound-web";
 
 import { MediaMuteAndSwitchButton } from "./MediaMuteAndSwitchButton";
 
 describe("MediaMuteAndSwitchButton", () => {
   test("renders", () => {
     const { container } = render(
-      <MediaMuteAndSwitchButton title={"Switcher"} />,
+      <TooltipProvider>
+        <MediaMuteAndSwitchButton title={"Switcher"} />
+      </TooltipProvider>,
     );
     expect(container).toMatchSnapshot();
   });
@@ -26,11 +29,13 @@ describe("MediaMuteAndSwitchButton", () => {
       enabled: boolean,
     ): RenderResult => {
       return render(
+        <TooltipProvider>
           <MediaMuteAndSwitchButton
             title={"Switcher"}
             iconsAndLabels={type}
             enabled={enabled}
-        />,
+          />
+        </TooltipProvider>,
       );
     };
     const renderAudioEndabled = renderLabels("audio", true);
@@ -56,12 +61,14 @@ describe("MediaMuteAndSwitchButton", () => {
     const user = userEvent.setup();
     const onMute = vi.fn();
     const { getByRole } = render(
+      <TooltipProvider>
         <MediaMuteAndSwitchButton
           title={"Switcher"}
           onMuteClick={onMute}
           iconsAndLabels="audio"
           enabled={true}
-      />,
+        />
+      </TooltipProvider>,
     );
 
     await user.click(getByRole("switch", { name: "Mute microphone" }));
@@ -73,6 +80,7 @@ describe("MediaMuteAndSwitchButton", () => {
     const user = userEvent.setup();
     const onSelect = vi.fn();
     const { getByRole } = render(
+      <TooltipProvider>
         <MediaMuteAndSwitchButton
           title="Switcher"
           iconsAndLabels="audio"
@@ -83,7 +91,8 @@ describe("MediaMuteAndSwitchButton", () => {
           ]}
           selectedOption="mic1"
           onSelect={onSelect}
-      />,
+        />
+      </TooltipProvider>,
     );
 
     await user.click(getByRole("button", { name: "Microphone" }));
@@ -95,6 +104,7 @@ describe("MediaMuteAndSwitchButton", () => {
     const user = userEvent.setup();
     const onSelect = vi.fn();
     const { getByRole } = render(
+      <TooltipProvider>
         <MediaMuteAndSwitchButton
           title="Switcher"
           iconsAndLabels="audio"
@@ -105,7 +115,8 @@ describe("MediaMuteAndSwitchButton", () => {
           ]}
           selectedOption="mic1"
           onSelect={onSelect}
-      />,
+        />
+      </TooltipProvider>,
     );
 
     await user.click(getByRole("button", { name: "Microphone" }));
@@ -122,6 +133,7 @@ describe("MediaMuteAndSwitchButton", () => {
     function Wrapper(): JSX.Element {
       const [selectedOption, setSelectedOption] = useState("mic1");
       return (
+        <TooltipProvider>
           <MediaMuteAndSwitchButton
             title="Switcher"
             iconsAndLabels="audio"
@@ -139,6 +151,7 @@ describe("MediaMuteAndSwitchButton", () => {
               });
             }}
           />
+        </TooltipProvider>
       );
     }
 
@@ -175,13 +188,17 @@ describe("MediaMuteAndSwitchButton", () => {
     const user = userEvent.setup();
     const onSelect = vi.fn();
     const { getByRole } = render(
+      <TooltipProvider>
         <MediaMuteAndSwitchButton
           title="Switcher"
           iconsAndLabels="audio"
           enabled={true}
-        toggles={[{ label: "Background blur", id: "bg_blur", enabled: false }]}
+          toggles={[
+            { label: "Background blur", id: "bg_blur", enabled: false },
+          ]}
           onSelect={onSelect}
-      />,
+        />
+      </TooltipProvider>,
     );
 
     await user.click(getByRole("button", { name: "Microphone" }));
@@ -200,6 +217,7 @@ describe("MediaMuteAndSwitchButton", () => {
   test("renders check icon to mark the selected menu item", async () => {
     const user = userEvent.setup();
     const { getByRole } = render(
+      <TooltipProvider>
         <MediaMuteAndSwitchButton
           title="Switcher"
           iconsAndLabels="audio"
@@ -209,7 +227,8 @@ describe("MediaMuteAndSwitchButton", () => {
             { label: "Microphone 2", id: "mic2" },
           ]}
           selectedOption="mic2"
-      />,
+        />
+      </TooltipProvider>,
     );
 
     // open menu

src/components/__snapshots__/MediaMuteAndSwitchButton.test.tsx.snap

@@ -16,6 +16,7 @@ exports[`MediaMuteAndSwitchButton > renders 1`] = `
       aria-disabled="false"
       aria-expanded="false"
       aria-haspopup="menu"
+      aria-label="undefined"
       class="_button_1nw83_8 menuButton _has-icon_1nw83_60 _icon-only_1nw83_53"
       data-kind="tertiary"
       data-size="lg"