From c9e7aaf24bedc79330fc835b6fc0d1338d68daf5 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Fri, 17 Mar 2023 07:48:34 +0000 Subject: [PATCH] Add a basic E2E test for event tiles (#10306) Signed-off-by: Suguru Hirahara --- cypress/e2e/timeline/timeline.spec.ts | 117 ++++++++++++++++++++++++++ 1 file changed, 117 insertions(+) diff --git a/cypress/e2e/timeline/timeline.spec.ts b/cypress/e2e/timeline/timeline.spec.ts index 537b796f34..1ea4d5d129 100644 --- a/cypress/e2e/timeline/timeline.spec.ts +++ b/cypress/e2e/timeline/timeline.spec.ts @@ -305,6 +305,123 @@ describe("Timeline", () => { ); }); + it("should render EventTiles on IRC, modern (group), and bubble layout", () => { + // Exclude timestamp and read marker from snapshots + const percyCSS = ".mx_MessageTimestamp, .mx_RoomView_myReadMarker { visibility: hidden !important; }"; + + sendEvent(roomId); + sendEvent(roomId); // check continuation + sendEvent(roomId); // check the last EventTile + + cy.visit("/#/room/" + roomId); + + //////////////////////////////////////////////////////////////////////////////////////////////////////////// + // IRC layout + //////////////////////////////////////////////////////////////////////////////////////////////////////////// + + cy.setSettingValue("layout", null, SettingLevel.DEVICE, Layout.IRC); + + // Wait until configuration is finished + cy.contains( + ".mx_RoomView_body .mx_GenericEventListSummary[data-layout=irc] .mx_GenericEventListSummary_summary", + "created and configured the room.", + ).should("exist"); + + cy.get(".mx_RoomView_body[data-layout=irc]").within(() => { + // Ensure CSS declarations which cannot be detected with a screenshot test are applied as expected + cy.get(".mx_EventTile") + .should("have.css", "max-width", "100%") + .should("have.css", "clear", "both") + .should("have.css", "position", "relative"); + + // Check mx_EventTile_continuation + // Block start padding of the second message should not be overridden + cy.get(".mx_EventTile_continuation").should("have.css", "padding-block-start", "0px"); + cy.get(".mx_EventTile_continuation .mx_EventTile_line").should("have.css", "clear", "both"); + + // Select the last event tile + cy.get(".mx_EventTile_last") + .within(() => { + // The last tile is also a continued one + cy.get(".mx_EventTile_line").should("have.css", "clear", "both"); + }) + // Check that zero block padding is set + .should("have.css", "padding-block-start", "0px"); + }); + + cy.get(".mx_MainSplit").percySnapshotElement("EventTiles on IRC layout", { percyCSS }); + + //////////////////////////////////////////////////////////////////////////////////////////////////////////// + // Group/modern layout + //////////////////////////////////////////////////////////////////////////////////////////////////////////// + + cy.setSettingValue("layout", null, SettingLevel.DEVICE, Layout.Group); + + cy.get(".mx_RoomView_body[data-layout=group]").within(() => { + // Ensure CSS declarations which cannot be detected with a screenshot test are applied as expected + cy.get(".mx_EventTile") + .should("have.css", "max-width", "100%") + .should("have.css", "clear", "both") + .should("have.css", "position", "relative"); + + // Check mx_EventTile_continuation + // Block start padding of the second message should not be overridden + cy.get(".mx_EventTile_continuation").should("have.css", "padding-block-start", "0px"); + cy.get(".mx_EventTile_continuation .mx_EventTile_line").should("have.css", "clear", "both"); + + // Check that the last EventTile is rendered + cy.get(".mx_EventTile.mx_EventTile_last").should("exist"); + }); + + cy.get(".mx_MainSplit").percySnapshotElement("EventTiles on modern layout", { percyCSS }); + + // Check the same thing for compact layout + cy.setSettingValue("useCompactLayout", null, SettingLevel.DEVICE, true); + + cy.get(".mx_MatrixChat_useCompactLayout").within(() => { + // Ensure CSS declarations which cannot be detected with a screenshot test are applied as expected + cy.get(".mx_EventTile") + .should("have.css", "max-width", "100%") + .should("have.css", "clear", "both") + .should("have.css", "position", "relative"); + + // Check cascading works + cy.get(".mx_EventTile_continuation").should("have.css", "padding-block-start", "0px"); + + // Check that the last EventTile is rendered + cy.get(".mx_EventTile.mx_EventTile_last").should("exist"); + }); + + cy.get(".mx_MainSplit").percySnapshotElement("EventTiles on compact modern layout", { percyCSS }); + + //////////////////////////////////////////////////////////////////////////////////////////////////////////// + // Message bubble layout + //////////////////////////////////////////////////////////////////////////////////////////////////////////// + + cy.setSettingValue("layout", null, SettingLevel.DEVICE, Layout.Bubble); + + cy.get(".mx_RoomView_body[data-layout=bubble]").within(() => { + // Ensure CSS declarations which cannot be detected with a screenshot test are applied as expected + cy.get(".mx_EventTile") + .should("have.css", "max-width", "none") + .should("have.css", "clear", "both") + .should("have.css", "position", "relative"); + + // Check that block start padding of the second message is not overridden + cy.get(".mx_EventTile.mx_EventTile_continuation").should("have.css", "margin-block-start", "2px"); + + // Select the last bubble + cy.get(".mx_EventTile_last") + .within(() => { + // calc(var(--gutterSize) - 1px) + cy.get(".mx_EventTile_line").should("have.css", "padding-block-start", "10px"); + }) + .should("have.css", "margin-block-start", "2px"); // The last bubble is also a continued one + }); + + cy.get(".mx_MainSplit").percySnapshotElement("EventTiles on bubble layout", { percyCSS }); + }); + it("should set inline start padding to a hidden event line", () => { sendEvent(roomId); cy.visit("/#/room/" + roomId);