-
-
Notifications
You must be signed in to change notification settings - Fork 832
Add a basic E2E test for event tiles #10306
Changes from 8 commits
68ec634
45ba532
cc07d3a
802ab76
095fdcb
8635088
b64af28
4c008fe
5b6da62
6f9f254
a0aef75
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change | ||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
|
@@ -305,6 +305,145 @@ describe("Timeline", () => { | |||||||||||||||||||||||
); | ||||||||||||||||||||||||
}); | ||||||||||||||||||||||||
|
||||||||||||||||||||||||
it("should render EventTiles on IRC 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); | ||||||||||||||||||||||||
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"); | ||||||||||||||||||||||||
|
||||||||||||||||||||||||
cy.get(".mx_EventTile_continuation") | ||||||||||||||||||||||||
// Check that zero block padding is set | ||||||||||||||||||||||||
.should("have.css", "padding-block-start", "0px"); | ||||||||||||||||||||||||
|
||||||||||||||||||||||||
cy.get(".mx_EventTile_continuation .mx_EventTile_line").should("have.css", "clear", "both"); | ||||||||||||||||||||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. See: matrix-react-sdk/res/css/views/rooms/_EventTile.pcss Lines 239 to 241 in 2344eaa
|
||||||||||||||||||||||||
|
||||||||||||||||||||||||
// 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"); | ||||||||||||||||||||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. |
||||||||||||||||||||||||
}); | ||||||||||||||||||||||||
|
||||||||||||||||||||||||
cy.get(".mx_MainSplit").percySnapshotElement("EventTiles on IRC layout", { percyCSS }); | ||||||||||||||||||||||||
}); | ||||||||||||||||||||||||
|
||||||||||||||||||||||||
it("should render EventTiles on modern 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); | ||||||||||||||||||||||||
cy.setSettingValue("layout", null, SettingLevel.DEVICE, Layout.Group); | ||||||||||||||||||||||||
|
||||||||||||||||||||||||
// Wait until configuration is finished | ||||||||||||||||||||||||
cy.contains( | ||||||||||||||||||||||||
".mx_RoomView_body .mx_GenericEventListSummary[data-layout=group] .mx_GenericEventListSummary_summary", | ||||||||||||||||||||||||
"created and configured the room.", | ||||||||||||||||||||||||
).should("exist"); | ||||||||||||||||||||||||
|
||||||||||||||||||||||||
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("exist") | ||||||||||||||||||||||||
.should("have.css", "max-width", "100%") | ||||||||||||||||||||||||
.should("have.css", "clear", "both") | ||||||||||||||||||||||||
.should("have.css", "position", "relative"); | ||||||||||||||||||||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. |
||||||||||||||||||||||||
|
||||||||||||||||||||||||
// Check that block start padding of the second message is not overridden | ||||||||||||||||||||||||
cy.get(".mx_EventTile.mx_EventTile_continuation") | ||||||||||||||||||||||||
.should("exist") | ||||||||||||||||||||||||
.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 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("exist") | ||||||||||||||||||||||||
.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("exist").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 }); | ||||||||||||||||||||||||
}); | ||||||||||||||||||||||||
|
||||||||||||||||||||||||
it("should render EventTiles on 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); | ||||||||||||||||||||||||
cy.setSettingValue("layout", null, SettingLevel.DEVICE, Layout.Bubble); | ||||||||||||||||||||||||
|
||||||||||||||||||||||||
// Wait until configuration is finished | ||||||||||||||||||||||||
cy.contains( | ||||||||||||||||||||||||
".mx_RoomView_body .mx_GenericEventListSummary[data-layout=bubble] .mx_GenericEventListSummary_summary", | ||||||||||||||||||||||||
"created and configured the room.", | ||||||||||||||||||||||||
).should("exist"); | ||||||||||||||||||||||||
|
||||||||||||||||||||||||
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"); | ||||||||||||||||||||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. See: matrix-react-sdk/res/css/views/rooms/_EventBubbleTile.pcss Lines 42 to 52 in 2344eaa
Checking default values as well. |
||||||||||||||||||||||||
|
||||||||||||||||||||||||
// 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"); | ||||||||||||||||||||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. See: matrix-react-sdk/res/css/views/rooms/_EventTile.pcss Lines 470 to 472 in 2344eaa
|
||||||||||||||||||||||||
|
||||||||||||||||||||||||
// 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"); | ||||||||||||||||||||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. See: matrix-react-sdk/res/css/views/rooms/_EventBubbleTile.pcss Lines 345 to 349 in 2344eaa
This messy selector with the double negation should be simplified eventually. |
||||||||||||||||||||||||
}) | ||||||||||||||||||||||||
.should("have.css", "margin-block-start", "2px"); // The last bubble is also a continued one | ||||||||||||||||||||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. |
||||||||||||||||||||||||
}); | ||||||||||||||||||||||||
|
||||||||||||||||||||||||
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); | ||||||||||||||||||||||||
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
To confirm the declarations below (except padding and font size) are kept applied:
matrix-react-sdk/res/css/views/rooms/_EventTile.pcss
Lines 481 to 487 in 2344eaa