From 31a65a6e1d4d56f739e52e962f86bd020be5f5b3 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Fri, 24 Feb 2023 05:29:21 +0900 Subject: [PATCH 1/7] Fix spacing of headings of integration manager on General settings tab Signed-off-by: Suguru Hirahara --- .../settings/set-integration-manager.spec.ts | 56 +++++++++++++++++++ .../settings/_SetIntegrationManager.pcss | 1 + 2 files changed, 57 insertions(+) create mode 100644 cypress/e2e/settings/set-integration-manager.spec.ts diff --git a/cypress/e2e/settings/set-integration-manager.spec.ts b/cypress/e2e/settings/set-integration-manager.spec.ts new file mode 100644 index 00000000000..6b6a2c84312 --- /dev/null +++ b/cypress/e2e/settings/set-integration-manager.spec.ts @@ -0,0 +1,56 @@ +/* +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"; + +const USER_NAME = "Alice"; + +describe("Set integration manager on General settings tab", () => { + let homeserver: HomeserverInstance; + + beforeEach(() => { + cy.startHomeserver("default").then((data) => { + homeserver = data; + cy.initTestUser(homeserver, USER_NAME); + }); + }); + + afterEach(() => { + cy.stopHomeserver(homeserver); + }); + + it("should set integration manager", () => { + cy.openUserSettings("General"); + cy.contains("Manage integrations").should("exist"); + + // Make sure integration manager's toggle switch is enabled + cy.get(".mx_SetIntegrationManager .mx_ToggleSwitch_enabled").should("exist"); + + // Check the default margin set to mx_SettingsTab_heading on the settings tab + cy.get(".mx_SettingsTab > .mx_SettingsTab_heading").should("have.css", "margin-right", "100px") + + // Make sure margin of headers on "Manage integrations" row is set to zero + cy.get(".mx_SettingsTab .mx_SetIntegrationManager_heading_manager > .mx_SettingsTab_heading") + .should("have.css", "margin-inline-end", "0px") + cy.get(".mx_SettingsTab .mx_SetIntegrationManager_heading_manager > .mx_SettingsTab_subheading") + .should("have.css", "margin-inline-end", "0px") + + cy.get(".mx_SettingsTab .mx_SetIntegrationManager_heading_manager") + .percySnapshotElement("'Manage integrations' on General settings tab"); + }); +}); diff --git a/res/css/views/settings/_SetIntegrationManager.pcss b/res/css/views/settings/_SetIntegrationManager.pcss index c6b5d9283b8..30feddb0433 100644 --- a/res/css/views/settings/_SetIntegrationManager.pcss +++ b/res/css/views/settings/_SetIntegrationManager.pcss @@ -29,6 +29,7 @@ limitations under the License. .mx_SettingsTab_subheading { margin-top: 0; margin-bottom: 0; + margin-inline-end: 0; /* Cancel the default right (inline-end) margin */ } } From c2c8078c8395c5440c7c2c2decd460101f35a0ec Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Fri, 24 Feb 2023 13:37:27 +0900 Subject: [PATCH 2/7] lint Signed-off-by: Suguru Hirahara --- .../settings/set-integration-manager.spec.ts | 23 ++++++++++++------- 1 file changed, 15 insertions(+), 8 deletions(-) diff --git a/cypress/e2e/settings/set-integration-manager.spec.ts b/cypress/e2e/settings/set-integration-manager.spec.ts index 6b6a2c84312..71fe97f7316 100644 --- a/cypress/e2e/settings/set-integration-manager.spec.ts +++ b/cypress/e2e/settings/set-integration-manager.spec.ts @@ -42,15 +42,22 @@ describe("Set integration manager on General settings tab", () => { cy.get(".mx_SetIntegrationManager .mx_ToggleSwitch_enabled").should("exist"); // Check the default margin set to mx_SettingsTab_heading on the settings tab - cy.get(".mx_SettingsTab > .mx_SettingsTab_heading").should("have.css", "margin-right", "100px") + cy.get(".mx_SettingsTab > .mx_SettingsTab_heading").should("have.css", "margin-right", "100px"); // Make sure margin of headers on "Manage integrations" row is set to zero - cy.get(".mx_SettingsTab .mx_SetIntegrationManager_heading_manager > .mx_SettingsTab_heading") - .should("have.css", "margin-inline-end", "0px") - cy.get(".mx_SettingsTab .mx_SetIntegrationManager_heading_manager > .mx_SettingsTab_subheading") - .should("have.css", "margin-inline-end", "0px") - - cy.get(".mx_SettingsTab .mx_SetIntegrationManager_heading_manager") - .percySnapshotElement("'Manage integrations' on General settings tab"); + cy.get(".mx_SettingsTab .mx_SetIntegrationManager_heading_manager > .mx_SettingsTab_heading").should( + "have.css", + "margin-inline-end", + "0px", + ); + cy.get(".mx_SettingsTab .mx_SetIntegrationManager_heading_manager > .mx_SettingsTab_subheading").should( + "have.css", + "margin-inline-end", + "0px", + ); + + cy.get(".mx_SettingsTab .mx_SetIntegrationManager_heading_manager").percySnapshotElement( + "'Manage integrations' on General settings tab", + ); }); }); From 9daa4dc6eed3a5bf61cd3900bd56257f9e5e6ef6 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Fri, 24 Feb 2023 14:57:53 +0900 Subject: [PATCH 3/7] Check the column gap Signed-off-by: Suguru Hirahara --- cypress/e2e/settings/set-integration-manager.spec.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/cypress/e2e/settings/set-integration-manager.spec.ts b/cypress/e2e/settings/set-integration-manager.spec.ts index 71fe97f7316..f40a16aab3f 100644 --- a/cypress/e2e/settings/set-integration-manager.spec.ts +++ b/cypress/e2e/settings/set-integration-manager.spec.ts @@ -44,7 +44,7 @@ describe("Set integration manager on General settings tab", () => { // Check the default margin set to mx_SettingsTab_heading on the settings tab cy.get(".mx_SettingsTab > .mx_SettingsTab_heading").should("have.css", "margin-right", "100px"); - // Make sure margin of headers on "Manage integrations" row is set to zero + // Make sure the space between "Manage integrations" and the integration server address is set to 4px; cy.get(".mx_SettingsTab .mx_SetIntegrationManager_heading_manager > .mx_SettingsTab_heading").should( "have.css", "margin-inline-end", @@ -55,6 +55,7 @@ describe("Set integration manager on General settings tab", () => { "margin-inline-end", "0px", ); + cy.get(".mx_SettingsTab .mx_SetIntegrationManager_heading_manager").should("have.css", "column-gap", "4px"); cy.get(".mx_SettingsTab .mx_SetIntegrationManager_heading_manager").percySnapshotElement( "'Manage integrations' on General settings tab", From e6b84b183e5ef58100049171edc50b55b4a6f0f4 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Mon, 27 Mar 2023 15:35:19 +0900 Subject: [PATCH 4/7] Iterate Signed-off-by: Suguru Hirahara --- .../settings/set-integration-manager.spec.ts | 38 ++++++++----------- 1 file changed, 16 insertions(+), 22 deletions(-) diff --git a/cypress/e2e/settings/set-integration-manager.spec.ts b/cypress/e2e/settings/set-integration-manager.spec.ts index f40a16aab3f..33030c24b97 100644 --- a/cypress/e2e/settings/set-integration-manager.spec.ts +++ b/cypress/e2e/settings/set-integration-manager.spec.ts @@ -20,7 +20,7 @@ import { HomeserverInstance } from "../../plugins/utils/homeserver"; const USER_NAME = "Alice"; -describe("Set integration manager on General settings tab", () => { +describe("Set integration manager", () => { let homeserver: HomeserverInstance; beforeEach(() => { @@ -34,31 +34,25 @@ describe("Set integration manager on General settings tab", () => { cy.stopHomeserver(homeserver); }); - it("should set integration manager", () => { + it("should be correctly rendered", () => { cy.openUserSettings("General"); - cy.contains("Manage integrations").should("exist"); - // Make sure integration manager's toggle switch is enabled - cy.get(".mx_SetIntegrationManager .mx_ToggleSwitch_enabled").should("exist"); + cy.get(".mx_SetIntegrationManager").within(() => { + // Assert the toggle switch is enabled by default + cy.get(".mx_ToggleSwitch_enabled").should("exist"); - // Check the default margin set to mx_SettingsTab_heading on the settings tab - cy.get(".mx_SettingsTab > .mx_SettingsTab_heading").should("have.css", "margin-right", "100px"); + // 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"); - // Make sure the space between "Manage integrations" and the integration server address is set to 4px; - cy.get(".mx_SettingsTab .mx_SetIntegrationManager_heading_manager > .mx_SettingsTab_heading").should( - "have.css", - "margin-inline-end", - "0px", - ); - cy.get(".mx_SettingsTab .mx_SetIntegrationManager_heading_manager > .mx_SettingsTab_subheading").should( - "have.css", - "margin-inline-end", - "0px", - ); - cy.get(".mx_SettingsTab .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"); - cy.get(".mx_SettingsTab .mx_SetIntegrationManager_heading_manager").percySnapshotElement( - "'Manage integrations' on General settings tab", - ); + // 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").percySnapshotElement("'Manage integrations' on General settings tab"); }); }); From 9151d6a34de109c0dffa95046397c13f4b61f5a4 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Tue, 28 Mar 2023 02:34:30 +0900 Subject: [PATCH 5/7] Scroll to 'mx_SetIntegrationManager' and take a snapshot of the dialog Signed-off-by: Suguru Hirahara --- cypress/e2e/settings/set-integration-manager.spec.ts | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/cypress/e2e/settings/set-integration-manager.spec.ts b/cypress/e2e/settings/set-integration-manager.spec.ts index 33030c24b97..c681702d46b 100644 --- a/cypress/e2e/settings/set-integration-manager.spec.ts +++ b/cypress/e2e/settings/set-integration-manager.spec.ts @@ -53,6 +53,11 @@ describe("Set integration manager", () => { }); }); - cy.get(".mx_SetIntegrationManager").percySnapshotElement("'Manage integrations' on General settings tab"); + // Scroll to 'mx_SetIntegrationManager' and take a snapshot of the dialog + cy.get(".mx_SetIntegrationManager") + .scrollIntoView() + .should("be.visible") + .get(".mx_Dialog_wrapper") + .percySnapshotElement("'Manage integrations' on General settings tab"); }); }); From 1647be740397646e27f690f8c6d676fe0e6dc9a6 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Tue, 28 Mar 2023 03:19:08 +0900 Subject: [PATCH 6/7] Revert "Scroll to 'mx_SetIntegrationManager' and take a snapshot of the dialog" This reverts commit 9151d6a34de109c0dffa95046397c13f4b61f5a4. --- cypress/e2e/settings/set-integration-manager.spec.ts | 7 +------ 1 file changed, 1 insertion(+), 6 deletions(-) diff --git a/cypress/e2e/settings/set-integration-manager.spec.ts b/cypress/e2e/settings/set-integration-manager.spec.ts index c681702d46b..33030c24b97 100644 --- a/cypress/e2e/settings/set-integration-manager.spec.ts +++ b/cypress/e2e/settings/set-integration-manager.spec.ts @@ -53,11 +53,6 @@ describe("Set integration manager", () => { }); }); - // Scroll to 'mx_SetIntegrationManager' and take a snapshot of the dialog - cy.get(".mx_SetIntegrationManager") - .scrollIntoView() - .should("be.visible") - .get(".mx_Dialog_wrapper") - .percySnapshotElement("'Manage integrations' on General settings tab"); + cy.get(".mx_SetIntegrationManager").percySnapshotElement("'Manage integrations' on General settings tab"); }); }); From cb7c783058939cc9ce0aa3fd9a07eab19b4c7d3b Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Tue, 28 Mar 2023 03:24:22 +0900 Subject: [PATCH 7/7] Specify actual width of mx_SetIntegrationManager Signed-off-by: Suguru Hirahara --- cypress/e2e/settings/set-integration-manager.spec.ts | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/cypress/e2e/settings/set-integration-manager.spec.ts b/cypress/e2e/settings/set-integration-manager.spec.ts index 33030c24b97..57981573944 100644 --- a/cypress/e2e/settings/set-integration-manager.spec.ts +++ b/cypress/e2e/settings/set-integration-manager.spec.ts @@ -53,6 +53,8 @@ describe("Set integration manager", () => { }); }); - cy.get(".mx_SetIntegrationManager").percySnapshotElement("'Manage integrations' on General settings tab"); + cy.get(".mx_SetIntegrationManager").percySnapshotElement("'Manage integrations' on General settings tab", { + widths: [692], // actual width of mx_SetIntegrationManager + }); }); });