Cypress: workaround for EventTile being remounted (#10961)

(Hopefully) fixes element-hq/element-web#25417
matrix-org · May 23, 2023 · 7c34d66 · 7c34d66
1 parent f9e99ed
commit 7c34d66
Showing 1 changed file with 27 additions and 24 deletions.
diff --git a/cypress/e2e/audio-player/audio-player.spec.ts b/cypress/e2e/audio-player/audio-player.spec.ts
@@ -333,30 +333,33 @@ describe("Audio player", () => {
 
         // On a thread
         cy.get(".mx_ThreadView").within(() => {
-            cy.get(".mx_EventTile_last")
-                .within(() => {
-                    // Assert that the player is correctly rendered on a thread
-                    cy.get(".mx_EventTile_mediaLine .mx_MAudioBody .mx_AudioPlayer_container").within(() => {
-                        // Assert that the counter is zero before clicking the play button
-                        cy.contains(".mx_AudioPlayer_seek [role='timer']", "00:00").should("exist");
-
-                        // Find and click "Play" button, the wait is to make the test less flaky
-                        cy.findByRole("button", { name: "Play" }).should("exist");
-                        cy.wait(500).findByRole("button", { name: "Play" }).click();
-
-                        // Assert that "Pause" button can be found
-                        cy.findByRole("button", { name: "Pause" }).should("exist");
-
-                        // Assert that the timer is reset when the audio file finished playing
-                        cy.contains(".mx_AudioPlayer_seek [role='timer']", "00:00").should("exist");
-
-                        // Assert that "Play" button can be found
-                        cy.findByRole("button", { name: "Play" }).should("exist").should("not.have.attr", "disabled");
-                    });
-                })
-                .realHover()
-                .findByRole("button", { name: "Reply" })
-                .click(); // Find and click "Reply" button
+            cy.get(".mx_EventTile_last").within(() => {
+                // Assert that the player is correctly rendered on a thread
+                cy.get(".mx_EventTile_mediaLine .mx_MAudioBody .mx_AudioPlayer_container").within(() => {
+                    // Assert that the counter is zero before clicking the play button
+                    cy.contains(".mx_AudioPlayer_seek [role='timer']", "00:00").should("exist");
+
+                    // Find and click "Play" button, the wait is to make the test less flaky
+                    cy.findByRole("button", { name: "Play" }).should("exist");
+                    cy.wait(500).findByRole("button", { name: "Play" }).click();
+
+                    // Assert that "Pause" button can be found
+                    cy.findByRole("button", { name: "Pause" }).should("exist");
+
+                    // Assert that the timer is reset when the audio file finished playing
+                    cy.contains(".mx_AudioPlayer_seek [role='timer']", "00:00").should("exist");
+
+                    // Assert that "Play" button can be found
+                    cy.findByRole("button", { name: "Play" }).should("exist").should("not.have.attr", "disabled");
+                });
+            });
+
+            // Find and click "Reply" button
+            //
+            // Calling cy.get(".mx_EventTile_last") again here is a workaround for
+            // https://github.com/matrix-org/matrix-js-sdk/issues/3394: the event tile may have been re-mounted while
+            // the audio was playing.
+            cy.get(".mx_EventTile_last").realHover().findByRole("button", { name: "Reply" }).click();
 
             cy.get(".mx_MessageComposer--compact").within(() => {
                 // Assert that the reply preview is rendered on the message composer