imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

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