diff --git a/cypress/e2e/timeline/timeline.spec.ts b/cypress/e2e/timeline/timeline.spec.ts index 246f4e3d773..8cc4b8a093c 100644 --- a/cypress/e2e/timeline/timeline.spec.ts +++ b/cypress/e2e/timeline/timeline.spec.ts @@ -238,7 +238,11 @@ describe("Timeline", () => { }); }); - it("should click top left of view source event toggle", () => { + 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,8 +258,44 @@ 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") + cy.get(".mx_EventTile_last[data-layout=group] .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").should("be.visible"); + + // Click again to collapse the source + 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").should("not.exist"); + + // 2. clickability of view source toggle on IRC layout + + // 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(() => { @@ -263,7 +303,7 @@ 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[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", () => { 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 */