From 8e1b9f46d445c97eb876fdb71855aeb6a8539dcd Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Fri, 24 Mar 2023 21:57:32 +0900 Subject: [PATCH] Set expected value of line-height to expanded generic event list summary (GELS) spacer on IRC layout (#10211) * Set expected line height to an expanded GELS line on IRC layout, add a test * Add a test for compact modern/group layout * Create a new test category on timeline.spec.ts * Rename the class name as 'spacer' * Add a test for GELS' spacer on bubble layout --------- Signed-off-by: Suguru Hirahara Co-authored-by: Germain --- cypress/e2e/timeline/timeline.spec.ts | 87 ++++++++++++++++++- .../elements/_GenericEventListSummary.pcss | 20 +++-- res/css/views/rooms/_IRCLayout.pcss | 3 +- .../elements/GenericEventListSummary.tsx | 2 +- 4 files changed, 101 insertions(+), 11 deletions(-) diff --git a/cypress/e2e/timeline/timeline.spec.ts b/cypress/e2e/timeline/timeline.spec.ts index 50d335de69..e6b344f47e 100644 --- a/cypress/e2e/timeline/timeline.spec.ts +++ b/cypress/e2e/timeline/timeline.spec.ts @@ -147,7 +147,10 @@ describe("Timeline", () => { }); }); - describe("message displaying", () => { + describe("configure room", () => { + // Exclude timestamp and read marker from snapshots + const percyCSS = ".mx_MessageTimestamp, .mx_RoomView_myReadMarker { visibility: hidden !important; }"; + beforeEach(() => { cy.injectAxe(); }); @@ -182,6 +185,65 @@ describe("Timeline", () => { cy.get(".mx_MainSplit").percySnapshotElement("Configured room 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); + + // 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_spacer").should( + "have.css", + "line-height", + "18px", // $irc-line-height: $font-18px (See: _IRCLayout.pcss) + ); + + 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", () => { + 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.", + ).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_spacer").should( + "have.css", + "line-height", + "22px", // $font-22px (See: _GenericEventListSummary.pcss) + ); + + cy.get(".mx_MainSplit").percySnapshotElement("Expanded GELS on modern 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); @@ -212,6 +274,12 @@ describe("Timeline", () => { }); cy.checkA11y(); }); + }); + + describe("message displaying", () => { + beforeEach(() => { + cy.injectAxe(); + }); it("should align generic event list summary with messages and emote on IRC layout", () => { // This test aims to check: @@ -569,12 +637,29 @@ 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 visible on bubble layout + cy.get(".mx_GenericEventListSummary[data-layout=bubble] .mx_GenericEventListSummary_spacer").should( + "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", () => { diff --git a/res/css/views/elements/_GenericEventListSummary.pcss b/res/css/views/elements/_GenericEventListSummary.pcss index 4aadf8dfb4..b7d1adb73e 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_spacer { + border-bottom: 1px solid $primary-hairline-color; + margin-left: 63px; /* TODO: Use a variable */ + line-height: $font-30px; /* TODO: Use a variable */ + + .mx_IRCLayout & { + line-height: var(--line-height); + } + } + &[data-layout="irc"], &[data-layout="group"] { .mx_GenericEventListSummary_toggle { @@ -51,7 +61,7 @@ limitations under the License. } } - .mx_GenericEventListSummary_line { + .mx_GenericEventListSummary_spacer { display: none; } @@ -88,7 +98,7 @@ limitations under the License. line-height: $font-20px; } - .mx_GenericEventListSummary_line { + .mx_GenericEventListSummary_spacer { line-height: $font-22px; } @@ -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 21a7eab6e9..995e791ca3 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: 80px; // cf. ircDisplayNameWidth on Settings.tsx --icon-width: 14px; --right-padding: 5px; + --line-height: $irc-line-height; - line-height: $irc-line-height !important; + line-height: var(--line-height) !important; .mx_NewRoomIntro { > h2 { diff --git a/src/components/views/elements/GenericEventListSummary.tsx b/src/components/views/elements/GenericEventListSummary.tsx index 83d12a360b..19578942a5 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}
 );