Move EventTileBubble to shared components (#31911)

* Move EventTileBubble to shared components as is * Added documentation and updated stories and unit tests * Move 'global' element web css to _common.pcss * Adding playwright snapshots * Updated comments * Added legacy mx_MessageTimestamp class and updated snapshots * Regenerate snapshots with correct hash * Changes to css and removed timestamp from properties after review. * Update screenshot for room-list and fix flaky CI playwright test. * Blur the play button before matching screenshots * Changed to button focused instead of blur for consistancy * Stabilize play button appearance in CI (disabled due to decoding) * Force play button appearance in CI (disabled due to decoding) * Add comments on playwright test changes. Change from React.RefObject<any> to Ref<HTMLDivElement> in EncryptionEvent.tsx * Update playwright/e2e/composer/CIDER.spec.ts Co-authored-by: Michael Telatynski <7t3chguy@gmail.com> * Update playwright/e2e/composer/CIDER.spec.ts Co-authored-by: Michael Telatynski <7t3chguy@gmail.com> * Update playwright/e2e/crypto/toasts.spec.ts Co-authored-by: Michael Telatynski <7t3chguy@gmail.com> --------- Co-authored-by: Michael Telatynski <7t3chguy@gmail.com>
2026-02-03 14:37:57 +00:00
parent eb909f1090
commit a1be203683
76 changed files with 463 additions and 180 deletions
@@ -23,6 +23,7 @@ const clickButtonReply = async (tile: Locator) => {
 };

 test.describe("Audio player", { tag: ["@no-firefox", "@no-webkit"] }, () => {
+    test.slow();
    test.use({
        displayName: "Hanako",
    });
@@ -100,35 +101,39 @@ test.describe("Audio player", { tag: ["@no-firefox", "@no-webkit"] }, () => {
                .mx_MessageActionBar {
                    display: none !important;
                }
+                /* Stabilize play button appearance in CI (disabled due to decoding) */
+                button[aria-label="Play"] {
+                    opacity: 1 !important;
+                }
+                button[aria-label="Play"] svg,
+                button[aria-label="Play"] path {
+                    fill: magenta !important;
+                    stroke: magenta !important;
+                }
            `,
            mask: [page.getByTestId("audio-player-seek")],
+            clip: undefined,
        };

        // Take a snapshot of mx_EventTile_last on IRC layout
-        await expect(page.locator(".mx_EventTile_last")).toMatchScreenshot(
-            `${detail.replaceAll(" ", "-")}-irc-layout.png`,
-            screenshotOptions,
-        );
+        screenshotOptions.clip = await page.locator(".mx_EventTile_last").boundingBox();
+        await expect(page).toMatchScreenshot(`${detail.replaceAll(" ", "-")}-irc-layout.png`, screenshotOptions);

        // Take a snapshot on modern/group layout
        await app.settings.setValue("layout", null, SettingLevel.DEVICE, Layout.Group);
        const groupTile = page.locator(".mx_EventTile_last[data-layout='group']");
        await groupTile.locator(".mx_MessageTimestamp").click();
        await checkPlayerVisibility(groupTile);
-        await expect(page.locator(".mx_EventTile_last")).toMatchScreenshot(
-            `${detail.replaceAll(" ", "-")}-group-layout.png`,
-            screenshotOptions,
-        );
+        screenshotOptions.clip = await page.locator(".mx_EventTile_last").boundingBox();
+        await expect(page).toMatchScreenshot(`${detail.replaceAll(" ", "-")}-group-layout.png`, screenshotOptions);

        // Take a snapshot on bubble layout
        await app.settings.setValue("layout", null, SettingLevel.DEVICE, Layout.Bubble);
        const bubbleTile = page.locator(".mx_EventTile_last[data-layout='bubble']");
        await bubbleTile.locator(".mx_MessageTimestamp").click();
        await checkPlayerVisibility(bubbleTile);
-        await expect(page.locator(".mx_EventTile_last")).toMatchScreenshot(
-            `${detail.replaceAll(" ", "-")}-bubble-layout.png`,
-            screenshotOptions,
-        );
+        screenshotOptions.clip = await page.locator(".mx_EventTile_last").boundingBox();
+        await expect(page).toMatchScreenshot(`${detail.replaceAll(" ", "-")}-bubble-layout.png`, screenshotOptions);
    };

    test.beforeEach(async ({ page, app, user }) => {
@@ -80,7 +80,15 @@ test.describe("Composer", () => {
            test.use({ viewport: { width: 1280, height: 720 } });
            test("render emoji picker", { tag: "@screenshot" }, async ({ page, app }) => {
                await app.getComposer(false).getByRole("button", { name: "Emoji" }).click();
-                await expect(page.getByTestId("mx_EmojiPicker")).toMatchScreenshot("emoji-picker.png");
+                // Mask the background of the screenshot to avoid failing the test just because some
+                // other component have changed its rendering.
+                await expect(page.getByTestId("mx_EmojiPicker")).toMatchScreenshot("emoji-picker.png", {
+                    css: `
+                        .mx_ContextualMenu_background {
+                            background-color: magenta !important;
+                        }
+                    `,
+                });
            });
        });

@@ -88,7 +96,15 @@ test.describe("Composer", () => {
            test.use({ viewport: { width: 1280, height: 360 } });
            test("render emoji picker", { tag: "@screenshot" }, async ({ page, app }) => {
                await app.getComposer(false).getByRole("button", { name: "Emoji" }).click();
-                await expect(page.getByTestId("mx_EmojiPicker")).toMatchScreenshot("emoji-picker-small.png");
+                // Mask the background of the screenshot to avoid failing the test just because some
+                // other component have changed its rendering.
+                await expect(page.getByTestId("mx_EmojiPicker")).toMatchScreenshot("emoji-picker-small.png", {
+                    css: `
+                        .mx_ContextualMenu_background {
+                            background-color: magenta !important;
+                        }
+                    `,
+                });
            });
        });

@@ -37,7 +37,15 @@ test.describe("Key storage out of sync toast", () => {
        // playwright only evaluates the 'first()' call initially, not subsequent times it checks, so
        // it would always be checking the same toast, even if another one is now the first.
        await expect(page.getByRole("alert")).toHaveCount(2);
-        await expect(page.getByRole("alert").first()).toMatchScreenshot("key-storage-out-of-sync-toast.png");
+        // Mask the background of the screenshot to avoid failing the test just because some
+        // other component have changed its rendering.
+        await expect(page.getByRole("alert").first()).toMatchScreenshot("key-storage-out-of-sync-toast.png", {
+            css: `
+                    .mx_ToastContainer {
+                        background-color: magenta !important;
+                    }
+                `,
+        });

        await page.getByRole("button", { name: "Enter recovery key" }).click();

@@ -37,6 +37,8 @@ test.describe("Room list", () => {
    });

    test.describe("Room list", () => {
+        test.slow();
+
        test.beforeEach(async ({ page, app, user }) => {
            for (let i = 0; i < 30; i++) {
                await app.client.createRoom({ name: `room${i}` });
@@ -949,6 +949,10 @@ test.describe("Timeline", () => {
            await page.getByRole("textbox", { name: "Edit message" }).press("Enter");

            const newTile = page.locator(".mx_EventTile");
+            const codeBlock = newTile.locator(".mx_EventTile_pre_container");
+            await expect(codeBlock).toBeVisible();
+            await codeBlock.hover();
+            await expect(newTile.locator(".mx_EventTile_copyButton")).toBeVisible();
            await expect(newTile).toMatchScreenshot("edited-code-block.png", {
                css: `
                    .mx_MessageTimestamp {