From dfc4214fcbe72acf1036267f9339ac94738f70d1 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Sat, 25 Mar 2023 02:43:10 +0900 Subject: [PATCH 1/3] Change the category of a test from 'message displaying' to 'configure room' The test is not related to messages, instead it checks an element inside GELS (generic event list summary) on a configured room without a message Signed-off-by: Suguru Hirahara --- cypress/e2e/timeline/timeline.spec.ts | 74 +++++++++++++-------------- 1 file changed, 37 insertions(+), 37 deletions(-) diff --git a/cypress/e2e/timeline/timeline.spec.ts b/cypress/e2e/timeline/timeline.spec.ts index e6b344f47e1..47a77e258af 100644 --- a/cypress/e2e/timeline/timeline.spec.ts +++ b/cypress/e2e/timeline/timeline.spec.ts @@ -244,6 +244,43 @@ describe("Timeline", () => { cy.get(".mx_MainSplit").percySnapshotElement("Expanded GELS on modern layout", { percyCSS }); }); + it("should click 'collapse' link button on the first hovered info event line on bubble layout", () => { + cy.visit("/#/room/" + roomId); + cy.setSettingValue("layout", null, SettingLevel.DEVICE, Layout.Bubble); + cy.contains( + ".mx_RoomView_body .mx_GenericEventListSummary[data-layout=bubble] " + + ".mx_GenericEventListSummary_summary", + "created and configured the room.", + ).should("exist"); + + // Click "expand" link button + cy.get(".mx_GenericEventListSummary_toggle[aria-expanded=false]").click(); + + // Make sure the "expand" link button worked + cy.get(".mx_GenericEventListSummary_toggle[aria-expanded=true]").should("exist"); + + // Make sure spacer is not visible on bubble layout + cy.get(".mx_GenericEventListSummary[data-layout=bubble] .mx_GenericEventListSummary_spacer").should( + "not.be.visible", // See: _GenericEventListSummary.pcss + ); + + // Exclude timestamp from snapshot + const percyCSS = ".mx_MessageTimestamp { visibility: hidden !important; }"; + + // Save snapshot of expanded generic event list summary on bubble layout + cy.get(".mx_MainSplit").percySnapshotElement("Expanded GELS on bubble layout", { percyCSS }); + + // Click "collapse" link button on the first hovered info event line + cy.get(".mx_GenericEventListSummary_unstyledList .mx_EventTile_info:first-of-type").realHover(); + cy.get(".mx_GenericEventListSummary_toggle[aria-expanded=true]").click({ force: false }); + + // Make sure "collapse" link button worked + cy.get(".mx_GenericEventListSummary_toggle[aria-expanded=false]").should("exist"); + + // Save snapshot of collapsed generic event list summary on bubble layout + cy.get(".mx_MainSplit").percySnapshotElement("Collapsed GELS on bubble layout", { percyCSS }); + }); + it("should add inline start margin to an event line on IRC layout", () => { cy.visit("/#/room/" + roomId); cy.setSettingValue("layout", null, SettingLevel.DEVICE, Layout.IRC); @@ -625,43 +662,6 @@ describe("Timeline", () => { cy.get(".mx_EventTile[data-layout=irc] .mx_ViewSourceEvent_expanded").should("be.visible"); }); - it("should click 'collapse' link button on the first hovered info event line on bubble layout", () => { - cy.visit("/#/room/" + roomId); - cy.setSettingValue("layout", null, SettingLevel.DEVICE, Layout.Bubble); - cy.contains( - ".mx_RoomView_body .mx_GenericEventListSummary[data-layout=bubble] " + - ".mx_GenericEventListSummary_summary", - "created and configured the room.", - ).should("exist"); - - // Click "expand" link button - cy.get(".mx_GenericEventListSummary_toggle[aria-expanded=false]").click(); - - // Make sure the "expand" link button worked - cy.get(".mx_GenericEventListSummary_toggle[aria-expanded=true]").should("exist"); - - // Make sure spacer is not visible on bubble layout - cy.get(".mx_GenericEventListSummary[data-layout=bubble] .mx_GenericEventListSummary_spacer").should( - "not.be.visible", // See: _GenericEventListSummary.pcss - ); - - // Exclude timestamp from snapshot - const percyCSS = ".mx_MessageTimestamp { visibility: hidden !important; }"; - - // Save snapshot of expanded generic event list summary on bubble layout - cy.get(".mx_MainSplit").percySnapshotElement("Expanded GELS on bubble layout", { percyCSS }); - - // Click "collapse" link button on the first hovered info event line - cy.get(".mx_GenericEventListSummary_unstyledList .mx_EventTile_info:first-of-type").realHover(); - cy.get(".mx_GenericEventListSummary_toggle[aria-expanded=true]").click({ force: false }); - - // Make sure "collapse" link button worked - cy.get(".mx_GenericEventListSummary_toggle[aria-expanded=false]").should("exist"); - - // Save snapshot of collapsed generic event list summary on bubble layout - cy.get(".mx_MainSplit").percySnapshotElement("Collapsed GELS on bubble layout", { percyCSS }); - }); - it("should highlight search result words regardless of formatting", () => { sendEvent(roomId); sendEvent(roomId, true); From 4388eda29db8e238afd0e128e211d337287f6be3 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Sat, 25 Mar 2023 03:00:46 +0900 Subject: [PATCH 2/3] Rename the test to mention GELS Signed-off-by: Suguru Hirahara --- cypress/e2e/timeline/timeline.spec.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/cypress/e2e/timeline/timeline.spec.ts b/cypress/e2e/timeline/timeline.spec.ts index 47a77e258af..738203ae63a 100644 --- a/cypress/e2e/timeline/timeline.spec.ts +++ b/cypress/e2e/timeline/timeline.spec.ts @@ -244,7 +244,7 @@ describe("Timeline", () => { cy.get(".mx_MainSplit").percySnapshotElement("Expanded GELS on modern layout", { percyCSS }); }); - it("should click 'collapse' link button on the first hovered info event line on bubble layout", () => { + it("should click 'collapse' on the first hovered info event line inside GELS on bubble layout", () => { cy.visit("/#/room/" + roomId); cy.setSettingValue("layout", null, SettingLevel.DEVICE, Layout.Bubble); cy.contains( From 23840f36823764c4e9fe7a14ec0ea18571335cc0 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Sat, 25 Mar 2023 03:05:58 +0900 Subject: [PATCH 3/3] Add a comment about the test, whose aim can become unclear without the comment Signed-off-by: Suguru Hirahara --- cypress/e2e/timeline/timeline.spec.ts | 3 +++ 1 file changed, 3 insertions(+) diff --git a/cypress/e2e/timeline/timeline.spec.ts b/cypress/e2e/timeline/timeline.spec.ts index 738203ae63a..38b784b4c16 100644 --- a/cypress/e2e/timeline/timeline.spec.ts +++ b/cypress/e2e/timeline/timeline.spec.ts @@ -245,6 +245,9 @@ describe("Timeline", () => { }); it("should click 'collapse' on the first hovered info event line inside GELS on bubble layout", () => { + // This test checks clickability of the "Collapse" link button, which had been covered with + // MessageActionBar's safe area - https://github.com/vector-im/element-web/issues/22864 + cy.visit("/#/room/" + roomId); cy.setSettingValue("layout", null, SettingLevel.DEVICE, Layout.Bubble); cy.contains(