element-web/playwright/e2e/settings/appearance-user-settings-tab/theme-choice-panel.spec.ts

/*
Copyright 2024 New Vector Ltd.
Copyright 2023 Suguru Hirahara

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
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", async ({ page, app, util }) => {
            // Assert that 'Match system theme' is not checked
            await expect(util.getMatchSystemThemeCheckbox()).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", async ({ page, app, util }) => {
            await util.getMatchSystemThemeCheckbox().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", 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", 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", 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");
            });
        });
    });
});