Add E2E test of MessageEditHistoryDialog

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,269 @@ 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(".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 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");
+                        });
+                    });
+                });
+
+                // 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");
+                });
+            });
+        });
+
+        // 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();
+            });
+        });
 
-        cy.get<string>("@roomId").then((roomId) => {
-            sendEvent(roomId);
-            cy.visit("/#/room/" + roomId);
+        // 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 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);
+
+        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

src/components/views/messages/EditHistoryMessage.tsx

@@ -141,9 +141,13 @@ export default class EditHistoryMessage extends React.PureComponent<IProps, ISta
             );
         }
 
+        const classes = classNames("mx_MessageActionBar", {
+            "mx_MessageActionBar--developer--not": !SettingsStore.getValue("developerMode"),
+        });
+
         // disabled remove button when not allowed
         return (
-            <div className="mx_MessageActionBar">
+            <div className={classes}>
                 {redactButton}
                 {viewSourceButton}
             </div>