Skip to content
This repository has been archived by the owner on Sep 11, 2024. It is now read-only.

Commit

Permalink
Update timeline.spec.ts (#10540)
Browse files Browse the repository at this point in the history 
* timeline.spec.ts - deprecate custom commands of find.ts

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Iterate

- clickButtonReply()
- findByText()

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

---------

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
  • Loading branch information
@luixxiul
luixxiul authored Apr 11, 2023
1 parent 692c07e commit 65f6059
Showing 1 changed file with 73 additions and 62 deletions.
135 changes: 73 additions & 62 deletions cypress/e2e/timeline/timeline.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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
Expand All @@ -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
Expand All @@ -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
Expand All @@ -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
Expand Down Expand Up @@ -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");
Expand Down Expand Up @@ -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
Expand All @@ -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");
Expand Down Expand Up @@ -632,15 +635,15 @@ 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
cy.get(".mx_EventTile_last[data-layout=group] .mx_ViewSourceEvent_expanded")
.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
Expand Down Expand Up @@ -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
Expand All @@ -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");
Expand Down Expand Up @@ -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();
});

// Record an empty message
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,
);
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", () => {
Expand All @@ -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
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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
Expand Down

0 comments on commit 65f6059

Please sign in to comment.