Add a basic E2E test for event tiles (#10306)

Signed-off-by: Suguru Hirahara <[email protected]>

Author: luixxiul

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);