test(ui): ensure title and connect wallet button render

.github/workflows/pr.yml

@@ -22,3 +22,5 @@ jobs:
         run: yarn build
       - name: yarn test
         run: yarn test
+      - name: yarn test:e2e
+        run: yarn test:e2e

package.json

@@ -10,7 +10,7 @@
   ],
   "resolutions-note": "work-around for https://github.com/Agoric/agoric-sdk/issues/8621",
   "resolutions": {
-    "ses": "0.18.5",
+    "ses": "0.18.8",
     "@endo/bundle-source": "2.5.2-upstream-rollup",
     "@endo/captp": "3.1.1",
     "@endo/compartment-mapper": "0.8.4",
@@ -46,6 +46,7 @@
     "start:ui": "cd ui && yarn dev",
     "lint": "yarn workspaces run lint",
     "test": "yarn workspaces run test",
+    "test:e2e": "yarn workspace offer-up-ui test:e2e",
     "build": "yarn workspaces run build"
   }
 }

ui/package.json

@@ -6,7 +6,8 @@
   "scripts": {
     "dev": "vite",
     "build": "tsc && vite build",
-    "test": "exit 0",
+    "test": "vitest spec",
+    "test:e2e": "vitest e2e",
     "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
     "lint:fix": "yarn lint --fix",
     "preview": "vite preview"
@@ -18,10 +19,11 @@
   "devDependencies": {
     "@agoric/eventual-send": "^0.14.1",
     "@agoric/notifier": "^0.6.2",
-    "@agoric/rpc": "^0.6.0",
+    "@agoric/rpc": "0.9.1-dev-f471a83.0",
     "@agoric/store": "^0.9.2",
     "@agoric/ui-components": "^0.9.0",
     "@agoric/web-components": "0.12.0",
+    "@testing-library/react": "^14.1.2",
     "@types/react": "^18.2.15",
     "@types/react-dom": "^18.2.7",
     "@typescript-eslint/eslint-plugin": "^6.0.0",
@@ -32,10 +34,13 @@
     "eslint-plugin-prettier": "^5.1.3",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.3",
+    "happy-dom": "^13.3.1",
     "prettier": "^3.2.4",
+    "puppeteer": "^21.9.0",
     "ses": "^0.18.8",
     "typescript": "^5.0.2",
     "vite": "^4.4.5",
+    "vitest": "^1.2.1",
     "zustand": "^4.4.1"
   },
   "resolutions": {

ui/src/App.spec.tsx

@@ -0,0 +1,22 @@
+import './installSesLockdown';
+import { render, screen } from '@testing-library/react';
+import App from './App';
+
+describe('App.tsx', () => {
+  it('renders app title', async () => {
+    render(<App />);
+
+    const titleElement = await screen.findByText('Items Listed on Offer Up', {
+      selector: 'h1',
+    });
+    expect(titleElement).toBeTruthy();
+  });
+
+  it('renders the wallet connection button', async () => {
+    render(<App />);
+    const buttonEl = await screen.findByRole('button', {
+      name: 'Connect Wallet',
+    });
+    expect(buttonEl).toBeTruthy();
+  });
+});

ui/test/App.e2e.ts

@@ -0,0 +1,28 @@
+import puppeteer from 'puppeteer';
+import { execSync, spawn } from 'node:child_process';
+
+describe('Puppeteer E2E test', () => {
+  it('should load the webpage', async () => {
+    execSync('yarn build');
+    const previewServer = spawn('yarn', ['preview'], {
+      detached: true,
+      stdio: 'ignore',
+    });
+    // delay for preview server to start
+    await new Promise(resolve => setTimeout(resolve, 2000));
+
+    try {
+      const browser = await puppeteer.launch();
+      const page = await browser.newPage();
+      await page.goto('http://localhost:4173');
+
+      const buttonText = await page.$eval('button', el => el.textContent);
+      expect(buttonText).toBe('Connect Wallet');
+
+      await browser.close();
+      previewServer.kill();
+    } catch (_) {
+      previewServer.kill();
+    }
+  });
+});

ui/tsconfig.json

@@ -18,8 +18,10 @@
     "strict": true,
     "noUnusedLocals": true,
     "noUnusedParameters": true,
-    "noFallthroughCasesInSwitch": true
+    "noFallthroughCasesInSwitch": true,
+
+    "types": ["vitest/globals"],
   },
-  "include": ["src"],
-  "references": [{ "path": "./tsconfig.node.json" }]
+  "include": ["src", "test"],
+  "references": [{ "path": "./tsconfig.node.json" }],
 }

ui/vite.config.ts

@@ -1,7 +1,16 @@
+/// <reference types="vitest" />
+
 import { defineConfig } from 'vite';
 import react from '@vitejs/plugin-react';
 
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [react()],
+  test: {
+    globals: true,
+    environment: 'happy-dom',
+    testTimeout: 20000, // 20 seconds for puppeteer CI
+    // modified import('vitest/dist/config.js').defaultInclude
+    include: '**/*.{spec,e2e}.?(c|m)[jt]s?(x)',
+  },
 });