From 77a996b9acbdfd8eabb50728a0553694f2cc299f Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Sat, 18 Mar 2023 21:07:02 +0900 Subject: [PATCH 01/19] Add E2E test of MessageEditHistoryDialog Signed-off-by: Suguru Hirahara --- cypress/e2e/editing/editing.spec.ts | 163 +++++++++++++++++++++++++++- 1 file changed, 157 insertions(+), 6 deletions(-) diff --git a/cypress/e2e/editing/editing.spec.ts b/cypress/e2e/editing/editing.spec.ts index e056329a7bf..68367e0da02 100644 --- a/cypress/e2e/editing/editing.spec.ts +++ b/cypress/e2e/editing/editing.spec.ts @@ -19,6 +19,7 @@ limitations under the License. import type { EventType, MsgType } from "matrix-js-sdk/src/@types/event"; import type { ISendEventResponse } from "matrix-js-sdk/src/@types/requests"; import type { IContent } from "matrix-js-sdk/src/models/event"; +import { SettingLevel } from "../../../src/settings/SettingLevel"; import { HomeserverInstance } from "../../plugins/utils/homeserver"; import Chainable = Cypress.Chainable; @@ -41,12 +42,16 @@ function mkPadding(n: number): IContent { describe("Editing", () => { let homeserver: HomeserverInstance; + let roomId: string; beforeEach(() => { cy.startHomeserver("default").then((data) => { homeserver = data; cy.initTestUser(homeserver, "Edith").then(() => { - cy.injectAxe(); + cy.createRoom({ name: "Test room" }).then((_room1Id) => { + roomId = _room1Id; + }), + cy.injectAxe(); }); }); }); @@ -55,14 +60,160 @@ describe("Editing", () => { cy.stopHomeserver(homeserver); }); - it("should close the composer when clicking save after making a change and undoing it", () => { - cy.createRoom({ name: "Test room" }).as("roomId"); + it("should render and interact with the message edit history dialog", () => { + cy.visit("/#/room/" + roomId); + + // Send "Message" + sendEvent(roomId); + + cy.get(".mx_RoomView_MessageList").within(() => { + // Edit message + cy.get(".mx_EventTile_last").realHover(); + cy.get(".mx_EventTile_last .mx_MessageActionBar_optionsButton", { timeout: 1000 }) + .should("exist") + .realHover() + .get('.mx_EventTile_last [aria-label="Edit"]') + .click({ force: false }); + cy.get(".mx_BasicMessageComposer_input").type("{selectAll}{del}Massage{enter}"); + }); + + // Assert that the edit label is visible + cy.get(".mx_EventTile_edited").should("be.visible"); - cy.get("@roomId").then((roomId) => { - sendEvent(roomId); - cy.visit("/#/room/" + roomId); + cy.get(".mx_RoomView_MessageList").within(() => { + // Assert that the message was edited + cy.contains(".mx_EventTile", "Massage") + .should("exist") + .within(() => { + // Click to display the message edit history dialog + cy.contains(".mx_EventTile_edited", "(edited)").click(); + }); }); + cy.get(".mx_Dialog").within(() => { + // Assert that the message edit history dialog is rendered + cy.get(".mx_MessageEditHistoryDialog").within(() => { + // Assert that CSS styles which cannot be detected with snapshots are applied as expected + cy.get("li").should("have.css", "clear", "both"); + cy.get(".mx_EventTile") + .should("have.css", "max-width", "100%") + .should("have.css", "clear", "both") + .should("have.css", "position", "relative") + .should("have.css", "padding-block-start", "0px"); + cy.get(".mx_EventTile .mx_MessageTimestamp") + .should("have.css", "position", "absolute") + .should("have.css", "inset-inline-start", "0px") + .should("have.css", "text-align", "center"); + cy.get(".mx_EventTile .mx_EventTile_content").should("have.css", "margin-inline-end", "0px"); + + // Assert that the date separator is rendered + cy.get("li:nth-child(1) .mx_DateSeparator").within(() => { + cy.get("h2").should("have.text", "Today"); + }); + + // Assert that the original message is rendered + cy.get("li:nth-child(3) .mx_EventTile").within(() => { + cy.get(".mx_EventTile_content .mx_EventTile_body").should("have.text", "Message"); + }); + + // Assert that the edited message is rendered + cy.get("li:nth-child(2) .mx_EventTile").within(() => { + cy.get(".mx_EventTile_content").within(() => { + cy.get(".mx_EventTile_body").should("have.text", "Meassage"); + + cy.get(".mx_EventTile_body").within(() => { + // "e" was replaced with "a" + cy.get(".mx_EditHistoryMessage_deletion").should("have.text", "e"); + cy.get(".mx_EditHistoryMessage_insertion").should("have.text", "a"); + }); + }); + }); + }); + }); + + // Exclude timestamps from a snapshot + const percyCSS = ".mx_MessageTimestamp { visibility: hidden !important; }"; + + // Take a snapshot + cy.get(".mx_Dialog .mx_MessageEditHistoryDialog").percySnapshotElement("Message edit history dialog", { + percyCSS, + widths: [704], // See: .mx_Dialog_fixedWidth max-width + }); + + cy.get(".mx_Dialog").within(() => { + // Click "Remove" button on MessageActionBar + cy.get(".mx_MessageEditHistoryDialog").within(() => { + // Assert that the edited message is rendered + cy.get("li:nth-child(2) .mx_EventTile").within(() => { + // Click the "Remove" button + cy.get(".mx_EventTile_line") + .realHover() + .contains(".mx_AccessibleButton", "Remove") + .click({ force: false }); + }); + }); + + // Do nothing and close the dialog to confirm that the message edit history dialog is rendered + cy.get(".mx_TextInputDialog").within(() => { + cy.get("[aria-label='Close dialog']").click(); + }); + + // Assert that the message edit history dialog is rendered again after it was closed + cy.get(".mx_MessageEditHistoryDialog").within(() => { + // Assert that the edited message is rendered again + cy.get("li:nth-child(2) .mx_EventTile").within(() => { + cy.get(".mx_EventTile_content").within(() => { + cy.get(".mx_EventTile_body").should("have.text", "Meassage"); + }); + + // Click the "Remove" button again + cy.get(".mx_EventTile_line") + .realHover() + .contains(".mx_AccessibleButton", "Remove") + .click({ force: false }); + }); + }); + + // This time remove the message really + cy.get(".mx_TextInputDialog").within(() => { + cy.get(".mx_TextInputDialog_input").type("This is a test."); // Reason + cy.contains("[data-testid='dialog-primary-button']", "Remove").click(); + }); + + // Assert that the message edit history dialog is rendered again + cy.get(".mx_MessageEditHistoryDialog").within(() => { + // Assert that the date is rendered + cy.get("li:nth-child(1) .mx_DateSeparator").within(() => { + cy.get("h2").should("have.text", "Today"); + }); + + // Assert that the original message is rendered on the dialog + cy.get("li:nth-child(2) .mx_EventTile").within(() => { + cy.get(".mx_EventTile_content .mx_EventTile_body").should("have.text", "Message"); + }); + + // Assert that the edited message is gone + cy.get("li:nth-child(3) .mx_EventTile").should("not.exist"); + + // Close the dialog + cy.get("[aria-label='Close dialog']").click(); + }); + }); + + // Assert that the main timeline is rendered + cy.get(".mx_RoomView_MessageList").within(() => { + cy.get(".mx_EventTile_last").within(() => { + // Assert that the placeholder is rendered + cy.contains(".mx_RedactedBody", "Message deleted"); + }); + }); + }); + + it("should close the composer when clicking save after making a change and undoing it", () => { + cy.visit("/#/room/" + roomId); + + sendEvent(roomId); + // Edit message cy.contains(".mx_RoomView_body .mx_EventTile .mx_EventTile_line", "Message").within(() => { cy.get('[aria-label="Edit"]').click({ force: true }); // Cypress has no ability to hover From 321ee18d4e761c9900bc8ba1b809483c536d73cb Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Thu, 23 Mar 2023 15:17:42 +0900 Subject: [PATCH 02/19] Check 'View Source' button is rendered only in developer mode Signed-off-by: Suguru Hirahara --- cypress/e2e/editing/editing.spec.ts | 109 ++++++++++++++++++ .../views/messages/EditHistoryMessage.tsx | 6 +- 2 files changed, 114 insertions(+), 1 deletion(-) diff --git a/cypress/e2e/editing/editing.spec.ts b/cypress/e2e/editing/editing.spec.ts index 68367e0da02..fa7c26e75f2 100644 --- a/cypress/e2e/editing/editing.spec.ts +++ b/cypress/e2e/editing/editing.spec.ts @@ -209,6 +209,115 @@ describe("Editing", () => { }); }); + it("should render 'View Source' button in developer mode on the message edit history dialog", () => { + cy.visit("/#/room/" + roomId); + + // Send "Message" + sendEvent(roomId); + + cy.get(".mx_RoomView_MessageList").within(() => { + // Edit message + cy.get(".mx_EventTile_last").realHover(); + cy.get(".mx_EventTile_last .mx_MessageActionBar_optionsButton", { timeout: 1000 }) + .should("exist") + .realHover() + .get('.mx_EventTile_last [aria-label="Edit"]') + .click({ force: false }); + cy.get(".mx_BasicMessageComposer_input").type("{selectAll}{del}Massage{enter}"); + }); + + // Assert that the edit label is visible + cy.get(".mx_EventTile_edited").should("be.visible"); + + cy.get(".mx_RoomView_MessageList").within(() => { + // Assert that the message was edited + cy.contains(".mx_EventTile", "Massage") + .should("exist") + .within(() => { + // Click to display the message edit history dialog + cy.contains(".mx_EventTile_edited", "(edited)").click(); + }); + }); + + cy.get(".mx_Dialog").within(() => { + cy.get(".mx_MessageEditHistoryDialog").within(() => { + // Assert that the original message is rendered + cy.get("li:nth-child(3) .mx_EventTile").within(() => { + // Assert that "View Source" is not rendered + cy.get(".mx_EventTile_line") + .realHover() + .contains(".mx_AccessibleButton", "View Source") + .should("not.exist"); + }); + }); + + // Close the dialog + cy.get("[aria-label='Close dialog']").click(); + }); + + // Enable developer mode + cy.setSettingValue("developerMode", null, SettingLevel.ACCOUNT, true); + + cy.get(".mx_RoomView_MessageList").within(() => { + cy.contains(".mx_EventTile", "Massage") + .should("exist") + .within(() => { + // Click again to display the message edit history dialog + cy.contains(".mx_EventTile_edited", "(edited)").click(); + }); + }); + + cy.get(".mx_Dialog").within(() => { + cy.get(".mx_MessageEditHistoryDialog").within(() => { + // Assert that the edited message is rendered + cy.get("li:nth-child(2) .mx_EventTile").within(() => { + // Assert that "Remove" buttons for the edited message exists + cy.get(".mx_EventTile_line").realHover().contains(".mx_AccessibleButton", "Remove").should("exist"); + + // Assert that "View Source" button is rendered and click it + cy.get(".mx_EventTile_line") + .realHover() + .contains(".mx_AccessibleButton", "View Source") + .should("exist") + .click(); + }); + }); + + // Assert that view source dialog is rendered + cy.get(".mx_ViewSource").within(() => { + // Close the dialog + cy.get("[aria-label='Close dialog']").click(); + }); + + cy.get(".mx_MessageEditHistoryDialog").within(() => { + // Assert that the original message is rendered + cy.get("li:nth-child(3) .mx_EventTile").within(() => { + // Assert that "Remove" button for the original message does not exist + cy.get(".mx_EventTile_line") + .realHover() + .contains(".mx_AccessibleButton", "Remove") + .should("not.exist"); + + // Assert that "View Source" button is rendered and click it + cy.get(".mx_EventTile_line") + .realHover() + .contains(".mx_AccessibleButton", "View Source") + .should("exist") + .click(); + }); + }); + + // Assert that view source dialog is rendered + cy.get(".mx_ViewSource").within(() => { + // Close the dialog + cy.get("[aria-label='Close dialog']").click(); + }); + }); + + // Disable developer mode + cy.setSettingValue("developerMode", null, SettingLevel.ACCOUNT, false); + }); + it("should close the composer when clicking save after making a change and undoing it", () => { cy.visit("/#/room/" + roomId); diff --git a/src/components/views/messages/EditHistoryMessage.tsx b/src/components/views/messages/EditHistoryMessage.tsx index 906867d6a8d..7ad40c407a0 100644 --- a/src/components/views/messages/EditHistoryMessage.tsx +++ b/src/components/views/messages/EditHistoryMessage.tsx @@ -141,9 +141,13 @@ export default class EditHistoryMessage extends React.PureComponent +
{redactButton} {viewSourceButton}
From 743da819c57233aa3af5eaf543c95156cab15114 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Thu, 23 Mar 2023 16:27:53 +0900 Subject: [PATCH 03/19] Change order of checking event tiles Signed-off-by: Suguru Hirahara --- cypress/e2e/editing/editing.spec.ts | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/cypress/e2e/editing/editing.spec.ts b/cypress/e2e/editing/editing.spec.ts index fa7c26e75f2..d229c36f46d 100644 --- a/cypress/e2e/editing/editing.spec.ts +++ b/cypress/e2e/editing/editing.spec.ts @@ -111,11 +111,6 @@ describe("Editing", () => { cy.get("h2").should("have.text", "Today"); }); - // Assert that the original message is rendered - cy.get("li:nth-child(3) .mx_EventTile").within(() => { - cy.get(".mx_EventTile_content .mx_EventTile_body").should("have.text", "Message"); - }); - // Assert that the edited message is rendered cy.get("li:nth-child(2) .mx_EventTile").within(() => { cy.get(".mx_EventTile_content").within(() => { @@ -128,6 +123,11 @@ describe("Editing", () => { }); }); }); + + // Assert that the original message is rendered + cy.get("li:nth-child(3) .mx_EventTile").within(() => { + cy.get(".mx_EventTile_content .mx_EventTile_body").should("have.text", "Message"); + }); }); }); From b930982d1a7a63996802e907c786f7fa87539853 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Thu, 23 Mar 2023 19:48:44 +0900 Subject: [PATCH 04/19] Add comments to explain how the message was edited Signed-off-by: Suguru Hirahara --- cypress/e2e/editing/editing.spec.ts | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/cypress/e2e/editing/editing.spec.ts b/cypress/e2e/editing/editing.spec.ts index d229c36f46d..bd6e011de73 100644 --- a/cypress/e2e/editing/editing.spec.ts +++ b/cypress/e2e/editing/editing.spec.ts @@ -74,6 +74,7 @@ describe("Editing", () => { .realHover() .get('.mx_EventTile_last [aria-label="Edit"]') .click({ force: false }); + // Edit the message from "Message" to "Massage" cy.get(".mx_BasicMessageComposer_input").type("{selectAll}{del}Massage{enter}"); }); @@ -114,10 +115,11 @@ describe("Editing", () => { // Assert that the edited message is rendered cy.get("li:nth-child(2) .mx_EventTile").within(() => { cy.get(".mx_EventTile_content").within(() => { + // Assert that the edited message body consists of both deleted character and inserted character + // Above the first "e" of "Message" was replaced with "a" cy.get(".mx_EventTile_body").should("have.text", "Meassage"); cy.get(".mx_EventTile_body").within(() => { - // "e" was replaced with "a" cy.get(".mx_EditHistoryMessage_deletion").should("have.text", "e"); cy.get(".mx_EditHistoryMessage_insertion").should("have.text", "a"); }); From 77db44c42479d59a4cd50910fc7d28b760ab17e3 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Thu, 23 Mar 2023 19:50:03 +0900 Subject: [PATCH 05/19] Revert unintended change on EditHistoryMessage.tsx Signed-off-by: Suguru Hirahara --- src/components/views/messages/EditHistoryMessage.tsx | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/src/components/views/messages/EditHistoryMessage.tsx b/src/components/views/messages/EditHistoryMessage.tsx index 7ad40c407a0..906867d6a8d 100644 --- a/src/components/views/messages/EditHistoryMessage.tsx +++ b/src/components/views/messages/EditHistoryMessage.tsx @@ -141,13 +141,9 @@ export default class EditHistoryMessage extends React.PureComponent +
{redactButton} {viewSourceButton}
From a457fd0cfa4b1da097256be6d6874989f95b9f9f Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Thu, 23 Mar 2023 20:12:56 +0900 Subject: [PATCH 06/19] Assert that the edited message is gone Signed-off-by: Suguru Hirahara --- cypress/e2e/editing/editing.spec.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/cypress/e2e/editing/editing.spec.ts b/cypress/e2e/editing/editing.spec.ts index bd6e011de73..0495f8c9a9e 100644 --- a/cypress/e2e/editing/editing.spec.ts +++ b/cypress/e2e/editing/editing.spec.ts @@ -189,13 +189,13 @@ describe("Editing", () => { cy.get("h2").should("have.text", "Today"); }); - // Assert that the original message is rendered on the dialog + // Assert that the original message is rendered under the date on the dialog cy.get("li:nth-child(2) .mx_EventTile").within(() => { cy.get(".mx_EventTile_content .mx_EventTile_body").should("have.text", "Message"); }); // Assert that the edited message is gone - cy.get("li:nth-child(3) .mx_EventTile").should("not.exist"); + cy.contains(".mx_EventTile_content .mx_EventTile_body", "Meassage").should("not.exist"); // Close the dialog cy.get("[aria-label='Close dialog']").click(); From bae7a351d08553b932fd4ce7df671905b2bdbfbb Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Thu, 23 Mar 2023 20:17:42 +0900 Subject: [PATCH 07/19] Check '.mx_EventTile_content .mx_EventTile_body' in the same way as the existing cases Signed-off-by: Suguru Hirahara --- cypress/e2e/editing/editing.spec.ts | 28 ++++++++++++---------------- 1 file changed, 12 insertions(+), 16 deletions(-) diff --git a/cypress/e2e/editing/editing.spec.ts b/cypress/e2e/editing/editing.spec.ts index 0495f8c9a9e..9d0e73dc424 100644 --- a/cypress/e2e/editing/editing.spec.ts +++ b/cypress/e2e/editing/editing.spec.ts @@ -107,26 +107,24 @@ describe("Editing", () => { .should("have.css", "text-align", "center"); cy.get(".mx_EventTile .mx_EventTile_content").should("have.css", "margin-inline-end", "0px"); - // Assert that the date separator is rendered + // Assert that the date separator is rendered at the top cy.get("li:nth-child(1) .mx_DateSeparator").within(() => { cy.get("h2").should("have.text", "Today"); }); - // Assert that the edited message is rendered + // Assert that the edited message is rendered at the middle cy.get("li:nth-child(2) .mx_EventTile").within(() => { - cy.get(".mx_EventTile_content").within(() => { - // Assert that the edited message body consists of both deleted character and inserted character - // Above the first "e" of "Message" was replaced with "a" - cy.get(".mx_EventTile_body").should("have.text", "Meassage"); - - cy.get(".mx_EventTile_body").within(() => { - cy.get(".mx_EditHistoryMessage_deletion").should("have.text", "e"); - cy.get(".mx_EditHistoryMessage_insertion").should("have.text", "a"); - }); + // Assert that the edited message body consists of both deleted character and inserted character + // Above the first "e" of "Message" was replaced with "a" + cy.get(".mx_EventTile_content .mx_EventTile_body").should("have.text", "Meassage"); + + cy.get(".mx_EventTile_content .mx_EventTile_body").within(() => { + cy.get(".mx_EditHistoryMessage_deletion").should("have.text", "e"); + cy.get(".mx_EditHistoryMessage_insertion").should("have.text", "a"); }); }); - // Assert that the original message is rendered + // Assert that the original message is rendered at the bottom cy.get("li:nth-child(3) .mx_EventTile").within(() => { cy.get(".mx_EventTile_content .mx_EventTile_body").should("have.text", "Message"); }); @@ -162,11 +160,9 @@ describe("Editing", () => { // Assert that the message edit history dialog is rendered again after it was closed cy.get(".mx_MessageEditHistoryDialog").within(() => { - // Assert that the edited message is rendered again + // Assert that the edited message is rendered under the date again cy.get("li:nth-child(2) .mx_EventTile").within(() => { - cy.get(".mx_EventTile_content").within(() => { - cy.get(".mx_EventTile_body").should("have.text", "Meassage"); - }); + cy.get(".mx_EventTile_content .mx_EventTile_body").should("have.text", "Meassage"); // Click the "Remove" button again cy.get(".mx_EventTile_line") From c990e117f6119aff076abfe219c1fe844698f9ba Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Thu, 23 Mar 2023 20:22:02 +0900 Subject: [PATCH 08/19] Add clickButtonRemove() Signed-off-by: Suguru Hirahara --- cypress/e2e/editing/editing.spec.ts | 16 +++++++--------- 1 file changed, 7 insertions(+), 9 deletions(-) diff --git a/cypress/e2e/editing/editing.spec.ts b/cypress/e2e/editing/editing.spec.ts index 9d0e73dc424..50700d7c151 100644 --- a/cypress/e2e/editing/editing.spec.ts +++ b/cypress/e2e/editing/editing.spec.ts @@ -61,6 +61,11 @@ describe("Editing", () => { }); it("should render and interact with the message edit history dialog", () => { + // Click the "Remove" button on the message edit history dialog + const clickButtonRemove = () => { + cy.get(".mx_EventTile_line").realHover().contains(".mx_AccessibleButton", "Remove").click({ force: false }); + }; + cy.visit("/#/room/" + roomId); // Send "Message" @@ -145,11 +150,7 @@ describe("Editing", () => { cy.get(".mx_MessageEditHistoryDialog").within(() => { // Assert that the edited message is rendered cy.get("li:nth-child(2) .mx_EventTile").within(() => { - // Click the "Remove" button - cy.get(".mx_EventTile_line") - .realHover() - .contains(".mx_AccessibleButton", "Remove") - .click({ force: false }); + clickButtonRemove(); }); }); @@ -165,10 +166,7 @@ describe("Editing", () => { cy.get(".mx_EventTile_content .mx_EventTile_body").should("have.text", "Meassage"); // Click the "Remove" button again - cy.get(".mx_EventTile_line") - .realHover() - .contains(".mx_AccessibleButton", "Remove") - .click({ force: false }); + clickButtonRemove(); }); }); From ec61512b02f94f6610fcf3a974795fea0e11bfc0 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Thu, 23 Mar 2023 20:29:53 +0900 Subject: [PATCH 09/19] Add editLastMessage() Signed-off-by: Suguru Hirahara --- cypress/e2e/editing/editing.spec.ts | 32 ++++++++++++++--------------- 1 file changed, 15 insertions(+), 17 deletions(-) diff --git a/cypress/e2e/editing/editing.spec.ts b/cypress/e2e/editing/editing.spec.ts index 50700d7c151..a94ef365ff3 100644 --- a/cypress/e2e/editing/editing.spec.ts +++ b/cypress/e2e/editing/editing.spec.ts @@ -44,6 +44,17 @@ describe("Editing", () => { let homeserver: HomeserverInstance; let roomId: string; + // Edit "Message" + const editLastMessage = (edit: string) => { + cy.get(".mx_EventTile_last").realHover(); + cy.get(".mx_EventTile_last .mx_MessageActionBar_optionsButton", { timeout: 1000 }) + .should("exist") + .realHover() + .get('.mx_EventTile_last [aria-label="Edit"]') + .click({ force: false }); + cy.get(".mx_BasicMessageComposer_input").type(`{selectAll}{del}${edit}{enter}`); + }; + beforeEach(() => { cy.startHomeserver("default").then((data) => { homeserver = data; @@ -72,15 +83,8 @@ describe("Editing", () => { sendEvent(roomId); cy.get(".mx_RoomView_MessageList").within(() => { - // Edit message - cy.get(".mx_EventTile_last").realHover(); - cy.get(".mx_EventTile_last .mx_MessageActionBar_optionsButton", { timeout: 1000 }) - .should("exist") - .realHover() - .get('.mx_EventTile_last [aria-label="Edit"]') - .click({ force: false }); - // Edit the message from "Message" to "Massage" - cy.get(".mx_BasicMessageComposer_input").type("{selectAll}{del}Massage{enter}"); + // Edit "Message" to "Massage" + editLastMessage("Massage"); }); // Assert that the edit label is visible @@ -212,14 +216,8 @@ describe("Editing", () => { sendEvent(roomId); cy.get(".mx_RoomView_MessageList").within(() => { - // Edit message - cy.get(".mx_EventTile_last").realHover(); - cy.get(".mx_EventTile_last .mx_MessageActionBar_optionsButton", { timeout: 1000 }) - .should("exist") - .realHover() - .get('.mx_EventTile_last [aria-label="Edit"]') - .click({ force: false }); - cy.get(".mx_BasicMessageComposer_input").type("{selectAll}{del}Massage{enter}"); + // Edit "Message" to "Massage" + editLastMessage("Massage"); }); // Assert that the edit label is visible From 5889894f48a710b5e90d6b0c51f378975b69d248 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Thu, 23 Mar 2023 20:48:28 +0900 Subject: [PATCH 10/19] Add clickEditedMessage() Signed-off-by: Suguru Hirahara --- cypress/e2e/editing/editing.spec.ts | 33 ++++++++++++----------------- 1 file changed, 13 insertions(+), 20 deletions(-) diff --git a/cypress/e2e/editing/editing.spec.ts b/cypress/e2e/editing/editing.spec.ts index a94ef365ff3..b9c123d6b93 100644 --- a/cypress/e2e/editing/editing.spec.ts +++ b/cypress/e2e/editing/editing.spec.ts @@ -55,6 +55,16 @@ describe("Editing", () => { cy.get(".mx_BasicMessageComposer_input").type(`{selectAll}{del}${edit}{enter}`); }; + const clickEditedMessage = (edited: string) => { + // Assert that the message was edited + cy.contains(".mx_EventTile", edited) + .should("exist") + .within(() => { + // Click to display the message edit history dialog + cy.contains(".mx_EventTile_edited", "(edited)").click(); + }); + }; + beforeEach(() => { cy.startHomeserver("default").then((data) => { homeserver = data; @@ -91,13 +101,7 @@ describe("Editing", () => { cy.get(".mx_EventTile_edited").should("be.visible"); cy.get(".mx_RoomView_MessageList").within(() => { - // Assert that the message was edited - cy.contains(".mx_EventTile", "Massage") - .should("exist") - .within(() => { - // Click to display the message edit history dialog - cy.contains(".mx_EventTile_edited", "(edited)").click(); - }); + clickEditedMessage("Massage"); }); cy.get(".mx_Dialog").within(() => { @@ -224,13 +228,7 @@ describe("Editing", () => { cy.get(".mx_EventTile_edited").should("be.visible"); cy.get(".mx_RoomView_MessageList").within(() => { - // Assert that the message was edited - cy.contains(".mx_EventTile", "Massage") - .should("exist") - .within(() => { - // Click to display the message edit history dialog - cy.contains(".mx_EventTile_edited", "(edited)").click(); - }); + clickEditedMessage("Massage"); }); cy.get(".mx_Dialog").within(() => { @@ -253,12 +251,7 @@ describe("Editing", () => { cy.setSettingValue("developerMode", null, SettingLevel.ACCOUNT, true); cy.get(".mx_RoomView_MessageList").within(() => { - cy.contains(".mx_EventTile", "Massage") - .should("exist") - .within(() => { - // Click again to display the message edit history dialog - cy.contains(".mx_EventTile_edited", "(edited)").click(); - }); + clickEditedMessage("Massage"); }); cy.get(".mx_Dialog").within(() => { From 5c5842726e4107e27e5e337f4e008826dc93d610 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Thu, 23 Mar 2023 20:52:01 +0900 Subject: [PATCH 11/19] Edit within() to simplify the structure Signed-off-by: Suguru Hirahara --- cypress/e2e/editing/editing.spec.ts | 107 +++++++++++++--------------- 1 file changed, 48 insertions(+), 59 deletions(-) diff --git a/cypress/e2e/editing/editing.spec.ts b/cypress/e2e/editing/editing.spec.ts index b9c123d6b93..07f2a0d43c1 100644 --- a/cypress/e2e/editing/editing.spec.ts +++ b/cypress/e2e/editing/editing.spec.ts @@ -95,12 +95,10 @@ describe("Editing", () => { cy.get(".mx_RoomView_MessageList").within(() => { // Edit "Message" to "Massage" editLastMessage("Massage"); - }); - // Assert that the edit label is visible - cy.get(".mx_EventTile_edited").should("be.visible"); + // Assert that the edit label is visible + cy.get(".mx_EventTile_edited").should("be.visible"); - cy.get(".mx_RoomView_MessageList").within(() => { clickEditedMessage("Massage"); }); @@ -154,12 +152,11 @@ describe("Editing", () => { }); cy.get(".mx_Dialog").within(() => { - // Click "Remove" button on MessageActionBar - cy.get(".mx_MessageEditHistoryDialog").within(() => { - // Assert that the edited message is rendered - cy.get("li:nth-child(2) .mx_EventTile").within(() => { - clickButtonRemove(); - }); + cy.get(".mx_MessageEditHistoryDialog li:nth-child(2) .mx_EventTile").within(() => { + cy.get(".mx_EventTile_content .mx_EventTile_body").should("have.text", "Meassage"); + + // Click the "Remove" button again + clickButtonRemove(); }); // Do nothing and close the dialog to confirm that the message edit history dialog is rendered @@ -168,14 +165,11 @@ describe("Editing", () => { }); // Assert that the message edit history dialog is rendered again after it was closed - cy.get(".mx_MessageEditHistoryDialog").within(() => { - // Assert that the edited message is rendered under the date again - cy.get("li:nth-child(2) .mx_EventTile").within(() => { - cy.get(".mx_EventTile_content .mx_EventTile_body").should("have.text", "Meassage"); + cy.get(".mx_MessageEditHistoryDialog li:nth-child(2) .mx_EventTile").within(() => { + cy.get(".mx_EventTile_content .mx_EventTile_body").should("have.text", "Meassage"); - // Click the "Remove" button again - clickButtonRemove(); - }); + // Click the "Remove" button again + clickButtonRemove(); }); // This time remove the message really @@ -222,25 +216,21 @@ describe("Editing", () => { cy.get(".mx_RoomView_MessageList").within(() => { // Edit "Message" to "Massage" editLastMessage("Massage"); - }); - // Assert that the edit label is visible - cy.get(".mx_EventTile_edited").should("be.visible"); + // Assert that the edit label is visible + cy.get(".mx_EventTile_edited").should("be.visible"); - cy.get(".mx_RoomView_MessageList").within(() => { clickEditedMessage("Massage"); }); cy.get(".mx_Dialog").within(() => { - cy.get(".mx_MessageEditHistoryDialog").within(() => { - // Assert that the original message is rendered - cy.get("li:nth-child(3) .mx_EventTile").within(() => { - // Assert that "View Source" is not rendered - cy.get(".mx_EventTile_line") - .realHover() - .contains(".mx_AccessibleButton", "View Source") - .should("not.exist"); - }); + // Assert that the original message is rendered + cy.get(".mx_MessageEditHistoryDialog li:nth-child(3)").within(() => { + // Assert that "View Source" is not rendered + cy.get(".mx_EventTile .mx_EventTile_line") + .realHover() + .contains(".mx_AccessibleButton", "View Source") + .should("not.exist"); }); // Close the dialog @@ -255,19 +245,20 @@ describe("Editing", () => { }); cy.get(".mx_Dialog").within(() => { - cy.get(".mx_MessageEditHistoryDialog").within(() => { - // Assert that the edited message is rendered - cy.get("li:nth-child(2) .mx_EventTile").within(() => { - // Assert that "Remove" buttons for the edited message exists - cy.get(".mx_EventTile_line").realHover().contains(".mx_AccessibleButton", "Remove").should("exist"); - - // Assert that "View Source" button is rendered and click it - cy.get(".mx_EventTile_line") - .realHover() - .contains(".mx_AccessibleButton", "View Source") - .should("exist") - .click(); - }); + // Assert that the edited message is rendered + cy.get(".mx_MessageEditHistoryDialog li:nth-child(2)").within(() => { + // Assert that "Remove" button for the original message is rendered + cy.get(".mx_EventTile .mx_EventTile_line") + .realHover() + .contains(".mx_AccessibleButton", "Remove") + .should("exist"); + + // Assert that "View Source" button is rendered and click it + cy.get(".mx_EventTile .mx_EventTile_line") + .realHover() + .contains(".mx_AccessibleButton", "View Source") + .should("exist") + .click(); }); // Assert that view source dialog is rendered @@ -276,22 +267,20 @@ describe("Editing", () => { cy.get("[aria-label='Close dialog']").click(); }); - cy.get(".mx_MessageEditHistoryDialog").within(() => { - // Assert that the original message is rendered - cy.get("li:nth-child(3) .mx_EventTile").within(() => { - // Assert that "Remove" button for the original message does not exist - cy.get(".mx_EventTile_line") - .realHover() - .contains(".mx_AccessibleButton", "Remove") - .should("not.exist"); - - // Assert that "View Source" button is rendered and click it - cy.get(".mx_EventTile_line") - .realHover() - .contains(".mx_AccessibleButton", "View Source") - .should("exist") - .click(); - }); + // Assert that the original message is rendered + cy.get(".mx_MessageEditHistoryDialog li:nth-child(3)").within(() => { + // Assert that "Remove" button for the original message does not exist + cy.get(".mx_EventTile .mx_EventTile_line") + .realHover() + .contains(".mx_AccessibleButton", "Remove") + .should("not.exist"); + + // Assert that "View Source" button is rendered and click it + cy.get(".mx_EventTile .mx_EventTile_line") + .realHover() + .contains(".mx_AccessibleButton", "View Source") + .should("exist") + .click(); }); // Assert that view source dialog is rendered From 203c8c80a7368623c6e584947f91db7e0d4af538 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Thu, 23 Mar 2023 20:58:41 +0900 Subject: [PATCH 12/19] Remove redundant CSS checks Signed-off-by: Suguru Hirahara --- cypress/e2e/editing/editing.spec.ts | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/cypress/e2e/editing/editing.spec.ts b/cypress/e2e/editing/editing.spec.ts index 07f2a0d43c1..a66b0d6baee 100644 --- a/cypress/e2e/editing/editing.spec.ts +++ b/cypress/e2e/editing/editing.spec.ts @@ -105,19 +105,19 @@ describe("Editing", () => { cy.get(".mx_Dialog").within(() => { // Assert that the message edit history dialog is rendered cy.get(".mx_MessageEditHistoryDialog").within(() => { - // Assert that CSS styles which cannot be detected with snapshots are applied as expected + // Assert CSS styles which is difficult or cannot be detected with snapshots are applied as expected cy.get("li").should("have.css", "clear", "both"); - cy.get(".mx_EventTile") - .should("have.css", "max-width", "100%") - .should("have.css", "clear", "both") - .should("have.css", "position", "relative") - .should("have.css", "padding-block-start", "0px"); cy.get(".mx_EventTile .mx_MessageTimestamp") .should("have.css", "position", "absolute") .should("have.css", "inset-inline-start", "0px") .should("have.css", "text-align", "center"); cy.get(".mx_EventTile .mx_EventTile_content").should("have.css", "margin-inline-end", "0px"); + // Assert that zero block start padding is applied to mx_EventTile as expected + // See: .mx_EventTile on _EventTile.pcss + cy.get(".mx_EventTile") + .should("have.css", "padding-block-start", "0px"); + // Assert that the date separator is rendered at the top cy.get("li:nth-child(1) .mx_DateSeparator").within(() => { cy.get("h2").should("have.text", "Today"); From bdad116d4be2bd5743d8384bf3a27c1f131d396a Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Thu, 23 Mar 2023 21:20:55 +0900 Subject: [PATCH 13/19] Add clickButtonViewSource() Signed-off-by: Suguru Hirahara --- cypress/e2e/editing/editing.spec.ts | 23 +++++++++++------------ 1 file changed, 11 insertions(+), 12 deletions(-) diff --git a/cypress/e2e/editing/editing.spec.ts b/cypress/e2e/editing/editing.spec.ts index a66b0d6baee..01ce051961b 100644 --- a/cypress/e2e/editing/editing.spec.ts +++ b/cypress/e2e/editing/editing.spec.ts @@ -65,6 +65,15 @@ describe("Editing", () => { }); }; + const clickButtonViewSource = () => { + // Assert that "View Source" button is rendered and click it + cy.get(".mx_EventTile .mx_EventTile_line") + .realHover() + .contains(".mx_AccessibleButton", "View Source") + .should("exist") + .click(); + }; + beforeEach(() => { cy.startHomeserver("default").then((data) => { homeserver = data; @@ -253,12 +262,7 @@ describe("Editing", () => { .contains(".mx_AccessibleButton", "Remove") .should("exist"); - // Assert that "View Source" button is rendered and click it - cy.get(".mx_EventTile .mx_EventTile_line") - .realHover() - .contains(".mx_AccessibleButton", "View Source") - .should("exist") - .click(); + clickButtonViewSource(); }); // Assert that view source dialog is rendered @@ -275,12 +279,7 @@ describe("Editing", () => { .contains(".mx_AccessibleButton", "Remove") .should("not.exist"); - // Assert that "View Source" button is rendered and click it - cy.get(".mx_EventTile .mx_EventTile_line") - .realHover() - .contains(".mx_AccessibleButton", "View Source") - .should("exist") - .click(); + clickButtonViewSource(); }); // Assert that view source dialog is rendered From 475571c1dcf9a6320589228d7d0d266ad2bb9c3e Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Thu, 23 Mar 2023 21:44:50 +0900 Subject: [PATCH 14/19] Edit comments Signed-off-by: Suguru Hirahara --- cypress/e2e/editing/editing.spec.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/cypress/e2e/editing/editing.spec.ts b/cypress/e2e/editing/editing.spec.ts index 01ce051961b..dc0d2c98816 100644 --- a/cypress/e2e/editing/editing.spec.ts +++ b/cypress/e2e/editing/editing.spec.ts @@ -114,7 +114,7 @@ describe("Editing", () => { cy.get(".mx_Dialog").within(() => { // Assert that the message edit history dialog is rendered cy.get(".mx_MessageEditHistoryDialog").within(() => { - // Assert CSS styles which is difficult or cannot be detected with snapshots are applied as expected + // Assert CSS styles which are difficult or cannot be detected with snapshots are applied as expected cy.get("li").should("have.css", "clear", "both"); cy.get(".mx_EventTile .mx_MessageTimestamp") .should("have.css", "position", "absolute") @@ -132,7 +132,7 @@ describe("Editing", () => { cy.get("h2").should("have.text", "Today"); }); - // Assert that the edited message is rendered at the middle + // Assert that the edited message is rendered under the date separator cy.get("li:nth-child(2) .mx_EventTile").within(() => { // Assert that the edited message body consists of both deleted character and inserted character // Above the first "e" of "Message" was replaced with "a" From 6fb5b3671b14e5257e62fdde06a02dde2ec65b92 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Thu, 23 Mar 2023 21:58:59 +0900 Subject: [PATCH 15/19] lint Signed-off-by: Suguru Hirahara --- cypress/e2e/editing/editing.spec.ts | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/cypress/e2e/editing/editing.spec.ts b/cypress/e2e/editing/editing.spec.ts index dc0d2c98816..54e8ff73715 100644 --- a/cypress/e2e/editing/editing.spec.ts +++ b/cypress/e2e/editing/editing.spec.ts @@ -124,8 +124,7 @@ describe("Editing", () => { // Assert that zero block start padding is applied to mx_EventTile as expected // See: .mx_EventTile on _EventTile.pcss - cy.get(".mx_EventTile") - .should("have.css", "padding-block-start", "0px"); + cy.get(".mx_EventTile").should("have.css", "padding-block-start", "0px"); // Assert that the date separator is rendered at the top cy.get("li:nth-child(1) .mx_DateSeparator").within(() => { From 952f3706e4685e2211ae6d1d5f80bd179e3442d9 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Mon, 27 Mar 2023 19:05:28 +0900 Subject: [PATCH 16/19] Remove setSettingValue of developerMode Signed-off-by: Suguru Hirahara --- cypress/e2e/editing/editing.spec.ts | 3 --- 1 file changed, 3 deletions(-) diff --git a/cypress/e2e/editing/editing.spec.ts b/cypress/e2e/editing/editing.spec.ts index 54e8ff73715..19bbe9dd0e8 100644 --- a/cypress/e2e/editing/editing.spec.ts +++ b/cypress/e2e/editing/editing.spec.ts @@ -287,9 +287,6 @@ describe("Editing", () => { cy.get("[aria-label='Close dialog']").click(); }); }); - - // Disable developer mode - cy.setSettingValue("developerMode", null, SettingLevel.ACCOUNT, false); }); it("should close the composer when clicking save after making a change and undoing it", () => { From 1336573945d7d30209f75b82c1f4734eca943154 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Mon, 27 Mar 2023 23:59:06 +0900 Subject: [PATCH 17/19] Add a comment Signed-off-by: Suguru Hirahara --- cypress/e2e/editing/editing.spec.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/cypress/e2e/editing/editing.spec.ts b/cypress/e2e/editing/editing.spec.ts index 19bbe9dd0e8..8308cdfa90b 100644 --- a/cypress/e2e/editing/editing.spec.ts +++ b/cypress/e2e/editing/editing.spec.ts @@ -120,6 +120,7 @@ describe("Editing", () => { .should("have.css", "position", "absolute") .should("have.css", "inset-inline-start", "0px") .should("have.css", "text-align", "center"); + // Assert that monospace characters can fill the content line as expected cy.get(".mx_EventTile .mx_EventTile_content").should("have.css", "margin-inline-end", "0px"); // Assert that zero block start padding is applied to mx_EventTile as expected From 84918ca4867ce38b7e5ac91b4b92bbfe60fdfa68 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Tue, 28 Mar 2023 00:03:20 +0900 Subject: [PATCH 18/19] Fix the scope of a snapshot Have Percy take a snapshot of the dialog including its wrapper. Signed-off-by: Suguru Hirahara --- cypress/e2e/editing/editing.spec.ts | 7 ++----- 1 file changed, 2 insertions(+), 5 deletions(-) diff --git a/cypress/e2e/editing/editing.spec.ts b/cypress/e2e/editing/editing.spec.ts index 8308cdfa90b..a144c15feca 100644 --- a/cypress/e2e/editing/editing.spec.ts +++ b/cypress/e2e/editing/editing.spec.ts @@ -154,11 +154,8 @@ describe("Editing", () => { // Exclude timestamps from a snapshot const percyCSS = ".mx_MessageTimestamp { visibility: hidden !important; }"; - // Take a snapshot - cy.get(".mx_Dialog .mx_MessageEditHistoryDialog").percySnapshotElement("Message edit history dialog", { - percyCSS, - widths: [704], // See: .mx_Dialog_fixedWidth max-width - }); + // Take a snapshot of the dialog + cy.get(".mx_Dialog_wrapper").percySnapshotElement("Message edit history dialog", { percyCSS }); cy.get(".mx_Dialog").within(() => { cy.get(".mx_MessageEditHistoryDialog li:nth-child(2) .mx_EventTile").within(() => { From 58fbde18f3c43d88a7d91ff6f5ff54070f5821c7 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Tue, 28 Mar 2023 01:13:33 +0900 Subject: [PATCH 19/19] Use cy.closeDialog() Signed-off-by: Suguru Hirahara --- cypress/e2e/editing/editing.spec.ts | 24 +++++++----------------- 1 file changed, 7 insertions(+), 17 deletions(-) diff --git a/cypress/e2e/editing/editing.spec.ts b/cypress/e2e/editing/editing.spec.ts index a144c15feca..76d4c8da1b7 100644 --- a/cypress/e2e/editing/editing.spec.ts +++ b/cypress/e2e/editing/editing.spec.ts @@ -166,9 +166,7 @@ describe("Editing", () => { }); // Do nothing and close the dialog to confirm that the message edit history dialog is rendered - cy.get(".mx_TextInputDialog").within(() => { - cy.get("[aria-label='Close dialog']").click(); - }); + cy.get(".mx_TextInputDialog").closeDialog(); // Assert that the message edit history dialog is rendered again after it was closed cy.get(".mx_MessageEditHistoryDialog li:nth-child(2) .mx_EventTile").within(() => { @@ -199,8 +197,7 @@ describe("Editing", () => { // Assert that the edited message is gone cy.contains(".mx_EventTile_content .mx_EventTile_body", "Meassage").should("not.exist"); - // Close the dialog - cy.get("[aria-label='Close dialog']").click(); + cy.closeDialog(); }); }); @@ -239,8 +236,7 @@ describe("Editing", () => { .should("not.exist"); }); - // Close the dialog - cy.get("[aria-label='Close dialog']").click(); + cy.closeDialog(); }); // Enable developer mode @@ -262,11 +258,8 @@ describe("Editing", () => { clickButtonViewSource(); }); - // Assert that view source dialog is rendered - cy.get(".mx_ViewSource").within(() => { - // Close the dialog - cy.get("[aria-label='Close dialog']").click(); - }); + // Assert that view source dialog is rendered and close the dialog + cy.get(".mx_ViewSource").closeDialog(); // Assert that the original message is rendered cy.get(".mx_MessageEditHistoryDialog li:nth-child(3)").within(() => { @@ -279,11 +272,8 @@ describe("Editing", () => { clickButtonViewSource(); }); - // Assert that view source dialog is rendered - cy.get(".mx_ViewSource").within(() => { - // Close the dialog - cy.get("[aria-label='Close dialog']").click(); - }); + // Assert that view source dialog is rendered and close the dialog + cy.get(".mx_ViewSource").closeDialog(); }); });