From e60bc9e98f68e295dec07619d4b380629c2fa630 Mon Sep 17 00:00:00 2001 From: Timo K Date: Fri, 21 Nov 2025 17:31:03 +0100 Subject: [PATCH] add developer tab snapshot test --- src/settings/DeveloperSettingsTab.test.tsx | 95 ++++ src/settings/DeveloperSettingsTab.tsx | 9 +- src/settings/SettingsModal.tsx | 6 +- .../DeveloperSettingsTab.test.tsx.snap | 430 ++++++++++++++++++ 4 files changed, 537 insertions(+), 3 deletions(-) create mode 100644 src/settings/DeveloperSettingsTab.test.tsx create mode 100644 src/settings/__snapshots__/DeveloperSettingsTab.test.tsx.snap diff --git a/src/settings/DeveloperSettingsTab.test.tsx b/src/settings/DeveloperSettingsTab.test.tsx new file mode 100644 index 00000000..c18cf23b --- /dev/null +++ b/src/settings/DeveloperSettingsTab.test.tsx @@ -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( + , + ); + + // 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(); + }); +}); diff --git a/src/settings/DeveloperSettingsTab.tsx b/src/settings/DeveloperSettingsTab.tsx index 04437d9e..5374b978 100644 --- a/src/settings/DeveloperSettingsTab.tsx +++ b/src/settings/DeveloperSettingsTab.tsx @@ -49,9 +49,14 @@ import { useUrlParams } from "../UrlParams"; interface Props { client: MatrixClient; livekitRooms?: { room: LivekitRoom; url: string; isLocal?: boolean }[]; + env: ImportMetaEnv; } -export const DeveloperSettingsTab: FC = ({ client, livekitRooms }) => { +export const DeveloperSettingsTab: FC = ({ + client, + livekitRooms, + env, +}) => { const { t } = useTranslation(); const [duplicateTiles, setDuplicateTiles] = useSetting(duplicateTilesSetting); const [debugTileLayout, setDebugTileLayout] = useSetting( @@ -320,7 +325,7 @@ export const DeveloperSettingsTab: FC = ({ client, livekitRooms }) => { ))}

{t("developer_mode.environment_variables")}

- 
{JSON.stringify(import.meta.env, null, 2)}
+ 
{JSON.stringify(env, null, 2)}

{t("developer_mode.url_params")}

{JSON.stringify(urlParams, null, 2)}
diff --git a/src/settings/SettingsModal.tsx b/src/settings/SettingsModal.tsx index 9e581647..2b4078aa 100644 --- a/src/settings/SettingsModal.tsx +++ b/src/settings/SettingsModal.tsx @@ -209,7 +209,11 @@ export const SettingsModal: FC = ({ key: "developer", name: t("settings.developer_tab_title"), content: ( - + ), }; diff --git a/src/settings/__snapshots__/DeveloperSettingsTab.test.tsx.snap b/src/settings/__snapshots__/DeveloperSettingsTab.test.tsx.snap new file mode 100644 index 00000000..ddaa9b7f --- /dev/null +++ b/src/settings/__snapshots__/DeveloperSettingsTab.test.tsx.snap @@ -0,0 +1,430 @@ +// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html + +exports[`DeveloperSettingsTab > renders and matches snapshot 1`] = ` +
+
+

+ Hostname: localhost +

+

+ Element Call version: dev +

+

+ Crypto version: crypto-1.0.0 +

+

+ Matrix ID: @alice:example.org +

+

+ Device ID: DEVICE123 +

+
+
+ + +
+
+
+
+ + +
+
+
+
+ + +
+
+
+
+ + +
+
+ +
+
+ + +
+ +
+
+
+
+ + + Use Default + +
+
+
+
+ + +
+ +
+

+ MatrixRTC mode +

+
+
+
+ +
+
+
+
+ + + Compatible with old versions of EC that do not support multi SFU + +
+
+
+
+
+ +
+
+
+
+ + + Compatible with homeservers that do not support sticky events (but all other EC clients are v0.17.0 or later) + +
+
+
+
+
+ +
+
+
+
+ + + Compatible only with homservers supporting sticky events and all EC clients v0.17.0 or later + +
+
+

+ LiveKit SFU: wss://local-sfu.example.org +

+

+ ws-url: + wss://local-sfu.example.org/ +

+

+ LiveKit Server Info + ( + local + ) +

+ 
+      {
+  "region": "local",
+  "version": "1.2.3"
+}
+      local-metadata
+
+

+ LiveKit SFU: wss://remote-sfu.example.org +

+

+ LiveKit Server Info + ( + remote + ) +

+ 
+      {
+  "region": "remote",
+  "version": "4.5.6"
+}
+      remote-metadata
+
+

+ Environment variables +

+ 
+      {
+  "MY_MOCK_ENV": 10,
+  "ENV": "test"
+}
+
+

+ URL parameters +

+ 
+      {
+  "mocked": true,
+  "answer": 42
+}
+
+ +
+`;