imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

New theme ui in user settings (#12576)

Browse source 
* Add hook to get the theme

* Adapt subsection settings to new ui

* WIP new theme subsection

* Add theme selection

* Fix test types

* Disabled theme selector when system theme is used

* Update compound to `4.4.1`

* Add custom theme support

* Remove old ThemChoicePanel

* Fix QuickThemeSwitcher-test.tsx

* Fix AppearanceUserSettingsTab-test.tsx

* Update i18n

* Fix ThemeChoicePanel-test.tsx

* Update `@vector-im/compound-web`

* Small tweaks

* Fix CSS comments and use compound variable

* Remove custom theme title

* i18n: update

* test: add tests to theme selection

* test: update AppearanceUserSettingsTab-test snapshot

* test: rework custom theme

* playwright: fix audio-player.spec.ts

* playwright: appearance tab

* test: update snapshot

* playright: add custom theme

* i18n: use correct char for ellipsis

* a11y: add missing aria-label to delete button

* dialog: update close button tooltip

* theme: remove local state and handle custom delete

* theme: don't add twice the same custom theme

* test: update snapshot

* playwright: update snapshot

* custom theme: add background to custom theme list

* update compound web

* Use new destructive property on `IconButton` of theme panel

* test: update snapshots

* rename new ui into legacy

* remove wrong constructor doc

* fix theme selector padding

* theme selector: fix key

* test: fix e2e
This commit is contained in:
Florian Duros 2024-06-26 17:47:01 +02:00 • committed by GitHub
parent 8ede89101a
commit 33a017b528
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
30 changed files with 1749 additions and 477 deletions
Download patch file Download diff file Expand all files Collapse all files

172
test/components/views/settings/ThemeChoicePanel-test.tsx
View file

@ -15,15 +15,177 @@ limitations under the License.
*/
import React from "react";
import { render } from "@testing-library/react";
import { act, render, screen, waitFor } from "@testing-library/react";
import { mocked, MockedObject } from "jest-mock";
import userEvent from "@testing-library/user-event";
import fetchMock from "fetch-mock-jest";
import * as TestUtils from "../../../test-utils";
import ThemeChoicePanel from "../../../../src/components/views/settings/ThemeChoicePanel";
import { ThemeChoicePanel } from "../../../../src/components/views/settings/ThemeChoicePanel";
import SettingsStore from "../../../../src/settings/SettingsStore";
import ThemeWatcher from "../../../../src/settings/watchers/ThemeWatcher";
import { SettingLevel } from "../../../../src/settings/SettingLevel";
jest.mock("../../../../src/settings/watchers/ThemeWatcher");
describe("<ThemeChoicePanel />", () => {
/**
* Enable or disable the system theme
* @param enable
*/
async function enableSystemTheme(enable: boolean) {
await SettingsStore.setValue("use_system_theme", null, SettingLevel.DEVICE, enable);
}
/**
* Set the theme
* @param theme
*/
async function setTheme(theme: string) {
await SettingsStore.setValue("theme", null, SettingLevel.DEVICE, theme);
}
beforeEach(async () => {
mocked(ThemeWatcher).mockImplementation(() => {
return {
isSystemThemeSupported: jest.fn().mockReturnValue(true),
} as unknown as MockedObject<ThemeWatcher>;
});
await enableSystemTheme(false);
await setTheme("light");
});
describe("ThemeChoicePanel", () => {
it("renders the theme choice UI", () => {
TestUtils.stubClient();
const { asFragment } = render(<ThemeChoicePanel />);
expect(asFragment()).toMatchSnapshot();
});
describe("theme selection", () => {
describe("system theme", () => {
it("should disable Match system theme", async () => {
render(<ThemeChoicePanel />);
expect(screen.getByRole("checkbox", { name: "Match system theme" })).not.toBeChecked();
});
it("should enable Match system theme", async () => {
await enableSystemTheme(true);
render(<ThemeChoicePanel />);
expect(screen.getByRole("checkbox", { name: "Match system theme" })).toBeChecked();
});
it("should change the system theme when clicked", async () => {
jest.spyOn(SettingsStore, "setValue");
render(<ThemeChoicePanel />);
act(() => screen.getByRole("checkbox", { name: "Match system theme" }).click());
// The system theme should be enabled
expect(screen.getByRole("checkbox", { name: "Match system theme" })).toBeChecked();
expect(SettingsStore.setValue).toHaveBeenCalledWith("use_system_theme", null, "device", true);
});
});
describe("theme selection", () => {
it("should disable theme selection when system theme is enabled", async () => {
await enableSystemTheme(true);
render(<ThemeChoicePanel />);
// We expect all the themes to be disabled
const themes = screen.getAllByRole("radio");
themes.forEach((theme) => {
expect(theme).toBeDisabled();
});
});
it("should enable theme selection when system theme is disabled", async () => {
render(<ThemeChoicePanel />);
// We expect all the themes to be disabled
const themes = screen.getAllByRole("radio");
themes.forEach((theme) => {
expect(theme).not.toBeDisabled();
});
});
it("should have light theme selected", async () => {
render(<ThemeChoicePanel />);
// We expect the light theme to be selected
const lightTheme = screen.getByRole("radio", { name: "Light" });
expect(lightTheme).toBeChecked();
// And the dark theme shouldn't be selected
const darkTheme = screen.getByRole("radio", { name: "Dark" });
expect(darkTheme).not.toBeChecked();
});
it("should switch to dark theme", async () => {
jest.spyOn(SettingsStore, "setValue");
render(<ThemeChoicePanel />);
const darkTheme = screen.getByRole("radio", { name: "Dark" });
const lightTheme = screen.getByRole("radio", { name: "Light" });
expect(darkTheme).not.toBeChecked();
// Switch to the dark theme
act(() => darkTheme.click());
expect(SettingsStore.setValue).toHaveBeenCalledWith("theme", null, "device", "dark");
// Dark theme is now selected
await waitFor(() => expect(darkTheme).toBeChecked());
// Light theme is not selected anymore
expect(lightTheme).not.toBeChecked();
// The setting should be updated
expect(SettingsStore.setValue).toHaveBeenCalledWith("theme", null, "device", "dark");
});
});
});
describe("custom theme", () => {
const aliceTheme = { name: "Alice theme", is_dark: true, colors: {} };
const bobTheme = { name: "Bob theme", is_dark: false, colors: {} };
beforeEach(async () => {
await SettingsStore.setValue("feature_custom_themes", null, SettingLevel.DEVICE, true);
await SettingsStore.setValue("custom_themes", null, SettingLevel.DEVICE, [aliceTheme]);
});
it("should render the custom theme section", () => {
const { asFragment } = render(<ThemeChoicePanel />);
expect(asFragment()).toMatchSnapshot();
});
it("should add a custom theme", async () => {
jest.spyOn(SettingsStore, "setValue");
// Respond to the theme request
fetchMock.get("http://bob.theme", {
body: bobTheme,
});
render(<ThemeChoicePanel />);
// Add the new custom theme
const customThemeInput = screen.getByRole("textbox", { name: "Add custom theme" });
await userEvent.type(customThemeInput, "http://bob.theme");
screen.getByRole("button", { name: "Add custom theme" }).click();
// The new custom theme is added to the user's themes
await waitFor(() =>
expect(SettingsStore.setValue).toHaveBeenCalledWith("custom_themes", null, "account", [
aliceTheme,
bobTheme,
]),
);
});
it("should display custom theme", () => {
const { asFragment } = render(<ThemeChoicePanel />);
expect(screen.getByRole("radio", { name: aliceTheme.name })).toBeInTheDocument();
expect(screen.getByRole("listitem", { name: aliceTheme.name })).toBeInTheDocument();
expect(asFragment()).toMatchSnapshot();
});
});
});