From 65f605951f8f9b8b569bc986372767933394959b Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Tue, 11 Apr 2023 10:33:32 +0000 Subject: [PATCH] Update `timeline.spec.ts` (#10540) * timeline.spec.ts - deprecate custom commands of find.ts Signed-off-by: Suguru Hirahara * Iterate - clickButtonReply() - findByText() Signed-off-by: Suguru Hirahara --------- Signed-off-by: Suguru Hirahara --- cypress/e2e/timeline/timeline.spec.ts | 137 ++++++++++++++------------ 1 file changed, 74 insertions(+), 63 deletions(-) diff --git a/cypress/e2e/timeline/timeline.spec.ts b/cypress/e2e/timeline/timeline.spec.ts index f14a1e14d3..fe7cefd1a4 100644 --- a/cypress/e2e/timeline/timeline.spec.ts +++ b/cypress/e2e/timeline/timeline.spec.ts @@ -197,10 +197,10 @@ describe("Timeline", () => { cy.get(".mx_GenericEventListSummary").within(() => { // Click "expand" link button - cy.findButton("expand").click(); + cy.findByRole("button", { name: "expand" }).click(); // Assert that the "expand" link button worked - cy.findButton("collapse").should("exist"); + cy.findByRole("button", { name: "collapse" }).should("exist"); }); // Check the height of expanded GELS line @@ -232,10 +232,10 @@ describe("Timeline", () => { cy.get(".mx_GenericEventListSummary").within(() => { // Click "expand" link button - cy.findButton("expand").click(); + cy.findByRole("button", { name: "expand" }).click(); // Assert that the "expand" link button worked - cy.findButton("collapse").should("exist"); + cy.findByRole("button", { name: "collapse" }).should("exist"); }); // Check the height of expanded GELS line @@ -262,10 +262,10 @@ describe("Timeline", () => { cy.get(".mx_GenericEventListSummary").within(() => { // Click "expand" link button - cy.findButton("expand").click(); + cy.findByRole("button", { name: "expand" }).click(); // Assert that the "expand" link button worked - cy.findButton("collapse").should("exist"); + cy.findByRole("button", { name: "collapse" }).should("exist"); }); // Make sure spacer is not visible on bubble layout @@ -283,11 +283,12 @@ describe("Timeline", () => { // Click "collapse" link button on the first hovered info event line cy.get(".mx_GenericEventListSummary_unstyledList .mx_EventTile_info:first-of-type") .realHover() - .findButton("collapse") - .click(); + .findByRole("toolbar", { name: "Message Actions" }) + .should("be.visible"); + cy.findByRole("button", { name: "collapse" }).click(); // Assert that "collapse" link button worked - cy.findButton("expand").should("exist"); + cy.findByRole("button", { name: "expand" }).should("exist"); }); // Save snapshot of collapsed generic event list summary on bubble layout @@ -305,7 +306,7 @@ describe("Timeline", () => { ).should("exist"); // Click "expand" link button - cy.get(".mx_GenericEventListSummary").findButton("expand").click(); + cy.get(".mx_GenericEventListSummary").findByRole("button", { name: "expand" }).click(); // Check the event line has margin instead of inset property // cf. _EventTile.pcss @@ -335,7 +336,7 @@ describe("Timeline", () => { cy.contains(".mx_RoomView_body .mx_EventTile .mx_EventTile_line", "Message") .realHover() .within(() => { - cy.findButton("Edit").click(); + cy.findByRole("button", { name: "Edit" }).click(); cy.get(".mx_BasicMessageComposer_input").type("Edit{enter}"); }); cy.contains(".mx_RoomView_body .mx_EventTile[data-scroll-tokens]", "MessageEdit").should("exist"); @@ -394,7 +395,7 @@ describe("Timeline", () => { // 2. Alignment of expanded GELS and messages // Click "expand" link button - cy.get(".mx_GenericEventListSummary").findButton("expand").click(); + cy.get(".mx_GenericEventListSummary").findByRole("button", { name: "expand" }).click(); // Check inline start spacing of info line on expanded GELS cy.get(".mx_EventTile[data-layout=irc].mx_EventTile_info:first-of-type .mx_EventTile_line") // See: _EventTile.pcss @@ -408,12 +409,14 @@ describe("Timeline", () => { // Delete the second (last) message cy.get(".mx_RoomView_MessageList > .mx_EventTile_last") .realHover() - .findButton("Options") + .findByRole("button", { name: "Options" }) .should("be.visible") .click(); - cy.findMenuitem("Remove").should("be.visible").click(); + cy.findByRole("menuitem", { name: "Remove" }).should("be.visible").click(); // Confirm deletion - cy.get(".mx_Dialog_buttons button[data-testid=dialog-primary-button]").findButton("Remove").click(); + cy.get(".mx_Dialog_buttons").within(() => { + cy.findByRole("button", { name: "Remove" }).click(); + }); // Make sure the dialog was closed and the second (last) message was redacted cy.get(".mx_Dialog").should("not.exist"); cy.get(".mx_GenericEventListSummary .mx_EventTile_last .mx_RedactedBody").should("be.visible"); @@ -632,7 +635,7 @@ describe("Timeline", () => { .should("exist") .realHover() .within(() => { - cy.findButton("toggle event").click("topLeft"); + cy.findByRole("button", { name: "toggle event" }).click("topLeft"); }); // Make sure the expand toggle works @@ -640,7 +643,7 @@ describe("Timeline", () => { .should("be.visible") .realHover() .within(() => { - cy.findButton("toggle event") + cy.findByRole("button", { name: "toggle event" }) // Check size and position of toggle on expanded view source event // See: _ViewSourceEvent.pcss .should("have.css", "height", "12px") // --ViewSourceEvent_toggle-size @@ -669,7 +672,7 @@ describe("Timeline", () => { .should("exist") .realHover() .within(() => { - cy.findButton("toggle event").click("topLeft"); + cy.findByRole("button", { name: "toggle event" }).click("topLeft"); }); // Make sure the expand toggle worked @@ -681,7 +684,7 @@ describe("Timeline", () => { sendEvent(roomId, true); cy.visit("/#/room/" + roomId); - cy.get(".mx_RoomHeader").findButton("Search").click(); + cy.get(".mx_RoomHeader").findByRole("button", { name: "Search" }).click(); cy.get(".mx_SearchBar_input input").type("Message{enter}"); cy.get(".mx_EventTile:not(.mx_EventTile_contextual) .mx_EventTile_searchHighlight").should("exist"); @@ -748,42 +751,54 @@ describe("Timeline", () => { cy.contains(".mx_RoomView_body .mx_EventTile_line", "Hello world") .realHover() .within(() => { - cy.findButton("Reply").click(); + cy.findByRole("button", { name: "Reply" }).click(); }); }; + // For clicking the reply button on the last line + const clickButtonReply = () => { + cy.get(".mx_RoomView_MessageList").within(() => { + cy.get(".mx_EventTile_last").realHover().findByRole("button", { name: "Reply" }).click(); + }); + }; + it("can reply with a text message", () => { viewRoomSendMessageAndSetupReply(); cy.getComposer().type(`${reply}{enter}`); - cy.get(".mx_RoomView_body .mx_EventTile .mx_EventTile_line .mx_ReplyTile .mx_MTextBody").should( - "contain", - MESSAGE, - ); - cy.contains(".mx_RoomView_body .mx_EventTile > .mx_EventTile_line > .mx_MTextBody", reply).should( - "have.length", - 1, - ); + cy.get(".mx_RoomView_body").within(() => { + cy.get(".mx_EventTile_last .mx_EventTile_line").within(() => { + cy.get(".mx_ReplyTile .mx_MTextBody").within(() => { + cy.findByText(MESSAGE).should("exist"); + }); + + cy.findByText(reply).should("have.length", 1); + }); + }); }); it("can reply with a voice message", () => { viewRoomSendMessageAndSetupReply(); cy.openMessageComposerOptions().within(() => { - cy.findMenuitem("Voice Message").click(); + cy.findByRole("menuitem", { name: "Voice Message" }).click(); }); - cy.wait(3000); - cy.get(".mx_RoomView_body .mx_MessageComposer").findButton("Send voice message").click(); - cy.get(".mx_RoomView_body .mx_EventTile .mx_EventTile_line .mx_ReplyTile .mx_MTextBody").should( - "contain", - MESSAGE, - ); - cy.get(".mx_RoomView_body .mx_EventTile > .mx_EventTile_line > .mx_MVoiceMessageBody").should( - "have.length", - 1, - ); + // Record an empty message + cy.wait(3000); + + cy.get(".mx_RoomView_body").within(() => { + cy.get(".mx_MessageComposer").findByRole("button", { name: "Send voice message" }).click(); + + cy.get(".mx_EventTile_last .mx_EventTile_line").within(() => { + cy.get(".mx_ReplyTile .mx_MTextBody").within(() => { + cy.findByText(MESSAGE).should("exist"); + }); + + cy.get(".mx_MVoiceMessageBody").should("have.length", 1); + }); + }); }); it("should not be possible to send flag with regional emojis", () => { @@ -809,19 +824,6 @@ describe("Timeline", () => { let bot: MatrixClient; const reply2 = "Reply again"; - // For clicking the reply button on the last line - const clickButtonReply = () => { - cy.get(".mx_RoomView_MessageList").within(() => { - cy.get(".mx_EventTile_last") - .realHover() - .findButton("Options") - .should("be.visible") - .realHover() - .findButton("Reply") - .click(); - }); - }; - cy.visit("/#/room/" + roomId); // Wait until configuration is finished @@ -849,19 +851,27 @@ describe("Timeline", () => { cy.botSendMessage(bot, roomId, MESSAGE); }); + // Assert that MESSAGE is found + cy.findByText(MESSAGE); + // Reply to the message clickButtonReply(); cy.getComposer().type(`${reply}{enter}`); // Make sure 'reply' was sent - cy.contains(".mx_RoomView_MessageList .mx_EventTile_last", reply).should("exist"); + cy.get(".mx_RoomView_body .mx_EventTile_last").within(() => { + cy.findByText(reply).should("exist"); + }); // Reply again to create a replyChain clickButtonReply(); cy.getComposer().type(`${reply2}{enter}`); // Assert that 'reply2' was sent - cy.contains(".mx_RoomView_MessageList .mx_EventTile_last", reply2).should("exist"); + cy.get(".mx_RoomView_body .mx_EventTile_last").within(() => { + cy.findByText(reply2).should("exist"); + }); + cy.get(".mx_EventTile_last .mx_EventTile_receiptSent").should("be.visible"); // Exclude timestamp and read marker from snapshot @@ -955,20 +965,21 @@ describe("Timeline", () => { }); // Wait until the message is rendered - cy.get(".mx_EventTile_last .mx_MTextBody .mx_EventTile_body").should("have.text", LONG_STRING); + cy.get(".mx_EventTile_last .mx_MTextBody .mx_EventTile_body").within(() => { + cy.findByText(LONG_STRING); + }); // Reply to the message - cy.get(".mx_EventTile_last") - .realHover() - .within(() => { - cy.findButton("Reply").click(); - }); + clickButtonReply(); cy.getComposer().type(`${reply}{enter}`); // Make sure the reply tile is rendered - cy.get(".mx_EventTile_last").within(() => { - cy.get(".mx_ReplyTile .mx_MTextBody").should("have.text", LONG_STRING); - cy.get(".mx_EventTile_line > .mx_MTextBody").should("have.text", reply); + cy.get(".mx_EventTile_last .mx_EventTile_line").within(() => { + cy.get(".mx_ReplyTile .mx_MTextBody").within(() => { + cy.findByText(LONG_STRING).should("exist"); + }); + + cy.findByText(reply).should("have.length", 1); }); // Change the viewport size