PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 3

Update timeline.spec.ts - use Cypress Testing Library (#10721)

Browse source 
* Update timeline.spec.ts - use Cypress Testing Library - findByText() for the room creation message

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

* Update timeline.spec.ts - use Cypress Testing Library

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

* Feedback

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

---------

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
This commit is contained in:
Suguru Hirahara 2023-06-05 13:58:33 +00:00 committed by GitHub
parent 6b1c2e09f6
commit 1da43858f5
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 75 additions and 66 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

141
cypress/e2e/timeline/timeline.spec.ts
View file

@ -158,11 +158,11 @@ describe("Timeline", () => {
it("should create and configure a room on IRC layout", () => {
cy.visit("/#/room/" + roomId);
cy.setSettingValue("layout", null, SettingLevel.DEVICE, Layout.IRC);
cy.contains(
".mx_RoomView_body .mx_GenericEventListSummary[data-layout=irc] " +
".mx_GenericEventListSummary_summary",
"created and configured the room.",
).should("exist");
cy.get(".mx_RoomView_body .mx_GenericEventListSummary[data-layout='irc']").within(() => {
cy.get(".mx_GenericEventListSummary_summary")
.findByText(OLD_NAME + " created and configured the room.")
.should("exist");
});
cy.get(".mx_IRCLayout").within(() => {
// Check room name line-height is reset
@ -190,10 +190,11 @@ describe("Timeline", () => {
cy.setSettingValue("layout", null, SettingLevel.DEVICE, Layout.IRC);
// Wait until configuration is finished
cy.contains(
".mx_RoomView_body .mx_GenericEventListSummary .mx_GenericEventListSummary_summary",
"created and configured the room.",
).should("exist");
cy.get(".mx_RoomView_body .mx_GenericEventListSummary[data-layout='irc']").within(() => {
cy.get(".mx_GenericEventListSummary_summary")
.findByText(OLD_NAME + " created and configured the room.")
.should("exist");
});
cy.get(".mx_GenericEventListSummary").within(() => {
// Click "expand" link button
@ -225,10 +226,9 @@ describe("Timeline", () => {
);
// Wait until configuration is finished
cy.contains(
".mx_RoomView_body .mx_GenericEventListSummary .mx_GenericEventListSummary_summary",
"created and configured the room.",
).should("exist");
cy.get(".mx_RoomView_body .mx_GenericEventListSummary[data-layout='group']")
.findByText(OLD_NAME + " created and configured the room.")
.should("exist");
cy.get(".mx_GenericEventListSummary").within(() => {
// Click "expand" link button
@ -254,11 +254,11 @@ describe("Timeline", () => {
cy.visit("/#/room/" + roomId);
cy.setSettingValue("layout", null, SettingLevel.DEVICE, Layout.Bubble);
cy.contains(
".mx_RoomView_body .mx_GenericEventListSummary[data-layout=bubble] " +
".mx_GenericEventListSummary_summary",
"created and configured the room.",
).should("exist");
cy.get(".mx_RoomView_body .mx_GenericEventListSummary[data-layout='bubble']").within(() => {
cy.get(".mx_GenericEventListSummary_summary")
.findByText(OLD_NAME + " created and configured the room.")
.should("exist");
});
cy.get(".mx_GenericEventListSummary").within(() => {
// Click "expand" link button
@ -300,10 +300,11 @@ describe("Timeline", () => {
cy.setSettingValue("layout", null, SettingLevel.DEVICE, Layout.IRC);
// Wait until configuration is finished
cy.contains(
".mx_RoomView_body .mx_GenericEventListSummary " + ".mx_GenericEventListSummary_summary",
"created and configured the room.",
).should("exist");
cy.get(".mx_RoomView_body .mx_GenericEventListSummary[data-layout='irc']").within(() => {
cy.get(".mx_GenericEventListSummary_summary")
.findByText(OLD_NAME + " created and configured the room.")
.should("exist");
});
// Click "expand" link button
cy.get(".mx_GenericEventListSummary").findByRole("button", { name: "expand" }).click();
@ -333,13 +334,18 @@ describe("Timeline", () => {
});
const messageEdit = () => {
cy.contains(".mx_RoomView_body .mx_EventTile .mx_EventTile_line", "Message")
cy.contains(".mx_EventTile .mx_EventTile_line", "Message")
.realHover()
.within(() => {
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");
.findByRole("toolbar", { name: "Message Actions" })
.findByRole("button", { name: "Edit" })
.click();
cy.findByRole("textbox", { name: "Edit message" }).type("Edit{enter}");
// Assert that the edited message and the link button are found
cy.contains(".mx_EventTile .mx_EventTile_line", "MessageEdit").within(() => {
// Regex patterns due to the edited date
cy.findByRole("button", { name: /Edited at .*? Click to view edits./ });
});
};
it("should align generic event list summary with messages and emote on IRC layout", () => {
@ -356,14 +362,16 @@ describe("Timeline", () => {
cy.setSettingValue("layout", null, SettingLevel.DEVICE, Layout.IRC);
// Wait until configuration is finished
cy.contains(
".mx_RoomView_body .mx_GenericEventListSummary .mx_GenericEventListSummary_summary",
"created and configured the room.",
).should("exist");
cy.get(".mx_GenericEventListSummary_summary").within(() => {
cy.findByText(OLD_NAME + " created and configured the room.").should("exist");
});
// Send messages
cy.get(".mx_RoomView_body .mx_BasicMessageComposer_input").type("Hello Mr. Bot{enter}");
cy.get(".mx_RoomView_body .mx_BasicMessageComposer_input").type("Hello again, Mr. Bot{enter}");
cy.get(".mx_RoomView_body").within(() => {
cy.findByRole("textbox", { name: "Send a message…" }).type("Hello Mr. Bot{enter}");
cy.findByRole("textbox", { name: "Send a message…" }).type("Hello again, Mr. Bot{enter}");
});
// Make sure the second message was sent
cy.get(".mx_RoomView_MessageList > .mx_EventTile_last .mx_EventTile_receiptSent").should("be.visible");
@ -428,7 +436,9 @@ describe("Timeline", () => {
// 4. Alignment of expanded GELS, placeholder of deleted message, and emote
// Send a emote
cy.get(".mx_RoomView_body .mx_BasicMessageComposer_input").type("/me says hello to Mr. Bot{enter}");
cy.get(".mx_RoomView_body").within(() => {
cy.findByRole("textbox", { name: "Send a message…" }).type("/me says hello to Mr. Bot{enter}");
});
// Check inline start margin of its avatar
// Here --right-padding is for the avatar on the message line
// See: _IRCLayout.pcss
@ -467,10 +477,9 @@ describe("Timeline", () => {
cy.setSettingValue("layout", null, SettingLevel.DEVICE, Layout.IRC);
// Wait until configuration is finished
cy.contains(
".mx_RoomView_body .mx_GenericEventListSummary[data-layout=irc] .mx_GenericEventListSummary_summary",
"created and configured the room.",
).should("exist");
cy.get(".mx_GenericEventListSummary_summary").within(() => {
cy.findByText(OLD_NAME + " created and configured the room.").should("exist");
});
cy.get(".mx_RoomView_body[data-layout=irc]").within(() => {
// Ensure CSS declarations which cannot be detected with a screenshot test are applied as expected
@ -571,10 +580,9 @@ describe("Timeline", () => {
sendEvent(roomId);
cy.visit("/#/room/" + roomId);
cy.setSettingValue("showHiddenEventsInTimeline", null, SettingLevel.DEVICE, true);
cy.contains(
".mx_RoomView_body .mx_GenericEventListSummary .mx_GenericEventListSummary_summary",
"created and configured the room.",
).should("exist");
cy.get(".mx_GenericEventListSummary_summary").within(() => {
cy.findByText(OLD_NAME + " created and configured the room.").should("exist");
});
// Edit message
messageEdit();
@ -621,10 +629,9 @@ describe("Timeline", () => {
sendEvent(roomId);
cy.visit("/#/room/" + roomId);
cy.setSettingValue("showHiddenEventsInTimeline", null, SettingLevel.DEVICE, true);
cy.contains(
".mx_RoomView_body .mx_GenericEventListSummary " + ".mx_GenericEventListSummary_summary",
"created and configured the room.",
).should("exist");
cy.get(".mx_GenericEventListSummary_summary").within(() => {
cy.findByText(OLD_NAME + " created and configured the room.").should("exist");
});
// Edit message
messageEdit();
@ -704,7 +711,10 @@ describe("Timeline", () => {
// Assert that the file size is displayed in kibibytes (1024 bytes), not kilobytes (1000 bytes)
// See: https://github.com/vector-im/element-web/issues/24866
cy.get(".mx_EventTile_last").within(() => {
cy.contains(".mx_MFileBody_info_filename", "1.12 KB").should("exist"); // actual file size in kibibytes
// actual file size in kibibytes
cy.get(".mx_MFileBody_info_filename")
.findByText(/1.12 KB/)
.should("exist");
});
});
@ -720,7 +730,7 @@ describe("Timeline", () => {
widths: [320, 640],
});
cy.get(".mx_SearchBar_input input").type("Message{enter}");
cy.get(".mx_SearchBar_input").findByRole("textbox").type("Message{enter}");
cy.get(".mx_EventTile:not(.mx_EventTile_contextual) .mx_EventTile_searchHighlight").should("exist");
cy.get(".mx_RoomView_searchResultsPanel").percySnapshotElement("Highlighted search results");
@ -756,7 +766,7 @@ describe("Timeline", () => {
});
cy.visit("/#/room/" + roomId);
cy.get(".mx_LinkPreviewWidget").should("exist").should("contain.text", "Element Call");
cy.get(".mx_LinkPreviewWidget").should("exist").findByText("Element Call");
cy.wait("@preview_url");
cy.wait("@mxc");
@ -783,11 +793,13 @@ describe("Timeline", () => {
cy.getComposer().type(`${MESSAGE}{enter}`);
// Reply to the message
cy.contains(".mx_RoomView_body .mx_EventTile_line", "Hello world")
.realHover()
cy.get(".mx_EventTile_last")
.within(() => {
cy.findByRole("button", { name: "Reply" }).click();
});
cy.findByText(MESSAGE);
})
.realHover()
.findByRole("button", { name: "Reply" })
.click();
};
// For clicking the reply button on the last line
@ -862,10 +874,9 @@ describe("Timeline", () => {
cy.visit("/#/room/" + roomId);
// Wait until configuration is finished
cy.contains(
".mx_RoomView_body .mx_GenericEventListSummary .mx_GenericEventListSummary_summary",
"created and configured the room.",
).should("exist");
cy.get(".mx_GenericEventListSummary_summary").within(() => {
cy.findByText(OLD_NAME + " created and configured the room.").should("exist");
});
// Create a bot "BotBob" and invite it
cy.getBot(homeserver, {
@ -877,10 +888,9 @@ describe("Timeline", () => {
bot.joinRoom(roomId);
// Make sure the bot joined the room
cy.contains(
".mx_GenericEventListSummary .mx_EventTile_info.mx_EventTile_last",
"BotBob joined the room",
).should("exist");
cy.get(".mx_GenericEventListSummary .mx_EventTile_info.mx_EventTile_last").within(() => {
cy.findByText("BotBob joined the room").should("exist");
});
// Have bot send MESSAGE to roomId
cy.botSendMessage(bot, roomId, MESSAGE);
@ -982,10 +992,9 @@ describe("Timeline", () => {
});
// Wait until configuration is finished
cy.contains(
".mx_RoomView_body .mx_GenericEventListSummary .mx_GenericEventListSummary_summary",
"created and configured the room.",
).should("exist");
cy.get(".mx_GenericEventListSummary_summary").within(() => {
cy.findByText(OLD_NAME + " created and configured the room.").should("exist");
});
// Set the display name to "LONG_STRING 2" in order to avoid a warning in Percy tests from being triggered
// due to the generated random mxid being displayed inside the GELS summary.