feat: new network and switch network Cypress APIs

wallets/metamask/src/cypress/configureSynpress.ts

@@ -1,7 +1,7 @@
 import type { BrowserContext, Page } from '@playwright/test'
 import { expect } from '@playwright/test'
 import { ensureRdpPort } from '@synthetixio/synpress-core'
-import { type CreateAnvilOptions, createPool } from '@viem/anvil'
+import { type CreateAnvilOptions, type Pool, createPool } from '@viem/anvil'
 import { waitFor } from '../playwright/utils/waitFor'
 import HomePageSelectors from '../selectors/pages/HomePage'
 import Selectors from '../selectors/pages/HomePage'
@@ -19,6 +19,8 @@ let metamaskExtensionId: string
 
 let metamaskExtensionPage: Page
 
+let pool: Pool
+
 // TODO: Implement if needed to change the focus between pages
 // let cypressPage: Page
 
@@ -151,7 +153,7 @@ export default function configureSynpress(on: Cypress.PluginEvents, config: Cypr
     },
 
     async createAnvilNode(options?: CreateAnvilOptions) {
-      const pool = createPool()
+      pool = createPool()
 
       const nodeId = Array.from(pool.instances()).length
       const anvil = await pool.start(nodeId, options)
@@ -164,6 +166,11 @@ export default function configureSynpress(on: Cypress.PluginEvents, config: Cypr
       return { anvil, rpcUrl, chainId }
     },
 
+    async emptyAnvilNode() {
+      await pool.empty()
+      return true
+    },
+
     async connectToAnvil({
       rpcUrl,
       chainId
@@ -226,6 +233,22 @@ export default function configureSynpress(on: Cypress.PluginEvents, config: Cypr
       return true
     },
 
+    async approveNewNetwork() {
+      const metamask = getPlaywrightMetamask(context, metamaskExtensionPage, metamaskExtensionId)
+
+      await metamask.approveNewNetwork()
+
+      return true
+    },
+
+    async approveSwitchNetwork() {
+      const metamask = getPlaywrightMetamask(context, metamaskExtensionPage, metamaskExtensionId)
+
+      await metamask.approveSwitchNetwork()
+
+      return true
+    },
+
     // Others
 
     async providePublicEncryptionKey() {

wallets/metamask/src/cypress/support/synpressCommands.ts

@@ -31,7 +31,10 @@ declare global {
         chainId: number
       }>
       connectToAnvil(): Chainable<void>
+      emptyAnvilNode(): Chainable<void>
       addNetwork(network: Network): Chainable<void>
+      approveNewNetwork(): Chainable<void>
+      approveSwitchNetwork(): Chainable<void>
 
       deployToken(): Chainable<void>
       addNewToken(): Chainable<void>
@@ -96,9 +99,18 @@ export default function synpressCommands() {
       return cy.task('addNetwork', network)
     })
   })
+  Cypress.Commands.add('emptyAnvilNode', () => {
+    return cy.task('emptyAnvilNode')
+  })
   Cypress.Commands.add('addNetwork', (network: Network) => {
     return cy.task('addNetwork', network)
   })
+  Cypress.Commands.add('approveNewNetwork', () => {
+    return cy.task('approveNewNetwork')
+  })
+  Cypress.Commands.add('approveSwitchNetwork', () => {
+    return cy.task('approveSwitchNetwork')
+  })
 
   // Token
 

wallets/metamask/test/cypress/approveNewNetwork.cy.ts

@@ -0,0 +1,16 @@
+it('should add a new network', () => {
+  cy.createAnvilNode({
+    chainId: 1338,
+    port: 8546
+  }).then(() => {
+    cy.get('#addEthereumChain').click()
+
+    cy.approveNewNetwork().then(() => {
+      cy.approveSwitchNetwork().then(() => {
+        cy.get('#chainId').should('have.text', '0x53a')
+
+        cy.emptyAnvilNode()
+      })
+    })
+  })
+})

wallets/metamask/test/cypress/approveSwitchNetwork.cy.ts

@@ -0,0 +1,16 @@
+it('should switch to the requested network', () => {
+  cy.createAnvilNode({
+    chainId: 1338,
+    port: 8546
+  }).then(() => {
+    cy.switchNetwork('Ethereum Mainnet').then(() => {
+      cy.get('#chainId').should('have.text', '0x1')
+
+      cy.get('#switchEthereumChain').click()
+
+      cy.approveSwitchNetwork().then(() => {
+        cy.get('#chainId').should('have.text', '0x53a')
+      })
+    })
+  })
+})