Update URL Preview playwright tests to use new endpoint (#32573)

* Update URL Preview playwright tests to use new endpoint

For https://github.com/matrix-org/matrix-js-sdk/pull/5191

* Drop extra preview test

* Adopt axe, fixup paths, etc for url previews

* work dammit

* begone unwanted screenshot

* Make github happy?

---------

Co-authored-by: Michael Telatynski <7t3chguy@gmail.com>

playwright/e2e/messages/messages.spec.ts

@@ -220,9 +220,10 @@ test.describe("Message url previews", () => {
             await use({ roomId });
         },
     });
-    test("should render a basic preview", { tag: "@screenshot" }, async ({ page, user, app, room }) => {
+    test("should render a basic preview", { tag: "@screenshot" }, async ({ page, user, app, room, axe }) => {
-        // TODO: This should be changed to _matrix/client/v1/media/preview_url when the matrix-js-sdk is updated.
+        axe.disableRules("color-contrast");
-        await page.route("**/_matrix/media/v3/preview_url**", (route, request) => {
+
+        await page.route(/.*\/_matrix\/(client\/v1\/media|media\/v3)\/preview_url.*/, (route, request) => {
             const requestedPage = new URL(request.url()).searchParams.get("url");
             expect(requestedPage).toEqual("https://example.org/");
             return route.fulfill({
@@ -234,25 +235,31 @@ test.describe("Message url previews", () => {
         await page.goto(`#/room/${room.roomId}`);
         const msgTile = await sendMessage(page, "https://example.org");
         await expect(msgTile.getByRole("link", { name: "A simple site" })).toBeVisible();
+        await expect(axe).toHaveNoViolations();
         await expect(msgTile).toMatchScreenshot("preview-basic.png", screenshotOptions(page));
     });
-    test("should render a preview with a thumbnail", { tag: "@screenshot" }, async ({ page, user, bot, app, room }) => {
+    test(
-        const mxc = (await bot.uploadContent(MEDIA_FILE, { name: "image.png", type: "image/png" })).content_uri;
+        "should render a preview with a thumbnail",
-        // TODO: This should be changed to _matrix/client/v1/media/preview_url when the matrix-js-sdk is updated.
+        { tag: "@screenshot" },
-        await page.route("**/_matrix/media/v3/preview_url**", (route, request) => {
+        async ({ page, user, bot, app, room, axe }) => {
-            const requestedPage = new URL(request.url()).searchParams.get("url");
+            axe.disableRules("color-contrast");
-            expect(requestedPage).toEqual("https://example.org/");
+            const mxc = (await bot.uploadContent(MEDIA_FILE, { name: "image.png", type: "image/png" })).content_uri;
-            return route.fulfill({
+            await page.route(/.*\/_matrix\/(client\/v1\/media|media\/v3)\/preview_url.*/, (route, request) => {
-                json: {
+                const requestedPage = new URL(request.url()).searchParams.get("url");
-                    "og:title": "A simple site",
+                expect(requestedPage).toEqual("https://example.org/");
-                    "og:description": "And with a brief description",
+                return route.fulfill({
-                    "og:image": mxc,
+                    json: {
-                },
+                        "og:title": "A simple site",
+                        "og:description": "And with a brief description",
+                        "og:image": mxc,
+                    },
+                });
             });
-        });
+            await page.goto(`#/room/${room.roomId}`);
-        await page.goto(`#/room/${room.roomId}`);
+            const msgTile = await sendMessage(page, "https://example.org");
-        const msgTile = await sendMessage(page, "https://example.org");
+            await expect(msgTile.getByRole("link", { name: "A simple site" })).toBeVisible();
-        await expect(msgTile.getByRole("link", { name: "A simple site" })).toBeVisible();
+            await expect(axe).toHaveNoViolations();
-        await expect(msgTile).toMatchScreenshot("preview-with-thumb.png", screenshotOptions(page));
+            await expect(msgTile).toMatchScreenshot("preview-with-thumb.png", screenshotOptions(page));
-    });
+        },
+    );
 });

playwright/e2e/timeline/timeline.spec.ts

@@ -783,67 +783,6 @@ test.describe("Timeline", () => {
             ).toBeVisible();
         });
 
-        test("should render url previews", { tag: "@screenshot" }, async ({ page, app, room, axe, context }) => {
-            axe.disableRules("color-contrast");
-
-            // Element Web uses a Service Worker to rewrite unauthenticated media requests to authenticated ones, but
-            // the page can't see this happening. We intercept the route at the BrowserContext to ensure we get it
-            // post-worker, but we can't waitForResponse on that, so the page context is still used there. Because
-            // the page doesn't see the rewrite, it waits for the unauthenticated route. This is only confusing until
-            // the js-sdk (and thus the app as a whole) switches to using authenticated endpoints by default, hopefully.
-            await context.route(
-                "**/_matrix/client/v1/media/thumbnail/matrix.org/2022-08-16_yaiSVSRIsNFfxDnV?*",
-                async (route) => {
-                    await route.fulfill({
-                        path: "playwright/sample-files/riot.png",
-                    });
-                },
-            );
-            await page.route(
-                "**/_matrix/media/v3/preview_url?url=https%3A%2F%2Fcall.element.io%2F&ts=*",
-                async (route) => {
-                    await route.fulfill({
-                        json: {
-                            "og:title": "Element Call",
-                            "og:description": null,
-                            "og:image:width": 48,
-                            "og:image:height": 48,
-                            "og:image": "mxc://matrix.org/2022-08-16_yaiSVSRIsNFfxDnV",
-                            "og:image:type": "image/png",
-                            "matrix:image:size": 2121,
-                        },
-                    });
-                },
-            );
-
-            const requestPromises: Promise<any>[] = [
-                page.waitForResponse("**/_matrix/media/v3/preview_url?url=https%3A%2F%2Fcall.element.io%2F&ts=*"),
-                // see context.route above for why we listen for the unauthenticated endpoint
-                page.waitForResponse("**/_matrix/media/v3/thumbnail/matrix.org/2022-08-16_yaiSVSRIsNFfxDnV?*"),
-            ];
-
-            await app.client.sendMessage(room.roomId, "https://call.element.io/");
-            await page.goto(`/#/room/${room.roomId}`);
-
-            await expect(page.locator(".mx_LinkPreviewWidget").getByText("Element Call")).toBeVisible();
-            await Promise.all(requestPromises);
-
-            await expect(axe).toHaveNoViolations();
-
-            await app.timeline.scrollToBottom();
-            await expect(page.locator(".mx_EventTile_last")).toMatchScreenshot("url-preview.png", {
-                // Exclude timestamp and read marker from snapshot
-                css: `
-                    .mx_MessageTimestamp {
-                        visibility: hidden;
-                    }
-                    .mx_TopUnreadMessagesBar, .mx_MessagePanel_myReadMarker {
-                        display: none !important;
-                    }
-                `,
-            });
-        });
-
         test.describe("on search results panel", () => {
             test(
                 "should highlight search result words regardless of formatting",