Fix flaky image cell test (#4968)

* Fix the flaky image cell test

frontend/src/components/VImageCell/VImageCell.vue

@@ -37,11 +37,7 @@ const props = withDefaults(
 )
 
 const toAbsolutePath = (url: string, prefix = "https://") => {
-  if (
-    url.startsWith("http://") ||
-    url.startsWith("https://") ||
-    url === "/openverse-default.jpg"
-  ) {
+  if (url.startsWith("http://") || url.startsWith("https://")) {
     return url
   }
   return `${prefix}${url}`

frontend/src/components/VImageCell/meta/VImageCell.stories.ts

@@ -49,9 +49,6 @@ export const Default: Story = {
     searchTerm: "test",
     relatedTo: "fake-uuid",
 
-    image: {
-      ...image,
-      thumbnail: "/openverse-default.jpg",
-    },
+    image,
   },
 }

frontend/test/hars/v-image-cell.har

@@ -0,0 +1,103 @@
+{
+  "log": {
+    "version": "1.2",
+    "creator": {
+      "name": "Playwright",
+      "version": "1.46.1"
+    },
+    "browser": {
+      "name": "chromium",
+      "version": "128.0.6613.18"
+    },
+    "entries": [
+      {
+        "startedDateTime": "2024-09-20T04:31:36.157Z",
+        "time": 2.468,
+        "request": {
+          "method": "GET",
+          "url": "https://api.openverse.org/v1/images/f166c4a0-7207-4ea2-8728-15350a60d37f/thumb/",
+          "httpVersion": "HTTP/2.0",
+          "cookies": [],
+          "headers": [
+            { "name": ":authority", "value": "api.openverse.org" },
+            { "name": ":method", "value": "GET" },
+            {
+              "name": ":path",
+              "value": "/v1/images/f166c4a0-7207-4ea2-8728-15350a60d37f/thumb/"
+            },
+            { "name": ":scheme", "value": "https" },
+            {
+              "name": "accept",
+              "value": "image/avif,image/webp,image/apng,image/svg+xml,image/*,*/*;q=0.8"
+            },
+            { "name": "accept-encoding", "value": "gzip, deflate, br, zstd" },
+            { "name": "accept-language", "value": "en-US" },
+            { "name": "priority", "value": "u=1, i" },
+            { "name": "referer", "value": "http://localhost:54000/" },
+            {
+              "name": "sec-ch-ua",
+              "value": "\"Chromium\";v=\"128\", \"Not;A=Brand\";v=\"24\", \"HeadlessChrome\";v=\"128\""
+            },
+            { "name": "sec-ch-ua-mobile", "value": "?0" },
+            { "name": "sec-ch-ua-platform", "value": "\"Android\"" },
+            { "name": "sec-fetch-dest", "value": "image" },
+            { "name": "sec-fetch-mode", "value": "no-cors" },
+            { "name": "sec-fetch-site", "value": "cross-site" },
+            {
+              "name": "user-agent",
+              "value": "Mozilla/5.0 (Android 7.0; Mobile; rv:54.0) Gecko/54.0 Firefox/54.0"
+            }
+          ],
+          "queryString": [],
+          "headersSize": -1,
+          "bodySize": -1
+        },
+        "response": {
+          "status": 200,
+          "statusText": "",
+          "httpVersion": "HTTP/2.0",
+          "cookies": [],
+          "headers": [
+            { "name": "accept-ranges", "value": "bytes" },
+            { "name": "age", "value": "339472" },
+            { "name": "allow", "value": "GET, HEAD, OPTIONS" },
+            { "name": "cf-cache-status", "value": "HIT" },
+            { "name": "cf-ray", "value": "8c5f163cb9a7d394-FRA" },
+            { "name": "content-length", "value": "18878" },
+            { "name": "content-type", "value": "image/webp" },
+            { "name": "cross-origin-opener-policy", "value": "same-origin" },
+            { "name": "date", "value": "Fri, 20 Sep 2024 04:31:36 GMT" },
+            {
+              "name": "last-modified",
+              "value": "Mon, 16 Sep 2024 06:13:44 GMT"
+            },
+            { "name": "referrer-policy", "value": "same-origin" },
+            { "name": "server", "value": "cloudflare" },
+            {
+              "name": "vary",
+              "value": "Accept, Authorization, origin, Accept-Encoding"
+            },
+            { "name": "x-content-type-options", "value": "nosniff" },
+            { "name": "x-frame-options", "value": "DENY" },
+            { "name": "x-ratelimit-available-anon_thumbnail", "value": "999" },
+            { "name": "x-ratelimit-limit-anon_thumbnail", "value": "1000/day" },
+            {
+              "name": "x-request-id",
+              "value": "fa51958d-c23a-47c9-854a-3d4f2df3e8a9"
+            }
+          ],
+          "content": {
+            "size": -1,
+            "mimeType": "image/webp",
+            "_file": "f54be427bbbd5e2a3dc4f38eda3679769eb1cb4e.webp"
+          },
+          "headersSize": -1,
+          "bodySize": -1,
+          "redirectURL": ""
+        },
+        "cache": {},
+        "timings": { "send": -1, "wait": -1, "receive": 2.468 }
+      }
+    ]
+  }
+}

frontend/test/playwright/visual-regression/pages/pages.spec.ts

@@ -11,6 +11,7 @@ import {
   getH1,
   getHomepageSearchButton,
   getLanguageSelect,
+  getLoadMoreButton,
 } from "~~/test/playwright/utils/components"
 
 test.describe.configure({ mode: "parallel" })
@@ -75,6 +76,7 @@ test.describe("layout color is set correctly", () => {
 
       await page.waitForURL(/ar\/search/)
       await expect(getH1(page, "Cat")).toBeVisible()
+      await expect(getLoadMoreButton(page, "rtl")).toBeEnabled()
 
       expect(await page.screenshot()).toMatchSnapshot(
         "search-page-rtl-lg-light.png"

frontend/test/storybook/visual-regression/v-image-cell.spec.ts

@@ -1,43 +1,33 @@
-import { expect, type Page, test } from "@playwright/test"
+import { test } from "@playwright/test"
 
 import breakpoints from "~~/test/playwright/utils/breakpoints"
 
 import { makeUrlWithArgs } from "~~/test/storybook/utils/args"
-import { sleep } from "~~/test/playwright/utils/navigation"
-import { waitForResponse } from "~~/test/storybook/utils/response"
 
 import type { AspectRatio } from "~/types/media"
 
 const imageCell = "a[itemprop='contentUrl']"
-const imageCellImage = `${imageCell} img`
+
 // Necessary to make sure we can capture the focus state, which
 // exceeds the bounds of the actual component
 const screenshotEl = ".image-wrapper"
 
 const urlWithArgs = makeUrlWithArgs("components-vimagecell--default")
 
-const goAndWaitForImage = async (
-  page: Page,
-  args: Record<string, string | number | boolean>
-) => {
-  // Block the flickr direct url request so that the image cell immediately
-  // falls back to the local image.
-  await page.route("**flickr**", (route) => route.abort())
-  await waitForResponse(page, urlWithArgs(args), /\.jpg/)
-  await expect(page.locator(imageCellImage)).toBeVisible()
-  await sleep(500)
-}
-
 test.describe.configure({ mode: "parallel" })
 
+const aspectRatios: AspectRatio[] = ["square", "intrinsic"]
 test.describe("VImageCell", () => {
   breakpoints.describeMobileXsAndDesktop(({ expectSnapshot }) => {
-    const aspectRatios: AspectRatio[] = ["square", "intrinsic"]
-
     for (const ratio of aspectRatios) {
-      test(`${ratio} loaded`, async ({ page }) => {
-        await goAndWaitForImage(page, { aspectRatio: ratio })
+      test.beforeEach(async ({ page }) => {
+        await page.routeFromHAR("./test/hars/v-image-cell.har", {
+          url: /\/thumb\//,
+        })
+      })
 
+      test(`${ratio} loaded`, async ({ page }) => {
+        await page.goto(urlWithArgs({ aspectRatio: ratio }))
         await expectSnapshot(
           page,
           `v-image-cell-${ratio}-loaded`,
@@ -46,7 +36,7 @@ test.describe("VImageCell", () => {
       })
 
       test(`${ratio} focused`, async ({ page }) => {
-        await goAndWaitForImage(page, { aspectRatio: ratio })
+        await page.goto(urlWithArgs({ aspectRatio: ratio }))
 
         await page.focus(imageCell)
 
@@ -58,7 +48,7 @@ test.describe("VImageCell", () => {
       })
 
       test(`${ratio} hovered`, async ({ page }) => {
-        await goAndWaitForImage(page, { aspectRatio: ratio })
+        await page.goto(urlWithArgs({ aspectRatio: ratio }))
 
         await page.hover(imageCell)
 
@@ -70,7 +60,7 @@ test.describe("VImageCell", () => {
       })
 
       test(`${ratio} focused hovered`, async ({ page }) => {
-        await goAndWaitForImage(page, { aspectRatio: ratio })
+        await page.goto(urlWithArgs({ aspectRatio: ratio }))
 
         await page.focus(imageCell)
         await page.hover(imageCell)