Agoric · samsiegart · Mar 15, 2024 · Mar 12, 2024 · Mar 12, 2024 · Mar 12, 2024
diff --git a/.gitignore b/.gitignore
@@ -23,3 +23,9 @@ coverage
 *.njsproj
 *.sln
 *.sw?
+
+# Synpress directories and files
+.env
+screenshots
+videos
+cypress
diff --git a/index.html b/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html
   lang="en"
   class="h-full bg-gradient-to-b from-interYellow to-interOrange bg-no-repeat bg-fixed"

diff --git a/package.json b/package.json
@@ -11,7 +11,8 @@
     "lint:fix": "eslint . --fix && prettier --write .",
     "test": "vitest",
     "coverage": "vitest run --coverage",
-    "postinstall": "patch-package"
+    "postinstall": "patch-package",
+    "test:e2e": "EXTENSION=keplr synpress run --configFile=test/e2e/synpress.config.cjs"
   },
   "dependencies": {
     "@agoric/casting": "^0.4.3-u13.0",
@@ -45,27 +46,37 @@
     "zustand": "^4.1.5"
   },
   "devDependencies": {
+    "@agoric/synpress": "^3.7.2-beta.12",
     "@cosmjs/encoding": "^0.32.2",
     "@keplr-wallet/types": "^0.12.55",
     "@leapwallet/elements": "^0.12.1",
     "@types/node": "^18.7.13",
     "@types/react": "^18.0.17",
     "@types/react-dom": "^18.0.6",
-    "@typescript-eslint/eslint-plugin": "^5.35.1",
-    "@typescript-eslint/parser": "^5.35.1",
+    "@typescript-eslint/eslint-plugin": "^7.2.0",
+    "@typescript-eslint/parser": "^7.2.0",
     "@vitejs/plugin-react": "^4.0.0",
     "@vitest/coverage-c8": "^0.25.3",
     "autoprefixer": "^10.4.8",
     "buffer": "^6.0.3",
-    "eslint": "^8.22.0",
-    "eslint-plugin-import": "^2.26.0",
+    "eslint": "^8.57.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-config-turbo": "^1.12.5",
+    "eslint-plugin-chai-friendly": "^0.7.4",
+    "eslint-plugin-cypress": "^2.15.1",
+    "eslint-plugin-import": "^2.29.1",
     "eslint-plugin-jsx-a11y": "^6.6.1",
+    "eslint-plugin-prettier": "^5.1.3",
     "eslint-plugin-react": "^7.30.1",
     "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-testing-library": "^6.2.0",
+    "eslint-plugin-turbo": "^1.12.5",
+    "eslint-plugin-ui-testing": "^2.0.1",
     "happy-dom": "^9.20.3",
     "postcss": "^8.4.16",
-    "prettier": "^2.7.1",
+    "prettier": "^3.2.5",
     "tailwindcss": "^3.1.8",
+    "turbo": "^1.12.5",
     "typescript": "^5.1.3",
     "vite": "^4.3.2",
     "vite-tsconfig-paths": "^4.2.0",

diff --git a/test/e2e/.eslintrc.cjs b/test/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`,
+};
diff --git a/test/e2e/specs/test.spec.js b/test/e2e/specs/test.spec.js
@@ -0,0 +1,212 @@
+/* eslint-disable ui-testing/no-disabled-tests */
+describe('Vaults UI Test Cases', () => {
+  context('Test commands', () => {
+    let collateralizationRatio;
+    it(`should setup Keplr account and connect with Agoric Chain`, () => {
+      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 the wallet', () => {
+      cy.visit('/');
+
+      cy.contains('Connect Wallet').click();
+      cy.get('label.cursor-pointer input[type="checkbox"]').check();
+      cy.contains('Proceed').click();
+
+      cy.acceptAccess().then(taskCompleted => {
+        expect(taskCompleted).to.be.true;
+        cy.acceptAccess().then(taskCompleted => {
+          expect(taskCompleted).to.be.true;
+        });
+      });
+    });
+
+    it('should adjust the collateral by performing a withdrawl and approve the transaction successfully', () => {
+      cy.visit('/');
+      cy.contains('div', /ATOM.*#5/).click();
+
+      cy.contains('div', 'Adjust Collateral')
+        .next('.grid-cols-2')
+        .within(() => {
+          cy.contains('button', /^(Deposit|Withdraw|No Action)$/).click();
+          cy.contains('button', 'Withdraw').click();
+          cy.contains('.input-label', 'Amount')
+            .next('.input-wrapper')
+            .within(() => {
+              cy.get('input[type="number"]').click();
+              cy.get('input[type="number"]').type(5);
+            });
+        });
+
+      cy.contains('button', 'Adjust Vault').click();
+      cy.confirmTransaction().then(taskCompleted => {
+        expect(taskCompleted).to.be.true;
+        cy.contains('p', "Your vault's balances have been updated.").should(
+          'exist',
+        );
+        cy.contains('Adjust more').click();
+      });
+    });
+
+    it('should adjust the collateral by depositing ATOM and approve the transaction successfully', () => {
+      cy.contains('div', 'Adjust Collateral')
+        .next('.grid-cols-2')
+        .within(() => {
+          cy.contains('button', /^(Deposit|Withdraw|No Action)$/).click();
+          cy.contains('button', 'Deposit').click();
+
+          cy.contains('.input-label', 'Amount')
+            .next('.input-wrapper')
+            .within(() => {
+              cy.get('input[type="number"]').click();
+              cy.get('input[type="number"]').type(1);
+            });
+        });
+
+      cy.contains('button', 'Adjust Vault').click();
+      cy.confirmTransaction().then(taskCompleted => {
+        expect(taskCompleted).to.be.true;
+        cy.contains('p', "Your vault's balances have been updated.").should(
+          'exist',
+        );
+        cy.contains('Adjust more').click();
+      });
+    });
+
+    it('should adjust the debt by minting more IST and approve the transaction successfully', () => {
+      cy.contains('div', 'Adjust Debt')
+        .next('.grid-cols-2')
+        .within(() => {
+          cy.contains('button', /^(Repay|Mint More|No Action)$/).click();
+          cy.contains('button', 'Mint More').click();
+          cy.contains('.input-label', 'Amount')
+            .next('.input-wrapper')
+            .within(() => {
+              cy.get('input[type="number"]').click();
+              cy.get('input[type="number"]').type(1);
+            });
+        });
+
+      cy.contains('button', 'Adjust Vault').click();
+      cy.confirmTransaction().then(taskCompleted => {
+        expect(taskCompleted).to.be.true;
+        cy.contains('p', "Your vault's balances have been updated.").should(
+          'exist',
+        );
+        cy.contains('Adjust more').click();
+      });
+    });
+
+    it('should adjust the debt by repaying and approve the transaction successfully', () => {
+      cy.contains('div', 'Adjust Debt')
+        .next('.grid-cols-2')
+        .within(() => {
+          cy.contains('button', /^(Repay|Mint More|No Action)$/).click();
+          cy.contains('button', 'Repay').click();
+          cy.contains('.input-label', 'Amount')
+            .next('.input-wrapper')
+            .within(() => {
+              cy.get('input[type="number"]').click();
+              cy.get('input[type="number"]').type(1);
+            });
+        });
+
+      cy.contains('button', 'Adjust Vault').click();
+      cy.confirmTransaction().then(taskCompleted => {
+        expect(taskCompleted).to.be.true;
+        cy.contains('p', "Your vault's balances have been updated.").should(
+          'exist',
+        );
+        cy.contains('Adjust more').click();
+      });
+    });
+
+    it('should not close a vault because of insufficient IST to repay the debt', () => {
+      cy.contains('Close Out Vault').click();
+
+      cy.contains('button.bg-interPurple', 'Close Out Vault').click();
+
+      cy.confirmTransaction().then(taskCompleted => {
+        expect(taskCompleted).to.be.true;
+
+        cy.get('.Toastify__toast-body').should('exist');
+        cy.get('.Toastify__toast-body').should(
+          'contain',
+          'Offer failed: Error: cannot grab',
+        );
+      });
+    });
+
+    it('should create a new vault and approve the transaction successfully', () => {
+      cy.visit('/');
+      cy.contains('button', 'Add new vault').click();
+      cy.contains('button', /ATOM/).click();
+
+      cy.contains('.input-label', 'ATOM to lock up *')
+        .next()
+        .within(() => {
+          cy.get('input[type="number"]').click();
+          cy.get('input[type="number"]').clear();
+          cy.get('input[type="number"]').type(1);
+        });
+
+      cy.get('tr')
+        .contains('td', /^Collateralization Ratio$/)
+        .siblings('td.text-right.font-black')
+        .invoke('text')
+        .then(value => {
+          collateralizationRatio = value.trim();
+        });
+
+      cy.contains('button', 'Create Vault').click();
+
+      cy.confirmTransaction().then(taskCompleted => {
+        expect(taskCompleted).to.be.true;
+        cy.contains(
+          'p',
+          'You can manage your vaults from the "My Vaults" view.',
+        ).should('exist');
+      });
+    });
+
+    it('should close the vault and approve the transaction successfully', () => {
+      cy.visit('/');
+
+      cy.get('tr.leading-7')
+        .contains('td.text-right.font-black', collateralizationRatio)
+        .prev('td.text-left')
+        .should('contain', 'Collateralization Ratio')
+        .parent('tr')
+        .click();
+
+      cy.contains('Close Out Vault').click();
+      cy.contains('button.bg-interPurple', 'Close Out Vault').click();
+
+      cy.confirmTransaction().then(taskCompleted => {
+        expect(taskCompleted).to.be.true;
+      });
+    });
+  });
+});
diff --git a/test/e2e/synpress.config.cjs b/test/e2e/synpress.config.cjs
@@ -0,0 +1,12 @@
+const config = require('@agoric/synpress/synpress.config');
+const { defineConfig } = require('cypress');
+
+module.exports = defineConfig({
+  ...config,
+  e2e: {
+    ...config.e2e,
+    baseUrl: 'http://localhost:5173',
+    specPattern: 'test/e2e/specs/**/*spec.{js,jsx,ts,tsx}',
+    supportFile: 'test/support.js',
+  },
+});
diff --git a/test/support.js b/test/support.js
@@ -0,0 +1 @@
+import '@agoric/synpress/support/index';
diff --git a/vitest.config.ts b/vitest.config.ts
@@ -1,12 +1,13 @@
 import { mergeConfig } from 'vite';
-import { defineConfig } from 'vitest/config';
+import { defineConfig, configDefaults } from 'vitest/config';
 import viteConfig from './vite.config';
 
 export default mergeConfig(
   viteConfig,
   defineConfig({
     test: {
       environment: 'happy-dom',
+      exclude: [...configDefaults.exclude, 'test/e2e/**'],
     },
   }),
 );