Revert "Update Playwright to use a custom test fixture with global mo…

…cks (#2196)"

This reverts commit de7d99e.

.eslintrc.js

@@ -185,7 +185,6 @@ module.exports = {
         "tsdoc/syntax": "error",
       },
     },
-    // Overrides for unit tests
     {
       env: { jest: true },
       files: ["frontend/test/unit/**"],
@@ -213,21 +212,6 @@ module.exports = {
         ],
       },
     },
-    // Overrides for Playwright tests
-    {
-      files: ["frontend/test/{playwright,storybook}/**/*.spec.{ts,js}"],
-      rules: {
-        "no-restricted-syntax": [
-          "error",
-          {
-            selector:
-              "ImportDeclaration[source.value='@playwright/test']:has(ImportSpecifier[local.name='test'])",
-            message:
-              "Do not import 'test' from '@playwright/test'. Use 'import { test } from '~~/test/playwright/utils/test-fixture' instead, which mocks Openverse provider APIs and the analytics server.",
-          },
-        ],
-      },
-    },
     {
       files: ["automations/js/src/**"],
       rules: {

frontend/.remake/component-storybook-test/remake-fileName.spec.ts

@@ -1,4 +1,4 @@
-import { test } from "~~/test/playwright/utils/test-fixture"
+import { test } from "@playwright/test"
 
 import breakpoints from "~~/test/playwright/utils/breakpoints"
 

frontend/test/playwright/e2e/all-results-keyboard.spec.ts

@@ -1,6 +1,4 @@
-import { expect, Page } from "@playwright/test"
-
-import { test } from "~~/test/playwright/utils/test-fixture"
+import { test, expect, Page } from "@playwright/test"
 
 import audio from "~~/test/playwright/utils/audio"
 

frontend/test/playwright/e2e/attribution.spec.ts

@@ -1,6 +1,4 @@
-import { expect } from "@playwright/test"
-
-import { test } from "~~/test/playwright/utils/test-fixture"
+import { test, expect } from "@playwright/test"
 
 import { turnOnAnalytics } from "~~/test/playwright/utils/navigation"
 

frontend/test/playwright/e2e/audio-detail.spec.ts

@@ -1,6 +1,6 @@
-import { expect, Page } from "@playwright/test"
+import { test, expect, Page } from "@playwright/test"
 
-import { test } from "~~/test/playwright/utils/test-fixture"
+import { mockProviderApis } from "~~/test/playwright/utils/route"
 
 const goToCustomAudioPage = async (page: Page) => {
   // Test in a custom audio detail page, it should apply the same for any audio.
@@ -15,6 +15,10 @@ const showsErrorPage = async (page: Page) => {
 
 test.describe.configure({ mode: "parallel" })
 
+test.beforeEach(async ({ context }) => {
+  await mockProviderApis(context)
+})
+
 test("shows the data that is only available in single result, not search response", async ({
   page,
 }) => {

frontend/test/playwright/e2e/external-sources.spec.ts

@@ -1,6 +1,4 @@
-import { expect } from "@playwright/test"
-
-import { test } from "~~/test/playwright/utils/test-fixture"
+import { test, expect } from "@playwright/test"
 
 import { goToSearchTerm, setCookies } from "~~/test/playwright/utils/navigation"
 

frontend/test/playwright/e2e/filters-sidebar-keyboard.spec.ts

@@ -1,6 +1,4 @@
-import { expect, Page } from "@playwright/test"
-
-import { test } from "~~/test/playwright/utils/test-fixture"
+import { test, expect, Page } from "@playwright/test"
 
 import {
   LanguageDirection,

frontend/test/playwright/e2e/filters.spec.ts

@@ -1,6 +1,4 @@
-import { expect, Page } from "@playwright/test"
-
-import { test } from "~~/test/playwright/utils/test-fixture"
+import { test, expect, Page } from "@playwright/test"
 
 import {
   assertCheckboxStatus,
@@ -10,6 +8,8 @@ import {
   filters,
 } from "~~/test/playwright/utils/navigation"
 
+import { mockProviderApis } from "~~/test/playwright/utils/route"
+
 import breakpoints from "~~/test/playwright/utils/breakpoints"
 
 import {
@@ -42,6 +42,9 @@ const FILTER_COUNTS = {
 }
 
 breakpoints.describeMobileAndDesktop(() => {
+  test.beforeEach(async ({ context }) => {
+    await mockProviderApis(context)
+  })
   for (const searchType of supportedSearchTypes) {
     test(`correct total number of filters is displayed for ${searchType}`, async ({
       page,

frontend/test/playwright/e2e/global-audio.spec.ts

@@ -1,6 +1,4 @@
-import { expect } from "@playwright/test"
-
-import { test } from "~~/test/playwright/utils/test-fixture"
+import { expect, test } from "@playwright/test"
 
 import { sleep, t } from "~~/test/playwright/utils/navigation"
 import breakpoints from "~~/test/playwright/utils/breakpoints"

frontend/test/playwright/e2e/header-internal.spec.ts

@@ -1,6 +1,4 @@
-import { expect, Page } from "@playwright/test"
-
-import { test } from "~~/test/playwright/utils/test-fixture"
+import { test, expect, Page } from "@playwright/test"
 
 import {
   isDialogOpen,

frontend/test/playwright/e2e/homepage.spec.ts

@@ -1,13 +1,16 @@
-import { expect, Page } from "@playwright/test"
-
-import { test } from "~~/test/playwright/utils/test-fixture"
+import { expect, Page, test } from "@playwright/test"
 
+import { mockProviderApis } from "~~/test/playwright/utils/route"
 import { goToSearchTerm, t } from "~~/test/playwright/utils/navigation"
 
 import { searchPath, supportedSearchTypes } from "~/constants/media"
 
 test.describe.configure({ mode: "parallel" })
 
+test.beforeEach(async ({ context }) => {
+  await mockProviderApis(context)
+})
+
 for (const searchType of supportedSearchTypes) {
   test(`can change type and search for ${searchType} from homepage`, async ({
     page,

frontend/test/playwright/e2e/image-detail.spec.ts

@@ -1,7 +1,6 @@
-import { expect, Page } from "@playwright/test"
-
-import { test } from "~~/test/playwright/utils/test-fixture"
+import { test, expect, Page } from "@playwright/test"
 
+import { mockProviderApis } from "~~/test/playwright/utils/route"
 import { t } from "~~/test/playwright/utils/navigation"
 
 const goToCustomImagePage = async (page: Page) => {
@@ -17,6 +16,10 @@ const showsErrorPage = async (page: Page) => {
 
 test.describe.configure({ mode: "parallel" })
 
+test.beforeEach(async ({ context }) => {
+  await mockProviderApis(context)
+})
+
 test("shows the author and title of the image", async ({ page }) => {
   await goToCustomImagePage(page)
   const author = page.locator('a[aria-label^="author"]')

frontend/test/playwright/e2e/load-more.spec.ts

@@ -1,12 +1,11 @@
-import { expect, Page } from "@playwright/test"
-
-import { test } from "~~/test/playwright/utils/test-fixture"
+import { expect, Page, test } from "@playwright/test"
 
 import {
   goToSearchTerm,
   renderModes,
   t,
 } from "~~/test/playwright/utils/navigation"
+import { mockProviderApis } from "~~/test/playwright/utils/route"
 
 import { AUDIO, IMAGE, SupportedMediaType } from "~/constants/media"
 
@@ -40,6 +39,10 @@ const openSingleMediaView = async (
  */
 
 test.describe("Load more button", () => {
+  test.beforeEach(async ({ context }) => {
+    await mockProviderApis(context)
+  })
+
   test("Clicking sends 2 requests on All view with enough results", async ({
     page,
   }) => {

frontend/test/playwright/e2e/migration-banner.spec.ts

@@ -1,6 +1,4 @@
-import { expect } from "@playwright/test"
-
-import { test } from "~~/test/playwright/utils/test-fixture"
+import { test, expect } from "@playwright/test"
 
 import { t } from "~~/test/playwright/utils/navigation"
 

frontend/test/playwright/e2e/mobile-menu.spec.ts

@@ -1,6 +1,4 @@
-import { expect } from "@playwright/test"
-
-import { test } from "~~/test/playwright/utils/test-fixture"
+import { test, expect } from "@playwright/test"
 
 import {
   goToSearchTerm,

frontend/test/playwright/e2e/recent-searches.spec.ts

@@ -1,6 +1,4 @@
-import { expect, type Page } from "@playwright/test"
-
-import { test } from "~~/test/playwright/utils/test-fixture"
+import { expect, test, type Page } from "@playwright/test"
 
 import { searchFromHeader } from "~~/test/playwright/utils/navigation"
 

frontend/test/playwright/e2e/redirect-queryless-searches.spec.ts

@@ -3,9 +3,7 @@
  * redirect to the homepage.
  */
 
-import { expect } from "@playwright/test"
-
-import { test } from "~~/test/playwright/utils/test-fixture"
+import { test, expect } from "@playwright/test"
 
 import { searchTypes, searchPath } from "~/constants/media"
 

frontend/test/playwright/e2e/report-media.spec.ts

@@ -1,7 +1,6 @@
-import { expect, Page, BrowserContext } from "@playwright/test"
-
-import { test } from "~~/test/playwright/utils/test-fixture"
+import { test, expect, Page, BrowserContext } from "@playwright/test"
 
+import { mockProviderApis } from "~~/test/playwright/utils/route"
 import {
   goToSearchTerm,
   openFirstResult,
@@ -81,6 +80,10 @@ const submitOtherReport = async (page: Page, context: BrowserContext) => {
   return expect(response.status()).toBe(200)
 }
 
+test.beforeEach(async ({ context }) => {
+  await mockProviderApis(context)
+})
+
 const reports = {
   dmca: submitDmcaReport,
   mature: submitMatureContentReport,

frontend/test/playwright/e2e/search-navigation.spec.ts

@@ -1,6 +1,4 @@
-import { expect, Page } from "@playwright/test"
-
-import { test } from "~~/test/playwright/utils/test-fixture"
+import { expect, Page, test } from "@playwright/test"
 
 import {
   goToSearchTerm,
@@ -9,7 +7,7 @@ import {
   openFirstResult,
   t,
 } from "~~/test/playwright/utils/navigation"
-
+import { mockProviderApis } from "~~/test/playwright/utils/route"
 import breakpoints from "~~/test/playwright/utils/breakpoints"
 
 import { AUDIO, IMAGE, SupportedMediaType } from "~/constants/media"
@@ -23,6 +21,10 @@ const getContentLink = async (page: Page, mediaType: SupportedMediaType) => {
 
 test.describe("search history navigation", () => {
   breakpoints.describeMobileAndDesktop(() => {
+    test.beforeEach(async ({ context }) => {
+      await mockProviderApis(context)
+    })
+
     test("should update search results when back navigation changes filters", async ({
       page,
     }) => {

frontend/test/playwright/e2e/search-query-client.spec.ts

@@ -1,12 +1,11 @@
-import { expect } from "@playwright/test"
-
-import { test } from "~~/test/playwright/utils/test-fixture"
+import { expect, test } from "@playwright/test"
 
 import {
   changeSearchType,
   goToSearchTerm,
   searchFromHeader,
 } from "~~/test/playwright/utils/navigation"
+import { mockProviderApis } from "~~/test/playwright/utils/route"
 
 import breakpoints from "~~/test/playwright/utils/breakpoints"
 
@@ -28,6 +27,10 @@ test.describe.configure({ mode: "parallel" })
 
 test.describe("search query on CSR", () => {
   breakpoints.describeMobileAndDesktop(() => {
+    test.beforeEach(async ({ context }) => {
+      await mockProviderApis(context)
+    })
+
     test("q query parameter is set as the search term", async ({ page }) => {
       await goToSearchTerm(page, "cat", { mode: "CSR" })
 

frontend/test/playwright/e2e/search-query-server.spec.ts

@@ -1,6 +1,4 @@
-import { expect } from "@playwright/test"
-
-import { test } from "~~/test/playwright/utils/test-fixture"
+import { test, expect } from "@playwright/test"
 
 import {
   assertCheckboxStatus,
@@ -9,6 +7,7 @@ import {
   goToSearchTerm,
   searchTypeNames,
 } from "~~/test/playwright/utils/navigation"
+import { mockProviderApis } from "~~/test/playwright/utils/route"
 
 import breakpoints from "~~/test/playwright/utils/breakpoints"
 
@@ -30,6 +29,10 @@ test.describe.configure({ mode: "parallel" })
 
 test.describe("search query on SSR", () => {
   breakpoints.describeMobileAndDesktop(() => {
+    test.beforeEach(async ({ context }) => {
+      await mockProviderApis(context)
+    })
+
     test("q query parameter is set as the search term", async ({ page }) => {
       await goToSearchTerm(page, "cat", {
         query: "license=cc0&license_type=commercial&searchBy=creator",

frontend/test/playwright/e2e/search-types.spec.ts

@@ -1,11 +1,10 @@
-import { expect, Page } from "@playwright/test"
-
-import { test } from "~~/test/playwright/utils/test-fixture"
+import { test, expect, Page } from "@playwright/test"
 
 import {
   changeSearchType,
   goToSearchTerm,
 } from "~~/test/playwright/utils/navigation"
+import { mockProviderApis } from "~~/test/playwright/utils/route"
 import breakpoints from "~~/test/playwright/utils/breakpoints"
 
 import { searchPath } from "~/constants/media"
@@ -96,6 +95,10 @@ async function checkSearchResult(page: Page, searchType: SearchTypeConfig) {
 
 test.describe("search types", () => {
   breakpoints.describeMobileAndDesktop(() => {
+    test.beforeEach(async ({ context }) => {
+      await mockProviderApis(context)
+    })
+
     for (const searchType of searchTypes) {
       test(`Can open ${searchType.name} search page on SSR`, async ({
         page,

frontend/test/playwright/e2e/search.spec.ts

@@ -6,10 +6,9 @@
  * When pending: does not show 'No images', Safer Browsing, search rating or error message
  * On error: shows error message
  */
-import { expect } from "@playwright/test"
-
-import { test } from "~~/test/playwright/utils/test-fixture"
+import { expect, test } from "@playwright/test"
 
+import { mockProviderApis } from "~~/test/playwright/utils/route"
 import {
   goToSearchTerm,
   scrollToBottom,
@@ -18,6 +17,10 @@ import {
 
 test.describe.configure({ mode: "parallel" })
 
+test.beforeEach(async ({ context }) => {
+  await mockProviderApis(context)
+})
+
 test("shows no results page when no results", async ({ page }) => {
   await page.goto("/search/image?q=243f6a8885a308d3")
   await expect(page.locator(".error-section")).toBeVisible()

frontend/test/playwright/e2e/translation-banner.spec.ts

@@ -1,6 +1,4 @@
-import { expect } from "@playwright/test"
-
-import { test } from "~~/test/playwright/utils/test-fixture"
+import { test, expect } from "@playwright/test"
 
 import { dismissBannersUsingCookies } from "~~/test/playwright/utils/navigation"