Migrate most of editing.spec.ts from Cypress to Playwright (#11947)

* Migrate location.spec.ts from Cypress to Playwright

Signed-off-by: Michael Telatynski <[email protected]>

* Migrate location.spec.ts from Cypress to Playwright

Signed-off-by: Michael Telatynski <[email protected]>

* Add screenshot

Signed-off-by: Michael Telatynski <[email protected]>

* Deflake

Signed-off-by: Michael Telatynski <[email protected]>

---------

Signed-off-by: Michael Telatynski <[email protected]>

Author: t3chguy

cypress/e2e/editing/editing.spec.ts

@@ -16,17 +16,8 @@ limitations under the License.
 
 /// <reference types="cypress" />
 
-import type { EventType, MsgType, ISendEventResponse, IContent } from "matrix-js-sdk/src/matrix";
-import { SettingLevel } from "../../../src/settings/SettingLevel";
+import type { MsgType, IContent } from "matrix-js-sdk/src/matrix";
 import { HomeserverInstance } from "../../plugins/utils/homeserver";
-import Chainable = Cypress.Chainable;
-
-const sendEvent = (roomId: string): Chainable<ISendEventResponse> => {
-    return cy.sendEvent(roomId, null, "m.room.message" as EventType, {
-        msgtype: "m.text" as MsgType,
-        body: "Message",
-    });
-};
 
 /** generate a message event which will take up some room on the page. */
 function mkPadding(n: number): IContent {
@@ -40,37 +31,13 @@ function mkPadding(n: number): IContent {
 
 describe("Editing", () => {
     let homeserver: HomeserverInstance;
-    let roomId: string;
-
-    // Edit "Message"
-    const editLastMessage = (edit: string) => {
-        cy.get(".mx_EventTile_last").realHover().findByRole("button", { name: "Edit" }).click();
-        cy.findByRole("textbox", { name: "Edit message" }).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();
-            });
-    };
-
-    const clickButtonViewSource = () => {
-        // Assert that "View Source" button is rendered and click it
-        cy.get(".mx_EventTile .mx_EventTile_line").realHover().findByRole("button", { name: "View Source" }).click();
-    };
 
     beforeEach(() => {
         cy.startHomeserver("default").then((data) => {
             homeserver = data;
             cy.initTestUser(homeserver, "Edith").then(() => {
-                cy.createRoom({ name: "Test room" }).then((_room1Id) => {
-                    roomId = _room1Id;
-                }),
-                    cy.injectAxe();
+                cy.createRoom({ name: "Test room" });
+                cy.injectAxe();
             });
         });
     });
@@ -79,224 +46,6 @@ describe("Editing", () => {
         cy.stopHomeserver(homeserver);
     });
 
-    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().findByRole("button", { name: "Remove" }).click();
-        };
-
-        cy.visit("/#/room/" + roomId);
-
-        // Send "Message"
-        sendEvent(roomId);
-
-        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");
-
-            clickEditedMessage("Massage");
-        });
-
-        cy.get(".mx_Dialog").within(() => {
-            // Assert that the message edit history dialog is rendered
-            cy.get(".mx_MessageEditHistoryDialog").within(() => {
-                // 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")
-                    .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
-                // 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_TimelineSeparator").within(() => {
-                    cy.get("h2").within(() => {
-                        cy.findByText("today").should("have.css", "text-transform", "capitalize");
-                    });
-                });
-
-                // 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"
-                    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").within(() => {
-                            cy.findByText("e");
-                        });
-                        cy.get(".mx_EditHistoryMessage_insertion").within(() => {
-                            cy.findByText("a");
-                        });
-                    });
-                });
-
-                // 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").within(() => {
-                        cy.findByText("Message");
-                    });
-                });
-            });
-        });
-
-        // Exclude timestamps from a snapshot
-        const percyCSS = ".mx_MessageTimestamp { visibility: hidden !important; }";
-
-        // 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(() => {
-                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
-            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(() => {
-                cy.get(".mx_EventTile_content .mx_EventTile_body").should("have.text", "Meassage");
-
-                // Click the "Remove" button again
-                clickButtonRemove();
-            });
-
-            // This time remove the message really
-            cy.get(".mx_TextInputDialog").within(() => {
-                cy.findByRole("textbox", { name: "Reason (optional)" }).type("This is a test."); // Reason
-                cy.findByRole("button", { name: "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_TimelineSeparator").within(() => {
-                    cy.get("h2").within(() => {
-                        cy.findByText("today").should("have.css", "text-transform", "capitalize");
-                    });
-                });
-
-                // 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").within(() => {
-                        cy.findByText("Message");
-                    });
-                });
-
-                // Assert that the edited message is gone
-                cy.contains(".mx_EventTile_content .mx_EventTile_body", "Meassage").should("not.exist");
-
-                cy.closeDialog();
-            });
-        });
-
-        // Assert that the main timeline is rendered
-        cy.get(".mx_RoomView_MessageList").within(() => {
-            cy.get(".mx_EventTile_last .mx_RedactedBody").within(() => {
-                // Assert that the placeholder is rendered
-                cy.findByText("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" to "Massage"
-            editLastMessage("Massage");
-
-            // Assert that the edit label is visible
-            cy.get(".mx_EventTile_edited").should("be.visible");
-
-            clickEditedMessage("Massage");
-        });
-
-        cy.get(".mx_Dialog").within(() => {
-            // 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()
-                    .findByRole("button", { name: "View Source" })
-                    .should("not.exist");
-            });
-
-            cy.closeDialog();
-        });
-
-        // Enable developer mode
-        cy.setSettingValue("developerMode", null, SettingLevel.ACCOUNT, true);
-
-        cy.get(".mx_RoomView_MessageList").within(() => {
-            clickEditedMessage("Massage");
-        });
-
-        cy.get(".mx_Dialog").within(() => {
-            // 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().findByRole("button", { name: "Remove" });
-
-                clickButtonViewSource();
-            });
-
-            // 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(() => {
-                // Assert that "Remove" button for the original message does not exist
-                cy.get(".mx_EventTile .mx_EventTile_line")
-                    .realHover()
-                    .findByRole("button", { name: "Remove" })
-                    .should("not.exist");
-
-                clickButtonViewSource();
-            });
-
-            // Assert that view source dialog is rendered and close the dialog
-            cy.get(".mx_ViewSource").closeDialog();
-        });
-    });
-
-    it("should close the composer when clicking save after making a change and undoing it", () => {
-        cy.visit("/#/room/" + roomId);
-
-        sendEvent(roomId);
-
-        // Edit message
-        cy.get(".mx_RoomView_body .mx_EventTile").within(() => {
-            cy.findByText("Message");
-            cy.get(".mx_EventTile_line").realHover().findByRole("button", { name: "Edit" }).click().checkA11y();
-            cy.get(".mx_EventTile_line")
-                .findByRole("textbox", { name: "Edit message" })
-                .type("Foo{backspace}{backspace}{backspace}{enter}")
-                .checkA11y();
-        });
-        cy.get(".mx_RoomView_body .mx_EventTile[data-scroll-tokens]").within(() => {
-            cy.findByText("Message");
-        });
-
-        // Assert that the edit composer has gone away
-        cy.findByRole("textbox", { name: "Edit message" }).should("not.exist");
-    });
-
     it("should correctly display events which are edited, where we lack the edit event", () => {
         // This tests the behaviour when a message has been edited some time after it has been sent, and we
         // jump back in room history to view the event, but do not have the actual edit event.