✅ feat: Added Cypress example (#1151)

examples/new-dawn/cypress.config.ts

@@ -0,0 +1,15 @@
+import { installSynpress } from '@synthetixio/synpress/cypress'
+import { defineConfig } from 'cypress'
+
+export default defineConfig({
+  chromeWebSecurity: false,
+  e2e: {
+    baseUrl: 'http://localhost:9999',
+    specPattern: 'test/cypress/**/*.cy.{js,jsx,ts,tsx}',
+    supportFile: 'test/cypress/support/e2e.{js,jsx,ts,tsx}',
+    testIsolation: false,
+    async setupNodeEvents(on, config) {
+      return installSynpress(on, config)
+    }
+  }
+})

examples/new-dawn/package.json

@@ -9,6 +9,7 @@
     "build:cache:headless": "synpress --headless",
     "serve:test-dapp": "serve node_modules/@metamask/test-dapp/dist -p 9999",
     "test:e2e:headful": "playwright test",
+    "test:e2e:headful:cypress": "cypress run --browser chrome --headed",
     "test:e2e:headless": "HEADLESS=true playwright test",
     "test:e2e:headless:ui": "HEADLESS=true playwright test --ui"
   },
@@ -20,6 +21,7 @@
   "devDependencies": {
     "@metamask/test-dapp": "8.1.0",
     "@types/node": "20.11.17",
+    "cypress": "13.9.0",
     "serve": "14.2.1",
     "typescript": "5.3.3"
   }

examples/new-dawn/test/cypress/00_mock.cy.ts

@@ -0,0 +1,15 @@
+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')
+
+  cy.get('#getAccounts').click()
+
+  cy.get('#getAccountsResult').should('have.text', '0x4444797cA71d0EaE1be5a7EffD27Fd6C38126801')
+})

examples/new-dawn/test/cypress/support/e2e.ts

@@ -0,0 +1,25 @@
+// ***********************************************************
+// This example support/e2e.ts is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+// Import commands.js using ES2015 syntax:
+import { mockEthereum, synpressCommands } from '@synthetixio/synpress/cypress/support'
+
+synpressCommands()
+mockEthereum()
+
+Cypress.on('uncaught:exception', () => {
+  // failing the test
+  return false
+})

release/package.json

@@ -11,6 +11,10 @@
       "types": "./types/cypress/index.d.ts",
       "default": "./dist/cypress/index.js"
     },
+    "./cypress/support": {
+      "types": "./types/cypress/support.d.ts",
+      "default": "./dist/cypress/support.js"
+    },
     "./playwright": {
       "types": "./types/playwright/index.d.ts",
       "default": "./dist/playwright/index.js"

release/src/cypress/support.ts

@@ -0,0 +1 @@
+export * from '@synthetixio/ethereum-wallet-mock/cypress/support'

release/tsup.config.ts

@@ -2,7 +2,7 @@ import { defineConfig } from 'tsup'
 
 export default defineConfig({
   name: 'synpress',
-  entry: ['src/index.ts', 'src/cli.ts', 'src/cypress/index.ts', 'src/playwright/index.ts'],
+  entry: ['src/index.ts', 'src/cli.ts', 'src/cypress/index.ts', 'src/cypress/support.ts', 'src/playwright/index.ts'],
   outDir: 'dist',
   format: 'esm',
   splitting: false,

wallets/ethereum-wallet-mock/package.json

@@ -7,6 +7,10 @@
       "types": "./types/cypress/index.d.ts",
       "default": "./dist/cypress/index.js"
     },
+    "./cypress/support": {
+      "types": "./types/cypress/support/index.d.ts",
+      "default": "./dist/cypress/support/index.js"
+    },
     "./playwright": {
       "types": "./types/playwright/index.d.ts",
       "default": "./dist/playwright/index.js"

wallets/ethereum-wallet-mock/src/cypress/support/e2e.ts

@@ -13,9 +13,12 @@
 // https://on.cypress.io/configuration
 // ***********************************************************
 
+import mockEthereum from './mockEthereum'
 // Import commands.js using ES2015 syntax:
-import './commands'
-import './mockEthereum'
+import synpressCommands from './synpressCommands'
+
+synpressCommands()
+mockEthereum()
 
 Cypress.on('uncaught:exception', () => {
   // failing the test

wallets/ethereum-wallet-mock/src/cypress/support/index.ts

@@ -0,0 +1,2 @@
+export { default as mockEthereum } from './mockEthereum'
+export { default as synpressCommands } from './synpressCommands'

wallets/ethereum-wallet-mock/src/cypress/support/mockEthereum.ts

@@ -1,10 +1,12 @@
-before(() => {
-  cy.visit('/', {
-    onBeforeLoad: (window) => {
-      window.Web3Mock.mock({
-        blockchain: 'ethereum',
-        wallet: 'metamask'
-      })
-    }
+export default function mockEthereum() {
+  before(() => {
+    cy.visit('/', {
+      onBeforeLoad: (window) => {
+        window.Web3Mock.mock({
+          blockchain: 'ethereum',
+          wallet: 'metamask'
+        })
+      }
+    })
   })
-})
+}

wallets/ethereum-wallet-mock/src/cypress/support/commands.ts → wallets/ethereum-wallet-mock/src/cypress/support/synpressCommands.ts

@@ -11,7 +11,6 @@
 
 import type { Network } from '../../type/Network'
 import type { WalletMock } from '../../type/WalletMock'
-// import type { Network } from "../../type/Network";
 import getEthereumWalletMock from '../utils/getEthereumWalletMock'
 
 declare global {
@@ -54,48 +53,50 @@ declare global {
   }
 }
 
-Cypress.Commands.add('importWallet', (seedPhrase) => {
-  const ethereumWalletMock = getEthereumWalletMock()
-  ethereumWalletMock.importWallet(seedPhrase)
-})
+export default function synpressCommands() {
+  Cypress.Commands.add('importWallet', (seedPhrase) => {
+    const ethereumWalletMock = getEthereumWalletMock()
+    ethereumWalletMock.importWallet(seedPhrase)
+  })
 
-Cypress.Commands.add('importWalletFromPrivateKey', (privateKey) => {
-  const ethereumWalletMock = getEthereumWalletMock()
-  ethereumWalletMock.importWalletFromPrivateKey(privateKey)
-})
+  Cypress.Commands.add('importWalletFromPrivateKey', (privateKey) => {
+    const ethereumWalletMock = getEthereumWalletMock()
+    ethereumWalletMock.importWalletFromPrivateKey(privateKey)
+  })
 
-Cypress.Commands.add('addNewAccount', () => {
-  const ethereumWalletMock = getEthereumWalletMock()
-  return ethereumWalletMock.addNewAccount()
-})
+  Cypress.Commands.add('addNewAccount', () => {
+    const ethereumWalletMock = getEthereumWalletMock()
+    return ethereumWalletMock.addNewAccount()
+  })
 
-Cypress.Commands.add('getAllAccounts', () => {
-  const ethereumWalletMock = getEthereumWalletMock()
+  Cypress.Commands.add('getAllAccounts', () => {
+    const ethereumWalletMock = getEthereumWalletMock()
 
-  return ethereumWalletMock.getAllAccounts()
-})
+    return ethereumWalletMock.getAllAccounts()
+  })
 
-Cypress.Commands.add('getAccountAddress', () => {
-  const ethereumWalletMock = getEthereumWalletMock()
-  return ethereumWalletMock.getAccountAddress()
-})
+  Cypress.Commands.add('getAccountAddress', () => {
+    const ethereumWalletMock = getEthereumWalletMock()
+    return ethereumWalletMock.getAccountAddress()
+  })
 
-Cypress.Commands.add('switchAccount', (accountAddress) => {
-  const ethereumWalletMock = getEthereumWalletMock()
-  ethereumWalletMock.switchAccount(accountAddress)
-})
+  Cypress.Commands.add('switchAccount', (accountAddress) => {
+    const ethereumWalletMock = getEthereumWalletMock()
+    ethereumWalletMock.switchAccount(accountAddress)
+  })
 
-Cypress.Commands.add('addNetwork', (network) => {
-  const ethereumWalletMock = getEthereumWalletMock()
-  ethereumWalletMock.addNetwork(network)
-})
+  Cypress.Commands.add('addNetwork', (network) => {
+    const ethereumWalletMock = getEthereumWalletMock()
+    ethereumWalletMock.addNetwork(network)
+  })
 
-Cypress.Commands.add('switchNetwork', (networkName) => {
-  const ethereumWalletMock = getEthereumWalletMock()
-  ethereumWalletMock.switchNetwork(networkName)
-})
+  Cypress.Commands.add('switchNetwork', (networkName) => {
+    const ethereumWalletMock = getEthereumWalletMock()
+    ethereumWalletMock.switchNetwork(networkName)
+  })
 
-Cypress.Commands.add('connectToDapp', (wallet) => {
-  const ethereumWalletMock = getEthereumWalletMock()
-  ethereumWalletMock.connectToDapp(wallet)
-})
+  Cypress.Commands.add('connectToDapp', (wallet) => {
+    const ethereumWalletMock = getEthereumWalletMock()
+    ethereumWalletMock.connectToDapp(wallet)
+  })
+}

wallets/ethereum-wallet-mock/tsup.config.ts

@@ -2,7 +2,7 @@ import { defineConfig } from 'tsup'
 
 export default defineConfig({
   name: 'ethereum-wallet-mock',
-  entry: ['src/index.ts', 'src/playwright/index.ts', 'src/cypress/index.ts'],
+  entry: ['src/index.ts', 'src/playwright/index.ts', 'src/cypress/index.ts', 'src/cypress/support/index.ts'],
   outDir: 'dist',
   format: 'esm',
   splitting: false,