add synpress config

.gitignore

@@ -12,6 +12,7 @@ dist
 dist-ssr
 *.local
 
+cypress/videos
 # Editor directories and files
 .vscode/*
 !.vscode/extensions.json

cypress.config.ts

@@ -2,6 +2,7 @@ import { defineConfig } from 'cypress';
 import getCompareSnapshotsPlugin from 'cypress-image-diff-js/dist/plugin';
 
 export default defineConfig({
+  video: false,
   env: {
     browserPermissions: {
       clipboard: 'allow',

cypress/e2e/login.spec.ts

@@ -0,0 +1,28 @@
+describe('Bridge | Connect | MestaMask', () => {
+  beforeEach(() => {
+    cy.visit('http://localhost:8080');
+    cy.changeMetamaskNetwork('sepolia');
+  });
+
+  it('should change connect to MM on sepolia network', () => {
+    cy.get('[data-testid="connect-wallet-button"]')
+      .contains('Connect wallets')
+      .click();
+    cy.get('[ data-testid="connect-metamask-button"]').click();
+    cy.get('div').contains('MetaMask').click();
+    cy.acceptMetamaskAccess().should('be.true');
+    cy.get('[data-testid="tag"]').contains('Connected');
+  });
+
+  // it('Connects with Metamask and switches the network automatically', () => {
+  //   cy.visit('http://localhost:8080');
+  //   cy.switchToCypressWindow();
+  //   cy.get('[data-testid="connect-wallet-button"]')
+  //     .contains('Connect wallets')
+  //     .click();
+  //   cy.get('[ data-testid="connect-metamask-button"]').click();
+  //   cy.get('div').contains('MetaMask').click();
+  //   cy.acceptMetamaskAccess().should('be.true');
+  //   cy.allowMetamaskToSwitchNetwork().should('be.true');
+  // });
+});

cypress/plugins/index.ts

@@ -0,0 +1,11 @@
+/* eslint-disable import/no-extraneous-dependencies */
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore
+import synpressPlugins from '@synthetixio/synpress/plugins';
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore
+const pluginsConfig = (on, config) => {
+  synpressPlugins(on, config);
+};
+
+export default pluginsConfig;

cypress/support/e2e.ts

@@ -15,6 +15,7 @@
 
 // Import commands.js using ES2015 syntax:
 import './commands';
+import '@synthetixio/synpress/support';
 
 // Alternatively you can use CommonJS syntax:
 // require('./commands')

package.json

@@ -22,19 +22,22 @@
     "postcy:e2e-ci": "mv -n cypress-visual-report/cypress-visual-report.html cypress-visual-report/cypress-visual-report-e2e.html",
     "cy:component": "cypress run --component --browser chrome",
     "cy:component-ci": "export VITE_CI_TEST=true && cypress run --component --browser chrome",
-    "postcy:component-ci": "mv -n cypress-visual-report/cypress-visual-report.html cypress-visual-report/cypress-visual-report-component.html"
+    "postcy:component-ci": "mv -n cypress-visual-report/cypress-visual-report.html cypress-visual-report/cypress-visual-report-component.html",
+    "synpress": "env-cmd -f .env npx synpress run -cf synpress.config.ts supportFile='cypress/support/e2e.ts'"
   },
   "dependencies": {
     "@massalabs/massa-web3": "^1.24.3-dev",
     "@massalabs/react-ui-kit": "^0.0.4-dev",
     "@massalabs/wallet-provider": "^1.4.1",
     "@rainbow-me/rainbowkit": "^1.0.7",
+    "@synthetixio/synpress": "^3.7.2-beta.8",
     "@tanstack/react-query": "^4.29.5",
     "axios": "^1.4.0",
     "big.js": "^6.2.1",
     "currency.js": "^2.0.4",
     "delay": "^6.0.0",
     "dot-object": "^2.1.4",
+    "env-cmd": "^10.1.0",
     "esbuild": "0.17.19",
     "localforage": "^1.10.0",
     "lottie-react": "^2.4.0",

src/components/ConnectWalletPopup/CardVariations/CustomConnectBtn.tsx

@@ -39,6 +39,7 @@ export function CustomConnectButton(): JSX.Element {
               if (!connected) {
                 return (
                   <Button
+                    data-testid="connect-metamask-button"
                     variant="secondary"
                     customClass="h-14 pt-4"
                     onClick={openConnectModal}

src/layouts/LayoutBridge/LayoutBridge.tsx

@@ -74,6 +74,7 @@ export function LayoutBridge({ ...props }) {
           disabled={isFetching}
           customClass="h-[54px] relative"
           onClick={() => setOpen(true)}
+          data-testid="connect-wallet-button"
         >
           {Intl.t('connect-wallet.title')}
           {showPingAnimation && <PingAnimation />}

synpress.config.ts

@@ -0,0 +1,28 @@
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore
+import { defineConfig } from 'cypress';
+
+import setupNodeEvents from './cypress/plugins';
+
+export default defineConfig({
+  video: false,
+  userAgent: 'synpress',
+  retries: {
+    openMode: 0,
+    runMode: 0,
+  },
+  fixturesFolder: './cypress/fixtures',
+  screenshotsFolder: './cypress/screenshots',
+  chromeWebSecurity: true,
+  viewportWidth: 1920,
+  viewportHeight: 1080,
+  defaultCommandTimeout: 30000,
+  pageLoadTimeout: 30000,
+  requestTimeout: 30000,
+  projectId: 'massaBridge',
+  e2e: {
+    setupNodeEvents,
+    supportFile: './cypress/support/e2e.ts',
+    specPattern: './cypress/e2e/**/*.spec.ts',
+  },
+});

tsconfig.json

@@ -21,6 +21,6 @@
       "@/*": ["./src/*"]
     }
   },
-  "include": ["src", "cypress"],
+  "include": ["src", "cypress", "synpress"],
   "references": [{ "path": "./tsconfig.node.json" }]
 }