From a03ceed0ee06b260ff6360c25ca262f62c1e852c Mon Sep 17 00:00:00 2001 From: styler <63294765+matstyler@users.noreply.github.com> Date: Sat, 26 Oct 2024 22:44:46 +0200 Subject: [PATCH] chore: Improved examples (#1233) --- .../test/cypress/connectToDapp.cy.ts | 7 ++++++ .../{00_mock.cy.ts => switchAccount.cy.ts} | 8 ------- examples/metamask/test/cypress/metamask.cy.ts | 3 +++ .../metamask/test/cypress/newAccount.cy.ts | 22 +++++++++++++++++++ .../metamask/test/playwright/00_mock.spec.ts | 9 ++++++++ .../metamask/test/playwright/01_basic.spec.ts | 11 ++++++++++ .../test/playwright/02_simple.spec.ts | 17 ++++++++++++++ .../test/playwright/03_advanced.spec.ts | 21 ++++++++++++++++++ .../test/playwright/addNetwork.spec.ts | 11 +++++++--- 9 files changed, 98 insertions(+), 11 deletions(-) create mode 100644 examples/ethereum-wallet-mock/test/cypress/connectToDapp.cy.ts rename examples/ethereum-wallet-mock/test/cypress/{00_mock.cy.ts => switchAccount.cy.ts} (55%) create mode 100644 examples/metamask/test/cypress/newAccount.cy.ts diff --git a/examples/ethereum-wallet-mock/test/cypress/connectToDapp.cy.ts b/examples/ethereum-wallet-mock/test/cypress/connectToDapp.cy.ts new file mode 100644 index 000000000..123d76daa --- /dev/null +++ b/examples/ethereum-wallet-mock/test/cypress/connectToDapp.cy.ts @@ -0,0 +1,7 @@ +it('should mock MetaMask in the Test Dapp', () => { + cy.connectToDapp() + + cy.get('#getAccounts').click() + + cy.get('#getAccountsResult').should('have.text', '0xd73b04b0e696b0945283defa3eee453814758f1a') +}) diff --git a/examples/ethereum-wallet-mock/test/cypress/00_mock.cy.ts b/examples/ethereum-wallet-mock/test/cypress/switchAccount.cy.ts similarity index 55% rename from examples/ethereum-wallet-mock/test/cypress/00_mock.cy.ts rename to examples/ethereum-wallet-mock/test/cypress/switchAccount.cy.ts index 584dbeef3..07f20b08c 100644 --- a/examples/ethereum-wallet-mock/test/cypress/00_mock.cy.ts +++ b/examples/ethereum-wallet-mock/test/cypress/switchAccount.cy.ts @@ -1,11 +1,3 @@ -it('should mock MetaMask in the Test Dapp', () => { - cy.connectToDapp() - - cy.get('#getAccounts').click() - - cy.get('#getAccountsResult').should('have.text', '0xd73b04b0e696b0945283defa3eee453814758f1a') -}) - it('should add new account using MetaMask mock', () => { cy.switchAccount('0x4444797cA71d0EaE1be5a7EffD27Fd6C38126801') diff --git a/examples/metamask/test/cypress/metamask.cy.ts b/examples/metamask/test/cypress/metamask.cy.ts index b9baa54c1..66afddc3a 100644 --- a/examples/metamask/test/cypress/metamask.cy.ts +++ b/examples/metamask/test/cypress/metamask.cy.ts @@ -1,11 +1,14 @@ it('should connect to ethereum', () => { cy.window().then((window) => { + // Access the Ethereum provider injected by MetaMask // @ts-ignore window.ethereum .request({ + // Request the current chain ID from the Ethereum provider method: 'eth_chainId' }) .then((currentChainId: string) => { + // Assert that the current chain ID is '0x1' (Ethereum mainnet) expect(currentChainId).to.equal('0x1') }) }) diff --git a/examples/metamask/test/cypress/newAccount.cy.ts b/examples/metamask/test/cypress/newAccount.cy.ts new file mode 100644 index 000000000..a24284e1c --- /dev/null +++ b/examples/metamask/test/cypress/newAccount.cy.ts @@ -0,0 +1,22 @@ +it('should add a new account with a specified name', () => { + const accountName = 'Test Account 2' + + // Add a new account with the specified name + cy.addNewAccount(accountName).then(() => { + // Verify that the current account name matches the newly added account + cy.getAccount().should('eq', accountName) + }) +}) + +it('should rename currently newly added account with specified name', () => { + const newAccountName = 'Rename Account Name' + + // Add a new account with the initial name + cy.addNewAccount(newAccountName).then(() => { + // Rename the newly added account + cy.renameAccount(newAccountName, 'Renaming test').then(() => { + // Verify that the account name has been updated to the new name + cy.getAccount().should('eq', 'Renaming test') + }) + }) +}) diff --git a/examples/metamask/test/playwright/00_mock.spec.ts b/examples/metamask/test/playwright/00_mock.spec.ts index b564dceed..ef98db5ce 100644 --- a/examples/metamask/test/playwright/00_mock.spec.ts +++ b/examples/metamask/test/playwright/00_mock.spec.ts @@ -1,26 +1,35 @@ import { testWithSynpress } from '@synthetixio/synpress' import { EthereumWalletMock, ethereumWalletMockFixtures } from '@synthetixio/synpress/playwright' +// Set up the test environment with Synpress and Ethereum wallet mock fixtures const test = testWithSynpress(ethereumWalletMockFixtures) const { expect } = test test('should mock MetaMask in the Test Dapp', async ({ page, ethereumWalletMock }) => { + // Verify that there is only one account in the wallet expect(await ethereumWalletMock.getAllAccounts()).toHaveLength(1) + // Click the connect button await page.locator('#connectButton').click() + // Verify that the correct account address is displayed await expect(page.locator('#accounts')).toHaveText('0xd73b04b0e696b0945283defa3eee453814758f1a') }) test('should add new account using MetaMask mock', async ({ page }) => { + // Create a new instance of EthereumWalletMock const ethereumWalletMock = new EthereumWalletMock(page) + // Import a wallet using a mnemonic phrase await ethereumWalletMock.importWallet('candy maple cake sugar pudding cream honey rich smooth crumble sweet treat') + // Add a new account to the wallet await ethereumWalletMock.addNewAccount() + // Click the connect button on the page await page.locator('#connectButton').click() + // Verify that both account addresses are displayed correctly await expect(page.locator('#accounts')).toHaveText( '0x6503D95e3F20389EE9496b277ABfFDb8eCCD2cc5,0xd73b04b0e696b0945283defa3eee453814758f1a' ) diff --git a/examples/metamask/test/playwright/01_basic.spec.ts b/examples/metamask/test/playwright/01_basic.spec.ts index f62682f50..652787580 100644 --- a/examples/metamask/test/playwright/01_basic.spec.ts +++ b/examples/metamask/test/playwright/01_basic.spec.ts @@ -2,19 +2,30 @@ import { testWithSynpress } from '@synthetixio/synpress' import { MetaMask, metaMaskFixtures } from '@synthetixio/synpress/playwright' import basicSetup from '../wallet-setup/basic.setup' +// Set up the test environment with Synpress and MetaMask fixtures, using the basic setup configuration const test = testWithSynpress(metaMaskFixtures(basicSetup)) const { expect } = test test('should connect wallet to the MetaMask Test Dapp', async ({ context, page, metamaskPage, extensionId }) => { + // Create a new MetaMask instance with the provided context, page, password, and extension ID const metamask = new MetaMask(context, metamaskPage, basicSetup.walletPassword, extensionId) + // Navigate to the root page await page.goto('/') + // Click the connect button to initiate the wallet connection await page.locator('#connectButton').click() + + // Connect dApp to MetaMask await metamask.connectToDapp() + + // Verify that the correct account address is displayed await expect(page.locator('#accounts')).toHaveText('0xf39fd6e51aad88f6f4ce6ab8827279cfffb92266') + // Click the button to get all connected accounts await page.locator('#getAccounts').click() + + // Verify that the correct account address is returned and displayed await expect(page.locator('#getAccountsResult')).toHaveText('0xf39fd6e51aad88f6f4ce6ab8827279cfffb92266') }) diff --git a/examples/metamask/test/playwright/02_simple.spec.ts b/examples/metamask/test/playwright/02_simple.spec.ts index 312ad9b6d..6d193baf4 100644 --- a/examples/metamask/test/playwright/02_simple.spec.ts +++ b/examples/metamask/test/playwright/02_simple.spec.ts @@ -5,42 +5,59 @@ const test = synpress const { expect } = test test('should confirm contract deployment', async ({ page, metamask, connectToAnvil }) => { + // Connect to Anvil network await connectToAnvil() + // Check if token addresses are initially empty await expect(page.locator('#tokenAddresses')).toBeEmpty() + + // Click the button to create a new token await page.locator('#createToken').click() + // Confirm the transaction in MetaMask await metamask.confirmTransaction() + // Verify that the token address is correctly displayed after deployment await expect(page.locator('#tokenAddresses')).toHaveText('0x5FbDB2315678afecb367f032d93F642f64180aa3') }) test('should confirm legacy transaction', async ({ page, metamask, connectToAnvil }) => { + // Connect to Anvil network await connectToAnvil() + // Click the button to send a transaction await page.locator('#sendButton').click() + // Confirm the transaction in MetaMask await metamask.confirmTransaction() }) test('should confirm EIP-1559 transaction', async ({ page, metamask, connectToAnvil }) => { + // Connect to Anvil network await connectToAnvil() + // Click the button to send an EIP-1559 transaction await page.locator('#sendEIP1559Button').click() + // Confirm the transaction in MetaMask await metamask.confirmTransaction() }) test('should sign and verify EIP-712 message', async ({ page, metamask }) => { + // Click the button to sign a typed data (EIP-712) message await page.locator('#signTypedDataV4').click() + // Confirm the signature in MetaMask await metamask.confirmSignature() + // Verify that the signature result is correct await expect(page.locator('#signTypedDataV4Result')).toHaveText( '0x1cf422c4a319c19ecb89c960e7c296810278fa2bef256c7e9419b285c8216c547b3371fa1ec3987ce08561d3ed779845393d8d3e4311376d0bc0846f37d1b2821c' ) + // Click the button to verify the signed message await page.locator('#signTypedDataV4Verify').click() + // Verify that the correct address is returned from the verification await expect(page.locator('#signTypedDataV4VerifyResult')).toHaveText('0xf39fd6e51aad88f6f4ce6ab8827279cfffb92266') }) diff --git a/examples/metamask/test/playwright/03_advanced.spec.ts b/examples/metamask/test/playwright/03_advanced.spec.ts index 13eb92dfc..6d30c91a8 100644 --- a/examples/metamask/test/playwright/03_advanced.spec.ts +++ b/examples/metamask/test/playwright/03_advanced.spec.ts @@ -10,29 +10,42 @@ const tokenLocator = '.multichain-token-list-item' describe('Token', () => { test('should confirm tokens transfer', async ({ page, metamask, connectToAnvil, deployToken }) => { + // Connect to Anvil network await connectToAnvil() + // Deploy the token contract await deployToken() + // Click the transfer tokens button await page.locator('#transferTokens').click() + // Confirm the transaction in MetaMask await metamask.confirmTransaction() }) test('should approve tokens', async ({ page, metamask, connectToAnvil, deployToken }) => { + // Connect to Anvil network await connectToAnvil() + // Deploy the token contract await deployToken() + // Click the approve tokens button await page.locator('#approveTokens').click() + // Approve the token permission in MetaMask await metamask.approveTokenPermission() }) test('should add token to the wallet', async ({ page, metamask, metamaskPage, connectToAnvil, deployToken }) => { + // Connect to Anvil network await connectToAnvil() + // Deploy the token contract await deployToken() + // Click the watch assets button await page.locator('#watchAssets').click() + // Add the new token to MetaMask await metamask.addNewToken() + // Verify that the token (TST) is added to the wallet await expect(metamaskPage.locator(tokenLocator).nth(1)).toContainText('TST') }) }) @@ -44,17 +57,25 @@ describe('Piggy Bank', () => { connectToAnvil, deployPiggyBank }) => { + // Connect to Anvil network await connectToAnvil() + // Deploy the Piggy Bank contract await deployPiggyBank() + // Click the deposit button await page.locator('#depositButton').click() + // Confirm the deposit transaction in MetaMask await metamask.confirmTransaction() + // Verify that the deposit was completed await expect(page.locator('#contractStatus')).toHaveText('Deposit completed') + // Click the withdraw button await page.locator('#withdrawButton').click() + // Confirm the withdrawal transaction in MetaMask await metamask.confirmTransaction() + // Verify that the withdrawal was successful await expect(page.locator('#contractStatus')).toHaveText('Withdrawn') }) }) diff --git a/examples/metamask/test/playwright/addNetwork.spec.ts b/examples/metamask/test/playwright/addNetwork.spec.ts index 51e9e907c..1d0443245 100644 --- a/examples/metamask/test/playwright/addNetwork.spec.ts +++ b/examples/metamask/test/playwright/addNetwork.spec.ts @@ -7,13 +7,18 @@ const test = testWithSynpress(metaMaskFixtures(basicSetup)) const { expect } = test test('should add a custom network to MetaMask', async ({ metamask, page }) => { - // Add the custom network - await metamask.addNetwork({ + // Define the custom network parameters + const customNetwork = { name: 'Optimism', rpcUrl: 'https://mainnet.optimism.io', chainId: 10, symbol: 'ETH' - }) + } + // Add the custom network to MetaMask + await metamask.addNetwork(customNetwork) + + // Verify that the chain ID has been updated correctly + // Note: '0xa' is the hexadecimal representation of 10 await expect(page.locator('#chainId')).toHaveText('0xa') })