From 378f2e8e5bbc1acb107ff8f5555d1fd2e1ac6e68 Mon Sep 17 00:00:00 2001 From: Johannes Kares Date: Sun, 16 Jun 2024 19:36:50 +0200 Subject: [PATCH 1/2] fix: Update Readme --- README.md | 58 +++++++++++++++++++++++++++++++++++++++++++++++++++---- 1 file changed, 54 insertions(+), 4 deletions(-) diff --git a/README.md b/README.md index 7082e9c..404d2c2 100644 --- a/README.md +++ b/README.md @@ -1,8 +1,14 @@ # Wallet Mock -Fully functional E2E tests for your dApp. Installs a fully operational Mock Wallet into the [Playwright](https://github.com/microsoft/playwright) Browser Context, making it discoverable through [EIP-6963](https://eips.ethereum.org/EIPS/eip-6963) and leveraging [viem](https://github.com/wevm/viem) `Account` and `Transport` interfaces, so you can completely customize the behavior. +Fully functional end-to-end (E2E) tests for your decentralized application (dApp). This package installs a fully operational Web3 Wallet into the [Playwright](https://github.com/microsoft/playwright) Browser Context. The wallet can be configured to execute on the blockchain or return mock responses. It is discoverable through [EIP-6963](https://eips.ethereum.org/EIPS/eip-6963) and leverages [viem](https://github.com/wevm/viem) `Account` and `Transport` interfaces for easy customization. + +## Features +- Create comprehensive E2E tests for your dApps, including real blockchain transactions +- Mock specific calls or all calls to the wallet +- All wallet actions are pre-approved by default, eliminating the need for user interaction ## Quickstart ```ts +import { test } from "@playwright/test"; import { installMockWallet } from "@johanneskares/mock-wallet"; import { privateKeyToAccount } from "viem/accounts"; import { http } from "viem"; @@ -23,8 +29,52 @@ test("Your Test", async ({ page }) => { await page.getByRole("menuitem", { name: "Mock Wallet" }).click(); }); ``` +> **Note:** This setup will execute actual transactions on the blockchain without user intervention using the provided Private Key. + +### Uniswap Example +The Mock Wallet will show up as an EIP-6963 compatible wallet. + +Screenshot Uniswap + +## Mocking +Here's a simple example of how to mock a specific function while using regular RPC calls for all other functions: + +```ts +await installMockWallet({ + page, + account: privateKeyToAccount( + "0xac0974bec39a17e36ba4a6b4d238ff944bacb478cbed5efcae784d7bf4f2ff80", + ), + transport: (config) => { + return custom({ + request: async ({ method, params }) => { + // Mock only this RPC call + if (method === "eth_sendTransaction") { + return "0x1234567890abcdef1234567890abcdef1234567890abcdef1234567890abcdef"; + } + + return await http()(config).request({ method, params }); + }, + })(config); + }, +}); +``` + +## Testing with Hardhat +To test with a local Hardhat node: -Please note! This will execute actual transactions on the blockchain without user intervention using the Private Key. You can use a [Custom Transport](https://viem.sh/docs/clients/transports/custom.html) to intercept the behavior. +1. Start your local Hardhat Node: + ```shell + npx hardhat node + ``` -## Rationale -Why not do E2E testing with actual Browser Wallets, like Metamask? Well, you should be testing your dApp, not the implementation of a Browser Wallet. Experience shows, that E2E tests using Browser Wallets are much more flaky and unreliable. +2. Connect the Mock Wallet to your Hardhat Node: + ```ts + await installMockWallet({ + page, + account: privateKeyToAccount( + "0xac0974bec39a17e36ba4a6b4d238ff944bacb478cbed5efcae784d7bf4f2ff80", + ), + transport: http("http://127.0.0.1:8545"), + }); + ``` From 5b907ebdc07de630d719a2814269b1e10b0097c9 Mon Sep 17 00:00:00 2001 From: Johannes Kares Date: Sun, 16 Jun 2024 19:40:12 +0200 Subject: [PATCH 2/2] fix: log in test, add uniswap test --- package.json | 3 ++- tests/transaction.spec.ts | 19 +++++++++++++++++-- 2 files changed, 19 insertions(+), 3 deletions(-) diff --git a/package.json b/package.json index 98f6682..8c1b106 100644 --- a/package.json +++ b/package.json @@ -38,6 +38,7 @@ "build": "tsc", "dev": "tsc -W", "test": "playwright test", - "test-ui": "playwright test --ui" + "test-ui": "playwright test --ui", + "install-conventional-commit": "curl -o- https://raw.githubusercontent.com/tapsellorg/conventional-commits-git-hook/master/scripts/install.sh | sh" } } diff --git a/tests/transaction.spec.ts b/tests/transaction.spec.ts index fa526c8..97fab4b 100644 --- a/tests/transaction.spec.ts +++ b/tests/transaction.spec.ts @@ -1,7 +1,7 @@ import { expect, test } from "@playwright/test"; import { installMockWallet } from "./../src/installMockWallet"; import { privateKeyToAccount } from "viem/accounts"; -import { http, isHex } from "viem"; +import { custom, http, isHex } from "viem"; test.beforeEach(async ({ page }) => { await installMockWallet({ @@ -9,10 +9,25 @@ test.beforeEach(async ({ page }) => { account: privateKeyToAccount( isHex(process.env.PRIVATE_KEY) ? process.env.PRIVATE_KEY : "0x", ), - transport: http(), + transport: (config) => { + return custom({ + request: async ({ method, params }) => { + console.log("LOG", method, params); + return await http()(config).request({ method, params }); + }, + })(config); + }, }); }); +test("uniswap", async ({ page }) => { + const baseUrl = "https://app.uniswap.org"; + await page.goto(baseUrl); + await page.getByRole("button", { name: "Connect" }).first().click(); + + await page.waitForTimeout(30000); +}); + test("talentir", async ({ page }) => { const baseUrl = "https://dev.talentir.com"; // const baseUrl = "http://localhost:3000";