feat: Guild Pin minting E2E test (#1413)

* feat: use wagmi's mock connector & add Guild Pin minting test

* fix: provide environment variables in the gh action

* fix(gh action): install foundry

* fix: simplify guild pin spec

.github/workflows/playwright.yml

@@ -20,9 +20,13 @@ jobs:
         run: npm ci
       - name: Install Playwright Browsers
         run: npx playwright install --with-deps
+      - name: Install Foundry
+        uses: foundry-rs/foundry-toolchain@v1
       - name: Run Playwright tests
         env:
           DEPLOYMENT_URL: ${{ github.event.deployment_status.target_url }}
+          ANVIL_FORK_URL: ${{ secrets.ANVIL_FORK_URL }}
+          NEXT_PUBLIC_E2E_WALLET_MNEMONIC: ${{ secrets.E2E_WALLET_MNEMONIC }}
         run: npm run test
       - uses: actions/upload-artifact@v4
         if: ${{ failure() }}

package.json

@@ -137,6 +137,7 @@
     "abitype": "^1.0.2",
     "autoprefixer": "^10.4.19",
     "circular-dependency-plugin": "^5.2.2",
+    "dotenv": "^16.4.5",
     "dotenv-cli": "^7.4.1",
     "dpdm": "^3.14.0",
     "event-stream": "^4.0.1",

playwright.config.ts

@@ -1,7 +1,11 @@
+import path from "node:path"
 import { defineConfig, devices } from "@playwright/test"
+import dotenv from "dotenv"
+dotenv.config({ path: path.resolve(__dirname, ".env.local") })
 
 const baseURL = process.env.DEPLOYMENT_URL || "http://localhost:3000"
 
+// biome-ignore lint/style/noDefaultExport: <explanation>
 export default defineConfig({
   testDir: "./playwright",
   fullyParallel: true,
@@ -33,39 +37,17 @@ export default defineConfig({
       },
       dependencies: ["auth-setup"],
     },
-    // {
-    //   name: "firefox",
-    //   use: {
-    //     ...devices["Desktop Firefox"],
-    //   },
-    //   dependencies: ["auth-setup"],
-    // },
-    // {
-    //   name: "webkit",
-    //   use: {
-    //     ...devices["Desktop Safari"],
-    //   },
-    //   dependencies: ["auth-setup"],
-    // },
-    // {
-    //   name: "Mobile Chrome",
-    //   use: {
-    //     ...devices["Pixel 5"],
-    //   },
-    //   dependencies: ["auth-setup"],
-    // },
-    // {
-    //   name: "Mobile Safari",
-    //   use: {
-    //     ...devices["iPhone 12"],
-    //   },
-    //   dependencies: ["auth-setup"],
-    // },
   ],
 
-  webServer: {
-    command: process.env.CI ? "" : "npm run start",
-    url: baseURL,
-    reuseExistingServer: true,
-  },
+  webServer: [
+    {
+      command: `anvil --fork-url=${process.env.ANVIL_FORK_URL} --fork-block-number=6373425 -m='${process.env.NEXT_PUBLIC_E2E_WALLET_MNEMONIC}'`,
+      port: 8545,
+    },
+    {
+      command: process.env.CI ? "" : "npm run start",
+      url: baseURL,
+      reuseExistingServer: true,
+    },
+  ],
 })

playwright/auth.setup.ts → playwright/01-auth.setup.ts

@@ -28,7 +28,7 @@ setup("authenticate", async ({ page }) => {
   const signInDialog = await page.getByRole("dialog", {
     name: "Connect to Guild",
   })
-  expect(signInDialog).toBeVisible()
+  await expect(signInDialog).toBeVisible()
 
   await page.getByTestId("mock-connector-button").click()
   await page.getByTestId("verify-address-button").click()

playwright/dummy.spec.ts → playwright/02-dummy.spec.ts

@@ -6,7 +6,8 @@ test("dummy", async ({ pageWithKeyPair: { page } }) => {
   await page.goto("/explorer")
 
   const accountCard = await page.getByTestId("account-card")
-  expect(accountCard).toBeVisible()
+  await expect(accountCard).toBeVisible()
+  accountCard.click()
 
   await page.waitForResponse(`**/v2/users/${TEST_USER.id}/profile`)
 })

playwright/03-guild-pin.spec.ts

@@ -0,0 +1,29 @@
+import { expect } from "@playwright/test"
+import { GUILD_CHECKOUT_TEST_GUILD_URL_NAME } from "./constants"
+import { test } from "./fixtures"
+
+test("can mint guild pin", async ({ pageWithKeyPair: { page } }) => {
+  await page.goto(GUILD_CHECKOUT_TEST_GUILD_URL_NAME)
+
+  await page.waitForResponse("**/v2/users/*/memberships?guildId=*")
+
+  const mintGuildPinButton = await page.getByTestId("mint-guild-pin-button")
+  await mintGuildPinButton.click()
+
+  const mintGuildPinDialog = await page.getByRole("dialog", {
+    name: "Mint Guild Pin",
+  })
+  await expect(mintGuildPinDialog).toBeVisible()
+
+  const feeText = await page.getByTestId("guild-pin-fee")
+  await expect(feeText).toContainText("0.001 ETH")
+
+  const bigMintGuildPinButton = await page.getByTestId("big-mint-guild-pin-button")
+  await expect(bigMintGuildPinButton).toBeEnabled()
+  await bigMintGuildPinButton.click()
+
+  await page.waitForResponse("**/v2/guilds/*/pin")
+
+  const successToast = await page.getByText("Successfully minted Guild Pin!")
+  await expect(successToast).toBeVisible({ timeout: 30_000 })
+})

playwright/constants.ts

@@ -1,4 +1,8 @@
 export const TEST_USER = {
-  id: 953897,
-  address: "0x304def656babc745c53782639d3cab00ace8c843",
+  id: 6051234,
+  address: "0xcb03d1acd17abaf5c6019da30c9e652bdbed459f",
 } as const
+
+export const GUILD_CHECKOUT_TEST_GUILD_URL_NAME = "guild-checkout-e2e"
+
+export const TEST_GUILD_URL_NAME = "guild-e2e"

src/components/[guild]/Requirements/components/GuildCheckout/MintGuildPin/MintGuildPin.tsx

@@ -56,6 +56,7 @@ const MintGuildPin = (): JSX.Element => {
         hasArrow
       >
         <Button
+          data-testid="mint-guild-pin-button"
           isDisabled={GUILD_PIN_MAINTENANCE}
           onClick={
             GUILD_PIN_MAINTENANCE

src/components/[guild]/Requirements/components/GuildCheckout/components/GuildPinFees.tsx

@@ -27,7 +27,7 @@ const GuildPinFees = (): JSX.Element => {
           <PriceFallback pickedCurrency={symbol} error={guildPinFeeError}>
             <Text as="span">
               <Skeleton isLoaded={!isGuildPinFeeLoading}>
-                <Text as="span">
+                <Text as="span" data-testid="guild-pin-fee">
                   {guildPinFeeInFloat
                     ? `${Number(guildPinFeeInFloat.toFixed(5))} `
                     : "0.00 "}

src/components/[guild]/Requirements/components/GuildCheckout/components/buttons/MintGuildPinButton.tsx

@@ -56,6 +56,7 @@ const MintGuildPinButton = (): JSX.Element => {
 
   return (
     <Button
+      data-testid="big-mint-guild-pin-button"
       size="lg"
       isDisabled={isDisabled}
       isLoading={isLoading}

src/v2/components/Web3ConnectionManager/Web3ConnectionManager.tsx

@@ -1,4 +1,4 @@
-import useAutoReconnect from "@/hooks/useAutoReconnect"
+import { useAutoReconnect } from "@/hooks/useAutoReconnect"
 import { useAtom } from "jotai"
 import { walletSelectorModalAtom } from "../Providers/atoms"
 import { PlatformMergeErrorAlert } from "./PlatformMergeErrorAlert"

src/v2/hooks/useAutoReconnect.ts

@@ -22,7 +22,7 @@ const useAutoReconnect = () => {
         .catch(() => false)
     }
 
-    const recentConnectorId = await config.storage.getItem("recentConnectorId")
+    const recentConnectorId = await config.storage?.getItem("recentConnectorId")
     if (!recentConnectorId && !canConnectToSafe) return
 
     const connectorToReconnect = canConnectToSafe
@@ -39,11 +39,15 @@ const useAutoReconnect = () => {
     let isAuthorized = false
     let retryCount = 0
 
-    while (!isAuthorized && retryCount < 3) {
-      // isAuthorized is false most of the time, so we retry 3 times
-      await waitForRetry()
-      retryCount++
-      isAuthorized = await connectorToReconnect.isAuthorized()
+    if (connectorToReconnect.id === "mock") {
+      isAuthorized = true
+    } else {
+      while (!isAuthorized && retryCount < 3) {
+        // isAuthorized is false most of the time, so we retry 3 times
+        await waitForRetry()
+        retryCount++
+        isAuthorized = await connectorToReconnect.isAuthorized()
+      }
     }
 
     if (!isAuthorized) return
@@ -66,7 +70,7 @@ const useAutoReconnect = () => {
       connections: new Map(prevState.connections ?? []).set(
         connectorToReconnect.uid,
         {
-          accounts: data.accounts,
+          accounts: data.accounts as readonly [`0x{string}`, ...`0x${string}`[]],
           chainId: data.chainId,
           connector: connectorToReconnect,
         }
@@ -84,7 +88,7 @@ const useAutoReconnect = () => {
         config.setState((x) => ({
           ...x,
           connections: new Map(),
-          current: undefined,
+          current: null,
           status: "disconnected",
         }))
       else config.setState((x) => ({ ...x, status: "connected" }))
@@ -97,4 +101,4 @@ const useAutoReconnect = () => {
   }, [handleReconnect])
 }
 
-export default useAutoReconnect
+export { useAutoReconnect }