WIP: Config synpress ci

.github/workflows/test.yml

@@ -6,7 +6,7 @@ on:
   pull_request:
 
 jobs:
-  test:
+  test-build:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v3
@@ -18,3 +18,21 @@ jobs:
         run: npm ci
       - name: build
         run: npm run build
+
+  test-synpress-e2e:  
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 18
+          cache: "npm"
+      - name: Install dependencies
+        run: npm ci   
+      - name: Set Environment Variables
+        run: |
+          echo "NETWORK_NAME=mainnet" >> $GITHUB_ENV
+          echo "SECRET_WORDS="blade blade harbor surface since fossil say police pool ribbon degree endorse"" >> $GITHUB_ENV
+      - name: synpress-e2e
+        run: npm run synpress
+

.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,32 @@
+describe('Bridge | Connect | MestaMask | Connect', () => {
+  afterEach(() => {
+    cy.disconnectMetamaskWalletFromDapp();
+  });
+  it('it should connect with MM and switch the network automatically', () => {
+    cy.visit('http://localhost:8080');
+
+    cy.get('[data-testid="connect-wallet-button"]').click();
+
+    cy.get('[ data-testid="connect-metamask-button"]').click();
+
+    cy.get('div').contains('MetaMask').click();
+
+    cy.acceptMetamaskAccess({ switchNetwork: true }).should('be.true');
+  });
+
+  it('should change to sepolia network and connect', () => {
+    cy.visit('http://localhost:8080');
+    cy.changeMetamaskNetwork('sepolia');
+
+    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');
+  });
+});

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')