Skip to content
This repository has been archived by the owner on Sep 11, 2024. It is now read-only.

Commit

Permalink
Add a basic E2E test for event tiles (#10306)
Browse files Browse the repository at this point in the history 
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
  • Loading branch information
@luixxiul
luixxiul committed Mar 17, 2023
1 parent b2c0466 commit c9e7aaf
Showing 1 changed file with 117 additions and 0 deletions.
117 changes: 117 additions & 0 deletions cypress/e2e/timeline/timeline.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down

0 comments on commit c9e7aaf

Please sign in to comment.