Show the right fallback labels in device switcher menus

This commit is contained in:
Robin
2026-06-02 10:15:40 +02:00
parent 79298a6620
commit 164765cd27
2 changed files with 38 additions and 2 deletions

View File

@@ -76,6 +76,42 @@ describe("MediaMuteAndSwitchButton", () => {
expect(onMute).toHaveBeenCalled();
});
test("shows numbered devices correctly", async () => {
const user = userEvent.setup();
render(
<TooltipProvider>
<MediaMuteAndSwitchButton
title="Switcher"
iconsAndLabels="audio"
enabled
options={[
{ label: { type: "number", number: 1 }, id: "mic1" },
{ label: { type: "number", number: 2 }, id: "mic2" },
]}
selectedOption="mic1"
/>
<MediaMuteAndSwitchButton
title="Switcher"
iconsAndLabels="video"
enabled
options={[
{ label: { type: "number", number: 1 }, id: "cam1" },
{ label: { type: "number", number: 2 }, id: "cam2" },
]}
selectedOption="cam1"
/>
</TooltipProvider>,
);
await user.click(screen.getByRole("button", { name: "Microphone" }));
screen.getByRole("menuitem", { name: "Microphone 1" });
screen.getByRole("menuitem", { name: "Microphone 2" });
await user.keyboard("[Escape]");
await user.click(screen.getByRole("button", { name: "Camera" }));
screen.getByRole("menuitem", { name: "Camera 1" });
screen.getByRole("menuitem", { name: "Camera 2" });
});
test("calls select callback on menu click", async () => {
const user = userEvent.setup();
const onSelect = vi.fn();

View File

@@ -119,13 +119,13 @@ export const MediaMuteAndSwitchButton: FC<MediaMuteAndSwitchButtonProps> = ({
IconOptions = VideoCallIcon;
optionsButtonLabel = t("settings.devices.camera");
numberedLabel = (n): string =>
t("settings.devices.microphone_numbered", { n });
t("settings.devices.camera_numbered", { n });
break;
case "audio":
IconOptions = MicOnIcon;
optionsButtonLabel = t("settings.devices.microphone");
numberedLabel = (n): string =>
t("settings.devices.camera_numbered", { n });
t("settings.devices.microphone_numbered", { n });
break;
}
return (