Unified media preview 2 - file body uses the previews

apps/web/playwright/e2e/modules/composer.spec.ts

@@ -31,7 +31,9 @@ test.describe("Composer API", () => {
         await app.getComposer().getByRole("button", { name: "Attachment" }).click();
         await page.getByRole("menuitem", { name: "Example uploader" }).click({ noWaitAfter: true });
         await page.locator(".mx_Dialog").getByRole("button", { name: "Upload" }).click();
-        const fileTile = page.locator(".mx_MFileBody").first();
-        await expect(fileTile).toBeVisible();
+        // The timeline renders the uploaded file as a preview tile with its name and a download button
+        const fileTile = page.locator(".mx_RoomView_body .mx_EventTile").last();
+        await expect(fileTile.getByText("testfile.txt")).toBeVisible();
+        await expect(fileTile.getByRole("button", { name: "Download" })).toBeVisible();
     });
 });

apps/web/playwright/e2e/right-panel/file-panel.spec.ts

@@ -65,12 +65,10 @@ test.describe("FilePanel", () => {
             // Assert that the audio player is rendered
             await expect(roomViewBody.getByRole("region", { name: "Audio player" })).toBeVisible();
 
-            // Assert that the file button exists
-            await expect(
-                roomViewBody
-                    .locator(".mx_EventTile")
-                    .filter({ has: page.locator(".mx_MFileBody", { hasText: ".json" }) }),
-            ).toBeVisible();
+            // Assert that the file is rendered as a preview tile with its name and a download button
+            const fileTile = roomViewBody.locator(".mx_EventTile").last();
+            await expect(fileTile.getByText(/matrix.*?\.json/)).toBeVisible();
+            await expect(fileTile.getByRole("button", { name: "Download" })).toBeVisible();
 
             const filePanel = page.locator(".mx_FilePanel");
             // Assert that the file panel is opened inside mx_RightPanel and visible
@@ -84,8 +82,9 @@ test.describe("FilePanel", () => {
             // Assert that all of the file tiles are rendered
             await expect(filePanelMessageList.locator(".mx_EventTile")).toHaveCount(3);
 
-            // Assert that the download links are rendered
-            await expect(filePanelMessageList.locator(".mx_MFileBody")).toHaveCount(3);
+            // Assert that the download links are rendered for the image and the audio file, which embed
+            // the classic file body as their download-only fallback
+            await expect(filePanelMessageList.locator(".mx_MFileBody")).toHaveCount(2);
 
             // Assert that the sender of the files is rendered on all of the tiles
             await expect(filePanelMessageList.getByText(NAME)).toHaveCount(3);
@@ -105,13 +104,10 @@ test.describe("FilePanel", () => {
             await expect(audio.getByRole("button", { name: "Play" })).toBeVisible();
 
             // Detect the JSON file
-            const jsonTile = filePanelMessageList
-                .locator(".mx_EventTile")
-                .filter({ has: page.locator(".mx_MFileBody", { hasText: ".json" }) });
-            // Assert that the tile is rendered as a button
-            const file = jsonTile.getByTestId("event-tile-slot-body").getByRole("button", { name: /matrix.*?\.json/ });
-            // Assert that the file name is exposed by the button with ellipsis
-            await expect(file).toHaveAccessibleName(/matrix.*?\.json/);
+            // Assert that the file is rendered as a preview tile with its name and a download button
+            const file = filePanelMessageList.locator(".mx_EventTile").last();
+            await expect(file.getByText(/matrix.*?\.json/)).toBeVisible();
+            await expect(file.getByRole("button", { name: "Download" })).toBeVisible();
 
             // Make the viewport tall enough to display all of the file tiles on FilePanel
             await page.setViewportSize({ width: 800, height: 1000 });
@@ -187,7 +183,8 @@ test.describe("FilePanel", () => {
             const tile = page.locator(".mx_FilePanel .mx_EventTile");
             // Assert that the file size is displayed in kibibytes, not kilobytes (1000 bytes)
             // See: https://github.com/vector-im/element-web/issues/24866
-            await expect(tile.locator(".mx_MFileBody [data-type='info']", { hasText: size })).toBeVisible();
+            // The panel renders files as a preview tile, which shows the size as the tile body.
+            await expect(tile.getByText(size)).toBeVisible();
         });
     });
 

apps/web/playwright/e2e/timeline/timeline.spec.ts

@@ -723,11 +723,11 @@ test.describe("Timeline", () => {
 
             // 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
+            // The timeline renders files as a preview tile, which shows the size as the tile body.
             await expect(
                 page
                     .locator(".mx_EventTile")
                     .last()
-                    .locator(".mx_MFileBody [data-type='info']")
                     .getByText(/1.12 KB/),
             ).toBeVisible();
         });