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

Commit 65f6059

Browse files
luixxiulluixxiul
authored
Update timeline.spec.ts (#10540)
* timeline.spec.ts - deprecate custom commands of find.ts Signed-off-by: Suguru Hirahara <[email protected]> * Iterate - clickButtonReply() - findByText() Signed-off-by: Suguru Hirahara <[email protected]> --------- Signed-off-by: Suguru Hirahara <[email protected]>
1 parent 692c07e commit 65f6059

File tree

1 file changed

+73
-62
lines changed

1 file changed

+73
-62
lines changed

‎cypress/e2e/timeline/timeline.spec.ts‎

Lines changed: 73 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -197,10 +197,10 @@ describe("Timeline", () => {
197197

198198
cy.get(".mx_GenericEventListSummary").within(() => {
199199
// Click "expand" link button
200-
cy.findButton("expand").click();
200+
cy.findByRole("button", { name: "expand" }).click();
201201

202202
// Assert that the "expand" link button worked
203-
cy.findButton("collapse").should("exist");
203+
cy.findByRole("button", { name: "collapse" }).should("exist");
204204
});
205205

206206
// Check the height of expanded GELS line
@@ -232,10 +232,10 @@ describe("Timeline", () => {
232232

233233
cy.get(".mx_GenericEventListSummary").within(() => {
234234
// Click "expand" link button
235-
cy.findButton("expand").click();
235+
cy.findByRole("button", { name: "expand" }).click();
236236

237237
// Assert that the "expand" link button worked
238-
cy.findButton("collapse").should("exist");
238+
cy.findByRole("button", { name: "collapse" }).should("exist");
239239
});
240240

241241
// Check the height of expanded GELS line
@@ -262,10 +262,10 @@ describe("Timeline", () => {
262262

263263
cy.get(".mx_GenericEventListSummary").within(() => {
264264
// Click "expand" link button
265-
cy.findButton("expand").click();
265+
cy.findByRole("button", { name: "expand" }).click();
266266

267267
// Assert that the "expand" link button worked
268-
cy.findButton("collapse").should("exist");
268+
cy.findByRole("button", { name: "collapse" }).should("exist");
269269
});
270270

271271
// Make sure spacer is not visible on bubble layout
@@ -283,11 +283,12 @@ describe("Timeline", () => {
283283
// Click "collapse" link button on the first hovered info event line
284284
cy.get(".mx_GenericEventListSummary_unstyledList .mx_EventTile_info:first-of-type")
285285
.realHover()
286-
.findButton("collapse")
287-
.click();
286+
.findByRole("toolbar", { name: "Message Actions" })
287+
.should("be.visible");
288+
cy.findByRole("button", { name: "collapse" }).click();
288289

289290
// Assert that "collapse" link button worked
290-
cy.findButton("expand").should("exist");
291+
cy.findByRole("button", { name: "expand" }).should("exist");
291292
});
292293

293294
// Save snapshot of collapsed generic event list summary on bubble layout
@@ -305,7 +306,7 @@ describe("Timeline", () => {
305306
).should("exist");
306307

307308
// Click "expand" link button
308-
cy.get(".mx_GenericEventListSummary").findButton("expand").click();
309+
cy.get(".mx_GenericEventListSummary").findByRole("button", { name: "expand" }).click();
309310

310311
// Check the event line has margin instead of inset property
311312
// cf. _EventTile.pcss
@@ -335,7 +336,7 @@ describe("Timeline", () => {
335336
cy.contains(".mx_RoomView_body .mx_EventTile .mx_EventTile_line", "Message")
336337
.realHover()
337338
.within(() => {
338-
cy.findButton("Edit").click();
339+
cy.findByRole("button", { name: "Edit" }).click();
339340
cy.get(".mx_BasicMessageComposer_input").type("Edit{enter}");
340341
});
341342
cy.contains(".mx_RoomView_body .mx_EventTile[data-scroll-tokens]", "MessageEdit").should("exist");
@@ -394,7 +395,7 @@ describe("Timeline", () => {
394395

395396
// 2. Alignment of expanded GELS and messages
396397
// Click "expand" link button
397-
cy.get(".mx_GenericEventListSummary").findButton("expand").click();
398+
cy.get(".mx_GenericEventListSummary").findByRole("button", { name: "expand" }).click();
398399
// Check inline start spacing of info line on expanded GELS
399400
cy.get(".mx_EventTile[data-layout=irc].mx_EventTile_info:first-of-type .mx_EventTile_line")
400401
// See: _EventTile.pcss
@@ -408,12 +409,14 @@ describe("Timeline", () => {
408409
// Delete the second (last) message
409410
cy.get(".mx_RoomView_MessageList > .mx_EventTile_last")
410411
.realHover()
411-
.findButton("Options")
412+
.findByRole("button", { name: "Options" })
412413
.should("be.visible")
413414
.click();
414-
cy.findMenuitem("Remove").should("be.visible").click();
415+
cy.findByRole("menuitem", { name: "Remove" }).should("be.visible").click();
415416
// Confirm deletion
416-
cy.get(".mx_Dialog_buttons button[data-testid=dialog-primary-button]").findButton("Remove").click();
417+
cy.get(".mx_Dialog_buttons").within(() => {
418+
cy.findByRole("button", { name: "Remove" }).click();
419+
});
417420
// Make sure the dialog was closed and the second (last) message was redacted
418421
cy.get(".mx_Dialog").should("not.exist");
419422
cy.get(".mx_GenericEventListSummary .mx_EventTile_last .mx_RedactedBody").should("be.visible");
@@ -632,15 +635,15 @@ describe("Timeline", () => {
632635
.should("exist")
633636
.realHover()
634637
.within(() => {
635-
cy.findButton("toggle event").click("topLeft");
638+
cy.findByRole("button", { name: "toggle event" }).click("topLeft");
636639
});
637640

638641
// Make sure the expand toggle works
639642
cy.get(".mx_EventTile_last[data-layout=group] .mx_ViewSourceEvent_expanded")
640643
.should("be.visible")
641644
.realHover()
642645
.within(() => {
643-
cy.findButton("toggle event")
646+
cy.findByRole("button", { name: "toggle event" })
644647
// Check size and position of toggle on expanded view source event
645648
// See: _ViewSourceEvent.pcss
646649
.should("have.css", "height", "12px") // --ViewSourceEvent_toggle-size
@@ -669,7 +672,7 @@ describe("Timeline", () => {
669672
.should("exist")
670673
.realHover()
671674
.within(() => {
672-
cy.findButton("toggle event").click("topLeft");
675+
cy.findByRole("button", { name: "toggle event" }).click("topLeft");
673676
});
674677

675678
// Make sure the expand toggle worked
@@ -681,7 +684,7 @@ describe("Timeline", () => {
681684
sendEvent(roomId, true);
682685
cy.visit("/#/room/" + roomId);
683686

684-
cy.get(".mx_RoomHeader").findButton("Search").click();
687+
cy.get(".mx_RoomHeader").findByRole("button", { name: "Search" }).click();
685688
cy.get(".mx_SearchBar_input input").type("Message{enter}");
686689

687690
cy.get(".mx_EventTile:not(.mx_EventTile_contextual) .mx_EventTile_searchHighlight").should("exist");
@@ -748,42 +751,54 @@ describe("Timeline", () => {
748751
cy.contains(".mx_RoomView_body .mx_EventTile_line", "Hello world")
749752
.realHover()
750753
.within(() => {
751-
cy.findButton("Reply").click();
754+
cy.findByRole("button", { name: "Reply" }).click();
752755
});
753756
};
754757

758+
// For clicking the reply button on the last line
759+
const clickButtonReply = () => {
760+
cy.get(".mx_RoomView_MessageList").within(() => {
761+
cy.get(".mx_EventTile_last").realHover().findByRole("button", { name: "Reply" }).click();
762+
});
763+
};
764+
755765
it("can reply with a text message", () => {
756766
viewRoomSendMessageAndSetupReply();
757767

758768
cy.getComposer().type(`${reply}{enter}`);
759769

760-
cy.get(".mx_RoomView_body .mx_EventTile .mx_EventTile_line .mx_ReplyTile .mx_MTextBody").should(
761-
"contain",
762-
MESSAGE,
763-
);
764-
cy.contains(".mx_RoomView_body .mx_EventTile > .mx_EventTile_line > .mx_MTextBody", reply).should(
765-
"have.length",
766-
1,
767-
);
770+
cy.get(".mx_RoomView_body").within(() => {
771+
cy.get(".mx_EventTile_last .mx_EventTile_line").within(() => {
772+
cy.get(".mx_ReplyTile .mx_MTextBody").within(() => {
773+
cy.findByText(MESSAGE).should("exist");
774+
});
775+
776+
cy.findByText(reply).should("have.length", 1);
777+
});
778+
});
768779
});
769780

770781
it("can reply with a voice message", () => {
771782
viewRoomSendMessageAndSetupReply();
772783

773784
cy.openMessageComposerOptions().within(() => {
774-
cy.findMenuitem("Voice Message").click();
785+
cy.findByRole("menuitem", { name: "Voice Message" }).click();
775786
});
787+
788+
// Record an empty message
776789
cy.wait(3000);
777-
cy.get(".mx_RoomView_body .mx_MessageComposer").findButton("Send voice message").click();
778790

779-
cy.get(".mx_RoomView_body .mx_EventTile .mx_EventTile_line .mx_ReplyTile .mx_MTextBody").should(
780-
"contain",
781-
MESSAGE,
782-
);
783-
cy.get(".mx_RoomView_body .mx_EventTile > .mx_EventTile_line > .mx_MVoiceMessageBody").should(
784-
"have.length",
785-
1,
786-
);
791+
cy.get(".mx_RoomView_body").within(() => {
792+
cy.get(".mx_MessageComposer").findByRole("button", { name: "Send voice message" }).click();
793+
794+
cy.get(".mx_EventTile_last .mx_EventTile_line").within(() => {
795+
cy.get(".mx_ReplyTile .mx_MTextBody").within(() => {
796+
cy.findByText(MESSAGE).should("exist");
797+
});
798+
799+
cy.get(".mx_MVoiceMessageBody").should("have.length", 1);
800+
});
801+
});
787802
});
788803

789804
it("should not be possible to send flag with regional emojis", () => {
@@ -809,19 +824,6 @@ describe("Timeline", () => {
809824
let bot: MatrixClient;
810825
const reply2 = "Reply again";
811826

812-
// For clicking the reply button on the last line
813-
const clickButtonReply = () => {
814-
cy.get(".mx_RoomView_MessageList").within(() => {
815-
cy.get(".mx_EventTile_last")
816-
.realHover()
817-
.findButton("Options")
818-
.should("be.visible")
819-
.realHover()
820-
.findButton("Reply")
821-
.click();
822-
});
823-
};
824-
825827
cy.visit("/#/room/" + roomId);
826828

827829
// Wait until configuration is finished
@@ -849,19 +851,27 @@ describe("Timeline", () => {
849851
cy.botSendMessage(bot, roomId, MESSAGE);
850852
});
851853

854+
// Assert that MESSAGE is found
855+
cy.findByText(MESSAGE);
856+
852857
// Reply to the message
853858
clickButtonReply();
854859
cy.getComposer().type(`${reply}{enter}`);
855860

856861
// Make sure 'reply' was sent
857-
cy.contains(".mx_RoomView_MessageList .mx_EventTile_last", reply).should("exist");
862+
cy.get(".mx_RoomView_body .mx_EventTile_last").within(() => {
863+
cy.findByText(reply).should("exist");
864+
});
858865

859866
// Reply again to create a replyChain
860867
clickButtonReply();
861868
cy.getComposer().type(`${reply2}{enter}`);
862869

863870
// Assert that 'reply2' was sent
864-
cy.contains(".mx_RoomView_MessageList .mx_EventTile_last", reply2).should("exist");
871+
cy.get(".mx_RoomView_body .mx_EventTile_last").within(() => {
872+
cy.findByText(reply2).should("exist");
873+
});
874+
865875
cy.get(".mx_EventTile_last .mx_EventTile_receiptSent").should("be.visible");
866876

867877
// Exclude timestamp and read marker from snapshot
@@ -955,20 +965,21 @@ describe("Timeline", () => {
955965
});
956966

957967
// Wait until the message is rendered
958-
cy.get(".mx_EventTile_last .mx_MTextBody .mx_EventTile_body").should("have.text", LONG_STRING);
968+
cy.get(".mx_EventTile_last .mx_MTextBody .mx_EventTile_body").within(() => {
969+
cy.findByText(LONG_STRING);
970+
});
959971

960972
// Reply to the message
961-
cy.get(".mx_EventTile_last")
962-
.realHover()
963-
.within(() => {
964-
cy.findButton("Reply").click();
965-
});
973+
clickButtonReply();
966974
cy.getComposer().type(`${reply}{enter}`);
967975

968976
// Make sure the reply tile is rendered
969-
cy.get(".mx_EventTile_last").within(() => {
970-
cy.get(".mx_ReplyTile .mx_MTextBody").should("have.text", LONG_STRING);
971-
cy.get(".mx_EventTile_line > .mx_MTextBody").should("have.text", reply);
977+
cy.get(".mx_EventTile_last .mx_EventTile_line").within(() => {
978+
cy.get(".mx_ReplyTile .mx_MTextBody").within(() => {
979+
cy.findByText(LONG_STRING).should("exist");
980+
});
981+
982+
cy.findByText(reply).should("have.length", 1);
972983
});
973984

974985
// Change the viewport size

0 commit comments

Comments
 (0)