TimoandGitHub
f4ff790d2c
* add MeidaMuteAndSwitchButton * User button in footer * Add tests * update styling (dark bg on menu open + chevron white + chevron up) * fix tests * add storybook to CI only add storybook with storybook label test names another env name test TestName new default name remove label condition Update pr-deploy.yaml * Update pr-deploy.yaml * add toggle example to default component * hook up footer select actions * fix video audio button (swapped) and lable in story
118 lines
2.8 KiB
TypeScript
118 lines
2.8 KiB
TypeScript
/*
|
|
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 { AdvancedSettingsIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
|
|
import { fn, userEvent, within, expect } from "storybook/test";
|
|
|
|
import type { Meta, StoryObj } from "@storybook/react-vite";
|
|
import { MediaMuteAndSwitchButton } from "./MediaMuteAndSwitchButton";
|
|
|
|
const meta = {
|
|
component: MediaMuteAndSwitchButton,
|
|
} satisfies Meta<typeof MediaMuteAndSwitchButton>;
|
|
|
|
export default meta;
|
|
type Story = StoryObj<typeof meta>;
|
|
|
|
export const Default: Story = {
|
|
args: {
|
|
title: "SomeMenu",
|
|
iconsAndLabels: {
|
|
IconEnabled: AdvancedSettingsIcon,
|
|
IconDisabled: AdvancedSettingsIcon,
|
|
enabledLabel: "Enabled",
|
|
disabledLabel: "Disabled",
|
|
optionsButtonLabel: "Options",
|
|
},
|
|
enabled: true,
|
|
options: [
|
|
{ label: "option 1", id: "1" },
|
|
{ label: "option 2", id: "2" },
|
|
],
|
|
selectedOption: "1",
|
|
onMuteClick: fn(),
|
|
onSelect: fn(),
|
|
},
|
|
};
|
|
|
|
export const AudioMute: Story = {
|
|
args: {
|
|
...Default.args,
|
|
title: "Microphone",
|
|
iconsAndLabels: "audio",
|
|
enabled: false,
|
|
options: [
|
|
{ label: "Microphone 1", id: "1" },
|
|
{ label: "Microphone 2", id: "2" },
|
|
],
|
|
toggles: [
|
|
{
|
|
label: "example toggle",
|
|
id: "t0",
|
|
enabled: true,
|
|
},
|
|
],
|
|
selectedOption: "2",
|
|
},
|
|
play: async ({ args, canvasElement }) => {
|
|
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");
|
|
await userEvent.click(muteButton);
|
|
await expect(args.onMuteClick).toHaveBeenCalled();
|
|
},
|
|
};
|
|
|
|
export const AudioUnmute: Story = {
|
|
args: {
|
|
title: "Microphone",
|
|
iconsAndLabels: "audio",
|
|
enabled: true,
|
|
options: [
|
|
{ label: "Microphone 1", id: "1" },
|
|
{ label: "Microphone 2", id: "2" },
|
|
],
|
|
toggles: [],
|
|
selectedOption: "2",
|
|
},
|
|
};
|
|
|
|
export const VideoMute: Story = {
|
|
args: {
|
|
title: "Camera",
|
|
iconsAndLabels: "video",
|
|
enabled: false,
|
|
options: [
|
|
{ label: "Camera 1", id: "1" },
|
|
{ label: "Camera 2", id: "2" },
|
|
],
|
|
toggles: [],
|
|
selectedOption: "1",
|
|
},
|
|
};
|
|
|
|
export const VideoUnmute: Story = {
|
|
args: {
|
|
title: "Camera",
|
|
iconsAndLabels: "video",
|
|
enabled: true,
|
|
options: [
|
|
{ label: "Camera 1", id: "1" },
|
|
{ label: "Camera 2", id: "2" },
|
|
],
|
|
toggles: [
|
|
{
|
|
label: "Blur Background",
|
|
id: "background_blurring",
|
|
enabled: false,
|
|
},
|
|
],
|
|
selectedOption: "2",
|
|
},
|
|
};
|