mv element.io @types __mocks__/ debian docker module_system/ playwright res src test webapp Dockerfile .dockerignore .eslintignore .stylelintrc.cjs babel.config.cjs recorder-worklet-loader.cjs .modernizr.json components.json config.json config.sample.json package.json project.json tsconfig.json tsconfig.module_system.json jest.config.ts playwright.config.ts webpack.config.ts build_config.sample.yaml apps/web/

mkdir apps/web/scripts mv scripts/{cleanup.sh,ci_package.sh,copy-res.ts,deploy.py,package.sh} apps/web/scripts And a couple of gitignore tweaks Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
2026-11-06 06:28:27 +00:00 · 2026-02-24 13:12:17 +00:00
parent e7509c92a1
commit 91a3cb03c1
3408 changed files with 28 additions and 32 deletions
@@ -0,0 +1,114 @@
+/*
+Copyright 2024 New Vector Ltd.
+Copyright 2023 Suguru Hirahara
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+import { expect, test } from ".";
+
+test.describe("Appearance user settings tab", () => {
+    test.use({
+        displayName: "Hanako",
+    });
+
+    test.describe("Theme Choice Panel", () => {
+        test.beforeEach(async ({ app, user, util }) => {
+            // Disable the default theme for consistency in case ThemeWatcher automatically chooses it
+            await util.disableSystemTheme();
+            await util.openAppearanceTab();
+        });
+
+        test(
+            "should be rendered with the light theme selected",
+            { tag: "@screenshot" },
+            async ({ page, app, util }) => {
+                // Assert that 'Match system theme' is not checked
+                await expect(util.getMatchSystemThemeSwitch()).not.toBeChecked();
+
+                // Assert that the light theme is selected
+                await expect(util.getLightTheme()).toBeChecked();
+                // Assert that the dark and high contrast themes are not selected
+                await expect(util.getDarkTheme()).not.toBeChecked();
+                await expect(util.getHighContrastTheme()).not.toBeChecked();
+
+                await expect(util.getThemePanel()).toMatchScreenshot("theme-panel-light.png");
+            },
+        );
+
+        test(
+            "should disable the themes when the system theme is clicked",
+            { tag: "@screenshot" },
+            async ({ page, app, util }) => {
+                await util.getMatchSystemThemeSwitch().click();
+
+                // Assert that the themes are disabled
+                await expect(util.getLightTheme()).toBeDisabled();
+                await expect(util.getDarkTheme()).toBeDisabled();
+                await expect(util.getHighContrastTheme()).toBeDisabled();
+
+                await expect(util.getThemePanel()).toMatchScreenshot("theme-panel-match-system-enabled.png");
+            },
+        );
+
+        test("should change the theme to dark", { tag: "@screenshot" }, async ({ page, app, util }) => {
+            // Assert that the light theme is selected
+            await expect(util.getLightTheme()).toBeChecked();
+
+            await util.getDarkTheme().click();
+
+            // Assert that the light and high contrast themes are not selected
+            await expect(util.getLightTheme()).not.toBeChecked();
+            await expect(util.getDarkTheme()).toBeChecked();
+            await expect(util.getHighContrastTheme()).not.toBeChecked();
+
+            await expect(util.getThemePanel()).toMatchScreenshot("theme-panel-dark.png");
+        });
+
+        test.describe("custom theme", () => {
+            test.use({
+                labsFlags: ["feature_custom_themes"],
+            });
+
+            test("should render the custom theme section", { tag: "@screenshot" }, async ({ page, app, util }) => {
+                await expect(util.getThemePanel()).toMatchScreenshot("theme-panel-custom-theme.png");
+            });
+
+            test(
+                "should be able to add and remove a custom theme",
+                { tag: "@screenshot" },
+                async ({ page, app, util }) => {
+                    await util.addCustomTheme();
+
+                    await expect(util.getCustomTheme()).not.toBeChecked();
+                    await expect(util.getThemePanel()).toMatchScreenshot("theme-panel-custom-theme-added.png");
+
+                    await util.removeCustomTheme();
+                    await expect(util.getThemePanel()).toMatchScreenshot("theme-panel-custom-theme-removed.png");
+                },
+            );
+
+            test(
+                "should keep custom theme when reloading the page",
+                { tag: "@screenshot" },
+                async ({ page, app, user, util }) => {
+                    await util.addCustomTheme();
+                    await util.getCustomTheme().click();
+                    await util.closeAppearanceTab();
+
+                    await expect(page).toMatchScreenshot("window-custom-theme.png");
+
+                    await page.reload();
+
+                    await util.openAppearanceTab();
+                    // Assert that the custom theme is still selected after reloading the page
+                    await expect(util.getCustomTheme()).toBeChecked();
+
+                    await util.closeAppearanceTab();
+                    await expect(page).toMatchScreenshot("window-custom-theme.png");
+                },
+            );
+        });
+    });
+});