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"), + }); + ``` 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..c657192 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,7 +9,14 @@ 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); + }, }); });