mirrors/element-web
1
0
Fork 0
mirror of https://github.com/element-hq/element-web synced 2024-11-24 10:15:43 +03:00
Code Issues Projects Releases Packages Wiki Activity

Set expected value of line-height to expanded generic event list summary (GELS) spacer on IRC layout (#10211)

Browse source 
* 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 <luixxiul@users.noreply.github.com>
Co-authored-by: Germain <germain@souquet.com>
This commit is contained in:
Suguru Hirahara 2023-03-24 21:57:32 +09:00 committed by GitHub
parent 75f31defd6
commit 8e1b9f46d4
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 101 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

87
cypress/e2e/timeline/timeline.spec.ts
View file

@ -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", () => {

20
res/css/views/elements/_GenericEventListSummary.pcss
View file

@ -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;
}

3
res/css/views/rooms/_IRCLayout.pcss
View file

@ -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 {

2
src/components/views/elements/GenericEventListSummary.tsx
View file

@ -86,7 +86,7 @@ const GenericEventListSummary: React.FC<IProps> = ({
if (expanded) {
body = (
<React.Fragment>
<div className="mx_GenericEventListSummary_line">&nbsp;</div>
<div className="mx_GenericEventListSummary_spacer">&nbsp;</div>
<ol className="mx_GenericEventListSummary_unstyledList">{children}</ol>
</React.Fragment>
);