diff --git a/examples/new-dawn/cypress.config.ts b/examples/new-dawn/cypress.config.ts new file mode 100644 index 000000000..8c9cd8242 --- /dev/null +++ b/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) + } + } +}) diff --git a/examples/new-dawn/package.json b/examples/new-dawn/package.json index 548f3df45..29fc6a049 100644 --- a/examples/new-dawn/package.json +++ b/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" } diff --git a/examples/new-dawn/test/cypress/00_mock.cy.ts b/examples/new-dawn/test/cypress/00_mock.cy.ts new file mode 100644 index 000000000..584dbeef3 --- /dev/null +++ b/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') +}) diff --git a/examples/new-dawn/test/cypress/support/e2e.ts b/examples/new-dawn/test/cypress/support/e2e.ts new file mode 100644 index 000000000..27c67dc79 --- /dev/null +++ b/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 +}) diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index d7e53cacc..10d809f51 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -78,6 +78,9 @@ importers: '@types/node': specifier: 20.11.17 version: 20.11.17 + cypress: + specifier: 13.9.0 + version: 13.9.0 serve: specifier: 14.2.1 version: 14.2.1 diff --git a/release/package.json b/release/package.json index 9e83eeee6..6bb538a29 100644 --- a/release/package.json +++ b/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" diff --git a/release/src/cypress/support.ts b/release/src/cypress/support.ts new file mode 100644 index 000000000..2dfdbfe81 --- /dev/null +++ b/release/src/cypress/support.ts @@ -0,0 +1 @@ +export * from '@synthetixio/ethereum-wallet-mock/cypress/support' diff --git a/release/tsup.config.ts b/release/tsup.config.ts index be0fcfe21..25237a31e 100644 --- a/release/tsup.config.ts +++ b/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, diff --git a/wallets/ethereum-wallet-mock/package.json b/wallets/ethereum-wallet-mock/package.json index feca49d86..99dd7fef6 100644 --- a/wallets/ethereum-wallet-mock/package.json +++ b/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" diff --git a/wallets/ethereum-wallet-mock/src/cypress/support/e2e.ts b/wallets/ethereum-wallet-mock/src/cypress/support/e2e.ts index 6c7c31871..1751b291e 100644 --- a/wallets/ethereum-wallet-mock/src/cypress/support/e2e.ts +++ b/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 diff --git a/wallets/ethereum-wallet-mock/src/cypress/support/index.ts b/wallets/ethereum-wallet-mock/src/cypress/support/index.ts new file mode 100644 index 000000000..03c397925 --- /dev/null +++ b/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' diff --git a/wallets/ethereum-wallet-mock/src/cypress/support/mockEthereum.ts b/wallets/ethereum-wallet-mock/src/cypress/support/mockEthereum.ts index 886d06fcf..a396f567b 100644 --- a/wallets/ethereum-wallet-mock/src/cypress/support/mockEthereum.ts +++ b/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' + }) + } + }) }) -}) +} diff --git a/wallets/ethereum-wallet-mock/src/cypress/support/commands.ts b/wallets/ethereum-wallet-mock/src/cypress/support/synpressCommands.ts similarity index 52% rename from wallets/ethereum-wallet-mock/src/cypress/support/commands.ts rename to wallets/ethereum-wallet-mock/src/cypress/support/synpressCommands.ts index bccdc15eb..4d03cc4b9 100644 --- a/wallets/ethereum-wallet-mock/src/cypress/support/commands.ts +++ b/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) + }) +} diff --git a/wallets/ethereum-wallet-mock/tsup.config.ts b/wallets/ethereum-wallet-mock/tsup.config.ts index 466b3c680..f5bd5234e 100644 --- a/wallets/ethereum-wallet-mock/tsup.config.ts +++ b/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,