diff --git a/src/components/MediaMuteAndSwitchButton.stories.tsx b/src/components/MediaMuteAndSwitchButton.stories.tsx
index 6b66f6b4..a109dd4c 100644
--- a/src/components/MediaMuteAndSwitchButton.stories.tsx
+++ b/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();
},
diff --git a/src/components/MediaMuteAndSwitchButton.test.tsx b/src/components/MediaMuteAndSwitchButton.test.tsx
index d86a612d..44bc29a3 100644
--- a/src/components/MediaMuteAndSwitchButton.test.tsx
+++ b/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(
- ,
+
+
+ ,
);
expect(container).toMatchSnapshot();
});
@@ -26,11 +29,13 @@ describe("MediaMuteAndSwitchButton", () => {
enabled: boolean,
): RenderResult => {
return render(
- ,
+
+
+ ,
);
};
const renderAudioEndabled = renderLabels("audio", true);
@@ -56,12 +61,14 @@ describe("MediaMuteAndSwitchButton", () => {
const user = userEvent.setup();
const onMute = vi.fn();
const { getByRole } = render(
- ,
+
+
+ ,
);
await user.click(getByRole("switch", { name: "Mute microphone" }));
@@ -73,17 +80,19 @@ describe("MediaMuteAndSwitchButton", () => {
const user = userEvent.setup();
const onSelect = vi.fn();
const { getByRole } = render(
- ,
+
+
+ ,
);
await user.click(getByRole("button", { name: "Microphone" }));
@@ -95,17 +104,19 @@ describe("MediaMuteAndSwitchButton", () => {
const user = userEvent.setup();
const onSelect = vi.fn();
const { getByRole } = render(
- ,
+
+
+ ,
);
await user.click(getByRole("button", { name: "Microphone" }));
@@ -122,23 +133,25 @@ describe("MediaMuteAndSwitchButton", () => {
function Wrapper(): JSX.Element {
const [selectedOption, setSelectedOption] = useState("mic1");
return (
- {
- onSelectPressed();
- void promise.then(() => {
- setSelectedOption(id);
- onOptionUpdated();
- });
- }}
- />
+
+ {
+ onSelectPressed();
+ void promise.then(() => {
+ setSelectedOption(id);
+ onOptionUpdated();
+ });
+ }}
+ />
+
);
}
@@ -175,13 +188,17 @@ describe("MediaMuteAndSwitchButton", () => {
const user = userEvent.setup();
const onSelect = vi.fn();
const { getByRole } = render(
- ,
+
+
+ ,
);
await user.click(getByRole("button", { name: "Microphone" }));
@@ -200,16 +217,18 @@ describe("MediaMuteAndSwitchButton", () => {
test("renders check icon to mark the selected menu item", async () => {
const user = userEvent.setup();
const { getByRole } = render(
- ,
+
+
+ ,
);
// open menu
diff --git a/src/components/__snapshots__/MediaMuteAndSwitchButton.test.tsx.snap b/src/components/__snapshots__/MediaMuteAndSwitchButton.test.tsx.snap
index 86dcd2a2..d17d01be 100644
--- a/src/components/__snapshots__/MediaMuteAndSwitchButton.test.tsx.snap
+++ b/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"