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 <luixxiul@users.noreply.github.com> Co-authored-by: Germain <germain@souquet.com>
This commit is contained in:
Suguru Hirahara
GitHub
parent
75f31defd6
commit
8e1b9f46d4
4 changed files with 101 additions and 11 deletions
|
|
@ -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", () => {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -86,7 +86,7 @@ const GenericEventListSummary: React.FC<IProps> = ({
|
|||
if (expanded) {
|
||||
body = (
|
||||
<React.Fragment>
|
||||
<div className="mx_GenericEventListSummary_line"> </div>
|
||||
<div className="mx_GenericEventListSummary_spacer"> </div>
|
||||
<ol className="mx_GenericEventListSummary_unstyledList">{children}</ol>
|
||||
</React.Fragment>
|
||||
);
|
||||
|
|
|
|||
Loading…
Reference in a new issue