test: adding e2e tests for the dapp

.github/workflows/pr.yml

@@ -20,10 +20,6 @@ jobs:
         run: yarn lint
       - name: yarn build
         run: yarn build
-      - name: yarn test
-        run: yarn test
-      - name: yarn test:e2e
-        run: yarn test:e2e
   integration:
     runs-on: ubuntu-latest
     steps:

.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?
+
+# Synpress directories and files
+screenshots
+videos

package.json

@@ -47,5 +47,13 @@
     "test": "yarn workspaces run test",
     "test:e2e": "yarn workspace offer-up-ui test:e2e",
     "build": "yarn workspaces run build"
+  },
+  "devDependencies": {
+    "@agoric/synpress": "^3.8.1-beta.1",
+    "eslint-config-turbo": "^1.13.0",
+    "eslint-plugin-chai-friendly": "^0.7.4",
+    "eslint-plugin-cypress": "^2.15.1",
+    "eslint-plugin-testing-library": "^6.2.0",
+    "eslint-plugin-ui-testing": "^2.0.1"
   }
 }

ui/package.json

@@ -7,7 +7,7 @@
     "dev": "vite",
     "build": "tsc && vite build",
     "test": "vitest spec",
-    "test:e2e": "vitest e2e",
+    "test:e2e": "EXTENSION=keplr synpress run --configFile=test/e2e/synpress.config.cjs",
     "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
     "lint:fix": "yarn lint --fix",
     "preview": "vite preview"

ui/test/e2e/.eslintrc.cjs

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

ui/test/e2e/specs/test.spec.js

@@ -0,0 +1,59 @@
+/* eslint-disable ui-testing/no-disabled-tests */
+
+describe('DAPP Offer Up E2E Test Cases', () => {
+  context('Test commands', () => {
+    it(`should complete Keplr setup by  importing an existing wallet using 24 word phrase`, () => {
+      cy.setupWallet().then((setupFinished) => {
+        expect(setupFinished).to.be.true;
+      });
+      cy.visit('/');
+    });
+    it(`should reject connection with wallet`, () => {
+      const alertShown = cy.stub().as('alertShown');
+      cy.on('window:alert', alertShown);
+
+      cy.contains('Connect Wallet').click();
+      cy.rejectAccess().then((rejected) => {
+        expect(rejected).to.be.true;
+      });
+      cy.get('@alertShown').should(
+        'have.been.calledOnceWith',
+        'Request rejected'
+      );
+    });
+    it(`should accept connection with wallet`, () => {
+      cy.contains('Connect Wallet').click();
+      cy.acceptAccess().then((taskCompleted) => {
+        expect(taskCompleted).to.be.true;
+      });
+    });
+    it(`should reject make an offer transaction`, () => {
+      const alertShown = cy.stub().as('alertShown');
+      cy.on('window:alert', alertShown);
+
+      cy.contains('Make an Offer').click();
+      cy.rejectTransaction().then((taskCompleted) => {
+        expect(taskCompleted).to.be.true;
+      });
+
+      cy.get('@alertShown').should(
+        'have.been.calledOnceWith',
+        'Offer error: Error: Request rejected'
+      );
+    });
+    it(`should confirm make an offer transaction`, () => {
+      const alertShown = cy.stub().as('alertShown');
+      cy.on('window:alert', alertShown);
+
+      cy.contains('Make an Offer').click();
+      cy.confirmTransaction().then((taskCompleted) => {
+        expect(taskCompleted).to.be.true;
+      });
+
+      cy.get('@alertShown').should(
+        'have.been.calledOnceWith',
+        'Offer accepted'
+      );
+    });
+  });
+});

ui/test/e2e/synpress.config.cjs

@@ -0,0 +1,14 @@
+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',
+    screenshotsFolder: 'test/e2e/screenshots',
+    videosFolder: 'test/e2e/videos'
+  },
+});

ui/test/support.js

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