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

Use semantic headings in user settings Appearance (#10827)

Browse source 
* split SettingsSection out of SettingsTab, replace usage

* correct copyright

* use semantic headings in GeneralRoomSettingsTab

* use SettingsTab and SettingsSubsection in room settings

* fix VoipRoomSettingsTab

* use SettingsSection components in space settings

* settingssubsection text component

* use semantic headings in HelpUserSetttings tab

* use ExternalLink components for external links

* test

* strict

* lint

* semantic heading in labs settings

* semantic headings in keyboard settings tab

* semantic heading in preferencesusersettingstab

* tidying

* use new settings components in eventindexpanel

* findByTestId

* prettier

* semantic headings and style refresh for crypto settings

* e2e panel

* use semantic headings in User settings appearance tab

* update selectors in tests

* tidy
This commit is contained in:
Kerry 2023-05-22 09:12:11 +12:00 • committed by GitHub
parent e652177706
commit b3b03e5dcb
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
18 changed files with 765 additions and 770 deletions
Download patch file Download diff file Expand all files Collapse all files

2
cypress/e2e/audio-player/audio-player.spec.ts
View file

@ -176,7 +176,7 @@ describe("Audio player", () => {
// Enable high contrast manually
cy.openUserSettings("Appearance")
.get(".mx_ThemeChoicePanel")
.findByTestId("mx_ThemeChoicePanel")
.findByLabelText("Use high contrast")
.click({ force: true }); // force click because the size of the checkbox is zero

53
cypress/e2e/settings/appearance-user-settings-tab.spec.ts
View file

@ -36,12 +36,11 @@ describe("Appearance user settings tab", () => {
it("should be rendered properly", () => {
cy.openUserSettings("Appearance");
cy.get(".mx_SettingsTab.mx_AppearanceUserSettingsTab").within(() => {
// Assert that the top heading is rendered
cy.findByTestId("appearance").should("have.text", "Customise your appearance").should("be.visible");
cy.findByTestId("mx_AppearanceUserSettingsTab").within(() => {
cy.get("h2").should("have.text", "Customise your appearance").should("be.visible");
});
cy.get(".mx_SettingsTab.mx_AppearanceUserSettingsTab").percySnapshotElement(
cy.findByTestId("mx_AppearanceUserSettingsTab").percySnapshotElement(
"User settings tab - Appearance (advanced options collapsed)",
{
// Emulate TabbedView's actual min and max widths
@ -57,7 +56,7 @@ describe("Appearance user settings tab", () => {
// Assert that "Hide advanced" link button is rendered
cy.findByRole("button", { name: "Hide advanced" }).should("exist");
cy.get(".mx_SettingsTab.mx_AppearanceUserSettingsTab").percySnapshotElement(
cy.findByTestId("mx_AppearanceUserSettingsTab").percySnapshotElement(
"User settings tab - Appearance (advanced options expanded)",
{
// Emulate TabbedView's actual min and max widths
@ -74,7 +73,7 @@ describe("Appearance user settings tab", () => {
cy.openUserSettings("Appearance");
cy.get(".mx_AppearanceUserSettingsTab .mx_LayoutSwitcher_RadioButtons").within(() => {
cy.get(".mx_LayoutSwitcher_RadioButtons").within(() => {
// Assert that the layout selected by default is "Modern"
cy.get(".mx_LayoutSwitcher_RadioButton_selected .mx_StyledRadioButton_enabled").within(() => {
cy.findByLabelText("Modern").should("exist");
@ -84,7 +83,7 @@ describe("Appearance user settings tab", () => {
// Assert that the room layout is set to group (modern) layout
cy.get(".mx_RoomView_body[data-layout='group']").should("exist");
cy.get(".mx_AppearanceUserSettingsTab .mx_LayoutSwitcher_RadioButtons").within(() => {
cy.get(".mx_LayoutSwitcher_RadioButtons").within(() => {
// Select the first layout
cy.get(".mx_LayoutSwitcher_RadioButton").first().click();
@ -97,7 +96,7 @@ describe("Appearance user settings tab", () => {
// Assert that the room layout is set to IRC layout
cy.get(".mx_RoomView_body[data-layout='irc']").should("exist");
cy.get(".mx_AppearanceUserSettingsTab .mx_LayoutSwitcher_RadioButtons").within(() => {
cy.get(".mx_LayoutSwitcher_RadioButtons").within(() => {
// Select the last layout
cy.get(".mx_LayoutSwitcher_RadioButton").last().click();
@ -114,7 +113,7 @@ describe("Appearance user settings tab", () => {
it("should support changing font size by clicking the font slider", () => {
cy.openUserSettings("Appearance");
cy.get(".mx_SettingsTab.mx_AppearanceUserSettingsTab").within(() => {
cy.findByTestId("mx_AppearanceUserSettingsTab").within(() => {
cy.get(".mx_FontScalingPanel_fontSlider").within(() => {
cy.findByLabelText("Font size").should("exist");
});
@ -150,7 +149,7 @@ describe("Appearance user settings tab", () => {
it("should disable font size slider when custom font size is used", () => {
cy.openUserSettings("Appearance");
cy.get(".mx_FontScalingPanel").within(() => {
cy.findByTestId("mx_FontScalingPanel").within(() => {
cy.findByLabelText("Use custom size").click({ force: true }); // force click as checkbox size is zero
// Assert that the font slider is disabled
@ -167,10 +166,8 @@ describe("Appearance user settings tab", () => {
// Click "Show advanced" link button
cy.findByRole("button", { name: "Show advanced" }).click();
cy.get(".mx_AppearanceUserSettingsTab_Advanced").within(() => {
// force click as checkbox size is zero
cy.findByLabelText("Use a more compact 'Modern' layout").click({ force: true });
});
// force click as checkbox size is zero
cy.findByLabelText("Use a more compact 'Modern' layout").click({ force: true });
// Assert that the room layout is set to compact group (modern) layout
cy.get("#matrixchat .mx_MatrixChat_wrapper.mx_MatrixChat_useCompactLayout").should("exist");
@ -178,13 +175,7 @@ describe("Appearance user settings tab", () => {
it("should disable compact group (modern) layout option on IRC layout and bubble layout", () => {
const checkDisabled = () => {
cy.get(".mx_AppearanceUserSettingsTab_Advanced").within(() => {
cy.get(".mx_Checkbox")
.first()
.within(() => {
cy.get("input[type='checkbox'][disabled]").should("exist");
});
});
cy.findByLabelText("Use a more compact 'Modern' layout").should("be.disabled");
};
cy.openUserSettings("Appearance");
@ -193,7 +184,7 @@ describe("Appearance user settings tab", () => {
cy.findByRole("button", { name: "Show advanced" }).click();
// Enable IRC layout
cy.get(".mx_AppearanceUserSettingsTab .mx_LayoutSwitcher_RadioButtons").within(() => {
cy.get(".mx_LayoutSwitcher_RadioButtons").within(() => {
// Select the first layout
cy.get(".mx_LayoutSwitcher_RadioButton").first().click();
@ -206,7 +197,7 @@ describe("Appearance user settings tab", () => {
checkDisabled();
// Enable bubble layout
cy.get(".mx_AppearanceUserSettingsTab .mx_LayoutSwitcher_RadioButtons").within(() => {
cy.get(".mx_LayoutSwitcher_RadioButtons").within(() => {
// Select the first layout
cy.get(".mx_LayoutSwitcher_RadioButton").last().click();
@ -225,10 +216,8 @@ describe("Appearance user settings tab", () => {
// Click "Show advanced" link button
cy.findByRole("button", { name: "Show advanced" }).click();
cy.get(".mx_AppearanceUserSettingsTab_Advanced").within(() => {
// force click as checkbox size is zero
cy.findByLabelText("Use a system font").click({ force: true });
});
// force click as checkbox size is zero
cy.findByLabelText("Use a system font").click({ force: true });
// Assert that the font-family value was removed
cy.get("body").should("have.css", "font-family", '""');
@ -242,7 +231,7 @@ describe("Appearance user settings tab", () => {
it("should be rendered with the light theme selected", () => {
cy.openUserSettings("Appearance")
.get(".mx_ThemeChoicePanel")
.findByTestId("mx_ThemeChoicePanel")
.within(() => {
cy.findByTestId("checkbox-use-system-theme").within(() => {
cy.findByText("Match system theme").should("be.visible");
@ -252,7 +241,7 @@ describe("Appearance user settings tab", () => {
cy.get(".mx_Checkbox_checkmark").should("not.be.visible");
});
cy.get(".mx_ThemeSelectors").within(() => {
cy.findByTestId("theme-choice-panel-selectors").within(() => {
cy.get(".mx_ThemeSelector_light").should("exist");
cy.get(".mx_ThemeSelector_dark").should("exist");
@ -274,11 +263,11 @@ describe("Appearance user settings tab", () => {
"the system theme is clicked",
() => {
cy.openUserSettings("Appearance")
.get(".mx_ThemeChoicePanel")
.findByTestId("mx_ThemeChoicePanel")
.findByLabelText("Match system theme")
.click({ force: true }); // force click because the size of the checkbox is zero
cy.get(".mx_ThemeChoicePanel").within(() => {
cy.findByTestId("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");
@ -321,7 +310,7 @@ describe("Appearance user settings tab", () => {
});
cy.openUserSettings("Appearance")
.get(".mx_ThemeChoicePanel")
.findByTestId("mx_ThemeChoicePanel")
.findByLabelText("Use high contrast")
.click({ force: true }); // force click because the size of the checkbox is zero