Update e2e tests for MV3

.github/workflows/build.yml

@@ -163,6 +163,9 @@ jobs:
     if: ${{ !startsWith(github.ref, 'refs/tags/') }}
     timeout-minutes: 60
     runs-on: ubuntu-latest
+    env:
+      # https://playwright.dev/docs/service-workers-experimental
+      PW_EXPERIMENTAL_SERVICE_WORKER_NETWORK_EVENTS: 1
     steps:
       - uses: actions/checkout@v3
       - name: Read .nvmrc

e2e-tests/regular/nfts.spec.ts

@@ -5,15 +5,16 @@ import { account1 } from "../utils/onboarding"
 test.describe("NFTs", () => {
   test("User can view nft collections, poaps and badges", async ({
     page,
-    backgroundPage,
+    context,
+    isExtensionRequest,
     walletPageHelper,
   }) => {
     await test.step("Shows loading state", async () => {
       let shouldInterceptRequests = true
 
       // Set a delay so we don't miss loading states
-      await backgroundPage.route(/api\.simplehash\.com/i, async (route) => {
-        if (!shouldInterceptRequests) {
+      await context.route(/api\.simplehash\.com/i, async (route, request) => {
+        if (!shouldInterceptRequests || !isExtensionRequest(request)) {
           route.continue()
           return
         }
@@ -32,7 +33,13 @@ test.describe("NFTs", () => {
         })
 
         if (response) {
-          await wait(800)
+          // Start fulfilling NFT requests once we're in the NFT's page
+          await page
+            .getByRole("link", { name: "NFTs" })
+            .locator(".active")
+            .waitFor({ state: "visible" })
+
+          await wait(5_000)
           await route.fulfill({ response })
         }
       })
@@ -51,6 +58,7 @@ test.describe("NFTs", () => {
       await walletPageHelper.navigateTo("NFTs")
 
       // Wait until load finishes
+      await expect(page.getByTestId("loading_doggo")).toBeVisible()
       await expect(page.getByTestId("loading_doggo")).not.toBeVisible()
 
       shouldInterceptRequests = false

e2e-tests/utils.ts

@@ -1,6 +1,5 @@
 /* eslint-disable no-empty-pattern */
-import { test as base, chromium, Page } from "@playwright/test"
-import { FeatureFlagType, isEnabled } from "@tallyho/tally-background/features"
+import { test as base, chromium, Request, Worker } from "@playwright/test"
 import path from "path"
 import WalletPageHelper from "./utils/walletPageHelper"
 import AssetsHelper from "./utils/assets"
@@ -14,7 +13,8 @@ type WalletTestFixtures = {
   walletPageHelper: WalletPageHelper
   assetsHelper: AssetsHelper
   transactionsHelper: TransactionsHelper
-  backgroundPage: Page
+  backgroundPage: Worker
+  isExtensionRequest: (request: Request) => boolean
 }
 
 /**
@@ -35,27 +35,34 @@ export const test = base.extend<WalletTestFixtures>({
     await use(context)
     await context.close()
   },
-  backgroundPage: async ({ context }, use) => {
-    // for manifest v2:
-    let [background] = context.backgroundPages()
-    if (!background) background = await context.waitForEvent("backgroundpage")
+  backgroundPage: async ({ context, isExtensionRequest }, use) => {
+    let [background] = context.serviceWorkers()
+    if (!background) background = await context.waitForEvent("serviceworker")
 
-    await background.route(/app\.posthog\.com/i, async (route) =>
-      route.fulfill({ json: { status: 1 } }),
-    )
-
-    await background.waitForResponse(/api\.coingecko\.com/i)
+    // Intercept all posthog requests from extension sources
+    await context.route(/app\.posthog\.com/i, async (route, request) => {
+      if (isExtensionRequest(request)) {
+        route.fulfill({ json: { status: 1 } })
+      }
+    })
 
-    // // for manifest v3:
-    // let [background] = context.serviceWorkers();
-    // if (!background)
-    //   background = await context.waitForEvent("serviceworker");
     await use(background)
   },
   extensionId: async ({ backgroundPage }, use) => {
     const extensionId = backgroundPage.url().split("/")[2]
     await use(extensionId)
   },
+  isExtensionRequest: async ({}, use) => {
+    const hasExtensionOrigin = (url: string) =>
+      /^chrome-extension:\/\//.test(url)
+
+    await use((request) => {
+      const worker = request.serviceWorker()
+      const isWorkerRequest = worker && hasExtensionOrigin(worker.url())
+
+      return isWorkerRequest || hasExtensionOrigin(request.frame().url())
+    })
+  },
   walletPageHelper: async ({ page, context, extensionId }, use) => {
     const helper = new WalletPageHelper(page, context, extensionId)
     await use(helper)
@@ -69,9 +76,3 @@ export const test = base.extend<WalletTestFixtures>({
     await use(helper)
   },
 })
-
-export const skipIfFeatureFlagged = (featureFlag: FeatureFlagType): void =>
-  test.skip(
-    !isEnabled(featureFlag, false),
-    `Feature Flag: ${featureFlag} has not been turned on for this run`,
-  )

package.json

@@ -64,7 +64,9 @@
     "test:integration": "echo \"> Running Integration Tests\" && jest \"integration.test.ts\" --forceExit --runInBand",
     "test:unit": "echo \"> Running Unit Tests\" && jest \"unit.test.ts\" --forceExit",
     "test:ui": "echo \"> Running UI Tests\" && jest \".test.tsx\" --forceExit",
-    "test:e2e": "echo \"> Running e2e Tests\" && playwright test",
+    "test:e2e": "echo \"> Running e2e Tests\" && run-s e2e:*",
+    "e2e:regular": "echo \"> Running base e2e Tests\" && playwright test --grep-invert @expensive",
+    "e2e:fork": "echo \"> Running base e2e Tests\" && playwright test --grep @expensive",
     "preversion": "(which jq >&1 && which yq >&1) || (echo 'You must install jq and yq; scripts/macos-setup.sh for macOS.' && exit 1)",
     "version": "scripts/update-version.sh",
     "postversion": "git push --tags origin release-$npm_package_version",