Matrix/element-call-Github
1
0
Fork 0
mirror of https://github.com/vector-im/element-call.git synced 2026-07-18 18:59:23 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix unit tests

Browse Source
This commit is contained in:
Timo K
2026-05-13 13:35:12 +02:00
parent 0082ade234
commit e10bc6c7cf
3 changed files with 89 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/MediaMuteAndSwitchButton.stories.tsx
View File

@@ -62,7 +62,7 @@ export const AudioMute: Story = {
const canvas = within(canvasElement); const canvas = within(canvasElement);
// Both the mute button and the chevron trigger currently share the aria-label "Edit" // 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. // (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 userEvent.click(muteButton);
await expect(args.onMuteClick).toHaveBeenCalled(); await expect(args.onMuteClick).toHaveBeenCalled();
}, },

155
src/components/MediaMuteAndSwitchButton.test.tsx
View File

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

1
src/components/__snapshots__/MediaMuteAndSwitchButton.test.tsx.snap
View File

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