mirror of https://github.com/vector-im/riot-web
Fix flaky Percy tests of `ReplyChain` (#10450)
* Fix flaky Percy tests of ReplyChain - Add media query for percy on _ReplyChain.pcss to apply the same color to vertical strokes (border-left)of ReplyChain - Use CSS variables for visibility - Manage those variables on _common.pcss for maintainability Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Check receptSent as well for consistency Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Add a comment Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Specify zero spacing and remove list-style Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> --------- Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>pull/28217/head
Suguru Hirahara
GitHub
parent
cc0f38d5b4
commit
afb2cb93f2
|
|
@ -848,41 +848,41 @@ describe("Timeline", () => {
|
|||
clickButtonReply();
|
||||
cy.getComposer().type(`${reply2}{enter}`);
|
||||
|
||||
// Make sure 'reply2' was sent
|
||||
// Assert that 'reply2' was sent
|
||||
cy.contains(".mx_RoomView_MessageList .mx_EventTile_last", reply2).should("exist");
|
||||
cy.get(".mx_EventTile_last .mx_EventTile_receiptSent").should("be.visible");
|
||||
|
||||
// Exclude timestamp and read marker from snapshot
|
||||
//const percyCSS = ".mx_MessageTimestamp, .mx_RoomView_myReadMarker { visibility: hidden !important; }";
|
||||
const percyCSS = ".mx_MessageTimestamp, .mx_RoomView_myReadMarker { visibility: hidden !important; }";
|
||||
|
||||
// Check the margin value of ReplyChains of EventTile at the bottom on IRC layout
|
||||
cy.setSettingValue("layout", null, SettingLevel.DEVICE, Layout.IRC);
|
||||
cy.get(".mx_EventTile_last[data-layout='irc'] .mx_ReplyChain").should("have.css", "margin", "0px");
|
||||
|
||||
// Take a snapshot on IRC layout
|
||||
// Disabled because flaky - see https://github.com/vector-im/element-web/issues/24881
|
||||
/*cy.get(".mx_EventTile_last").percySnapshotElement("EventTile with reply chains on IRC layout", {
|
||||
// Note that because zero margin is applied to mx_ReplyChain, the left borders of two mx_ReplyChain
|
||||
// components may seem to be connected to one.
|
||||
cy.get(".mx_EventTile_last").percySnapshotElement("EventTile with reply chains on IRC layout", {
|
||||
percyCSS,
|
||||
});*/
|
||||
});
|
||||
|
||||
// Check the margin value of ReplyChains of EventTile at the bottom on group/modern layout
|
||||
cy.setSettingValue("layout", null, SettingLevel.DEVICE, Layout.Group);
|
||||
cy.get(".mx_EventTile_last[data-layout='group'] .mx_ReplyChain").should("have.css", "margin-bottom", "8px");
|
||||
|
||||
// Take a snapshot on modern layout
|
||||
// Disabled because flaky - see https://github.com/vector-im/element-web/issues/24881
|
||||
/*cy.get(".mx_EventTile_last").percySnapshotElement("EventTile with reply chains on modern layout", {
|
||||
cy.get(".mx_EventTile_last").percySnapshotElement("EventTile with reply chains on modern layout", {
|
||||
percyCSS,
|
||||
});*/
|
||||
});
|
||||
|
||||
// Check the margin value of ReplyChains of EventTile at the bottom on group/modern compact layout
|
||||
cy.setSettingValue("useCompactLayout", null, SettingLevel.DEVICE, true);
|
||||
cy.get(".mx_EventTile_last[data-layout='group'] .mx_ReplyChain").should("have.css", "margin-bottom", "4px");
|
||||
|
||||
// Take a snapshot on compact modern layout
|
||||
// Disabled because flaky - see https://github.com/vector-im/element-web/issues/24881
|
||||
/*cy.get(".mx_EventTile_last").percySnapshotElement("EventTile with reply chains on compact modern layout", {
|
||||
cy.get(".mx_EventTile_last").percySnapshotElement("EventTile with reply chains on compact modern layout", {
|
||||
percyCSS,
|
||||
});*/
|
||||
});
|
||||
|
||||
// Check the margin value of ReplyChains of EventTile at the bottom on bubble layout
|
||||
cy.setSettingValue("layout", null, SettingLevel.DEVICE, Layout.Bubble);
|
||||
|
|
@ -893,10 +893,9 @@ describe("Timeline", () => {
|
|||
);
|
||||
|
||||
// Take a snapshot on bubble layout
|
||||
// Disabled because flaky - see https://github.com/vector-im/element-web/issues/24881
|
||||
/*cy.get(".mx_EventTile_last").percySnapshotElement("EventTile with reply chains on bubble layout", {
|
||||
cy.get(".mx_EventTile_last").percySnapshotElement("EventTile with reply chains on bubble layout", {
|
||||
percyCSS,
|
||||
});*/
|
||||
});
|
||||
});
|
||||
|
||||
it("should send, reply, and display long strings without overflowing", () => {
|
||||
|
|
|
|||
|
|
@ -45,6 +45,14 @@ $timeline-image-border-radius: 8px;
|
|||
--MessageTimestamp-width: $MessageTimestamp_width;
|
||||
}
|
||||
|
||||
@media only percy {
|
||||
:root {
|
||||
--percy-color-avatar: $username-variant2-color;
|
||||
--percy-color-displayName: $username-variant1-color;
|
||||
--percy-color-replyChain-border: $username-variant1-color;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion) {
|
||||
:root {
|
||||
--transition-short: 0;
|
||||
|
|
|
|||
|
|
@ -58,7 +58,7 @@ limitations under the License.
|
|||
@media only percy {
|
||||
/* Stick the default room avatar colour, so it doesn't cause a false diff on the screenshot */
|
||||
.mx_BaseAvatar_initial {
|
||||
background-color: $username-variant2-color !important;
|
||||
background-color: var(--percy-color-avatar) !important;
|
||||
border-radius: 125px;
|
||||
}
|
||||
.mx_RoomAvatar_isSpaceRoom .mx_BaseAvatar_initial {
|
||||
|
|
|
|||
|
|
@ -64,3 +64,11 @@ limitations under the License.
|
|||
--username-color: $username-variant8-color;
|
||||
}
|
||||
}
|
||||
|
||||
/* Percy screenshot test specific CSS */
|
||||
@media only percy {
|
||||
.mx_ReplyChain {
|
||||
/* Override the colour in percy tests for screenshot consistency */
|
||||
border-left-color: var(--percy-color-replyChain-border) !important;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -38,6 +38,6 @@ limitations under the License.
|
|||
@media only percy {
|
||||
.mx_DisambiguatedProfile_displayName {
|
||||
/* Override the colour in percy tests for screenshot consistency */
|
||||
color: $username-variant1-color !important;
|
||||
color: var(--percy-color-displayName) !important;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -139,3 +139,16 @@ limitations under the License.
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media only Percy {
|
||||
/* Remove the list style in percy tests for screenshot consistency */
|
||||
:is(ul, ol) {
|
||||
padding: 0 !important;
|
||||
margin: 0 !important;
|
||||
list-style: none !important;
|
||||
|
||||
.mx_EventTile_last {
|
||||
padding: 0 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue