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

Update timeline.spec.ts #10540

Merged
merged 2 commits into from
Apr 11, 2023
Merged

Update timeline.spec.ts #10540

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
f6b035d
timeline.spec.ts - deprecate custom commands of find.ts
luixxiul Apr 6, 2023
9972aa2
Iterate
luixxiul Apr 7, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
135 changes: 73 additions & 62 deletions cypress/e2e/timeline/timeline.spec.ts
View file
Open in desktop
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