add developer tab snapshot test
This commit is contained in:
Timo K
95
src/settings/DeveloperSettingsTab.test.tsx
Normal file
95
src/settings/DeveloperSettingsTab.test.tsx
Normal file
@@ -0,0 +1,95 @@
|
|||||||
|
/*
|
||||||
|
Copyright 2025 New Vector Ltd.
|
||||||
|
|
||||||
|
SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
|
||||||
|
Please see LICENSE in the repository root for full details.
|
||||||
|
*/
|
||||||
|
|
||||||
|
import { describe, expect, it, vi } from "vitest";
|
||||||
|
import { render, waitFor } from "@testing-library/react";
|
||||||
|
|
||||||
|
import type { MatrixClient } from "matrix-js-sdk";
|
||||||
|
import type { Room as LivekitRoom } from "livekit-client";
|
||||||
|
import { DeveloperSettingsTab } from "./DeveloperSettingsTab";
|
||||||
|
|
||||||
|
// Mock url params hook to avoid environment-dependent snapshot churn.
|
||||||
|
vi.mock("../UrlParams", () => ({
|
||||||
|
useUrlParams: (): { mocked: boolean; answer: number } => ({
|
||||||
|
mocked: true,
|
||||||
|
answer: 42,
|
||||||
|
}),
|
||||||
|
}));
|
||||||
|
|
||||||
|
// Provide a minimal mock of a Livekit Room structure used by the component.
|
||||||
|
function createMockLivekitRoom(
|
||||||
|
wsUrl: string,
|
||||||
|
serverInfo: object,
|
||||||
|
metadata: string,
|
||||||
|
): { isLocal: boolean; url: string; room: LivekitRoom } {
|
||||||
|
const mockRoom = {
|
||||||
|
serverInfo,
|
||||||
|
metadata,
|
||||||
|
engine: { client: { ws: { url: wsUrl } } },
|
||||||
|
} as unknown as LivekitRoom;
|
||||||
|
|
||||||
|
return {
|
||||||
|
isLocal: true,
|
||||||
|
url: wsUrl,
|
||||||
|
room: mockRoom,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
// Minimal MatrixClient mock with only the methods used by the component.
|
||||||
|
function createMockMatrixClient(): MatrixClient {
|
||||||
|
return {
|
||||||
|
doesServerSupportUnstableFeature: vi.fn().mockResolvedValue(true), // ensure stickyEventsSupported eventually becomes true
|
||||||
|
getCrypto: (): { getVersion: () => string } | undefined => ({
|
||||||
|
getVersion: () => "crypto-1.0.0",
|
||||||
|
}),
|
||||||
|
getUserId: () => "@alice:example.org",
|
||||||
|
getDeviceId: () => "DEVICE123",
|
||||||
|
} as unknown as MatrixClient;
|
||||||
|
}
|
||||||
|
|
||||||
|
describe("DeveloperSettingsTab", () => {
|
||||||
|
it("renders and matches snapshot", async () => {
|
||||||
|
const client = createMockMatrixClient();
|
||||||
|
|
||||||
|
const livekitRooms: {
|
||||||
|
room: LivekitRoom;
|
||||||
|
url: string;
|
||||||
|
isLocal?: boolean;
|
||||||
|
}[] = [
|
||||||
|
createMockLivekitRoom(
|
||||||
|
"wss://local-sfu.example.org",
|
||||||
|
{ region: "local", version: "1.2.3" },
|
||||||
|
"local-metadata",
|
||||||
|
),
|
||||||
|
{
|
||||||
|
isLocal: false,
|
||||||
|
url: "wss://remote-sfu.example.org",
|
||||||
|
room: {
|
||||||
|
serverInfo: { region: "remote", version: "4.5.6" },
|
||||||
|
metadata: "remote-metadata",
|
||||||
|
engine: { client: { ws: { url: "wss://remote-sfu.example.org" } } },
|
||||||
|
} as unknown as LivekitRoom,
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
const { container } = render(
|
||||||
|
<DeveloperSettingsTab
|
||||||
|
client={client}
|
||||||
|
livekitRooms={livekitRooms}
|
||||||
|
env={{ MY_MOCK_ENV: 10, ENV: "test" } as unknown as ImportMetaEnv}
|
||||||
|
/>,
|
||||||
|
);
|
||||||
|
|
||||||
|
// Wait for the async sticky events feature check to resolve so the final UI
|
||||||
|
// (e.g. enabled Matrix_2_0 radio button) appears deterministically.
|
||||||
|
await waitFor(() =>
|
||||||
|
expect(client.doesServerSupportUnstableFeature).toHaveBeenCalled(),
|
||||||
|
);
|
||||||
|
|
||||||
|
expect(container).toMatchSnapshot();
|
||||||
|
});
|
||||||
|
});
|
||||||
@@ -49,9 +49,14 @@ import { useUrlParams } from "../UrlParams";
|
|||||||
interface Props {
|
interface Props {
|
||||||
client: MatrixClient;
|
client: MatrixClient;
|
||||||
livekitRooms?: { room: LivekitRoom; url: string; isLocal?: boolean }[];
|
livekitRooms?: { room: LivekitRoom; url: string; isLocal?: boolean }[];
|
||||||
|
env: ImportMetaEnv;
|
||||||
}
|
}
|
||||||
|
|
||||||
export const DeveloperSettingsTab: FC<Props> = ({ client, livekitRooms }) => {
|
export const DeveloperSettingsTab: FC<Props> = ({
|
||||||
|
client,
|
||||||
|
livekitRooms,
|
||||||
|
env,
|
||||||
|
}) => {
|
||||||
const { t } = useTranslation();
|
const { t } = useTranslation();
|
||||||
const [duplicateTiles, setDuplicateTiles] = useSetting(duplicateTilesSetting);
|
const [duplicateTiles, setDuplicateTiles] = useSetting(duplicateTilesSetting);
|
||||||
const [debugTileLayout, setDebugTileLayout] = useSetting(
|
const [debugTileLayout, setDebugTileLayout] = useSetting(
|
||||||
@@ -320,7 +325,7 @@ export const DeveloperSettingsTab: FC<Props> = ({ client, livekitRooms }) => {
|
|||||||
</>
|
</>
|
||||||
))}
|
))}
|
||||||
<p>{t("developer_mode.environment_variables")}</p>
|
<p>{t("developer_mode.environment_variables")}</p>
|
||||||
<pre>{JSON.stringify(import.meta.env, null, 2)}</pre>
|
<pre>{JSON.stringify(env, null, 2)}</pre>
|
||||||
<p>{t("developer_mode.url_params")}</p>
|
<p>{t("developer_mode.url_params")}</p>
|
||||||
<pre>{JSON.stringify(urlParams, null, 2)}</pre>
|
<pre>{JSON.stringify(urlParams, null, 2)}</pre>
|
||||||
</Form>
|
</Form>
|
||||||
|
|||||||
@@ -209,7 +209,11 @@ export const SettingsModal: FC<Props> = ({
|
|||||||
key: "developer",
|
key: "developer",
|
||||||
name: t("settings.developer_tab_title"),
|
name: t("settings.developer_tab_title"),
|
||||||
content: (
|
content: (
|
||||||
<DeveloperSettingsTab client={client} livekitRooms={livekitRooms} />
|
<DeveloperSettingsTab
|
||||||
|
env={import.meta.env}
|
||||||
|
client={client}
|
||||||
|
livekitRooms={livekitRooms}
|
||||||
|
/>
|
||||||
),
|
),
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
430
src/settings/__snapshots__/DeveloperSettingsTab.test.tsx.snap
Normal file
430
src/settings/__snapshots__/DeveloperSettingsTab.test.tsx.snap
Normal file
@@ -0,0 +1,430 @@
|
|||||||
|
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
|
||||||
|
|
||||||
|
exports[`DeveloperSettingsTab > renders and matches snapshot 1`] = `
|
||||||
|
<div>
|
||||||
|
<form
|
||||||
|
class="_root_19upo_16"
|
||||||
|
>
|
||||||
|
<p>
|
||||||
|
Hostname: localhost
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
Element Call version: dev
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
Crypto version: crypto-1.0.0
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
Matrix ID: @alice:example.org
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
Device ID: DEVICE123
|
||||||
|
</p>
|
||||||
|
<div
|
||||||
|
class="fieldRow"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="field inputField"
|
||||||
|
>
|
||||||
|
<input
|
||||||
|
aria-describedby="«r1»"
|
||||||
|
id="duplicateTiles"
|
||||||
|
min="0"
|
||||||
|
type="number"
|
||||||
|
value="0"
|
||||||
|
/>
|
||||||
|
<label
|
||||||
|
for="duplicateTiles"
|
||||||
|
>
|
||||||
|
Number of additional tile copies per participant
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="fieldRow"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="field checkboxField"
|
||||||
|
>
|
||||||
|
<input
|
||||||
|
aria-describedby="«r2»"
|
||||||
|
id="debugTileLayout"
|
||||||
|
type="checkbox"
|
||||||
|
/>
|
||||||
|
<label
|
||||||
|
for="debugTileLayout"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="checkbox"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
fill="none"
|
||||||
|
height="24"
|
||||||
|
stroke="#000"
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round"
|
||||||
|
stroke-width="2"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
width="24"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="m20 6-11 11-5-5"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
Debug tile layout
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="fieldRow"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="field checkboxField"
|
||||||
|
>
|
||||||
|
<input
|
||||||
|
aria-describedby="«r3»"
|
||||||
|
id="showConnectionStats"
|
||||||
|
type="checkbox"
|
||||||
|
/>
|
||||||
|
<label
|
||||||
|
for="showConnectionStats"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="checkbox"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
fill="none"
|
||||||
|
height="24"
|
||||||
|
stroke="#000"
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round"
|
||||||
|
stroke-width="2"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
width="24"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="m20 6-11 11-5-5"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
Show connection statistics
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="fieldRow"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="field checkboxField"
|
||||||
|
>
|
||||||
|
<input
|
||||||
|
aria-describedby="«r4»"
|
||||||
|
id="muteAllAudio"
|
||||||
|
type="checkbox"
|
||||||
|
/>
|
||||||
|
<label
|
||||||
|
for="muteAllAudio"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="checkbox"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
fill="none"
|
||||||
|
height="24"
|
||||||
|
stroke="#000"
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round"
|
||||||
|
stroke-width="2"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
width="24"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="m20 6-11 11-5-5"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
Mute all audio (participants, reactions, join sounds)
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div
|
||||||
|
class="fieldRow"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="field checkboxField"
|
||||||
|
>
|
||||||
|
<input
|
||||||
|
aria-describedby="«r5»"
|
||||||
|
id="alwaysShowIphoneEarpiece"
|
||||||
|
type="checkbox"
|
||||||
|
/>
|
||||||
|
<label
|
||||||
|
for="alwaysShowIphoneEarpiece"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="checkbox"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
fill="none"
|
||||||
|
height="24"
|
||||||
|
stroke="#000"
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round"
|
||||||
|
stroke-width="2"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
width="24"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="m20 6-11 11-5-5"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
Show iPhone earpiece option on all platforms
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="_inline-field_19upo_32"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="_inline-field-control_19upo_44"
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
class="_inline-field-body_19upo_38"
|
||||||
|
>
|
||||||
|
<label
|
||||||
|
class="_label_19upo_59"
|
||||||
|
for="radix-«r6»"
|
||||||
|
>
|
||||||
|
Custom Livekit-url
|
||||||
|
</label>
|
||||||
|
<span
|
||||||
|
class="_message_19upo_85 _help-message_19upo_91"
|
||||||
|
id="radix-«r7»"
|
||||||
|
>
|
||||||
|
Use Default
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="fieldRow"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="field inputField"
|
||||||
|
>
|
||||||
|
<input
|
||||||
|
aria-describedby="«r8»"
|
||||||
|
id="customLivekitUrl"
|
||||||
|
type="text"
|
||||||
|
value=""
|
||||||
|
/>
|
||||||
|
<label
|
||||||
|
for="customLivekitUrl"
|
||||||
|
>
|
||||||
|
Custom Livekit-url
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
<button
|
||||||
|
class="_button_vczzf_8"
|
||||||
|
data-kind="primary"
|
||||||
|
data-size="lg"
|
||||||
|
role="button"
|
||||||
|
tabindex="0"
|
||||||
|
>
|
||||||
|
Update
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<h3
|
||||||
|
class="_typography_6v6n8_153 _font-body-lg-semibold_6v6n8_74"
|
||||||
|
>
|
||||||
|
MatrixRTC mode
|
||||||
|
</h3>
|
||||||
|
<div
|
||||||
|
class="_inline-field_19upo_32"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="_inline-field-control_19upo_44"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="_container_1e0uz_10"
|
||||||
|
>
|
||||||
|
<input
|
||||||
|
aria-describedby="radix-«ra» radix-«rc» radix-«re»"
|
||||||
|
checked=""
|
||||||
|
class="_input_1e0uz_18"
|
||||||
|
id="radix-«r9»"
|
||||||
|
name="«r0»"
|
||||||
|
title=""
|
||||||
|
type="radio"
|
||||||
|
value="legacy"
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
class="_ui_1e0uz_19"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="_inline-field-body_19upo_38"
|
||||||
|
>
|
||||||
|
<label
|
||||||
|
class="_label_19upo_59"
|
||||||
|
for="radix-«r9»"
|
||||||
|
>
|
||||||
|
Legacy: state events & oldest membership SFU
|
||||||
|
</label>
|
||||||
|
<span
|
||||||
|
class="_message_19upo_85 _help-message_19upo_91"
|
||||||
|
id="radix-«ra»"
|
||||||
|
>
|
||||||
|
Compatible with old versions of EC that do not support multi SFU
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="_inline-field_19upo_32"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="_inline-field-control_19upo_44"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="_container_1e0uz_10"
|
||||||
|
>
|
||||||
|
<input
|
||||||
|
aria-describedby="radix-«ra» radix-«rc» radix-«re»"
|
||||||
|
class="_input_1e0uz_18"
|
||||||
|
id="radix-«rb»"
|
||||||
|
name="«r0»"
|
||||||
|
title=""
|
||||||
|
type="radio"
|
||||||
|
value="compatibil"
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
class="_ui_1e0uz_19"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="_inline-field-body_19upo_38"
|
||||||
|
>
|
||||||
|
<label
|
||||||
|
class="_label_19upo_59"
|
||||||
|
for="radix-«rb»"
|
||||||
|
>
|
||||||
|
Compatibility: state events & multi SFU
|
||||||
|
</label>
|
||||||
|
<span
|
||||||
|
class="_message_19upo_85 _help-message_19upo_91"
|
||||||
|
id="radix-«rc»"
|
||||||
|
>
|
||||||
|
Compatible with homeservers that do not support sticky events (but all other EC clients are v0.17.0 or later)
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="_inline-field_19upo_32"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="_inline-field-control_19upo_44"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="_container_1e0uz_10"
|
||||||
|
>
|
||||||
|
<input
|
||||||
|
aria-describedby="radix-«ra» radix-«rc» radix-«re»"
|
||||||
|
class="_input_1e0uz_18"
|
||||||
|
id="radix-«rd»"
|
||||||
|
name="«r0»"
|
||||||
|
title=""
|
||||||
|
type="radio"
|
||||||
|
value="matrix_2_0"
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
class="_ui_1e0uz_19"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="_inline-field-body_19upo_38"
|
||||||
|
>
|
||||||
|
<label
|
||||||
|
class="_label_19upo_59"
|
||||||
|
for="radix-«rd»"
|
||||||
|
>
|
||||||
|
Matrix 2.0: sticky events & multi SFU
|
||||||
|
</label>
|
||||||
|
<span
|
||||||
|
class="_message_19upo_85 _help-message_19upo_91"
|
||||||
|
id="radix-«re»"
|
||||||
|
>
|
||||||
|
Compatible only with homservers supporting sticky events and all EC clients v0.17.0 or later
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<h3>
|
||||||
|
LiveKit SFU: wss://local-sfu.example.org
|
||||||
|
</h3>
|
||||||
|
<p>
|
||||||
|
ws-url:
|
||||||
|
wss://local-sfu.example.org/
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
LiveKit Server Info
|
||||||
|
(
|
||||||
|
local
|
||||||
|
)
|
||||||
|
</p>
|
||||||
|
<pre
|
||||||
|
class="pre"
|
||||||
|
>
|
||||||
|
{
|
||||||
|
"region": "local",
|
||||||
|
"version": "1.2.3"
|
||||||
|
}
|
||||||
|
local-metadata
|
||||||
|
</pre>
|
||||||
|
<h3>
|
||||||
|
LiveKit SFU: wss://remote-sfu.example.org
|
||||||
|
</h3>
|
||||||
|
<p>
|
||||||
|
LiveKit Server Info
|
||||||
|
(
|
||||||
|
remote
|
||||||
|
)
|
||||||
|
</p>
|
||||||
|
<pre
|
||||||
|
class="pre"
|
||||||
|
>
|
||||||
|
{
|
||||||
|
"region": "remote",
|
||||||
|
"version": "4.5.6"
|
||||||
|
}
|
||||||
|
remote-metadata
|
||||||
|
</pre>
|
||||||
|
<p>
|
||||||
|
Environment variables
|
||||||
|
</p>
|
||||||
|
<pre>
|
||||||
|
{
|
||||||
|
"MY_MOCK_ENV": 10,
|
||||||
|
"ENV": "test"
|
||||||
|
}
|
||||||
|
</pre>
|
||||||
|
<p>
|
||||||
|
URL parameters
|
||||||
|
</p>
|
||||||
|
<pre>
|
||||||
|
{
|
||||||
|
"mocked": true,
|
||||||
|
"answer": 42
|
||||||
|
}
|
||||||
|
</pre>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
Reference in New Issue
Block a user