feat: add playwright test for start page [fixes #15896]

src/config/rainbow-kit.ts

@@ -10,6 +10,10 @@ import {
   zerionWallet,
 } from "@rainbow-me/rainbowkit/wallets"
 
+import { IS_CI, IS_DEV } from "@/lib/utils/env"
+
+import { mockWallet } from "../../tests/e2e/fixtures/mockWallet"
+
 const CHAIN_MAP = {
   hardhat,
   sepolia,
@@ -60,23 +64,33 @@ const getTransports = () => {
   }
 }
 
+const walletGroups = [
+  {
+    groupName: "New to crypto",
+    wallets: [
+      coinbaseWallet,
+      rainbowWallet,
+      metaMaskWallet,
+      zerionWallet,
+      oneKeyWallet,
+      walletConnectWallet,
+    ],
+  },
+]
+
+if (IS_DEV || IS_CI) {
+  walletGroups.push({
+    groupName: "Test",
+    wallets: [mockWallet],
+  })
+}
+
 export const rainbowkitConfig = getDefaultConfig({
   appName: "ethereum.org",
   projectId: process.env.NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID!,
   // @ts-expect-error - TODO: fix this
   chains: getTargetChains(),
   transports: getTransports(),
-  wallets: [
-    {
-      groupName: "New to crypto",
-      wallets: [
-        coinbaseWallet,
-        rainbowWallet,
-        metaMaskWallet,
-        zerionWallet,
-        oneKeyWallet,
-        walletConnectWallet,
-      ],
-    },
-  ],
+  wallets: walletGroups,
+  ssr: true,
 })

src/lib/utils/env.ts

@@ -1,4 +1,5 @@
 export const IS_DEV = process.env.NODE_ENV === "development"
+export const IS_CI = process.env.CI === "true"
 export const IS_PROD = process.env.NODE_ENV === "production"
 export const IS_PREVIEW_DEPLOY =
   process.env.NEXT_PUBLIC_IS_PREVIEW_DEPLOY === "true"

tests/e2e/fixtures/mockWallet.ts

@@ -0,0 +1,35 @@
+import { Address } from "viem"
+import { CreateConnectorFn, mock } from "wagmi"
+import type { Wallet } from "@rainbow-me/rainbowkit"
+import { WalletDetailsParams } from "@rainbow-me/rainbowkit"
+
+const defaultAnvilAccount: Address =
+  "0xf39Fd6e51aad88F6F4ce6aB8827279cffFb92266"
+
+export const mockWallet = (): Wallet => {
+  return {
+    id: "mock",
+    name: "Mock Wallet",
+    shortName: "Mock",
+    installed: true,
+    iconBackground: "rgba(0, 255, 0, 0.5)",
+    iconUrl: "/images/assets/svgs/eth-glyph-colored.svg",
+    downloadUrls: {},
+    createConnector: createMockConnector,
+  }
+}
+
+function createMockConnector(
+  walletDetails: WalletDetailsParams
+): CreateConnectorFn {
+  const mockConnector: CreateConnectorFn = (config) => {
+    return {
+      ...mock({
+        accounts: [defaultAnvilAccount],
+      })(config),
+      rkDetails: walletDetails.rkDetails,
+    }
+  }
+
+  return mockConnector
+}

tests/e2e/fixtures/testData.ts

@@ -1,4 +1,5 @@
 import en from "@/intl/en/common.json"
+import enStart from "@/intl/en/page-start.json"
 import es from "@/intl/es/common.json"
 
 /**
@@ -36,6 +37,7 @@ export const testData = {
   content: {
     headings: {
       homepage: en["site-title"],
+      startPage: enStart["page-start-meta-title"],
       findWallet: en["nav-find-wallet-label"],
       notFoundEn: en["we-couldnt-find-that-page"],
       notFoundEs: es["we-couldnt-find-that-page"],

tests/e2e/pages/StartPage.ts

@@ -0,0 +1,56 @@
+import { expect, Page } from "@playwright/test"
+
+import { testData } from "../fixtures/testData"
+
+import { BasePage } from "./BasePage"
+
+/**
+ * Page Object Model for the Start page
+ */
+export class StartPage extends BasePage {
+  private readonly url = "/en/start"
+
+  constructor(page: Page) {
+    super(page)
+  }
+
+  /**
+   * Navigate to the start page
+   */
+  async goto() {
+    await this.navigateTo(this.url)
+  }
+
+  /**
+   * Verify the start page has loaded successfully
+   */
+  async verifyPageLoaded() {
+    await this.assertTitleContains(testData.content.headings.startPage)
+  }
+
+  async connectWithExistingWallet() {
+    await this.page
+      .getByRole("paragraph")
+      .filter({ hasText: "I have a wallet." })
+      .click()
+    await this.page.getByRole("button", { name: "Continue" }).click()
+    await this.page
+      .getByRole("button", { name: "Sign in with Ethereum" })
+      .click()
+    // Choose mock wallet option in RainbowKit modal
+    await this.page.getByTestId("rk-wallet-option-mock").click()
+    // Verify wallet connected
+    await expect(
+      this.page
+        .getByRole("paragraph")
+        .filter({ hasText: "This is your account" })
+    ).toBeVisible()
+  }
+
+  async continueToUseAppsStep() {
+    await this.page.getByRole("button", { name: "Lets continue" }).click()
+    await expect(
+      this.page.getByRole("heading", { name: "Let Use Some Apps" })
+    ).toBeVisible()
+  }
+}

tests/e2e/pages/index.ts

@@ -5,3 +5,4 @@
 export { BasePage } from "./BasePage"
 export { FindWalletPage } from "./FindWalletPage"
 export { HomePage } from "./HomePage"
+export { StartPage } from "./StartPage"

tests/e2e/start.spec.ts

@@ -0,0 +1,15 @@
+import { test } from "@playwright/test"
+
+import { StartPage } from "./pages"
+
+test.describe("Start Page", () => {
+  test("Connect wallet", async ({ page }) => {
+    const startPage = new StartPage(page)
+    await startPage.goto()
+    await startPage.verifyPageLoaded()
+
+    await startPage.connectWithExistingWallet()
+
+    await startPage.continueToUseAppsStep()
+  })
+})