mirror of
https://github.com/element-hq/element-call.git
synced 2026-10-15 04:31:00 +00:00
fkwpandClaude Opus 5.5
6a688ab715
- A catalogue of what can be chosen: no effect, blur, and two shipped backgrounds, the app's own gradients flattened onto its canvas colour. Their ids are what a saved choice stores, so they are named for the pictures. - One setting for the choice, typed as the ids an effect can have and defaulting to blur for anyone who had it on. A stored value we no longer ship, or one that isn't even a string, reads as no effect: it comes from storage another build or a hand may have written. - The pipeline follows it, switching in place to a picture as readily as to blur, and the camera menu's blur toggle reads and writes it. - So does Settings' blur checkbox: a picture reads as blur off, and checking it replaces the picture with blur. The old on/off setting is only read, to carry blur over. First tests for the Settings modal, which fail with the checkbox on the old setting. - The transformer's own init loads a picture chosen before it was built, as the base init does and it had not: the first effect always is, and the picture was drawn black. Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
94 lines
2.8 KiB
TypeScript
94 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 { afterEach, describe, expect, it, vi } from "vitest";
|
|
import { render, screen } from "@testing-library/react";
|
|
import userEvent from "@testing-library/user-event";
|
|
import { type MatrixClient } from "matrix-js-sdk";
|
|
import { TooltipProvider } from "@vector-im/compound-web";
|
|
|
|
import { SettingsModal } from "./SettingsModal";
|
|
import { backgroundEffect } from "./settings";
|
|
import { MediaDevicesContext } from "../MediaDevicesContext";
|
|
import { type BackgroundEffectsState } from "../livekit/BackgroundEffectsContext";
|
|
import { mockMediaDevices } from "../utils/test";
|
|
import { constant } from "../state/Behavior";
|
|
import { type MediaDevices } from "../state/MediaDevices";
|
|
|
|
vi.mock("../livekit/BackgroundEffectsContext", () => ({
|
|
useBackgroundEffects: (): BackgroundEffectsState => ({
|
|
supported: true,
|
|
processor: undefined,
|
|
}),
|
|
}));
|
|
|
|
// Behaviors, as the device menus read them.
|
|
const noDevices = {
|
|
available$: constant(new Map()),
|
|
selected$: constant(undefined),
|
|
select: vi.fn(),
|
|
};
|
|
|
|
function renderVideoTab(): void {
|
|
render(
|
|
<TooltipProvider>
|
|
<MediaDevicesContext
|
|
value={mockMediaDevices({
|
|
requestDeviceNames: vi.fn(),
|
|
audioInput: noDevices,
|
|
audioOutput: noDevices,
|
|
videoInput: noDevices,
|
|
} as unknown as Partial<MediaDevices>)}
|
|
>
|
|
<SettingsModal
|
|
open
|
|
onDismiss={vi.fn()}
|
|
tab="video"
|
|
onTabChange={vi.fn()}
|
|
client={
|
|
{
|
|
getUserId: () => "@user:example.org",
|
|
getUser: () => null,
|
|
} as unknown as MatrixClient
|
|
}
|
|
/>
|
|
</MediaDevicesContext>
|
|
</TooltipProvider>,
|
|
);
|
|
}
|
|
|
|
const blurControl = (): HTMLElement =>
|
|
screen.getByRole("checkbox", { name: "Blur the background of the video" });
|
|
|
|
describe("SettingsModal", () => {
|
|
afterEach(() => backgroundEffect.setValue("none"));
|
|
|
|
it("blur control turns blur on and off", async () => {
|
|
const user = userEvent.setup();
|
|
renderVideoTab();
|
|
expect(blurControl()).not.toBeChecked();
|
|
|
|
await user.click(blurControl());
|
|
expect(backgroundEffect.getValue()).toBe("blur");
|
|
expect(blurControl()).toBeChecked();
|
|
|
|
await user.click(blurControl());
|
|
expect(backgroundEffect.getValue()).toBe("none");
|
|
expect(blurControl()).not.toBeChecked();
|
|
});
|
|
|
|
it("blur control reflects and replaces an image background", async () => {
|
|
const user = userEvent.setup();
|
|
backgroundEffect.setValue("image:arc");
|
|
renderVideoTab();
|
|
expect(blurControl()).not.toBeChecked();
|
|
|
|
await user.click(blurControl());
|
|
expect(backgroundEffect.getValue()).toBe("blur");
|
|
});
|
|
});
|