mirrors/element-web
1
0
Fork 0
mirror of https://github.com/element-hq/element-web synced 2024-11-26 19:26:04 +03:00
Code Issues Projects Releases Packages Wiki Activity

Use Cypress Testing Library - timeline.spec.ts (#10471)

Browse source 
* Use Cypress Testing Library - timeline.spec.ts

- findButton
- findMenuitem

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

* Remove force: false from click()

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

* Add const messageEdit

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-04-04 08:54:06 +00:00 committed by GitHub
parent 2ebec3a3c7
commit 4064ae7ad0
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 66 additions and 57 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -195,11 +195,13 @@ describe("Timeline", () => {
"created and configured the room.", "created and configured the room.",
).should("exist"); ).should("exist");
// Click "expand" link button cy.get(".mx_GenericEventListSummary").within(() => {
cy.get(".mx_GenericEventListSummary_toggle[aria-expanded=false]").click(); // Click "expand" link button
cy.findButton("expand").click();
// Make sure the "expand" link button worked // Assert that the "expand" link button worked
cy.get(".mx_GenericEventListSummary_toggle[aria-expanded=true]").should("exist"); cy.findButton("collapse").should("exist");
});
// Check the height of expanded GELS line // Check the height of expanded GELS line
cy.get(".mx_GenericEventListSummary[data-layout=irc] .mx_GenericEventListSummary_spacer").should( cy.get(".mx_GenericEventListSummary[data-layout=irc] .mx_GenericEventListSummary_spacer").should(
@ -228,11 +230,13 @@ describe("Timeline", () => {
"created and configured the room.", "created and configured the room.",
).should("exist"); ).should("exist");
// Click "expand" link button cy.get(".mx_GenericEventListSummary").within(() => {
cy.get(".mx_GenericEventListSummary_toggle[aria-expanded=false]").click(); // Click "expand" link button
cy.findButton("expand").click();
// Make sure the "expand" link button worked // Assert that the "expand" link button worked
cy.get(".mx_GenericEventListSummary_toggle[aria-expanded=true]").should("exist"); cy.findButton("collapse").should("exist");
});
// Check the height of expanded GELS line // Check the height of expanded GELS line
cy.get(".mx_GenericEventListSummary[data-layout=group] .mx_GenericEventListSummary_spacer").should( cy.get(".mx_GenericEventListSummary[data-layout=group] .mx_GenericEventListSummary_spacer").should(
@ -256,11 +260,13 @@ describe("Timeline", () => {
"created and configured the room.", "created and configured the room.",
).should("exist"); ).should("exist");
// Click "expand" link button cy.get(".mx_GenericEventListSummary").within(() => {
cy.get(".mx_GenericEventListSummary_toggle[aria-expanded=false]").click(); // Click "expand" link button
cy.findButton("expand").click();
// Make sure the "expand" link button worked // Assert that the "expand" link button worked
cy.get(".mx_GenericEventListSummary_toggle[aria-expanded=true]").should("exist"); cy.findButton("collapse").should("exist");
});
// Make sure spacer is not visible on bubble layout // Make sure spacer is not visible on bubble layout
cy.get(".mx_GenericEventListSummary[data-layout=bubble] .mx_GenericEventListSummary_spacer").should( cy.get(".mx_GenericEventListSummary[data-layout=bubble] .mx_GenericEventListSummary_spacer").should(
@ -273,12 +279,16 @@ describe("Timeline", () => {
// Save snapshot of expanded generic event list summary on bubble layout // Save snapshot of expanded generic event list summary on bubble layout
cy.get(".mx_MainSplit").percySnapshotElement("Expanded GELS on bubble layout", { percyCSS }); cy.get(".mx_MainSplit").percySnapshotElement("Expanded GELS on bubble layout", { percyCSS });
// Click "collapse" link button on the first hovered info event line cy.get(".mx_GenericEventListSummary").within(() => {
cy.get(".mx_GenericEventListSummary_unstyledList .mx_EventTile_info:first-of-type").realHover(); // Click "collapse" link button on the first hovered info event line
cy.get(".mx_GenericEventListSummary_toggle[aria-expanded=true]").click({ force: false }); cy.get(".mx_GenericEventListSummary_unstyledList .mx_EventTile_info:first-of-type")
.realHover()
.findButton("collapse")
.click();
// Make sure "collapse" link button worked // Assert that "collapse" link button worked
cy.get(".mx_GenericEventListSummary_toggle[aria-expanded=false]").should("exist"); cy.findButton("expand").should("exist");
});
// Save snapshot of collapsed generic event list summary on bubble layout // Save snapshot of collapsed generic event list summary on bubble layout
cy.get(".mx_MainSplit").percySnapshotElement("Collapsed GELS on bubble layout", { percyCSS }); cy.get(".mx_MainSplit").percySnapshotElement("Collapsed GELS on bubble layout", { percyCSS });
@ -295,7 +305,7 @@ describe("Timeline", () => {
).should("exist"); ).should("exist");
// Click "expand" link button // Click "expand" link button
cy.get(".mx_GenericEventListSummary_toggle[aria-expanded=false]").click(); cy.get(".mx_GenericEventListSummary").findButton("expand").click();
// Check the event line has margin instead of inset property // Check the event line has margin instead of inset property
// cf. _EventTile.pcss // cf. _EventTile.pcss
@ -321,6 +331,16 @@ describe("Timeline", () => {
cy.injectAxe(); cy.injectAxe();
}); });
const messageEdit = () => {
cy.contains(".mx_RoomView_body .mx_EventTile .mx_EventTile_line", "Message")
.realHover()
.within(() => {
cy.findButton("Edit").click();
cy.get(".mx_BasicMessageComposer_input").type("Edit{enter}");
});
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", () => {
// This test aims to check: // This test aims to check:
// 1. Alignment of collapsed GELS (generic event list summary) and messages // 1. Alignment of collapsed GELS (generic event list summary) and messages
@ -374,7 +394,7 @@ describe("Timeline", () => {
// 2. Alignment of expanded GELS and messages // 2. Alignment of expanded GELS and messages
// Click "expand" link button // Click "expand" link button
cy.get(".mx_GenericEventListSummary_toggle[aria-expanded=false]").click(); cy.get(".mx_GenericEventListSummary").findButton("expand").click();
// Check inline start spacing of info line on expanded GELS // 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") cy.get(".mx_EventTile[data-layout=irc].mx_EventTile_info:first-of-type .mx_EventTile_line")
// See: _EventTile.pcss // See: _EventTile.pcss
@ -386,18 +406,14 @@ describe("Timeline", () => {
// 3. Alignment of expanded GELS and placeholder of deleted message // 3. Alignment of expanded GELS and placeholder of deleted message
// Delete the second (last) message // Delete the second (last) message
cy.get(".mx_RoomView_MessageList > .mx_EventTile_last").realHover(); cy.get(".mx_RoomView_MessageList > .mx_EventTile_last")
cy.get(".mx_RoomView_MessageList > .mx_EventTile_last .mx_MessageActionBar_optionsButton", {
timeout: 1000,
})
.should("exist")
.realHover() .realHover()
.click({ force: false }); .findButton("Options")
cy.get(".mx_IconizedContextMenu_item[aria-label=Remove]").should("be.visible").click({ force: false }); .should("be.visible")
.click();
cy.findMenuitem("Remove").should("be.visible").click();
// Confirm deletion // Confirm deletion
cy.get(".mx_Dialog_buttons button[data-testid=dialog-primary-button]") cy.get(".mx_Dialog_buttons button[data-testid=dialog-primary-button]").findButton("Remove").click();
.should("have.text", "Remove")
.click({ force: false });
// Make sure the dialog was closed and the second (last) message was redacted // Make sure the dialog was closed and the second (last) message was redacted
cy.get(".mx_Dialog").should("not.exist"); cy.get(".mx_Dialog").should("not.exist");
cy.get(".mx_GenericEventListSummary .mx_EventTile_last .mx_RedactedBody").should("be.visible"); cy.get(".mx_GenericEventListSummary .mx_EventTile_last .mx_RedactedBody").should("be.visible");
@ -558,11 +574,7 @@ describe("Timeline", () => {
).should("exist"); ).should("exist");
// Edit message // Edit message
cy.contains(".mx_RoomView_body .mx_EventTile .mx_EventTile_line", "Message").within(() => { messageEdit();
cy.get('[aria-label="Edit"]').click({ force: true }); // Cypress has no ability to hover
cy.get(".mx_BasicMessageComposer_input").type("Edit{enter}");
});
cy.contains(".mx_EventTile[data-scroll-tokens]", "MessageEdit").should("exist");
// Click timestamp to highlight hidden event line // Click timestamp to highlight hidden event line
cy.get(".mx_RoomView_body .mx_EventTile_info .mx_MessageTimestamp").click(); cy.get(".mx_RoomView_body .mx_EventTile_info .mx_MessageTimestamp").click();
@ -611,11 +623,7 @@ describe("Timeline", () => {
).should("exist"); ).should("exist");
// Edit message // Edit message
cy.contains(".mx_RoomView_body .mx_EventTile .mx_EventTile_line", "Message").within(() => { messageEdit();
cy.get('[aria-label="Edit"]').click({ force: true }); // Cypress has no ability to hover
cy.get(".mx_BasicMessageComposer_input").type("Edit{enter}");
});
cy.contains(".mx_RoomView_body .mx_EventTile[data-scroll-tokens]", "MessageEdit").should("exist");
// 1. clickability of top left of view source event toggle // 1. clickability of top left of view source event toggle
@ -624,7 +632,7 @@ describe("Timeline", () => {
.should("exist") .should("exist")
.realHover() .realHover()
.within(() => { .within(() => {
cy.get(".mx_ViewSourceEvent_toggle").click("topLeft", { force: false }); cy.findButton("toggle event").click("topLeft");
}); });
// Make sure the expand toggle works // Make sure the expand toggle works
@ -632,14 +640,14 @@ describe("Timeline", () => {
.should("be.visible") .should("be.visible")
.realHover() .realHover()
.within(() => { .within(() => {
cy.get(".mx_ViewSourceEvent_toggle") cy.findButton("toggle event")
// Check size and position of toggle on expanded view source event // Check size and position of toggle on expanded view source event
// See: _ViewSourceEvent.pcss // See: _ViewSourceEvent.pcss
.should("have.css", "height", "12px") // --ViewSourceEvent_toggle-size .should("have.css", "height", "12px") // --ViewSourceEvent_toggle-size
.should("have.css", "align-self", "flex-end") .should("have.css", "align-self", "flex-end")
// Click again to collapse the source // Click again to collapse the source
.click("topLeft", { force: false }); .click("topLeft");
}); });
// Make sure the collapse toggle works // Make sure the collapse toggle works
@ -661,7 +669,7 @@ describe("Timeline", () => {
.should("exist") .should("exist")
.realHover() .realHover()
.within(() => { .within(() => {
cy.get(".mx_ViewSourceEvent_toggle").click("topLeft", { force: false }); cy.findButton("toggle event").click("topLeft");
}); });
// Make sure the expand toggle worked // Make sure the expand toggle worked
@ -673,7 +681,7 @@ describe("Timeline", () => {
sendEvent(roomId, true); sendEvent(roomId, true);
cy.visit("/#/room/" + roomId); cy.visit("/#/room/" + roomId);
cy.get(".mx_RoomHeader_searchButton").click(); cy.get(".mx_RoomHeader").findButton("Search").click();
cy.get(".mx_SearchBar_input input").type("Message{enter}"); cy.get(".mx_SearchBar_input input").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");
@ -737,9 +745,11 @@ 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").within(() => { cy.contains(".mx_RoomView_body .mx_EventTile_line", "Hello world")
cy.get('[aria-label="Reply"]').click({ force: true }); // Cypress has no ability to hover .realHover()
}); .within(() => {
cy.findButton("Reply").click();
});
}; };
it("can reply with a text message", () => { it("can reply with a text message", () => {
@ -761,10 +771,10 @@ describe("Timeline", () => {
viewRoomSendMessageAndSetupReply(); viewRoomSendMessageAndSetupReply();
cy.openMessageComposerOptions().within(() => { cy.openMessageComposerOptions().within(() => {
cy.get(`[aria-label="Voice Message"]`).click(); cy.findMenuitem("Voice Message").click();
}); });
cy.wait(3000); cy.wait(3000);
cy.get(".mx_RoomView_body .mx_MessageComposer .mx_MessageComposer_sendMessage").click(); 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( cy.get(".mx_RoomView_body .mx_EventTile .mx_EventTile_line .mx_ReplyTile .mx_MTextBody").should(
"contain", "contain",
@ -802,14 +812,13 @@ describe("Timeline", () => {
// For clicking the reply button on the last line // For clicking the reply button on the last line
const clickButtonReply = () => { const clickButtonReply = () => {
cy.get(".mx_RoomView_MessageList").within(() => { cy.get(".mx_RoomView_MessageList").within(() => {
cy.get(".mx_EventTile_last").realHover(); cy.get(".mx_EventTile_last")
cy.get(".mx_EventTile_last .mx_MessageActionBar_optionsButton", {
timeout: 1000,
})
.should("exist")
.realHover() .realHover()
.get('.mx_EventTile_last [aria-label="Reply"]') .findButton("Options")
.click({ force: false }); .should("be.visible")
.realHover()
.findButton("Reply")
.click();
}); });
}; };
@ -952,7 +961,7 @@ describe("Timeline", () => {
cy.get(".mx_EventTile_last") cy.get(".mx_EventTile_last")
.realHover() .realHover()
.within(() => { .within(() => {
cy.get('[aria-label="Reply"]').click({ force: false }); cy.findButton("Reply").click();
}); });
cy.getComposer().type(`${reply}{enter}`); cy.getComposer().type(`${reply}{enter}`);