From 7b94e137ed9c85d0b4e07e82c921023ae5bf6618 Mon Sep 17 00:00:00 2001 From: Alberto Gualis Date: Mon, 21 Jul 2025 12:03:31 +0200 Subject: [PATCH 1/3] feat: add playwright test for start page [fixes #15896] --- src/config/mockWallet.ts | 35 +++++++++++++++++++++ src/config/rainbow-kit.ts | 42 +++++++++++++++++-------- tests/e2e/fixtures/testData.ts | 2 ++ tests/e2e/pages/StartPage.ts | 56 ++++++++++++++++++++++++++++++++++ tests/e2e/pages/index.ts | 1 + tests/e2e/start.spec.ts | 15 +++++++++ 6 files changed, 138 insertions(+), 13 deletions(-) create mode 100644 src/config/mockWallet.ts create mode 100644 tests/e2e/pages/StartPage.ts create mode 100644 tests/e2e/start.spec.ts diff --git a/src/config/mockWallet.ts b/src/config/mockWallet.ts new file mode 100644 index 00000000000..9cb7c3fac63 --- /dev/null +++ b/src/config/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 +} diff --git a/src/config/rainbow-kit.ts b/src/config/rainbow-kit.ts index 5ed4ba6c3bd..440d98a462f 100644 --- a/src/config/rainbow-kit.ts +++ b/src/config/rainbow-kit.ts @@ -9,21 +9,37 @@ import { zerionWallet, } from "@rainbow-me/rainbowkit/wallets" +import { mockWallet } from "@/config/mockWallet" + +const walletGroups = [ + { + groupName: "New to crypto", + wallets: [ + coinbaseWallet, + rainbowWallet, + metaMaskWallet, + zerionWallet, + oneKeyWallet, + walletConnectWallet, + ], + }, +] + +const isLocalhost = + typeof window !== "undefined" && window.location.hostname === "localhost" + +// Add mock wallet only when running on localhost +if (isLocalhost) { + walletGroups.push({ + groupName: "Test", + wallets: [mockWallet], + }) +} + export const rainbowkitConfig = getDefaultConfig({ appName: "ethereum.org", projectId: process.env.NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID!, chains: [mainnet], - wallets: [ - { - groupName: "New to crypto", - wallets: [ - coinbaseWallet, - rainbowWallet, - metaMaskWallet, - zerionWallet, - oneKeyWallet, - walletConnectWallet, - ], - }, - ], + wallets: walletGroups, + ssr: isLocalhost, }) diff --git a/tests/e2e/fixtures/testData.ts b/tests/e2e/fixtures/testData.ts index a3f859d3c6b..90669322ec4 100644 --- a/tests/e2e/fixtures/testData.ts +++ b/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"], diff --git a/tests/e2e/pages/StartPage.ts b/tests/e2e/pages/StartPage.ts new file mode 100644 index 00000000000..de3a7e1a817 --- /dev/null +++ b/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() + } +} diff --git a/tests/e2e/pages/index.ts b/tests/e2e/pages/index.ts index 97eefbead23..9a6571806c3 100644 --- a/tests/e2e/pages/index.ts +++ b/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" diff --git a/tests/e2e/start.spec.ts b/tests/e2e/start.spec.ts new file mode 100644 index 00000000000..6dc1f2944ee --- /dev/null +++ b/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() + }) +}) From 05167d220e2ad9850bea654e77ffd5290310b98e Mon Sep 17 00:00:00 2001 From: Alberto Gualis Date: Fri, 25 Jul 2025 18:08:21 +0200 Subject: [PATCH 2/3] Move mockWallet to test fixtures --- src/config/rainbow-kit.ts | 2 +- {src/config => tests/e2e/fixtures}/mockWallet.ts | 0 2 files changed, 1 insertion(+), 1 deletion(-) rename {src/config => tests/e2e/fixtures}/mockWallet.ts (100%) diff --git a/src/config/rainbow-kit.ts b/src/config/rainbow-kit.ts index 440d98a462f..636fd403d34 100644 --- a/src/config/rainbow-kit.ts +++ b/src/config/rainbow-kit.ts @@ -9,7 +9,7 @@ import { zerionWallet, } from "@rainbow-me/rainbowkit/wallets" -import { mockWallet } from "@/config/mockWallet" +import { mockWallet } from "../../tests/e2e/fixtures/mockWallet" const walletGroups = [ { diff --git a/src/config/mockWallet.ts b/tests/e2e/fixtures/mockWallet.ts similarity index 100% rename from src/config/mockWallet.ts rename to tests/e2e/fixtures/mockWallet.ts From 319aa161523908bef320efa98b701e09d339c0a2 Mon Sep 17 00:00:00 2001 From: Alberto Gualis Date: Mon, 15 Sep 2025 09:55:42 +0200 Subject: [PATCH 3/3] Simplify condition to add mockWallet --- src/config/rainbow-kit.ts | 10 ++++------ src/lib/utils/env.ts | 1 + 2 files changed, 5 insertions(+), 6 deletions(-) diff --git a/src/config/rainbow-kit.ts b/src/config/rainbow-kit.ts index 636fd403d34..8dbdc4e505f 100644 --- a/src/config/rainbow-kit.ts +++ b/src/config/rainbow-kit.ts @@ -9,6 +9,8 @@ import { zerionWallet, } from "@rainbow-me/rainbowkit/wallets" +import { IS_CI, IS_DEV } from "@/lib/utils/env" + import { mockWallet } from "../../tests/e2e/fixtures/mockWallet" const walletGroups = [ @@ -25,11 +27,7 @@ const walletGroups = [ }, ] -const isLocalhost = - typeof window !== "undefined" && window.location.hostname === "localhost" - -// Add mock wallet only when running on localhost -if (isLocalhost) { +if (IS_DEV || IS_CI) { walletGroups.push({ groupName: "Test", wallets: [mockWallet], @@ -41,5 +39,5 @@ export const rainbowkitConfig = getDefaultConfig({ projectId: process.env.NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID!, chains: [mainnet], wallets: walletGroups, - ssr: isLocalhost, + ssr: true, }) diff --git a/src/lib/utils/env.ts b/src/lib/utils/env.ts index e5b8db2fb38..c632614c256 100644 --- a/src/lib/utils/env.ts +++ b/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"