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

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

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