test: e2e tests added for psm UI

.gitignore

@@ -11,6 +11,7 @@ node_modules
 dist
 dist-ssr
 *.local
+.env
 
 # Editor directories and files
 .vscode/*
@@ -22,3 +23,7 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+
+# E2E tests
+tests/e2e/screenshots
+tests/e2e/videos

package.json

@@ -10,7 +10,8 @@
     "lint": "eslint src",
     "format": "prettier --write . && yarn lint --fix",
     "test": "vitest",
-    "coverage": "vitest run --coverage"
+    "coverage": "vitest run --coverage",
+    "test:e2e": "EXTENSION=keplr synpress run --configFile=tests/e2e/synpress.config.cjs"
   },
   "dependencies": {
     "react": "^18.2.0",
@@ -21,6 +22,7 @@
     "@agoric/ertp": "^0.16.2",
     "@agoric/rpc": "^0.9.0",
     "@agoric/smart-wallet": "^0.5.3",
+    "@agoric/synpress": "^3.7.2-beta.12",
     "@agoric/ui-components": "^0.9.0",
     "@agoric/web-components": "^0.15.0",
     "@agoric/zoe": "^0.26.2",

tests/e2e/.eslintrc.cjs

@@ -0,0 +1,6 @@
+const path = require('path');
+const synpressPath = path.join(process.cwd(), '/node_modules/@agoric/synpress');
+
+module.exports = {
+  extends: `${synpressPath}/.eslintrc.js`,
+};

tests/e2e/specs/swap-tokens.spec.js

@@ -0,0 +1,99 @@
+/* eslint-disable ui-testing/no-disabled-tests */
+describe('Swap Tokens Tests', () => {
+  it(`should connect with Agoric Chain on https;//wallet.agoric.app`, () => {
+    cy.origin('https://wallet.agoric.app/', () => {
+      cy.visit('/');
+    });
+    cy.acceptAccess().then(taskCompleted => {
+      expect(taskCompleted).to.be.true;
+    });
+
+    cy.origin('https://wallet.agoric.app/', () => {
+      cy.visit('/wallet/');
+
+      cy.get('input.PrivateSwitchBase-input').click();
+      cy.contains('Proceed').click();
+
+      cy.get('button[aria-label="Settings"]').click();
+
+      cy.get('#demo-simple-select').click();
+      cy.get('li[data-value="local"]').click();
+      cy.contains('button', 'Connect').click();
+    });
+
+    cy.acceptAccess().then(taskCompleted => {
+      expect(taskCompleted).to.be.true;
+    });
+  });
+
+  it('should connect with wallet', () => {
+    cy.visit('/');
+
+    // Switch to local network
+    cy.get('button').contains('Agoric Mainnet').click();
+    cy.get('button').contains('Local Network').click();
+
+    // Click the connect button
+    cy.get('button').contains('Connect Keplr').click();
+    cy.get('input[type="checkbox"]').click();
+    cy.get('button:enabled').contains('Proceed').click();
+
+    // Accept access and confirm
+    cy.acceptAccess();
+    cy.get('button').contains('Keplr Connected').should('be.visible');
+  });
+
+  it('should swap tokens from IST to stable', () => {
+    let ISTbalance;
+
+    // Connect wallet
+    cy.visit('/');
+    cy.get('button').contains('Connect Keplr').click();
+
+    cy.addNewTokensFound();
+    cy.getTokenAmount('IST').then(amount => (ISTbalance = amount));
+
+    // Select asset and swap positions
+    cy.get('button').contains('Select asset').click();
+    cy.get('button').contains('USDC_axl').click();
+    cy.get('svg.transform.rotate-90').click();
+
+    // Swap 1 IST
+    cy.get('input[type="number"]').first().type(1);
+    cy.get('button').contains('Swap').click();
+
+    // Confirm transactions
+    cy.confirmTransaction();
+    cy.get('div').contains('Swap Completed').should('be.visible');
+
+    cy.getTokenAmount('IST').then(amount =>
+      expect(amount).to.equal(ISTbalance - 1)
+    );
+  });
+
+  it('should swap tokens from stable to IST', () => {
+    let ISTbalance;
+
+    // Connect wallet
+    cy.visit('/');
+    cy.get('button').contains('Connect Keplr').click();
+
+    cy.getTokenAmount('IST').then(amount => (ISTbalance = amount));
+
+    // Select asset
+    cy.get('button').contains('Select asset').click();
+    cy.get('button').contains('USDC_axl').click();
+
+    // Swap 1 USDC_axl
+    cy.get('input[type="number"]').first().type(1);
+    cy.get('button').contains('Swap').click();
+
+    // Confirm transactions
+    cy.confirmTransaction();
+    cy.get('div').contains('Swap Completed').should('be.visible');
+
+    cy.getTokenAmount('IST').then(amount =>
+      expect(amount).to.equal(ISTbalance + 1)
+    );
+  });
+});

tests/e2e/support.js

@@ -0,0 +1 @@
+import '@agoric/synpress/support/index';

tests/e2e/synpress.config.cjs

@@ -0,0 +1,10 @@
+const config = require('@agoric/synpress/synpress.config');
+const { defineConfig } = require('cypress');
+
+module.exports = defineConfig({
+  ...config,
+  e2e: {
+    ...config.e2e,
+    baseUrl: 'http://localhost:5173',
+  },
+});

vitest.config.ts

@@ -1,5 +1,5 @@
 import { mergeConfig } from 'vite';
-import { defineConfig } from 'vitest/config';
+import { defineConfig, configDefaults } from 'vitest/config';
 import viteConfig from './vite.config';
 
 export default mergeConfig(
@@ -8,6 +8,10 @@ export default mergeConfig(
     test: {
       setupFiles: ['src/installSesLockdown.ts'],
       environment: 'happy-dom',
+      exclude: [
+        ...configDefaults.exclude,
+        'tests/e2e/**'
+      ]
     },
   })
 );