From 6e630150f665c67321c3fa95a0a5f43068fdd132 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Wed, 1 Mar 2023 17:35:15 +0900 Subject: [PATCH 1/7] Display view source toggle on IRC layout Signed-off-by: Suguru Hirahara --- res/css/views/rooms/_IRCLayout.pcss | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/res/css/views/rooms/_IRCLayout.pcss b/res/css/views/rooms/_IRCLayout.pcss index 02ae02fa5eb..cc10e97609c 100644 --- a/res/css/views/rooms/_IRCLayout.pcss +++ b/res/css/views/rooms/_IRCLayout.pcss @@ -130,12 +130,17 @@ $irc-line-height: $font-18px; .mx_TextualEvent, .mx_ViewSourceEvent, .mx_MTextBody { - display: inline-block; /* add a 1px padding top and bottom because our larger emoji font otherwise gets cropped by anti-zalgo */ padding: var(--EventTile_irc_line-padding-block) 0; } + .mx_EventTile_e2eIcon, + .mx_TextualEvent, + .mx_MTextBody { + display: inline-block; + } + .mx_ReplyTile { .mx_MTextBody { display: -webkit-box; /* Enable -webkit-line-clamp */ From d474eb6e039633e8381b311e3e099491f62e4a3e Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Wed, 1 Mar 2023 17:47:54 +0900 Subject: [PATCH 2/7] Add a test Signed-off-by: Suguru Hirahara --- cypress/e2e/timeline/timeline.spec.ts | 39 +++++++++++++++++++++++++++ 1 file changed, 39 insertions(+) diff --git a/cypress/e2e/timeline/timeline.spec.ts b/cypress/e2e/timeline/timeline.spec.ts index 246f4e3d773..f609ac14b83 100644 --- a/cypress/e2e/timeline/timeline.spec.ts +++ b/cypress/e2e/timeline/timeline.spec.ts @@ -238,6 +238,45 @@ describe("Timeline", () => { }); }); + it("should click view source toggle on IRC layout", () => { + sendEvent(roomId); + cy.visit("/#/room/" + roomId); + cy.setSettingValue("showHiddenEventsInTimeline", null, SettingLevel.DEVICE, true); + cy.contains( + ".mx_RoomView_body .mx_GenericEventListSummary " + ".mx_GenericEventListSummary_summary", + "created and configured the room.", + ).should("exist"); + + // Edit message + cy.contains(".mx_RoomView_body .mx_EventTile .mx_EventTile_line", "Message").within(() => { + cy.get('[aria-label="Edit"]').click({ force: true }); // Cypress has no ability to hover + cy.get(".mx_BasicMessageComposer_input").type("Edit{enter}"); + }); + cy.contains(".mx_RoomView_body .mx_EventTile[data-scroll-tokens]", "MessageEdit").should("exist"); + + // Enable IRC layout + cy.setSettingValue("layout", null, SettingLevel.DEVICE, Layout.IRC); + + // Exclude timestamp from snapshot + const percyCSS = ".mx_MessageTimestamp { visibility: hidden !important; }"; + + // Hover the view source toggle on IRC layout + cy.get(".mx_GenericEventListSummary[data-layout=irc] .mx_EventTile .mx_ViewSourceEvent") + .should("exist") + .realHover() + .percySnapshotElement("Hovered hidden event line on IRC layout", { percyCSS }) + + // Click view source event toggle + cy.get(".mx_GenericEventListSummary[data-layout=irc] .mx_EventTile .mx_ViewSourceEvent") + .should("exist") + .realHover() + .within(() => { + cy.get(".mx_ViewSourceEvent_toggle").click("topLeft", { force: false }); + }); + + // Make sure the expand toggle worked + cy.get(".mx_EventTile[data-layout=irc] .mx_ViewSourceEvent_expanded").should("be.visible"); + it("should click top left of view source event toggle", () => { sendEvent(roomId); cy.visit("/#/room/" + roomId); From 21d1664d47919730f8379d8b8f31c73cb556d078 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Wed, 1 Mar 2023 17:54:06 +0900 Subject: [PATCH 3/7] Merge tests Signed-off-by: Suguru Hirahara --- cypress/e2e/timeline/timeline.spec.ts | 52 +++++++++++++-------------- 1 file changed, 24 insertions(+), 28 deletions(-) diff --git a/cypress/e2e/timeline/timeline.spec.ts b/cypress/e2e/timeline/timeline.spec.ts index f609ac14b83..64d94cced48 100644 --- a/cypress/e2e/timeline/timeline.spec.ts +++ b/cypress/e2e/timeline/timeline.spec.ts @@ -238,7 +238,11 @@ describe("Timeline", () => { }); }); - it("should click view source toggle on IRC layout", () => { + it("should click view source event toggle", () => { + // This test checks: + // 1. clickability of top left of view source event toggle + // 2. clickability of view source toggle on IRC layout + sendEvent(roomId); cy.visit("/#/room/" + roomId); cy.setSettingValue("showHiddenEventsInTimeline", null, SettingLevel.DEVICE, true); @@ -254,6 +258,25 @@ describe("Timeline", () => { }); cy.contains(".mx_RoomView_body .mx_EventTile[data-scroll-tokens]", "MessageEdit").should("exist"); + // 1. clickability of top left of view source event toggle + + // Click top left of the event toggle, which should not be covered by MessageActionBar's safe area + cy.get(".mx_EventTile:not(:first-child) .mx_ViewSourceEvent") + .should("exist") + .realHover() + .within(() => { + cy.get(".mx_ViewSourceEvent_toggle").click("topLeft", { force: false }); + }); + + // Make sure the expand toggle worked + cy.get(".mx_EventTile .mx_ViewSourceEvent_expanded .mx_ViewSourceEvent_toggle").should("be.visible"); + + // 2. clickability of view source toggle on IRC layout + + // Click again to restore the default status + cy.get(".mx_EventTile:not(:first-child) .mx_ViewSourceEvent .mx_ViewSourceEvent_toggle") + .click("topLeft", { force: false }); + // Enable IRC layout cy.setSettingValue("layout", null, SettingLevel.DEVICE, Layout.IRC); @@ -276,33 +299,6 @@ describe("Timeline", () => { // Make sure the expand toggle worked cy.get(".mx_EventTile[data-layout=irc] .mx_ViewSourceEvent_expanded").should("be.visible"); - - it("should click top left of view source event toggle", () => { - sendEvent(roomId); - cy.visit("/#/room/" + roomId); - cy.setSettingValue("showHiddenEventsInTimeline", null, SettingLevel.DEVICE, true); - cy.contains( - ".mx_RoomView_body .mx_GenericEventListSummary " + ".mx_GenericEventListSummary_summary", - "created and configured the room.", - ).should("exist"); - - // Edit message - cy.contains(".mx_RoomView_body .mx_EventTile .mx_EventTile_line", "Message").within(() => { - cy.get('[aria-label="Edit"]').click({ force: true }); // Cypress has no ability to hover - cy.get(".mx_BasicMessageComposer_input").type("Edit{enter}"); - }); - cy.contains(".mx_RoomView_body .mx_EventTile[data-scroll-tokens]", "MessageEdit").should("exist"); - - // Click top left of the event toggle, which should not be covered by MessageActionBar's safe area - cy.get(".mx_EventTile:not(:first-child) .mx_ViewSourceEvent") - .should("exist") - .realHover() - .within(() => { - cy.get(".mx_ViewSourceEvent_toggle").click("topLeft", { force: false }); - }); - - // Make sure the expand toggle worked - cy.get(".mx_EventTile .mx_ViewSourceEvent_expanded .mx_ViewSourceEvent_toggle").should("be.visible"); }); it("should click 'collapse' link button on the first hovered info event line on bubble layout", () => { From 98f5520349237d6a66cac306b2debc1bcf14a5d7 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Wed, 1 Mar 2023 18:05:18 +0900 Subject: [PATCH 4/7] Collapse hidden event source before checking clickability of view source toggle on IRC layout Signed-off-by: Suguru Hirahara --- cypress/e2e/timeline/timeline.spec.ts | 13 +++++++++---- 1 file changed, 9 insertions(+), 4 deletions(-) diff --git a/cypress/e2e/timeline/timeline.spec.ts b/cypress/e2e/timeline/timeline.spec.ts index 64d94cced48..a448ddd0a77 100644 --- a/cypress/e2e/timeline/timeline.spec.ts +++ b/cypress/e2e/timeline/timeline.spec.ts @@ -271,11 +271,16 @@ describe("Timeline", () => { // Make sure the expand toggle worked cy.get(".mx_EventTile .mx_ViewSourceEvent_expanded .mx_ViewSourceEvent_toggle").should("be.visible"); - // 2. clickability of view source toggle on IRC layout + // Click again to collapse the source + cy.get(".mx_EventTile:not(:first-child) .mx_ViewSourceEvent") + .should("exist") + .realHover() + .within(() => { + cy.get(".mx_ViewSourceEvent_toggle").click("topLeft", { force: false }); + }); + cy.get(".mx_EventTile .mx_ViewSourceEvent_expanded .mx_ViewSourceEvent_toggle").should("not.exist"); - // Click again to restore the default status - cy.get(".mx_EventTile:not(:first-child) .mx_ViewSourceEvent .mx_ViewSourceEvent_toggle") - .click("topLeft", { force: false }); + // 2. clickability of view source toggle on IRC layout // Enable IRC layout cy.setSettingValue("layout", null, SettingLevel.DEVICE, Layout.IRC); From 80d7a338e04edf674190b56c37965b406d749b59 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Wed, 1 Mar 2023 19:15:42 +0900 Subject: [PATCH 5/7] Select view source event under the edited line on the test Signed-off-by: Suguru Hirahara --- cypress/e2e/timeline/timeline.spec.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/cypress/e2e/timeline/timeline.spec.ts b/cypress/e2e/timeline/timeline.spec.ts index a448ddd0a77..e9f041182cb 100644 --- a/cypress/e2e/timeline/timeline.spec.ts +++ b/cypress/e2e/timeline/timeline.spec.ts @@ -261,7 +261,7 @@ describe("Timeline", () => { // 1. clickability of top left of view source event toggle // Click top left of the event toggle, which should not be covered by MessageActionBar's safe area - cy.get(".mx_EventTile:not(:first-child) .mx_ViewSourceEvent") + cy.get(".mx_GenericEventListSummary[layout=group] .mx_EventTile .mx_ViewSourceEvent") .should("exist") .realHover() .within(() => { @@ -272,7 +272,7 @@ describe("Timeline", () => { cy.get(".mx_EventTile .mx_ViewSourceEvent_expanded .mx_ViewSourceEvent_toggle").should("be.visible"); // Click again to collapse the source - cy.get(".mx_EventTile:not(:first-child) .mx_ViewSourceEvent") + cy.get(".mx_GenericEventListSummary[layout=group] .mx_EventTile .mx_ViewSourceEvent") .should("exist") .realHover() .within(() => { From 0c669e498baa848038b0e4002a80433c04802439 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Wed, 1 Mar 2023 19:38:22 +0900 Subject: [PATCH 6/7] Fix the test Signed-off-by: Suguru Hirahara --- cypress/e2e/timeline/timeline.spec.ts | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/cypress/e2e/timeline/timeline.spec.ts b/cypress/e2e/timeline/timeline.spec.ts index e9f041182cb..b9a5244353a 100644 --- a/cypress/e2e/timeline/timeline.spec.ts +++ b/cypress/e2e/timeline/timeline.spec.ts @@ -261,7 +261,7 @@ describe("Timeline", () => { // 1. clickability of top left of view source event toggle // Click top left of the event toggle, which should not be covered by MessageActionBar's safe area - cy.get(".mx_GenericEventListSummary[layout=group] .mx_EventTile .mx_ViewSourceEvent") + cy.get(".mx_EventTile_last[data-layout=group] .mx_ViewSourceEvent") .should("exist") .realHover() .within(() => { @@ -269,16 +269,16 @@ describe("Timeline", () => { }); // Make sure the expand toggle worked - cy.get(".mx_EventTile .mx_ViewSourceEvent_expanded .mx_ViewSourceEvent_toggle").should("be.visible"); + cy.get(".mx_EventTile .mx_ViewSourceEvent_expanded").should("be.visible"); // Click again to collapse the source - cy.get(".mx_GenericEventListSummary[layout=group] .mx_EventTile .mx_ViewSourceEvent") + cy.get(".mx_EventTile_last[data-layout=group] .mx_ViewSourceEvent") .should("exist") .realHover() .within(() => { cy.get(".mx_ViewSourceEvent_toggle").click("topLeft", { force: false }); }); - cy.get(".mx_EventTile .mx_ViewSourceEvent_expanded .mx_ViewSourceEvent_toggle").should("not.exist"); + cy.get(".mx_EventTile .mx_ViewSourceEvent_expanded").should("not.exist"); // 2. clickability of view source toggle on IRC layout From cd755dc457d40705fb8320dc78a9887756e73a55 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Wed, 1 Mar 2023 20:30:14 +0900 Subject: [PATCH 7/7] lint 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 b9a5244353a..8cc4b8a093c 100644 --- a/cypress/e2e/timeline/timeline.spec.ts +++ b/cypress/e2e/timeline/timeline.spec.ts @@ -292,7 +292,7 @@ describe("Timeline", () => { cy.get(".mx_GenericEventListSummary[data-layout=irc] .mx_EventTile .mx_ViewSourceEvent") .should("exist") .realHover() - .percySnapshotElement("Hovered hidden event line on IRC layout", { percyCSS }) + .percySnapshotElement("Hovered hidden event line on IRC layout", { percyCSS }); // Click view source event toggle cy.get(".mx_GenericEventListSummary[data-layout=irc] .mx_EventTile .mx_ViewSourceEvent")