From d617422390d01f7a116754a0bf450b581d594003 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Tue, 21 Feb 2023 19:51:02 +0900 Subject: [PATCH 01/14] Set expected line height to an expanded GELS line on IRC layout, add a test Signed-off-by: Suguru Hirahara --- cypress/e2e/timeline/timeline.spec.ts | 29 +++++++++++++++++++ .../elements/_GenericEventListSummary.pcss | 16 ++++++---- res/css/views/rooms/_IRCLayout.pcss | 3 +- 3 files changed, 41 insertions(+), 7 deletions(-) diff --git a/cypress/e2e/timeline/timeline.spec.ts b/cypress/e2e/timeline/timeline.spec.ts index bef1cd0393c..bf0877f6bb1 100644 --- a/cypress/e2e/timeline/timeline.spec.ts +++ b/cypress/e2e/timeline/timeline.spec.ts @@ -163,6 +163,35 @@ describe("Timeline", () => { cy.percySnapshot("Configured room on IRC layout"); }); + it("should have a generic event list summary on IRC layout", () => { + cy.visit("/#/room/" + roomId); + cy.setSettingValue("layout", null, SettingLevel.DEVICE, Layout.IRC); + + // Wait until configuration is finished + cy.contains( + ".mx_RoomView_body .mx_GenericEventListSummary .mx_GenericEventListSummary_summary", + "created and configured the room.", + ).should("exist"); + + // Click "expand" link button + cy.get(".mx_GenericEventListSummary_toggle[aria-expanded=false]").click(); + // Make sure the "expand" link button worked + cy.get(".mx_GenericEventListSummary_toggle[aria-expanded=true]").should("exist"); + + // Check the height of expanded GELS line + cy.get(".mx_GenericEventListSummary[data-layout=irc] .mx_GenericEventListSummary_line").should( + "have.css", + "line-height", + "18px", // $irc-line-height: $font-18px (See: _IRCLayout.pcss) + ); + + cy.get(".mx_Spinner").should("not.exist"); + // Exclude timestamp from snapshot + const percyCSS = + ".mx_RoomView_body .mx_EventTile_info .mx_MessageTimestamp " + "{ visibility: hidden !important; }"; + cy.percySnapshot("Expanded event line with inline start margin on IRC layout", { percyCSS }); + }); + it("should add inline start margin to an event line on IRC layout", () => { cy.visit("/#/room/" + roomId); cy.setSettingValue("layout", null, SettingLevel.DEVICE, Layout.IRC); diff --git a/res/css/views/elements/_GenericEventListSummary.pcss b/res/css/views/elements/_GenericEventListSummary.pcss index 4aadf8dfb41..528037c0771 100644 --- a/res/css/views/elements/_GenericEventListSummary.pcss +++ b/res/css/views/elements/_GenericEventListSummary.pcss @@ -21,6 +21,16 @@ limitations under the License. margin-right: $spacing-8; } + .mx_GenericEventListSummary_line { + border-bottom: 1px solid $primary-hairline-color; + margin-left: 63px; /* TODO: Use a varilable */ + line-height: $font-30px; /* TODO: Use a varilable */ + + .mx_IRCLayout & { + line-height: var(--line-height); + } + } + &[data-layout="irc"], &[data-layout="group"] { .mx_GenericEventListSummary_toggle { @@ -117,9 +127,3 @@ limitations under the License. cursor: pointer; } } - -.mx_GenericEventListSummary_line { - border-bottom: 1px solid $primary-hairline-color; - margin-left: 63px; - line-height: $font-30px; -} diff --git a/res/css/views/rooms/_IRCLayout.pcss b/res/css/views/rooms/_IRCLayout.pcss index 02ae02fa5eb..9fcdae53ead 100644 --- a/res/css/views/rooms/_IRCLayout.pcss +++ b/res/css/views/rooms/_IRCLayout.pcss @@ -20,8 +20,9 @@ $irc-line-height: $font-18px; --name-width: 70px; --icon-width: 14px; --right-padding: 5px; + --line-height: $irc-line-height; - line-height: $irc-line-height !important; + line-height: var(--line-height) !important; .mx_EventTile { --EventTile_irc_line-padding-block: 1px; From fa627f43b47cbd6d6cea6679772912ebcdac5e41 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Wed, 22 Feb 2023 01:25:16 +0900 Subject: [PATCH 02/14] Add a test for compact modern/group layout Signed-off-by: Suguru Hirahara --- cypress/e2e/timeline/timeline.spec.ts | 33 +++++++++++++++++++++++++-- 1 file changed, 31 insertions(+), 2 deletions(-) diff --git a/cypress/e2e/timeline/timeline.spec.ts b/cypress/e2e/timeline/timeline.spec.ts index bf0877f6bb1..63d6cd70751 100644 --- a/cypress/e2e/timeline/timeline.spec.ts +++ b/cypress/e2e/timeline/timeline.spec.ts @@ -163,7 +163,7 @@ describe("Timeline", () => { cy.percySnapshot("Configured room on IRC layout"); }); - it("should have a generic event list summary on IRC layout", () => { + it("should have an expanded generic event list summary (GELS) on IRC layout", () => { cy.visit("/#/room/" + roomId); cy.setSettingValue("layout", null, SettingLevel.DEVICE, Layout.IRC); @@ -189,7 +189,36 @@ describe("Timeline", () => { // Exclude timestamp from snapshot const percyCSS = ".mx_RoomView_body .mx_EventTile_info .mx_MessageTimestamp " + "{ visibility: hidden !important; }"; - cy.percySnapshot("Expanded event line with inline start margin on IRC layout", { percyCSS }); + cy.percySnapshot("Expanded generic event list summary (GELS) on IRC layout", { percyCSS }); + }); + + it("should have an expanded generic event list summary (GELS) on compact modern/group layout", () => { + sendEvent(roomId); + cy.visit("/#/room/" + roomId); + cy.setSettingValue("layout", null, SettingLevel.DEVICE, Layout.Group).setSettingValue( + "useCompactLayout", + null, + SettingLevel.DEVICE, + true, + ); + cy.contains( + ".mx_RoomView_body .mx_GenericEventListSummary .mx_GenericEventListSummary_summary", + "created and configured the room.", + ).should("exist"); + + // Click "expand" link button + cy.get(".mx_GenericEventListSummary_toggle[aria-expanded=false]").click(); + // Make sure the "expand" link button worked + cy.get(".mx_GenericEventListSummary_toggle[aria-expanded=true]").should("exist"); + + // Check the height of expanded GELS line + cy.get(".mx_GenericEventListSummary[data-layout=group] .mx_GenericEventListSummary_line").should( + "have.css", + "line-height", + "22px", // $font-22px (See: _GenericEventListSummary.pcss) + ); + + cy.get(".mx_Spinner").should("not.exist"); }); it("should add inline start margin to an event line on IRC layout", () => { From be353ce581a8e76380db5ab715692b8f61f41881 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Wed, 22 Feb 2023 01:52:41 +0900 Subject: [PATCH 03/14] Create a new test category on timeline.spec.ts Signed-off-by: Suguru Hirahara --- cypress/e2e/timeline/timeline.spec.ts | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/cypress/e2e/timeline/timeline.spec.ts b/cypress/e2e/timeline/timeline.spec.ts index 63d6cd70751..2c471148dad 100644 --- a/cypress/e2e/timeline/timeline.spec.ts +++ b/cypress/e2e/timeline/timeline.spec.ts @@ -146,7 +146,7 @@ describe("Timeline", () => { }); }); - describe("message displaying", () => { + describe("configure room", () => { beforeEach(() => { cy.injectAxe(); }); @@ -250,6 +250,12 @@ describe("Timeline", () => { cy.percySnapshot("Event line with inline start margin on IRC layout", { percyCSS }); cy.checkA11y(); }); + }); + + describe("message displaying", () => { + beforeEach(() => { + cy.injectAxe(); + }); it("should set inline start padding to a hidden event line", () => { sendEvent(roomId); From 03f0837d745de7a598d4294932d195a9535c2c66 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Wed, 22 Feb 2023 00:12:38 +0900 Subject: [PATCH 04/14] Rename the class name as 'spacer' Signed-off-by: Suguru Hirahara --- cypress/e2e/timeline/timeline.spec.ts | 4 ++-- res/css/views/elements/_GenericEventListSummary.pcss | 6 +++--- src/components/views/elements/GenericEventListSummary.tsx | 2 +- 3 files changed, 6 insertions(+), 6 deletions(-) diff --git a/cypress/e2e/timeline/timeline.spec.ts b/cypress/e2e/timeline/timeline.spec.ts index 2c471148dad..9d1fb39304b 100644 --- a/cypress/e2e/timeline/timeline.spec.ts +++ b/cypress/e2e/timeline/timeline.spec.ts @@ -179,7 +179,7 @@ describe("Timeline", () => { cy.get(".mx_GenericEventListSummary_toggle[aria-expanded=true]").should("exist"); // Check the height of expanded GELS line - cy.get(".mx_GenericEventListSummary[data-layout=irc] .mx_GenericEventListSummary_line").should( + cy.get(".mx_GenericEventListSummary[data-layout=irc] .mx_GenericEventListSummary_spacer").should( "have.css", "line-height", "18px", // $irc-line-height: $font-18px (See: _IRCLayout.pcss) @@ -212,7 +212,7 @@ describe("Timeline", () => { cy.get(".mx_GenericEventListSummary_toggle[aria-expanded=true]").should("exist"); // Check the height of expanded GELS line - cy.get(".mx_GenericEventListSummary[data-layout=group] .mx_GenericEventListSummary_line").should( + cy.get(".mx_GenericEventListSummary[data-layout=group] .mx_GenericEventListSummary_spacer").should( "have.css", "line-height", "22px", // $font-22px (See: _GenericEventListSummary.pcss) diff --git a/res/css/views/elements/_GenericEventListSummary.pcss b/res/css/views/elements/_GenericEventListSummary.pcss index 528037c0771..81fb9d0b0ea 100644 --- a/res/css/views/elements/_GenericEventListSummary.pcss +++ b/res/css/views/elements/_GenericEventListSummary.pcss @@ -21,7 +21,7 @@ limitations under the License. margin-right: $spacing-8; } - .mx_GenericEventListSummary_line { + .mx_GenericEventListSummary_spacer { border-bottom: 1px solid $primary-hairline-color; margin-left: 63px; /* TODO: Use a varilable */ line-height: $font-30px; /* TODO: Use a varilable */ @@ -61,7 +61,7 @@ limitations under the License. } } - .mx_GenericEventListSummary_line { + .mx_GenericEventListSummary_spacer { display: none; } @@ -98,7 +98,7 @@ limitations under the License. line-height: $font-20px; } - .mx_GenericEventListSummary_line { + .mx_GenericEventListSummary_spacer { line-height: $font-22px; } diff --git a/src/components/views/elements/GenericEventListSummary.tsx b/src/components/views/elements/GenericEventListSummary.tsx index c90c64d7403..9284a9698ca 100644 --- a/src/components/views/elements/GenericEventListSummary.tsx +++ b/src/components/views/elements/GenericEventListSummary.tsx @@ -86,7 +86,7 @@ const GenericEventListSummary: React.FC = ({ if (expanded) { body = ( -
 
+
 
    {children}
 ); From 3c0f7dd830f47ab3a2433b0e4f76318888d65d48 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Wed, 22 Feb 2023 02:04:39 +0900 Subject: [PATCH 05/14] Add a test for GELS' spacer on bubble layout Signed-off-by: Suguru Hirahara --- cypress/e2e/timeline/timeline.spec.ts | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/cypress/e2e/timeline/timeline.spec.ts b/cypress/e2e/timeline/timeline.spec.ts index 9d1fb39304b..eb97f29280a 100644 --- a/cypress/e2e/timeline/timeline.spec.ts +++ b/cypress/e2e/timeline/timeline.spec.ts @@ -337,6 +337,16 @@ describe("Timeline", () => { // Click "expand" link button cy.get(".mx_GenericEventListSummary_toggle[aria-expanded=false]").click(); + // Make sure the "expand" link button worked + cy.get(".mx_GenericEventListSummary_toggle[aria-expanded=true]").should("exist"); + + // Make sure spacer is not displayed on bubble layout + cy.get(".mx_GenericEventListSummary[data-layout=bubble] .mx_GenericEventListSummary_spacer").should( + "have.css", + "display", + "none", // See: _GenericEventListSummary.pcss + ); + // Click "collapse" link button on the first hovered info event line cy.get(".mx_GenericEventListSummary_unstyledList .mx_EventTile_info:first-of-type").realHover(); cy.get(".mx_GenericEventListSummary_toggle[aria-expanded=true]").click({ force: false }); From 6ba9e2b4510aaf1a8ecafec20aab6541df13517c Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Wed, 22 Feb 2023 03:34:43 +0900 Subject: [PATCH 06/14] Remove a percySnapshot Signed-off-by: Suguru Hirahara --- cypress/e2e/timeline/timeline.spec.ts | 4 ---- 1 file changed, 4 deletions(-) diff --git a/cypress/e2e/timeline/timeline.spec.ts b/cypress/e2e/timeline/timeline.spec.ts index eb97f29280a..9146ae2702d 100644 --- a/cypress/e2e/timeline/timeline.spec.ts +++ b/cypress/e2e/timeline/timeline.spec.ts @@ -186,10 +186,6 @@ describe("Timeline", () => { ); cy.get(".mx_Spinner").should("not.exist"); - // Exclude timestamp from snapshot - const percyCSS = - ".mx_RoomView_body .mx_EventTile_info .mx_MessageTimestamp " + "{ visibility: hidden !important; }"; - cy.percySnapshot("Expanded generic event list summary (GELS) on IRC layout", { percyCSS }); }); it("should have an expanded generic event list summary (GELS) on compact modern/group layout", () => { From f00176bf55961a5de7cd086c139f6256e85fc1b8 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Wed, 22 Feb 2023 15:14:52 +0900 Subject: [PATCH 07/14] Improve a test Signed-off-by: Suguru Hirahara --- cypress/e2e/timeline/timeline.spec.ts | 13 +++++++++---- 1 file changed, 9 insertions(+), 4 deletions(-) diff --git a/cypress/e2e/timeline/timeline.spec.ts b/cypress/e2e/timeline/timeline.spec.ts index 9146ae2702d..ebd86d87fcd 100644 --- a/cypress/e2e/timeline/timeline.spec.ts +++ b/cypress/e2e/timeline/timeline.spec.ts @@ -175,6 +175,7 @@ describe("Timeline", () => { // Click "expand" link button cy.get(".mx_GenericEventListSummary_toggle[aria-expanded=false]").click(); + // Make sure the "expand" link button worked cy.get(".mx_GenericEventListSummary_toggle[aria-expanded=true]").should("exist"); @@ -191,12 +192,16 @@ describe("Timeline", () => { it("should have an expanded generic event list summary (GELS) on compact modern/group layout", () => { sendEvent(roomId); cy.visit("/#/room/" + roomId); + + // Set compact modern layout cy.setSettingValue("layout", null, SettingLevel.DEVICE, Layout.Group).setSettingValue( "useCompactLayout", null, SettingLevel.DEVICE, true, ); + + // Wait until configuration is finished cy.contains( ".mx_RoomView_body .mx_GenericEventListSummary .mx_GenericEventListSummary_summary", "created and configured the room.", @@ -204,6 +209,7 @@ describe("Timeline", () => { // Click "expand" link button cy.get(".mx_GenericEventListSummary_toggle[aria-expanded=false]").click(); + // Make sure the "expand" link button worked cy.get(".mx_GenericEventListSummary_toggle[aria-expanded=true]").should("exist"); @@ -240,6 +246,7 @@ describe("Timeline", () => { .should("have.css", "inset-inline-start", "0px"); cy.get(".mx_Spinner").should("not.exist"); + // Exclude timestamp from snapshot const percyCSS = ".mx_RoomView_body .mx_EventTile_info .mx_MessageTimestamp " + "{ visibility: hidden !important; }"; @@ -336,11 +343,9 @@ describe("Timeline", () => { // Make sure the "expand" link button worked cy.get(".mx_GenericEventListSummary_toggle[aria-expanded=true]").should("exist"); - // Make sure spacer is not displayed on bubble layout + // Make sure spacer is not visible on bubble layout cy.get(".mx_GenericEventListSummary[data-layout=bubble] .mx_GenericEventListSummary_spacer").should( - "have.css", - "display", - "none", // See: _GenericEventListSummary.pcss + "not.be.visible", // See: _GenericEventListSummary.pcss ); // Click "collapse" link button on the first hovered info event line From 8253ae1ca6151f462ed62bcc6fbc7db3022c6f4f Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Fri, 24 Feb 2023 02:11:00 +0900 Subject: [PATCH 08/14] Add percySnapshotElement Signed-off-by: Suguru Hirahara --- cypress/e2e/timeline/timeline.spec.ts | 15 ++++++++++----- 1 file changed, 10 insertions(+), 5 deletions(-) diff --git a/cypress/e2e/timeline/timeline.spec.ts b/cypress/e2e/timeline/timeline.spec.ts index 2a208c54b37..ce5ba83ff71 100644 --- a/cypress/e2e/timeline/timeline.spec.ts +++ b/cypress/e2e/timeline/timeline.spec.ts @@ -147,6 +147,10 @@ describe("Timeline", () => { }); describe("configure room", () => { + // Exclude timestamp from snapshot + const percyCSS = + ".mx_RoomView_body .mx_EventTile_info .mx_MessageTimestamp { visibility: hidden !important; }"; + beforeEach(() => { cy.injectAxe(); }); @@ -186,7 +190,9 @@ describe("Timeline", () => { "18px", // $irc-line-height: $font-18px (See: _IRCLayout.pcss) ); - cy.get(".mx_Spinner").should("not.exist"); + cy.get(".mx_MainSplit").percySnapshotElement("Expanded generic event list summary on IRC layout", { + percyCSS, + }); }); it("should have an expanded generic event list summary (GELS) on compact modern/group layout", () => { @@ -220,7 +226,9 @@ describe("Timeline", () => { "22px", // $font-22px (See: _GenericEventListSummary.pcss) ); - cy.get(".mx_Spinner").should("not.exist"); + cy.get(".mx_MainSplit").percySnapshotElement("Expanded generic event list summary on modern layout", { + percyCSS, + }); }); it("should add inline start margin to an event line on IRC layout", () => { @@ -245,9 +253,6 @@ describe("Timeline", () => { .should("have.css", "margin-inline-start", "104px") .should("have.css", "inset-inline-start", "0px"); - // Exclude timestamp from snapshot - const percyCSS = - ".mx_RoomView_body .mx_EventTile_info .mx_MessageTimestamp { visibility: hidden !important; }"; cy.get(".mx_MainSplit").percySnapshotElement("Event line with inline start margin on IRC layout", { percyCSS, }); From 42f0912c654af1422690978cc201d1a3a2893a2f Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Fri, 24 Feb 2023 04:31:42 +0900 Subject: [PATCH 09/14] lint Signed-off-by: Suguru Hirahara --- cypress/e2e/timeline/timeline.spec.ts | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/cypress/e2e/timeline/timeline.spec.ts b/cypress/e2e/timeline/timeline.spec.ts index ce5ba83ff71..c3228590ed2 100644 --- a/cypress/e2e/timeline/timeline.spec.ts +++ b/cypress/e2e/timeline/timeline.spec.ts @@ -148,8 +148,7 @@ describe("Timeline", () => { describe("configure room", () => { // Exclude timestamp from snapshot - const percyCSS = - ".mx_RoomView_body .mx_EventTile_info .mx_MessageTimestamp { visibility: hidden !important; }"; + const percyCSS = ".mx_RoomView_body .mx_EventTile_info .mx_MessageTimestamp { visibility: hidden !important; }"; beforeEach(() => { cy.injectAxe(); From bc507c743809cf17d857bffae5525795661be5d0 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Wed, 1 Mar 2023 13:44:01 +0900 Subject: [PATCH 10/14] Add percy tests Signed-off-by: Suguru Hirahara --- cypress/e2e/timeline/timeline.spec.ts | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/cypress/e2e/timeline/timeline.spec.ts b/cypress/e2e/timeline/timeline.spec.ts index c3228590ed2..2b91f8f6076 100644 --- a/cypress/e2e/timeline/timeline.spec.ts +++ b/cypress/e2e/timeline/timeline.spec.ts @@ -357,12 +357,21 @@ describe("Timeline", () => { "not.be.visible", // See: _GenericEventListSummary.pcss ); + // Exclude timestamp from snapshot + const percyCSS = ".mx_MessageTimestamp { visibility: hidden !important; }"; + + // Save snapshot of expanded generic event list summary on bubble layout + cy.get(".mx_MainSplit").percySnapshotElement("Expanded GELS on bubble layout", { percyCSS }); + // Click "collapse" link button on the first hovered info event line cy.get(".mx_GenericEventListSummary_unstyledList .mx_EventTile_info:first-of-type").realHover(); cy.get(".mx_GenericEventListSummary_toggle[aria-expanded=true]").click({ force: false }); // Make sure "collapse" link button worked cy.get(".mx_GenericEventListSummary_toggle[aria-expanded=false]").should("exist"); + + // Save snapshot of collapsed generic event list summary on bubble layout + cy.get(".mx_MainSplit").percySnapshotElement("Collapsed GELS on bubble layout", { percyCSS }); }); it("should highlight search result words regardless of formatting", () => { From 08945433f7bee76bd58fae5f755640fb98e59273 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Wed, 1 Mar 2023 04:51:59 +0000 Subject: [PATCH 11/14] Fix typos Co-authored-by: Germain --- res/css/views/elements/_GenericEventListSummary.pcss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/res/css/views/elements/_GenericEventListSummary.pcss b/res/css/views/elements/_GenericEventListSummary.pcss index 81fb9d0b0ea..b7d1adb73e3 100644 --- a/res/css/views/elements/_GenericEventListSummary.pcss +++ b/res/css/views/elements/_GenericEventListSummary.pcss @@ -23,8 +23,8 @@ limitations under the License. .mx_GenericEventListSummary_spacer { border-bottom: 1px solid $primary-hairline-color; - margin-left: 63px; /* TODO: Use a varilable */ - line-height: $font-30px; /* TODO: Use a varilable */ + margin-left: 63px; /* TODO: Use a variable */ + line-height: $font-30px; /* TODO: Use a variable */ .mx_IRCLayout & { line-height: var(--line-height); From cc3939dafbab73fbd7a6d3e1e051944dc2dd054f Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Wed, 1 Mar 2023 22:16:15 +0900 Subject: [PATCH 12/14] Fix percyCSS for timestamps on normal event tiles Signed-off-by: Suguru Hirahara --- cypress/e2e/timeline/timeline.spec.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/cypress/e2e/timeline/timeline.spec.ts b/cypress/e2e/timeline/timeline.spec.ts index a039120adc2..9823fbd8674 100644 --- a/cypress/e2e/timeline/timeline.spec.ts +++ b/cypress/e2e/timeline/timeline.spec.ts @@ -148,7 +148,7 @@ describe("Timeline", () => { describe("configure room", () => { // Exclude timestamp from snapshot - const percyCSS = ".mx_RoomView_body .mx_EventTile_info .mx_MessageTimestamp { visibility: hidden !important; }"; + const percyCSS = ".mx_RoomView_body .mx_MessageTimestamp { visibility: hidden !important; }"; beforeEach(() => { cy.injectAxe(); @@ -189,7 +189,7 @@ describe("Timeline", () => { "18px", // $irc-line-height: $font-18px (See: _IRCLayout.pcss) ); - cy.get(".mx_MainSplit").percySnapshotElement("Expanded generic event list summary on IRC layout", { + cy.get(".mx_MainSplit").percySnapshotElement("Expanded GELS on IRC layout", { percyCSS, }); }); @@ -225,7 +225,7 @@ describe("Timeline", () => { "22px", // $font-22px (See: _GenericEventListSummary.pcss) ); - cy.get(".mx_MainSplit").percySnapshotElement("Expanded generic event list summary on modern layout", { + cy.get(".mx_MainSplit").percySnapshotElement("Expanded GELS on modern layout", { percyCSS, }); }); From c27d39498544c5c3f404619f5cc84825b3a2c2fd Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Wed, 1 Mar 2023 22:20:09 +0900 Subject: [PATCH 13/14] lint Signed-off-by: Suguru Hirahara --- cypress/e2e/timeline/timeline.spec.ts | 8 ++------ 1 file changed, 2 insertions(+), 6 deletions(-) diff --git a/cypress/e2e/timeline/timeline.spec.ts b/cypress/e2e/timeline/timeline.spec.ts index 9823fbd8674..1768048452f 100644 --- a/cypress/e2e/timeline/timeline.spec.ts +++ b/cypress/e2e/timeline/timeline.spec.ts @@ -189,9 +189,7 @@ describe("Timeline", () => { "18px", // $irc-line-height: $font-18px (See: _IRCLayout.pcss) ); - cy.get(".mx_MainSplit").percySnapshotElement("Expanded GELS on IRC layout", { - percyCSS, - }); + cy.get(".mx_MainSplit").percySnapshotElement("Expanded GELS on IRC layout", { percyCSS }); }); it("should have an expanded generic event list summary (GELS) on compact modern/group layout", () => { @@ -225,9 +223,7 @@ describe("Timeline", () => { "22px", // $font-22px (See: _GenericEventListSummary.pcss) ); - cy.get(".mx_MainSplit").percySnapshotElement("Expanded GELS on modern layout", { - percyCSS, - }); + cy.get(".mx_MainSplit").percySnapshotElement("Expanded GELS on modern layout", { percyCSS }); }); it("should add inline start margin to an event line on IRC layout", () => { From 53a0f6e87e9fb3954f5d302563c6379fb457c851 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Wed, 8 Mar 2023 00:37:06 +0900 Subject: [PATCH 14/14] Edit a test Signed-off-by: Suguru Hirahara --- cypress/e2e/timeline/timeline.spec.ts | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/cypress/e2e/timeline/timeline.spec.ts b/cypress/e2e/timeline/timeline.spec.ts index a4cbbc05b38..deff0486855 100644 --- a/cypress/e2e/timeline/timeline.spec.ts +++ b/cypress/e2e/timeline/timeline.spec.ts @@ -147,8 +147,8 @@ describe("Timeline", () => { }); describe("configure room", () => { - // Exclude timestamp from snapshot - const percyCSS = ".mx_RoomView_body .mx_MessageTimestamp { visibility: hidden !important; }"; + // Exclude timestamp and read marker from snapshots + const percyCSS = ".mx_MessageTimestamp, .mx_RoomView_myReadMarker { visibility: hidden !important; }"; beforeEach(() => { cy.injectAxe(); @@ -193,7 +193,6 @@ describe("Timeline", () => { }); it("should have an expanded generic event list summary (GELS) on compact modern/group layout", () => { - sendEvent(roomId); cy.visit("/#/room/" + roomId); // Set compact modern layout