From 0dcf43a0424b9f9c203c3c44f2f9d38202689b6d Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Fri, 3 Mar 2023 00:54:21 +0900 Subject: [PATCH 01/25] Align redacted body on ThreadView with message text, summary text, and reactions row by applying the same padding setting as main timeline Signed-off-by: Suguru Hirahara --- res/css/views/rooms/_EventTile.pcss | 63 ++++++++--------------------- 1 file changed, 16 insertions(+), 47 deletions(-) diff --git a/res/css/views/rooms/_EventTile.pcss b/res/css/views/rooms/_EventTile.pcss index 5425697ff9f..fac080d5aec 100644 --- a/res/css/views/rooms/_EventTile.pcss +++ b/res/css/views/rooms/_EventTile.pcss @@ -1035,19 +1035,6 @@ $left-gutter: 64px; display: none; } - .mx_EventTile_line { - padding-block: var(--BaseCard_EventTile_line-padding-block); - } - - .mx_EventTile_line, - .mx_ReactionsRow { - padding-inline-start: 0; /* Cancel inherited padding value for event message and reactions row */ - } - - .mx_ReactionsRow { - padding-inline-end: 0; - } - /* handling for hidden events (e.g reactions) in the thread view */ &.mx_EventTile_info { .mx_EventTile_avatar { @@ -1105,6 +1092,22 @@ $left-gutter: 64px; &[data-layout="group"] { padding-block-start: $spacing-16; + .mx_EventTile_line { + padding-block: var(--BaseCard_EventTile_line-padding-block); + + /* Use padding here. See: .mx_EventTile[data-layout="group"] .mx_EventTile_line */ + padding-inline-start: var(--ThreadView_group_spacing-start); /* align message text with summary text */ + } + + .mx_EventTile_line, + .mx_ReactionsRow { + margin-inline-end: var(--ThreadView_group_spacing-end); + } + + .mx_ReactionsRow { + margin-inline-start: var(--ThreadView_group_spacing-start); /* align with message text and summary text */ + } + .mx_EventTile_line { .mx_EventTile_content { &.mx_EditMessageComposer { @@ -1117,41 +1120,7 @@ $left-gutter: 64px; &[data-layout="group"] { width: 100%; - .mx_EventTile_content, - .mx_HiddenBody, - .mx_RedactedBody, - .mx_UnknownBody, - .mx_MPollBody, - .mx_MLocationBody, - .mx_ReplyChain_wrapper, - .mx_ReactionsRow { - margin-inline-start: var(--ThreadView_group_spacing-start); - margin-inline-end: var(--ThreadView_group_spacing-end); - - .mx_EventTile_content, - .mx_HiddenBody, - .mx_RedactedBody, - .mx_MImageBody { - margin: 0; - } - } - - .mx_ReplyChain_wrapper { - .mx_MLocationBody, - .mx_UnknownBody { - /* Error message inside ReplyTile */ - margin-inline: unset; - } - } - .mx_EventTile_mediaLine { - /* such as MImageBody */ - > div, - > span { - margin-inline-start: var(--ThreadView_group_spacing-start); - margin-inline-end: var(--ThreadView_group_spacing-end); - } - /* such as MAudioBody and MFileBody */ > span { display: block; /* Apply the margin declarations to span element */ From e2fe55c223949c495e91e4c1c20f1ab96a671a09 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Fri, 3 Mar 2023 00:58:25 +0900 Subject: [PATCH 02/25] Setting block keyword value is no longer required mx_EventTile_line wraps mx_EventTile_mediaLine and its elements Signed-off-by: Suguru Hirahara --- res/css/views/rooms/_EventTile.pcss | 7 ------- 1 file changed, 7 deletions(-) diff --git a/res/css/views/rooms/_EventTile.pcss b/res/css/views/rooms/_EventTile.pcss index fac080d5aec..741b52538c0 100644 --- a/res/css/views/rooms/_EventTile.pcss +++ b/res/css/views/rooms/_EventTile.pcss @@ -1120,13 +1120,6 @@ $left-gutter: 64px; &[data-layout="group"] { width: 100%; - .mx_EventTile_mediaLine { - /* such as MAudioBody and MFileBody */ - > span { - display: block; /* Apply the margin declarations to span element */ - } - } - .mx_EventTile_senderDetails { display: flex; align-items: center; From 5934218f6f0a81a0c0eb079159b0bf4a657f55d7 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Fri, 3 Mar 2023 01:29:51 +0900 Subject: [PATCH 03/25] Merge style blocks Signed-off-by: Suguru Hirahara --- res/css/views/rooms/_EventTile.pcss | 14 ++++++-------- 1 file changed, 6 insertions(+), 8 deletions(-) diff --git a/res/css/views/rooms/_EventTile.pcss b/res/css/views/rooms/_EventTile.pcss index 741b52538c0..3af5180a9df 100644 --- a/res/css/views/rooms/_EventTile.pcss +++ b/res/css/views/rooms/_EventTile.pcss @@ -1097,6 +1097,12 @@ $left-gutter: 64px; /* Use padding here. See: .mx_EventTile[data-layout="group"] .mx_EventTile_line */ padding-inline-start: var(--ThreadView_group_spacing-start); /* align message text with summary text */ + + .mx_EventTile_content { + &.mx_EditMessageComposer { + padding-inline-start: 0; /* align start of first letter with that of the event body */ + } + } } .mx_EventTile_line, @@ -1107,14 +1113,6 @@ $left-gutter: 64px; .mx_ReactionsRow { margin-inline-start: var(--ThreadView_group_spacing-start); /* align with message text and summary text */ } - - .mx_EventTile_line { - .mx_EventTile_content { - &.mx_EditMessageComposer { - padding-inline-start: 0; /* align start of first letter with that of the event body */ - } - } - } } &[data-layout="group"] { From b98ee668a04e91d41adbc0ea96899af1c3c6ecd3 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Fri, 3 Mar 2023 01:42:12 +0900 Subject: [PATCH 04/25] Edit comments Signed-off-by: Suguru Hirahara --- res/css/views/rooms/_EventTile.pcss | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/res/css/views/rooms/_EventTile.pcss b/res/css/views/rooms/_EventTile.pcss index 3af5180a9df..c83c08edc2d 100644 --- a/res/css/views/rooms/_EventTile.pcss +++ b/res/css/views/rooms/_EventTile.pcss @@ -1095,8 +1095,9 @@ $left-gutter: 64px; .mx_EventTile_line { padding-block: var(--BaseCard_EventTile_line-padding-block); - /* Use padding here. See: .mx_EventTile[data-layout="group"] .mx_EventTile_line */ - padding-inline-start: var(--ThreadView_group_spacing-start); /* align message text with summary text */ + /* Add padding to align message text with summary text */ + /* See: .mx_EventTile[data-layout="group"] .mx_EventTile_line */ + padding-inline-start: var(--ThreadView_group_spacing-start); .mx_EventTile_content { &.mx_EditMessageComposer { From 1430ffbfdb8ae2eb772c2e0a4150ec75d4722017 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Fri, 3 Mar 2023 01:44:29 +0900 Subject: [PATCH 05/25] Change order of the style rules Signed-off-by: Suguru Hirahara --- res/css/views/rooms/_EventTile.pcss | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/res/css/views/rooms/_EventTile.pcss b/res/css/views/rooms/_EventTile.pcss index c83c08edc2d..aa9cb88ed98 100644 --- a/res/css/views/rooms/_EventTile.pcss +++ b/res/css/views/rooms/_EventTile.pcss @@ -1092,6 +1092,11 @@ $left-gutter: 64px; &[data-layout="group"] { padding-block-start: $spacing-16; + .mx_EventTile_line, + .mx_ReactionsRow { + margin-inline-end: var(--ThreadView_group_spacing-end); + } + .mx_EventTile_line { padding-block: var(--BaseCard_EventTile_line-padding-block); @@ -1106,11 +1111,6 @@ $left-gutter: 64px; } } - .mx_EventTile_line, - .mx_ReactionsRow { - margin-inline-end: var(--ThreadView_group_spacing-end); - } - .mx_ReactionsRow { margin-inline-start: var(--ThreadView_group_spacing-start); /* align with message text and summary text */ } From 6e63640d5af3e753dbb7cfaeeccd9fccfe9882ae Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Fri, 3 Mar 2023 01:47:52 +0900 Subject: [PATCH 06/25] lint Signed-off-by: Suguru Hirahara --- res/css/views/rooms/_EventTile.pcss | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/res/css/views/rooms/_EventTile.pcss b/res/css/views/rooms/_EventTile.pcss index aa9cb88ed98..4c493ef5f39 100644 --- a/res/css/views/rooms/_EventTile.pcss +++ b/res/css/views/rooms/_EventTile.pcss @@ -1112,7 +1112,8 @@ $left-gutter: 64px; } .mx_ReactionsRow { - margin-inline-start: var(--ThreadView_group_spacing-start); /* align with message text and summary text */ + /* Align with message text and summary text */ + margin-inline-start: var(--ThreadView_group_spacing-start); } } From d33ea3e9b84f3bcd80d08393b7ee586f600527f5 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Fri, 3 Mar 2023 01:48:36 +0900 Subject: [PATCH 07/25] Add zero padding to continued event tile without !important flag Signed-off-by: Suguru Hirahara --- res/css/views/rooms/_EventTile.pcss | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/res/css/views/rooms/_EventTile.pcss b/res/css/views/rooms/_EventTile.pcss index 4c493ef5f39..d5fd3e7e433 100644 --- a/res/css/views/rooms/_EventTile.pcss +++ b/res/css/views/rooms/_EventTile.pcss @@ -1115,6 +1115,10 @@ $left-gutter: 64px; /* Align with message text and summary text */ margin-inline-start: var(--ThreadView_group_spacing-start); } + + &.mx_EventTile_continuation { + padding-block-start: 0; /* Cancel padding-block-start */ + } } &[data-layout="group"] { From 696c259180a442a78c7d6de7729df949f2511d3e Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Fri, 3 Mar 2023 14:45:54 +0900 Subject: [PATCH 08/25] Add Percy tests for initial ThreadView Signed-off-by: Suguru Hirahara --- cypress/e2e/threads/threads.spec.ts | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) diff --git a/cypress/e2e/threads/threads.spec.ts b/cypress/e2e/threads/threads.spec.ts index b887eb94fa8..860310d2e9e 100644 --- a/cypress/e2e/threads/threads.spec.ts +++ b/cypress/e2e/threads/threads.spec.ts @@ -18,6 +18,8 @@ limitations under the License. import { HomeserverInstance } from "../../plugins/utils/homeserver"; import { MatrixClient } from "../../global"; +import { SettingLevel } from "../../../src/settings/SettingLevel"; +import { Layout } from "../../../src/settings/enums/Layout"; describe("Threads", () => { let homeserver: HomeserverInstance; @@ -57,6 +59,8 @@ describe("Threads", () => { // --MessageTimestamp-color = #acacac = rgb(172, 172, 172) // See: _MessageTimestamp.pcss const MessageTimestampColor = "rgb(172, 172, 172)"; + // Exclude timestamp and read marker from snapshot + const percyCSS = ".mx_MessageTimestamp, .mx_RoomView_myReadMarker { visibility: hidden !important; }"; // User sends message cy.get(".mx_RoomView_body .mx_BasicMessageComposer_input").type("Hello Mr. Bot{enter}"); @@ -86,6 +90,20 @@ describe("Threads", () => { cy.get(".mx_RoomView_body .mx_ThreadSummary .mx_ThreadSummary_content").should("contain", "Hello there"); cy.get(".mx_RoomView_body .mx_ThreadSummary").click(); + // Wait until the both messages are read + cy.get(".mx_ThreadView .mx_EventTile_last .mx_EventTile_line .mx_MTextBody").should("have.text", "Hello there"); + cy.get(".mx_ThreadView .mx_EventTile_last .mx_ReadReceiptGroup .mx_BaseAvatar_image").should("be.visible"); + + // Take Percy snapshots in group layout and bubble layout (IRC layout on ThreadView is not available) + cy.get(".mx_ThreadView .mx_EventTile[data-layout='group']").should("be.visible"); + cy.get(".mx_ThreadView").percySnapshotElement("Initial ThreadView on group layout", { percyCSS }); + cy.setSettingValue("layout", null, SettingLevel.DEVICE, Layout.Bubble); + cy.get(".mx_ThreadView .mx_EventTile[data-layout='bubble']").should("be.visible"); + cy.get(".mx_ThreadView").percySnapshotElement("Initial ThreadView on bubble layout", { percyCSS }); + + // Set the group layout + cy.setSettingValue("layout", null, SettingLevel.DEVICE, Layout.Group); + // User responds in thread cy.get(".mx_ThreadView .mx_BasicMessageComposer_input").type("Test{enter}"); From 9e3d12f3a7aac665ed2d979c94c526c7bd0941d9 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Fri, 3 Mar 2023 14:57:04 +0900 Subject: [PATCH 09/25] Add Percy tests for reactions on ThreadView Signed-off-by: Suguru Hirahara --- cypress/e2e/threads/threads.spec.ts | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/cypress/e2e/threads/threads.spec.ts b/cypress/e2e/threads/threads.spec.ts index 860310d2e9e..825abc9dc73 100644 --- a/cypress/e2e/threads/threads.spec.ts +++ b/cypress/e2e/threads/threads.spec.ts @@ -127,6 +127,16 @@ describe("Threads", () => { cy.contains('[role="menuitem"]', "👋").click(); }); + // Take Percy snapshots in group layout and bubble layout (IRC layout on ThreadView is not available) + cy.get(".mx_ThreadView .mx_EventTile[data-layout='group']").should("be.visible"); + cy.get(".mx_ThreadView").percySnapshotElement("ThreadView with reaction on group layout", { percyCSS }); + cy.setSettingValue("layout", null, SettingLevel.DEVICE, Layout.Bubble); + cy.get(".mx_ThreadView .mx_EventTile[data-layout='bubble']").should("be.visible"); + cy.get(".mx_ThreadView").percySnapshotElement("ThreadView with reaction on bubble layout", { percyCSS }); + + // Set the group layout + cy.setSettingValue("layout", null, SettingLevel.DEVICE, Layout.Group); + // User redacts their prior response cy.contains(".mx_ThreadView .mx_EventTile .mx_EventTile_line", "Test") .find('[aria-label="Options"]') From 69e1eddb4ab09009dcc6f825026ed179329d5108 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Fri, 3 Mar 2023 15:05:21 +0900 Subject: [PATCH 10/25] Add Percy tests for redacted messages on ThreadView Signed-off-by: Suguru Hirahara --- cypress/e2e/threads/threads.spec.ts | 13 +++++++++++++ 1 file changed, 13 insertions(+) diff --git a/cypress/e2e/threads/threads.spec.ts b/cypress/e2e/threads/threads.spec.ts index 825abc9dc73..cb629b95e50 100644 --- a/cypress/e2e/threads/threads.spec.ts +++ b/cypress/e2e/threads/threads.spec.ts @@ -148,6 +148,19 @@ describe("Threads", () => { cy.contains(".mx_Dialog_primary", "Remove").click(); }); + // Wait until the response is redacted + cy.get(".mx_ThreadView .mx_EventTile_last .mx_EventTile_receiptSent").should("be.visible"); + + // Take Percy snapshots in group layout and bubble layout (IRC layout on ThreadView is not available) + cy.get(".mx_ThreadView .mx_EventTile[data-layout='group']").should("be.visible"); + cy.get(".mx_ThreadView").percySnapshotElement("ThreadView with redacted messages on group layout", { percyCSS }); + cy.setSettingValue("layout", null, SettingLevel.DEVICE, Layout.Bubble); + cy.get(".mx_ThreadView .mx_EventTile[data-layout='bubble']").should("be.visible"); + cy.get(".mx_ThreadView").percySnapshotElement("ThreadView with redacted messages on bubble layout", { percyCSS }); + + // Set the group layout + cy.setSettingValue("layout", null, SettingLevel.DEVICE, Layout.Group); + // User asserts summary was updated correctly cy.get(".mx_RoomView_body .mx_ThreadSummary .mx_ThreadSummary_sender").should("contain", "BotBob"); cy.get(".mx_RoomView_body .mx_ThreadSummary .mx_ThreadSummary_content").should("contain", "Hello there"); From f9359347fe1d40180c4fb6b59422524e6a08e64f Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Fri, 3 Mar 2023 15:13:05 +0900 Subject: [PATCH 11/25] lint Signed-off-by: Suguru Hirahara --- cypress/e2e/threads/threads.spec.ts | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/cypress/e2e/threads/threads.spec.ts b/cypress/e2e/threads/threads.spec.ts index cb629b95e50..1c24595bdf1 100644 --- a/cypress/e2e/threads/threads.spec.ts +++ b/cypress/e2e/threads/threads.spec.ts @@ -59,7 +59,7 @@ describe("Threads", () => { // --MessageTimestamp-color = #acacac = rgb(172, 172, 172) // See: _MessageTimestamp.pcss const MessageTimestampColor = "rgb(172, 172, 172)"; - // Exclude timestamp and read marker from snapshot + // Exclude timestamp and read marker from snapshots const percyCSS = ".mx_MessageTimestamp, .mx_RoomView_myReadMarker { visibility: hidden !important; }"; // User sends message @@ -153,10 +153,14 @@ describe("Threads", () => { // Take Percy snapshots in group layout and bubble layout (IRC layout on ThreadView is not available) cy.get(".mx_ThreadView .mx_EventTile[data-layout='group']").should("be.visible"); - cy.get(".mx_ThreadView").percySnapshotElement("ThreadView with redacted messages on group layout", { percyCSS }); + cy.get(".mx_ThreadView").percySnapshotElement("ThreadView with redacted messages on group layout", { + percyCSS, + }); cy.setSettingValue("layout", null, SettingLevel.DEVICE, Layout.Bubble); cy.get(".mx_ThreadView .mx_EventTile[data-layout='bubble']").should("be.visible"); - cy.get(".mx_ThreadView").percySnapshotElement("ThreadView with redacted messages on bubble layout", { percyCSS }); + cy.get(".mx_ThreadView").percySnapshotElement("ThreadView with redacted messages on bubble layout", { + percyCSS, + }); // Set the group layout cy.setSettingValue("layout", null, SettingLevel.DEVICE, Layout.Group); From c5f3cbbf812c0b761dc298a1cbe3951ab3cd09b5 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Fri, 3 Mar 2023 15:37:58 +0900 Subject: [PATCH 12/25] Edit the test to check ThreadPanel with an unread dot Signed-off-by: Suguru Hirahara --- cypress/e2e/threads/threads.spec.ts | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/cypress/e2e/threads/threads.spec.ts b/cypress/e2e/threads/threads.spec.ts index 1c24595bdf1..6480f17e221 100644 --- a/cypress/e2e/threads/threads.spec.ts +++ b/cypress/e2e/threads/threads.spec.ts @@ -194,9 +194,15 @@ describe("Threads", () => { cy.get(".mx_EventTile_body").should("contain", "Hello Mr. Bot"); cy.get(".mx_ThreadSummary_content").should("contain", "How are things?"); + // Check the number of the replies + cy.get(".mx_ThreadPanel_replies_amount").should("have.text", "2"); + // Check the colour of timestamp on thread list cy.get(".mx_EventTile_details .mx_MessageTimestamp").should("have.css", "color", MessageTimestampColor); + // Make sure the notification dot is visible + cy.get(".mx_NotificationBadge_visible").should("be.visible"); + // User opens thread via threads list cy.get(".mx_EventTile_line").click(); }); From 06fd22a6f66425485e84aa115ddb1e32550da19a Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Fri, 3 Mar 2023 16:25:21 +0900 Subject: [PATCH 13/25] Add a test to send location on ThreadView Signed-off-by: Suguru Hirahara --- cypress/e2e/threads/threads.spec.ts | 56 +++++++++++++++++++++++++++++ 1 file changed, 56 insertions(+) diff --git a/cypress/e2e/threads/threads.spec.ts b/cypress/e2e/threads/threads.spec.ts index 6480f17e221..2f38a7a32d5 100644 --- a/cypress/e2e/threads/threads.spec.ts +++ b/cypress/e2e/threads/threads.spec.ts @@ -299,6 +299,62 @@ describe("Threads", () => { cy.get(".mx_ThreadView .mx_MVoiceMessageBody").should("have.length", 1); }); + it("should send location on ThreadView", () => { + // See: location.spec.ts + const selectLocationShareTypeOption = (shareType: string): Chainable => { + return cy.get(`[data-test-id="share-location-option-${shareType}"]`); + }; + const submitShareLocation = (): void => { + cy.get('[data-testid="location-picker-submit-button"]').click(); + }; + + let bot: MatrixClient; + cy.getBot(homeserver, { + displayName: "BotBob", + autoAcceptInvites: false, + }).then((_bot) => { + bot = _bot; + }); + + let roomId: string; + cy.createRoom({}).then((_roomId) => { + roomId = _roomId; + cy.inviteUser(roomId, bot.getUserId()); + bot.joinRoom(roomId); + cy.visit("/#/room/" + roomId); + }); + + // Exclude timestamp and read marker from snapshots + const percyCSS = ".mx_MessageTimestamp, .mx_RoomView_myReadMarker { visibility: hidden !important; }"; + + // User sends message + cy.get(".mx_RoomView_body .mx_BasicMessageComposer_input").type("Hello Mr. Bot{enter}"); + + // Wait for message to send, get its ID and save as @threadId + cy.contains(".mx_RoomView_body .mx_EventTile[data-scroll-tokens]", "Hello Mr. Bot") + .invoke("attr", "data-scroll-tokens") + .as("threadId"); + + // Bot starts thread + cy.get("@threadId").then((threadId) => { + bot.sendMessage(roomId, threadId, { + body: "Hello there", + msgtype: "m.text", + }); + }); + + // User clicks thread summary + cy.get(".mx_RoomView_body .mx_ThreadSummary").click(); + + // User sends location on ThreadView + cy.get(".mx_ThreadView").should("exist"); + cy.openMessageComposerOptions(true).find("[aria-label='Location']").click(); + selectLocationShareTypeOption("Pin").click(); + cy.get("#mx_LocationPicker_map").click("center"); + submitShareLocation(); + cy.get(".mx_ThreadView .mx_EventTile_last .mx_MLocationBody", { timeout: 10000 }).should("exist"); + }); + it("right panel behaves correctly", () => { // Create room let roomId: string; From e9ef45c523cf11c71698c8dc3e2f9048abd245d6 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Fri, 3 Mar 2023 16:49:58 +0900 Subject: [PATCH 14/25] Add a test to reply to location on ThreadView Signed-off-by: Suguru Hirahara --- cypress/e2e/threads/threads.spec.ts | 27 ++++++++++++++++++++++++--- 1 file changed, 24 insertions(+), 3 deletions(-) diff --git a/cypress/e2e/threads/threads.spec.ts b/cypress/e2e/threads/threads.spec.ts index 2f38a7a32d5..2902cca3958 100644 --- a/cypress/e2e/threads/threads.spec.ts +++ b/cypress/e2e/threads/threads.spec.ts @@ -299,7 +299,7 @@ describe("Threads", () => { cy.get(".mx_ThreadView .mx_MVoiceMessageBody").should("have.length", 1); }); - it("should send location on ThreadView", () => { + it("should send location and reply to the location on ThreadView", () => { // See: location.spec.ts const selectLocationShareTypeOption = (shareType: string): Chainable => { return cy.get(`[data-test-id="share-location-option-${shareType}"]`); @@ -324,8 +324,9 @@ describe("Threads", () => { cy.visit("/#/room/" + roomId); }); - // Exclude timestamp and read marker from snapshots - const percyCSS = ".mx_MessageTimestamp, .mx_RoomView_myReadMarker { visibility: hidden !important; }"; + // Exclude timestamp, read marker, and mapboxgl-map from snapshots + const percyCSS = + ".mx_MessageTimestamp, .mx_RoomView_myReadMarker, .mapboxgl-map { visibility: hidden !important; }"; // User sends message cy.get(".mx_RoomView_body .mx_BasicMessageComposer_input").type("Hello Mr. Bot{enter}"); @@ -353,6 +354,26 @@ describe("Threads", () => { cy.get("#mx_LocationPicker_map").click("center"); submitShareLocation(); cy.get(".mx_ThreadView .mx_EventTile_last .mx_MLocationBody", { timeout: 10000 }).should("exist"); + + // User reply to the location + cy.get(".mx_ThreadView").within(() => { + cy.get(".mx_EventTile_last") + .realHover() + .within(() => { + cy.get("[aria-label='Reply']").click({ force: false }); + }); + }); + + // Send a reply message + cy.get(".mx_ThreadView").within(() => { + cy.get(".mx_BasicMessageComposer_input").type("Please come here.{enter}"); + + // Wait until the reply is sent + cy.get(".mx_EventTile_last .mx_EventTile_receiptSent").should("be.visible"); + }); + + // Take a snapshot of reply to the shared location + cy.get(".mx_ThreadView").percySnapshotElement("Reply to the location on ThreadView", { percyCSS }); }); it("right panel behaves correctly", () => { From ea96c7d2a4e3d37ea5e994151f889c6b6b04e7ef Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Fri, 3 Mar 2023 17:30:20 +0900 Subject: [PATCH 15/25] Add a test to check layout of polls on ThreadView Signed-off-by: Suguru Hirahara --- cypress/e2e/polls/polls.spec.ts | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/cypress/e2e/polls/polls.spec.ts b/cypress/e2e/polls/polls.spec.ts index b2537c2cbeb..5fe6b204fad 100644 --- a/cypress/e2e/polls/polls.spec.ts +++ b/cypress/e2e/polls/polls.spec.ts @@ -18,6 +18,8 @@ limitations under the License. import { HomeserverInstance } from "../../plugins/utils/homeserver"; import { MatrixClient } from "../../global"; +import { SettingLevel } from "../../../src/settings/SettingLevel"; +import { Layout } from "../../../src/settings/enums/Layout"; import Chainable = Cypress.Chainable; const hidePercyCSS = ".mx_MessageTimestamp, .mx_RoomView_myReadMarker { visibility: hidden !important; }"; @@ -313,6 +315,18 @@ describe("Polls", () => { // and thread view cy.get(".mx_ThreadView .mx_MPollBody_totalVotes").should("contain", "2 votes cast"); + // Take snapshots of poll on ThreadView + cy.setSettingValue("layout", null, SettingLevel.DEVICE, Layout.Bubble); + cy.get(".mx_ThreadView .mx_EventTile[data-layout='bubble']").should("be.visible"); + cy.get(".mx_ThreadView").percySnapshotElement("ThreadView with a poll on bubble layout", { + percyCSS: hidePercyCSS, + }); + cy.setSettingValue("layout", null, SettingLevel.DEVICE, Layout.Group); + cy.get(".mx_ThreadView .mx_EventTile[data-layout='group']").should("be.visible"); + cy.get(".mx_ThreadView").percySnapshotElement("ThreadView with a poll on group layout", { + percyCSS: hidePercyCSS, + }); + cy.get(".mx_RoomView_body").within(() => { // vote 'Maybe' in the main timeline poll getPollOption(pollId, pollParams.options[2]).click("topLeft"); From def89038fa7e595326e12fd3611913e812fecca6 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Fri, 3 Mar 2023 17:38:16 +0900 Subject: [PATCH 16/25] Edit comments Signed-off-by: Suguru Hirahara --- cypress/e2e/threads/threads.spec.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/cypress/e2e/threads/threads.spec.ts b/cypress/e2e/threads/threads.spec.ts index 2902cca3958..72d47fa647d 100644 --- a/cypress/e2e/threads/threads.spec.ts +++ b/cypress/e2e/threads/threads.spec.ts @@ -94,7 +94,7 @@ describe("Threads", () => { cy.get(".mx_ThreadView .mx_EventTile_last .mx_EventTile_line .mx_MTextBody").should("have.text", "Hello there"); cy.get(".mx_ThreadView .mx_EventTile_last .mx_ReadReceiptGroup .mx_BaseAvatar_image").should("be.visible"); - // Take Percy snapshots in group layout and bubble layout (IRC layout on ThreadView is not available) + // Take Percy snapshots in group layout and bubble layout (IRC layout is not available on ThreadView) cy.get(".mx_ThreadView .mx_EventTile[data-layout='group']").should("be.visible"); cy.get(".mx_ThreadView").percySnapshotElement("Initial ThreadView on group layout", { percyCSS }); cy.setSettingValue("layout", null, SettingLevel.DEVICE, Layout.Bubble); @@ -127,7 +127,7 @@ describe("Threads", () => { cy.contains('[role="menuitem"]', "👋").click(); }); - // Take Percy snapshots in group layout and bubble layout (IRC layout on ThreadView is not available) + // Take Percy snapshots in group layout and bubble layout (IRC layout is not available on ThreadView) cy.get(".mx_ThreadView .mx_EventTile[data-layout='group']").should("be.visible"); cy.get(".mx_ThreadView").percySnapshotElement("ThreadView with reaction on group layout", { percyCSS }); cy.setSettingValue("layout", null, SettingLevel.DEVICE, Layout.Bubble); @@ -151,7 +151,7 @@ describe("Threads", () => { // Wait until the response is redacted cy.get(".mx_ThreadView .mx_EventTile_last .mx_EventTile_receiptSent").should("be.visible"); - // Take Percy snapshots in group layout and bubble layout (IRC layout on ThreadView is not available) + // Take Percy snapshots in group layout and bubble layout (IRC layout is not available on ThreadView) cy.get(".mx_ThreadView .mx_EventTile[data-layout='group']").should("be.visible"); cy.get(".mx_ThreadView").percySnapshotElement("ThreadView with redacted messages on group layout", { percyCSS, From 45ef4a2d5097d9a758f25ed6b54a9f6e33ceb8d0 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Fri, 3 Mar 2023 17:49:43 +0900 Subject: [PATCH 17/25] lint Signed-off-by: Suguru Hirahara --- cypress/e2e/threads/threads.spec.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/cypress/e2e/threads/threads.spec.ts b/cypress/e2e/threads/threads.spec.ts index 72d47fa647d..09483b85843 100644 --- a/cypress/e2e/threads/threads.spec.ts +++ b/cypress/e2e/threads/threads.spec.ts @@ -20,6 +20,7 @@ import { HomeserverInstance } from "../../plugins/utils/homeserver"; import { MatrixClient } from "../../global"; import { SettingLevel } from "../../../src/settings/SettingLevel"; import { Layout } from "../../../src/settings/enums/Layout"; +import Chainable = Cypress.Chainable; describe("Threads", () => { let homeserver: HomeserverInstance; From 45ad094244535d0a72722a79d27a3648f87c12b1 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Fri, 3 Mar 2023 18:08:11 +0900 Subject: [PATCH 18/25] Add the test for spacing of hidden events and fix the spacing Signed-off-by: Suguru Hirahara --- cypress/e2e/threads/threads.spec.ts | 6 ++++++ res/css/views/rooms/_EventTile.pcss | 2 +- 2 files changed, 7 insertions(+), 1 deletion(-) diff --git a/cypress/e2e/threads/threads.spec.ts b/cypress/e2e/threads/threads.spec.ts index 09483b85843..26ff98f8089 100644 --- a/cypress/e2e/threads/threads.spec.ts +++ b/cypress/e2e/threads/threads.spec.ts @@ -119,6 +119,9 @@ describe("Threads", () => { cy.get(".mx_RoomView_body .mx_ThreadSummary .mx_ThreadSummary_sender").should("contain", "Tom"); cy.get(".mx_RoomView_body .mx_ThreadSummary .mx_ThreadSummary_content").should("contain", "Test"); + // Enable hidden events to make the event for reaction displayed + cy.setSettingValue("showHiddenEventsInTimeline", null, SettingLevel.DEVICE, true); + // User reacts to message instead cy.contains(".mx_ThreadView .mx_EventTile .mx_EventTile_line", "Hello there") .find('[aria-label="React"]') @@ -135,6 +138,9 @@ describe("Threads", () => { cy.get(".mx_ThreadView .mx_EventTile[data-layout='bubble']").should("be.visible"); cy.get(".mx_ThreadView").percySnapshotElement("ThreadView with reaction on bubble layout", { percyCSS }); + // Disable hidden events + cy.setSettingValue("showHiddenEventsInTimeline", null, SettingLevel.DEVICE, false); + // Set the group layout cy.setSettingValue("layout", null, SettingLevel.DEVICE, Layout.Group); diff --git a/res/css/views/rooms/_EventTile.pcss b/res/css/views/rooms/_EventTile.pcss index d5fd3e7e433..404454ad809 100644 --- a/res/css/views/rooms/_EventTile.pcss +++ b/res/css/views/rooms/_EventTile.pcss @@ -1062,7 +1062,7 @@ $left-gutter: 64px; .mx_RedactedBody { width: auto; /* 14px: avatar width, 6px: 20px - 14px */ - margin-inline-start: calc(var(--ThreadView_group_spacing-start) + 14px + 6px); + margin-inline-start: calc(14px + 6px); font-size: $line-height; } } From 242fa5bea52bad4aaef46ad532f2c15e4e54d296 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Fri, 3 Mar 2023 18:38:28 +0900 Subject: [PATCH 19/25] Merge .within() Signed-off-by: Suguru Hirahara --- cypress/e2e/threads/threads.spec.ts | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/cypress/e2e/threads/threads.spec.ts b/cypress/e2e/threads/threads.spec.ts index 26ff98f8089..826b6aa873f 100644 --- a/cypress/e2e/threads/threads.spec.ts +++ b/cypress/e2e/threads/threads.spec.ts @@ -362,17 +362,14 @@ describe("Threads", () => { submitShareLocation(); cy.get(".mx_ThreadView .mx_EventTile_last .mx_MLocationBody", { timeout: 10000 }).should("exist"); - // User reply to the location + // User replies to the location cy.get(".mx_ThreadView").within(() => { cy.get(".mx_EventTile_last") .realHover() .within(() => { cy.get("[aria-label='Reply']").click({ force: false }); }); - }); - // Send a reply message - cy.get(".mx_ThreadView").within(() => { cy.get(".mx_BasicMessageComposer_input").type("Please come here.{enter}"); // Wait until the reply is sent From b610bb64cc3930a6dba3a0aef7e030d2602fb4d0 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Sat, 4 Mar 2023 18:03:13 +0900 Subject: [PATCH 20/25] Check CSS rules for spacing as well Signed-off-by: Suguru Hirahara --- cypress/e2e/threads/threads.spec.ts | 21 +++++++++++++++++++++ 1 file changed, 21 insertions(+) diff --git a/cypress/e2e/threads/threads.spec.ts b/cypress/e2e/threads/threads.spec.ts index 826b6aa873f..086a3cdebdd 100644 --- a/cypress/e2e/threads/threads.spec.ts +++ b/cypress/e2e/threads/threads.spec.ts @@ -60,6 +60,7 @@ describe("Threads", () => { // --MessageTimestamp-color = #acacac = rgb(172, 172, 172) // See: _MessageTimestamp.pcss const MessageTimestampColor = "rgb(172, 172, 172)"; + const ThreadViewGroupSpacingStart = "56px"; // --ThreadView_group_spacing-start // Exclude timestamp and read marker from snapshots const percyCSS = ".mx_MessageTimestamp, .mx_RoomView_myReadMarker { visibility: hidden !important; }"; @@ -95,6 +96,13 @@ describe("Threads", () => { cy.get(".mx_ThreadView .mx_EventTile_last .mx_EventTile_line .mx_MTextBody").should("have.text", "Hello there"); cy.get(".mx_ThreadView .mx_EventTile_last .mx_ReadReceiptGroup .mx_BaseAvatar_image").should("be.visible"); + // Make sure the CSS style for spacing is applied to mx_EventTile_line on group/modern layout + cy.get(".mx_ThreadView .mx_EventTile_last[data-layout=group] .mx_EventTile_line").should( + "have.css", + "padding-inline-start", + ThreadViewGroupSpacingStart, + ); + // Take Percy snapshots in group layout and bubble layout (IRC layout is not available on ThreadView) cy.get(".mx_ThreadView .mx_EventTile[data-layout='group']").should("be.visible"); cy.get(".mx_ThreadView").percySnapshotElement("Initial ThreadView on group layout", { percyCSS }); @@ -131,6 +139,19 @@ describe("Threads", () => { cy.contains('[role="menuitem"]', "👋").click(); }); + // Make sure the CSS style for spacing is applied to mx_ReactionsRow on group/modern layout + cy.get(".mx_ThreadView .mx_EventTile[data-layout=group] .mx_ReactionsRow").should( + "have.css", + "margin-inline-start", // Not padding-inline-start. See: _EventTile.pcss + ThreadViewGroupSpacingStart, + ); + + // Make sure the CSS style for spacing is applied to mx_EventTile_line for hidden event on group/modern layout + cy.get( + ".mx_ThreadView .mx_GenericEventListSummary[data-layout=group] .mx_EventTile_info.mx_EventTile_last " + + ".mx_EventTile_line", + ).should("have.css", "padding-inline-start", ThreadViewGroupSpacingStart); + // Take Percy snapshots in group layout and bubble layout (IRC layout is not available on ThreadView) cy.get(".mx_ThreadView .mx_EventTile[data-layout='group']").should("be.visible"); cy.get(".mx_ThreadView").percySnapshotElement("ThreadView with reaction on group layout", { percyCSS }); From 3e90afb4e5f824186e820e9293893fd00fd5177c Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Sat, 4 Mar 2023 19:52:48 +0900 Subject: [PATCH 21/25] Fix spacing of hidden event on bubble layout Signed-off-by: Suguru Hirahara --- cypress/e2e/threads/threads.spec.ts | 9 ++++++++- res/css/views/rooms/_EventTile.pcss | 19 +++++++++++++++++-- 2 files changed, 25 insertions(+), 3 deletions(-) diff --git a/cypress/e2e/threads/threads.spec.ts b/cypress/e2e/threads/threads.spec.ts index 086a3cdebdd..5cc528c1264 100644 --- a/cypress/e2e/threads/threads.spec.ts +++ b/cypress/e2e/threads/threads.spec.ts @@ -142,7 +142,7 @@ describe("Threads", () => { // Make sure the CSS style for spacing is applied to mx_ReactionsRow on group/modern layout cy.get(".mx_ThreadView .mx_EventTile[data-layout=group] .mx_ReactionsRow").should( "have.css", - "margin-inline-start", // Not padding-inline-start. See: _EventTile.pcss + "margin-inline-start", ThreadViewGroupSpacingStart, ); @@ -159,6 +159,13 @@ describe("Threads", () => { cy.get(".mx_ThreadView .mx_EventTile[data-layout='bubble']").should("be.visible"); cy.get(".mx_ThreadView").percySnapshotElement("ThreadView with reaction on bubble layout", { percyCSS }); + // Make sure the CSS style for spacing is applied to mx_EventTile_line for hidden event on bubble layout + // 76px: ThreadViewGroupSpacingStart + 14px + 6px. See: _EventTile.pcss + cy.get( + ".mx_ThreadView .mx_GenericEventListSummary[data-layout=bubble] .mx_EventTile_info.mx_EventTile_last " + + ".mx_EventTile_line", + ).should("have.css", "margin-inline-start", "76px"); + // Disable hidden events cy.setSettingValue("showHiddenEventsInTimeline", null, SettingLevel.DEVICE, false); diff --git a/res/css/views/rooms/_EventTile.pcss b/res/css/views/rooms/_EventTile.pcss index 6fa784ad346..de4b6767bed 100644 --- a/res/css/views/rooms/_EventTile.pcss +++ b/res/css/views/rooms/_EventTile.pcss @@ -1057,8 +1057,6 @@ $left-gutter: 64px; .mx_EventTile_content, .mx_RedactedBody { width: auto; - /* 14px: avatar width, 6px: 20px - 14px */ - margin-inline-start: calc(14px + 6px); font-size: $line-height; } } @@ -1075,12 +1073,29 @@ $left-gutter: 64px; .mx_MessageTimestamp { top: 2px; /* Align with avatar */ } + + &.mx_EventTile_selected .mx_EventTile_line, + .mx_EventTile_line { + .mx_EventTile_content, + .mx_RedactedBody { + /* 14px: avatar width, 6px: 20px - 14px */ + margin-inline-start: calc(14px + 6px); + } + } } &[data-layout="bubble"] { .mx_EventTile_avatar { inset-inline-start: 0; } + + &.mx_EventTile_selected .mx_EventTile_line, + .mx_EventTile_line { + .mx_EventTile_content, + .mx_RedactedBody { + margin-inline-start: calc(var(--ThreadView_group_spacing-start) + 14px + 6px); + } + } } } From 7ca049537242ae3eed13484b19a5fcddbeb577af Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Sat, 4 Mar 2023 20:10:01 +0900 Subject: [PATCH 22/25] Update tests Signed-off-by: Suguru Hirahara --- cypress/e2e/threads/threads.spec.ts | 44 +++++++++++++++++++++-------- 1 file changed, 32 insertions(+), 12 deletions(-) diff --git a/cypress/e2e/threads/threads.spec.ts b/cypress/e2e/threads/threads.spec.ts index 5cc528c1264..40fbf4e9ba3 100644 --- a/cypress/e2e/threads/threads.spec.ts +++ b/cypress/e2e/threads/threads.spec.ts @@ -127,6 +127,10 @@ describe("Threads", () => { cy.get(".mx_RoomView_body .mx_ThreadSummary .mx_ThreadSummary_sender").should("contain", "Tom"); cy.get(".mx_RoomView_body .mx_ThreadSummary .mx_ThreadSummary_content").should("contain", "Test"); + //////////////////////////////////////////////////////////////////////////////////////////////////////////////// + // Check reactions and hidden events + //////////////////////////////////////////////////////////////////////////////////////////////////////////////// + // Enable hidden events to make the event for reaction displayed cy.setSettingValue("showHiddenEventsInTimeline", null, SettingLevel.DEVICE, true); @@ -146,32 +150,48 @@ describe("Threads", () => { ThreadViewGroupSpacingStart, ); - // Make sure the CSS style for spacing is applied to mx_EventTile_line for hidden event on group/modern layout + // Make sure the CSS style for spacing is applied to the hidden event on group/modern layout cy.get( ".mx_ThreadView .mx_GenericEventListSummary[data-layout=group] .mx_EventTile_info.mx_EventTile_last " + ".mx_EventTile_line", ).should("have.css", "padding-inline-start", ThreadViewGroupSpacingStart); - // Take Percy snapshots in group layout and bubble layout (IRC layout is not available on ThreadView) + // Take Percy snapshot of group layout (IRC layout is not available on ThreadView) cy.get(".mx_ThreadView .mx_EventTile[data-layout='group']").should("be.visible"); - cy.get(".mx_ThreadView").percySnapshotElement("ThreadView with reaction on group layout", { percyCSS }); + cy.get(".mx_ThreadView").percySnapshotElement("ThreadView with reaction and a hidden event on group layout", { + percyCSS, + }); + + // Enable bubble layout cy.setSettingValue("layout", null, SettingLevel.DEVICE, Layout.Bubble); - cy.get(".mx_ThreadView .mx_EventTile[data-layout='bubble']").should("be.visible"); - cy.get(".mx_ThreadView").percySnapshotElement("ThreadView with reaction on bubble layout", { percyCSS }); - // Make sure the CSS style for spacing is applied to mx_EventTile_line for hidden event on bubble layout - // 76px: ThreadViewGroupSpacingStart + 14px + 6px. See: _EventTile.pcss - cy.get( - ".mx_ThreadView .mx_GenericEventListSummary[data-layout=bubble] .mx_EventTile_info.mx_EventTile_last " + - ".mx_EventTile_line", - ).should("have.css", "margin-inline-start", "76px"); + // Make sure the CSS style for spacing is applied to the hidden event on bubble layout + cy.get(".mx_ThreadView .mx_GenericEventListSummary[data-layout=bubble]").within(() => { + cy.get(".mx_EventTile_info.mx_EventTile_last .mx_EventTile_line .mx_EventTile_content") + // 76px: ThreadViewGroupSpacingStart + 14px + 6px + // 14px: avatar width + // See: _EventTile.pcss + .should("have.css", "margin-inline-start", "76px"); + cy.get(".mx_EventTile_info.mx_EventTile_last .mx_EventTile_line") + // Make sure the margin is NOT applied to mx_EventTile_line + .should("have.css", "margin-inline-start", "0px"); + }); + + // Take Percy snapshot of bubble layout + cy.get(".mx_ThreadView").percySnapshotElement("ThreadView with reaction and a hidden event on bubble layout", { + percyCSS, + }); // Disable hidden events cy.setSettingValue("showHiddenEventsInTimeline", null, SettingLevel.DEVICE, false); - // Set the group layout + // Reset to the group layout cy.setSettingValue("layout", null, SettingLevel.DEVICE, Layout.Group); + //////////////////////////////////////////////////////////////////////////////////////////////////////////////// + // Check redactions + //////////////////////////////////////////////////////////////////////////////////////////////////////////////// + // User redacts their prior response cy.contains(".mx_ThreadView .mx_EventTile .mx_EventTile_line", "Test") .find('[aria-label="Options"]') From d0c44407f8db4d9af407382240b8b22e88e99fa4 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Mon, 6 Mar 2023 05:43:40 +0900 Subject: [PATCH 23/25] Improve the test Signed-off-by: Suguru Hirahara --- cypress/e2e/threads/threads.spec.ts | 56 +++++++++++++++-------------- 1 file changed, 29 insertions(+), 27 deletions(-) diff --git a/cypress/e2e/threads/threads.spec.ts b/cypress/e2e/threads/threads.spec.ts index 40fbf4e9ba3..8caf6f1efed 100644 --- a/cypress/e2e/threads/threads.spec.ts +++ b/cypress/e2e/threads/threads.spec.ts @@ -88,23 +88,22 @@ describe("Threads", () => { }); // User asserts timeline thread summary visible & clicks it - cy.get(".mx_RoomView_body .mx_ThreadSummary .mx_ThreadSummary_sender").should("contain", "BotBob"); - cy.get(".mx_RoomView_body .mx_ThreadSummary .mx_ThreadSummary_content").should("contain", "Hello there"); - cy.get(".mx_RoomView_body .mx_ThreadSummary").click(); + cy.get(".mx_RoomView_body").within(() => { + cy.get(".mx_ThreadSummary .mx_ThreadSummary_sender").should("contain", "BotBob"); + cy.get(".mx_ThreadSummary .mx_ThreadSummary_content").should("contain", "Hello there"); + cy.get(".mx_ThreadSummary").click(); + }); // Wait until the both messages are read - cy.get(".mx_ThreadView .mx_EventTile_last .mx_EventTile_line .mx_MTextBody").should("have.text", "Hello there"); - cy.get(".mx_ThreadView .mx_EventTile_last .mx_ReadReceiptGroup .mx_BaseAvatar_image").should("be.visible"); + cy.get(".mx_ThreadView .mx_EventTile_last[data-layout=group]").within(() => { + cy.get(".mx_EventTile_line .mx_MTextBody").should("have.text", "Hello there"); + cy.get(".mx_ReadReceiptGroup .mx_BaseAvatar_image").should("be.visible"); - // Make sure the CSS style for spacing is applied to mx_EventTile_line on group/modern layout - cy.get(".mx_ThreadView .mx_EventTile_last[data-layout=group] .mx_EventTile_line").should( - "have.css", - "padding-inline-start", - ThreadViewGroupSpacingStart, - ); + // Make sure the CSS style for spacing is applied to mx_EventTile_line on group/modern layout + cy.get(".mx_EventTile_line").should("have.css", "padding-inline-start", ThreadViewGroupSpacingStart); + }); // Take Percy snapshots in group layout and bubble layout (IRC layout is not available on ThreadView) - cy.get(".mx_ThreadView .mx_EventTile[data-layout='group']").should("be.visible"); cy.get(".mx_ThreadView").percySnapshotElement("Initial ThreadView on group layout", { percyCSS }); cy.setSettingValue("layout", null, SettingLevel.DEVICE, Layout.Bubble); cy.get(".mx_ThreadView .mx_EventTile[data-layout='bubble']").should("be.visible"); @@ -124,8 +123,10 @@ describe("Threads", () => { ); // User asserts summary was updated correctly - cy.get(".mx_RoomView_body .mx_ThreadSummary .mx_ThreadSummary_sender").should("contain", "Tom"); - cy.get(".mx_RoomView_body .mx_ThreadSummary .mx_ThreadSummary_content").should("contain", "Test"); + cy.get(".mx_RoomView_body .mx_ThreadSummary").within(() => { + cy.get(".mx_ThreadSummary_sender").should("contain", "Tom"); + cy.get(".mx_ThreadSummary_content").should("contain", "Test"); + }); //////////////////////////////////////////////////////////////////////////////////////////////////////////////// // Check reactions and hidden events @@ -143,21 +144,22 @@ describe("Threads", () => { cy.contains('[role="menuitem"]', "👋").click(); }); - // Make sure the CSS style for spacing is applied to mx_ReactionsRow on group/modern layout - cy.get(".mx_ThreadView .mx_EventTile[data-layout=group] .mx_ReactionsRow").should( - "have.css", - "margin-inline-start", - ThreadViewGroupSpacingStart, - ); - - // Make sure the CSS style for spacing is applied to the hidden event on group/modern layout - cy.get( - ".mx_ThreadView .mx_GenericEventListSummary[data-layout=group] .mx_EventTile_info.mx_EventTile_last " + - ".mx_EventTile_line", - ).should("have.css", "padding-inline-start", ThreadViewGroupSpacingStart); + cy.get(".mx_ThreadView").within(() => { + // Make sure the CSS style for spacing is applied to mx_ReactionsRow on group/modern layout + cy.get(".mx_EventTile[data-layout=group] .mx_ReactionsRow").should( + "have.css", + "margin-inline-start", + ThreadViewGroupSpacingStart, + ); + + // Make sure the CSS style for spacing is applied to the hidden event on group/modern layout + cy.get( + ".mx_GenericEventListSummary[data-layout=group] .mx_EventTile_info.mx_EventTile_last " + + ".mx_EventTile_line", + ).should("have.css", "padding-inline-start", ThreadViewGroupSpacingStart); + }); // Take Percy snapshot of group layout (IRC layout is not available on ThreadView) - cy.get(".mx_ThreadView .mx_EventTile[data-layout='group']").should("be.visible"); cy.get(".mx_ThreadView").percySnapshotElement("ThreadView with reaction and a hidden event on group layout", { percyCSS, }); From 9966d98994062838743f304e61fc2d6867a78b16 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Mon, 6 Mar 2023 14:21:29 +0900 Subject: [PATCH 24/25] Edit .within() Signed-off-by: Suguru Hirahara --- cypress/e2e/threads/threads.spec.ts | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/cypress/e2e/threads/threads.spec.ts b/cypress/e2e/threads/threads.spec.ts index 8caf6f1efed..d900046eff8 100644 --- a/cypress/e2e/threads/threads.spec.ts +++ b/cypress/e2e/threads/threads.spec.ts @@ -168,13 +168,15 @@ describe("Threads", () => { cy.setSettingValue("layout", null, SettingLevel.DEVICE, Layout.Bubble); // Make sure the CSS style for spacing is applied to the hidden event on bubble layout - cy.get(".mx_ThreadView .mx_GenericEventListSummary[data-layout=bubble]").within(() => { - cy.get(".mx_EventTile_info.mx_EventTile_last .mx_EventTile_line .mx_EventTile_content") + cy.get( + ".mx_ThreadView .mx_GenericEventListSummary[data-layout=bubble] .mx_EventTile_info.mx_EventTile_last", + ).within(() => { + cy.get(".mx_EventTile_line .mx_EventTile_content") // 76px: ThreadViewGroupSpacingStart + 14px + 6px // 14px: avatar width // See: _EventTile.pcss .should("have.css", "margin-inline-start", "76px"); - cy.get(".mx_EventTile_info.mx_EventTile_last .mx_EventTile_line") + cy.get(".mx_EventTile_line") // Make sure the margin is NOT applied to mx_EventTile_line .should("have.css", "margin-inline-start", "0px"); }); From 20aa4aacd120e58bca22910e710446173c5b4ccf Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Tue, 7 Mar 2023 16:31:31 +0900 Subject: [PATCH 25/25] Update the test Signed-off-by: Suguru Hirahara --- cypress/e2e/threads/threads.spec.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/cypress/e2e/threads/threads.spec.ts b/cypress/e2e/threads/threads.spec.ts index 671bbd99345..75585c888b3 100644 --- a/cypress/e2e/threads/threads.spec.ts +++ b/cypress/e2e/threads/threads.spec.ts @@ -102,7 +102,7 @@ describe("Threads", () => { // Wait until the both messages are read cy.get(".mx_ThreadView .mx_EventTile_last[data-layout=group]").within(() => { - cy.get(".mx_EventTile_line .mx_MTextBody").should("have.text", "Hello there"); + cy.get(".mx_EventTile_line .mx_MTextBody").should("have.text", MessageLong); cy.get(".mx_ReadReceiptGroup .mx_BaseAvatar_image").should("be.visible"); // Make sure the CSS style for spacing is applied to mx_EventTile_line on group/modern layout