Use semantic headings in user settings - integrations and account deletion (#10837)

* allow testids in settings sections

* use semantic headings in LabsUserSettingsTab

* put back margin var

* use SettingsTab wrapper

* use semantic headings for deactivate acc section

* use semantic heading in manage integratios

* i18n

* explicit cast to boolean

* Update src/components/views/settings/shared/SettingsSubsection.tsx

Co-authored-by: Richard van der Hoff <1389908+richvdh@users.noreply.github.com>

* test manage integration settings

* test deactivate account section display

* remove debug

* fix cypress test

---------

Co-authored-by: Richard van der Hoff <1389908+richvdh@users.noreply.github.com>
This commit is contained in:
Kerry 2023-05-17 19:52:44 +12:00 committed by GitHub
parent c3687489dd
commit 8cd84b0e7b
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
7 changed files with 232 additions and 54 deletions

View file

@ -43,7 +43,7 @@ describe("General user settings tab", () => {
// Exclude userId from snapshots
const percyCSS = ".mx_ProfileSettings_profile_controls_userId { visibility: hidden !important; }";
cy.get(".mx_SettingsTab.mx_GeneralUserSettingsTab").percySnapshotElement("User settings tab - General", {
cy.findByTestId("mx_GeneralUserSettingsTab").percySnapshotElement("User settings tab - General", {
percyCSS,
// Emulate TabbedView's actual min and max widths
// 580: '.mx_UserSettingsDialog .mx_TabbedView' min-width
@ -51,7 +51,7 @@ describe("General user settings tab", () => {
widths: [580, 796],
});
cy.get(".mx_SettingsTab.mx_GeneralUserSettingsTab").within(() => {
cy.findByTestId("mx_GeneralUserSettingsTab").within(() => {
// Assert that the top heading is rendered
cy.findByTestId("general").should("have.text", "General").should("be.visible");
@ -156,16 +156,10 @@ describe("General user settings tab", () => {
// Make sure integration manager's toggle switch is enabled
cy.get(".mx_ToggleSwitch_enabled").should("be.visible");
// Assert space between "Manage integrations" and the integration server address is set to 4px;
cy.get(".mx_SetIntegrationManager_heading_manager").should("have.css", "column-gap", "4px");
cy.get(".mx_SetIntegrationManager_heading_manager").within(() => {
cy.get(".mx_SettingsTab_heading").should("have.text", "Manage integrations");
// Assert the headings' inline end margin values are set to zero in favor of the column-gap declaration
cy.get(".mx_SettingsTab_heading").should("have.css", "margin-inline-end", "0px");
cy.get(".mx_SettingsTab_subheading").should("have.css", "margin-inline-end", "0px");
});
cy.get(".mx_SetIntegrationManager_heading_manager").should(
"have.text",
"Manage integrations(scalar.vector.im)",
);
});
// Assert the account deactivation button is displayed
@ -178,7 +172,7 @@ describe("General user settings tab", () => {
});
it("should support adding and removing a profile picture", () => {
cy.get(".mx_SettingsTab.mx_GeneralUserSettingsTab .mx_ProfileSettings").within(() => {
cy.get(".mx_SettingsTab .mx_ProfileSettings").within(() => {
// Upload a picture
cy.get(".mx_ProfileSettings_avatarUpload").selectFile("cypress/fixtures/riot.png", { force: true });
@ -225,7 +219,7 @@ describe("General user settings tab", () => {
});
it("should support changing a display name", () => {
cy.get(".mx_SettingsTab.mx_GeneralUserSettingsTab .mx_ProfileSettings").within(() => {
cy.get(".mx_SettingsTab .mx_ProfileSettings").within(() => {
// Change the diaplay name to USER_NAME_NEW
cy.findByRole("textbox", { name: "Display Name" }).type(`{selectAll}{del}${USER_NAME_NEW}{enter}`);
});