From c4f59d4d567a6778c907b02644135e4ff4a1ab52 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Tue, 9 May 2023 13:48:55 +0000 Subject: [PATCH] Add E2E test of `ThemeChoicePanel` (#10469) * Add E2E test of ThemeChoicePanel Signed-off-by: Suguru Hirahara * Edit a comment Signed-off-by: Suguru Hirahara * Apply feedback Signed-off-by: Suguru Hirahara * Remove obsolete data-testId attributes They has become obsolete with bfa8152538a3a0804ac14e231578d0cba73aa308. Signed-off-by: Suguru Hirahara * Update a jest snapshot Signed-off-by: Suguru Hirahara --------- Signed-off-by: Suguru Hirahara --- .../e2e/settings/theme-choice-panel.spec.ts | 132 ++++++++++++++++++ .../views/settings/ThemeChoicePanel.tsx | 6 +- .../ThemeChoicePanel-test.tsx.snap | 1 - .../AppearanceUserSettingsTab-test.tsx.snap | 1 - 4 files changed, 135 insertions(+), 5 deletions(-) create mode 100644 cypress/e2e/settings/theme-choice-panel.spec.ts diff --git a/cypress/e2e/settings/theme-choice-panel.spec.ts b/cypress/e2e/settings/theme-choice-panel.spec.ts new file mode 100644 index 0000000000..0ee42d91fe --- /dev/null +++ b/cypress/e2e/settings/theme-choice-panel.spec.ts @@ -0,0 +1,132 @@ +/* +Copyright 2023 Suguru Hirahara + +Licensed under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. +You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software +distributed under the License is distributed on an "AS IS" BASIS, +WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +See the License for the specific language governing permissions and +limitations under the License. +*/ + +/// + +import { HomeserverInstance } from "../../plugins/utils/homeserver"; +import { SettingLevel } from "../../../src/settings/SettingLevel"; + +const USER_NAME = "Hanako"; + +describe("Theme Choice Panel", () => { + let homeserver: HomeserverInstance; + + beforeEach(() => { + cy.startHomeserver("default").then((data) => { + homeserver = data; + cy.initTestUser(homeserver, USER_NAME); + }); + + // Disable the default theme for consistency in case ThemeWatcher automatically chooses it + cy.setSettingValue("use_system_theme", null, SettingLevel.DEVICE, false); + }); + + afterEach(() => { + cy.stopHomeserver(homeserver); + }); + + it("should be rendered with the light theme selected", () => { + cy.openUserSettings("Appearance") + .get(".mx_ThemeChoicePanel") + .within(() => { + cy.findByTestId("checkbox-use-system-theme").within(() => { + cy.findByText("Match system theme").should("be.visible"); + + // Assert that 'Match system theme' is not checked + // Note that mx_Checkbox_checkmark exists and is hidden by CSS if it is not checked + cy.get(".mx_Checkbox_checkmark").should("not.be.visible"); + }); + + cy.get(".mx_ThemeSelectors").within(() => { + cy.get(".mx_ThemeSelector_light").should("exist"); + cy.get(".mx_ThemeSelector_dark").should("exist"); + + // Assert that the light theme is selected + cy.get(".mx_ThemeSelector_light.mx_StyledRadioButton_enabled").should("exist"); + + // Assert that the buttons for the light and dark theme are not enabled + cy.get(".mx_ThemeSelector_light.mx_StyledRadioButton_disabled").should("not.exist"); + cy.get(".mx_ThemeSelector_dark.mx_StyledRadioButton_disabled").should("not.exist"); + }); + + // Assert that the checkbox for the high contrast theme is rendered + cy.findByLabelText("Use high contrast").should("exist"); + }); + }); + + it( + "should disable the labels for themes and the checkbox for the high contrast theme if the checkbox for " + + "the system theme is clicked", + () => { + cy.openUserSettings("Appearance") + .get(".mx_ThemeChoicePanel") + .findByLabelText("Match system theme") + .click({ force: true }); // force click because the size of the checkbox is zero + + cy.get(".mx_ThemeChoicePanel").within(() => { + // Assert that the labels for the light theme and dark theme are disabled + cy.get(".mx_ThemeSelector_light.mx_StyledRadioButton_disabled").should("exist"); + cy.get(".mx_ThemeSelector_dark.mx_StyledRadioButton_disabled").should("exist"); + + // Assert that there does not exist a label for an enabled theme + cy.get("label.mx_StyledRadioButton_enabled").should("not.exist"); + + // Assert that the checkbox and label to enable the the high contrast theme should not exist + cy.findByLabelText("Use high contrast").should("not.exist"); + }); + }, + ); + + it("should not render the checkbox and the label for the high contrast theme if the dark theme is selected", () => { + cy.openUserSettings("Appearance"); + + // Assert that the checkbox and the label to enable the high contrast theme should exist + cy.findByLabelText("Use high contrast").should("exist"); + + // Enable the dark theme + cy.get(".mx_ThemeSelector_dark").click(); + + // Assert that the checkbox and the label should not exist + cy.findByLabelText("Use high contrast").should("not.exist"); + }); + + it("should support enabling the high contast theme", () => { + cy.createRoom({ name: "Test Room" }).viewRoomByName("Test Room"); + + cy.get(".mx_GenericEventListSummary").within(() => { + // Assert that $primary-content is applied to GELS summary on the light theme + // $primary-content on the light theme = #17191c = rgb(23, 25, 28) + cy.get(".mx_TextualEvent.mx_GenericEventListSummary_summary") + .should("have.css", "color", "rgb(23, 25, 28)") + .should("have.css", "opacity", "0.5"); + }); + + cy.openUserSettings("Appearance") + .get(".mx_ThemeChoicePanel") + .findByLabelText("Use high contrast") + .click({ force: true }); // force click because the size of the checkbox is zero + + cy.closeDialog(); + + cy.get(".mx_GenericEventListSummary").within(() => { + // Assert that $secondary-content is specified for GELS summary on the high contrast theme + // $secondary-content on the high contrast theme = #5e6266 = rgb(94, 98, 102) + cy.get(".mx_TextualEvent.mx_GenericEventListSummary_summary") + .should("have.css", "color", "rgb(94, 98, 102)") + .should("have.css", "opacity", "1"); + }); + }); +}); diff --git a/src/components/views/settings/ThemeChoicePanel.tsx b/src/components/views/settings/ThemeChoicePanel.tsx index 909e020a7c..b65d9b9d11 100644 --- a/src/components/views/settings/ThemeChoicePanel.tsx +++ b/src/components/views/settings/ThemeChoicePanel.tsx @@ -168,7 +168,7 @@ export default class ThemeChoicePanel extends React.Component { (findHighContrastTheme(this.state.theme) || isHighContrastTheme(this.state.theme)) ) { return ( -
+
this.highContrastThemeChanged(e.target.checked)} @@ -197,7 +197,7 @@ export default class ThemeChoicePanel extends React.Component { let systemThemeSection: JSX.Element | undefined; if (themeWatcher.isSystemThemeSupported()) { systemThemeSection = ( -
+
this.onUseSystemThemeChanged(e.target.checked)} @@ -248,7 +248,7 @@ export default class ThemeChoicePanel extends React.Component {
{_t("Theme")} {systemThemeSection} -
+
({ diff --git a/test/components/views/settings/__snapshots__/ThemeChoicePanel-test.tsx.snap b/test/components/views/settings/__snapshots__/ThemeChoicePanel-test.tsx.snap index 2ee7d3d4df..b1bd41e8f5 100644 --- a/test/components/views/settings/__snapshots__/ThemeChoicePanel-test.tsx.snap +++ b/test/components/views/settings/__snapshots__/ThemeChoicePanel-test.tsx.snap @@ -12,7 +12,6 @@ exports[`ThemeChoicePanel renders the theme choice UI 1`] = `