Merge pull request #100 from claffin/ui-tests

feat: add comprehensive UI testing infrastructure

Author: claffin

.github/workflows/main.yml

@@ -9,8 +9,8 @@ on:
       - 'docs/**'
 
 jobs:
-  test:
-    name: 🧪 Test Suite
+  backend-test:
+    name: 🐍 Backend Test Suite
     runs-on: ubuntu-latest
     steps:
       - name: 📥 Checkout code
@@ -36,10 +36,69 @@ jobs:
         uses: codecov/test-results-action@v1
         with:
           token: ${{ secrets.CODECOV_TOKEN }}
+          flags: backend
+
+  frontend-test:
+    name: 🎨 Frontend Test Suite
+    runs-on: ubuntu-latest
+    defaults:
+      run:
+        working-directory: ./cloudproxy-ui
+    steps:
+      - name: 📥 Checkout code
+        uses: actions/checkout@v4
+      
+      - name: 🟢 Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+          cache: 'npm'
+          cache-dependency-path: cloudproxy-ui/package-lock.json
+      
+      - name: 📦 Cache Cypress binary
+        uses: actions/cache@v3
+        with:
+          path: ~/.cache/Cypress
+          key: cypress-${{ runner.os }}-${{ hashFiles('cloudproxy-ui/package-lock.json') }}
+      
+      - name: 📦 Install dependencies
+        run: npm ci
+      
+      - name: 🔍 Run linting
+        run: npm run lint
+        continue-on-error: true
+      
+      - name: 🧪 Run unit tests with coverage
+        run: npm run test:coverage
+      
+      - name: 🏗️ Build production bundle
+        run: npm run build
+      
+      - name: 🌐 Start dev server for E2E tests
+        run: |
+          npm run serve &
+          npx wait-on http://localhost:8080 --timeout 30000
+      
+      - name: 🎭 Run E2E tests
+        run: npm run test:e2e
+      
+      - name: 📸 Upload E2E test artifacts
+        if: failure()
+        uses: actions/upload-artifact@v3
+        with:
+          name: cypress-screenshots
+          path: cloudproxy-ui/cypress/screenshots
+      
+      - name: 📊 Upload coverage to Codecov
+        uses: codecov/codecov-action@v3
+        with:
+          token: ${{ secrets.CODECOV_TOKEN }}
+          directory: ./cloudproxy-ui/coverage
+          flags: frontend
 
   prepare-release:
     name: 🏷️ Prepare Release
-    needs: test
+    needs: [backend-test, frontend-test]
     runs-on: ubuntu-latest
     outputs:
       new_version: ${{ steps.set_outputs.outputs.new_version }}

.github/workflows/python-app-testing.yml

@@ -21,8 +21,8 @@ on:
 
 jobs:
 
-  build:
-    name: Testing
+  backend-test:
+    name: 🐍 Backend Testing
     runs-on: ubuntu-latest
     steps:
     - uses: actions/checkout@v2
@@ -54,3 +54,52 @@ jobs:
       uses: codecov/codecov-action@v1
       with:
         token: ${{ secrets.CODECOV_TOKEN }}
+        flags: backend
+        name: backend-coverage
+
+  frontend-test:
+    name: 🎨 Frontend Testing
+    runs-on: ubuntu-latest
+    defaults:
+      run:
+        working-directory: ./cloudproxy-ui
+    steps:
+    - name: 📥 Checkout code
+      uses: actions/checkout@v4
+    
+    - name: 🟢 Setup Node.js
+      uses: actions/setup-node@v4
+      with:
+        node-version: '20'
+        cache: 'npm'
+        cache-dependency-path: cloudproxy-ui/package-lock.json
+    
+    - name: 📦 Install dependencies
+      run: npm ci
+    
+    - name: 🔍 Run linting
+      run: npm run lint
+      continue-on-error: true  # Don't fail on lint warnings
+    
+    - name: 🧪 Run unit tests with coverage
+      run: npm run test:coverage
+    
+    - name: 🏗️ Build production bundle
+      run: npm run build
+    
+    - name: 📊 Upload coverage to Codecov
+      uses: codecov/codecov-action@v3
+      with:
+        token: ${{ secrets.CODECOV_TOKEN }}
+        directory: ./cloudproxy-ui/coverage
+        flags: frontend
+        name: frontend-coverage
+        fail_ci_if_error: false
+
+  testing:
+    name: Testing
+    needs: [backend-test, frontend-test]
+    runs-on: ubuntu-latest
+    steps:
+    - name: ✅ All tests passed
+      run: echo "All tests completed successfully"

.gitignore

@@ -132,7 +132,8 @@ dmypy.json
 .DS_Store
 node_modules
 /dist
-
+cloudproxy-ui/dist
+cloudproxy-ui/node_modules
 
 # local env files
 .env.local
@@ -154,3 +155,22 @@ pnpm-debug.log*
 *.sw?
 .cursor-project-context
 CLAUDE.md
+
+# Testing artifacts
+cloudproxy-ui/coverage
+cloudproxy-ui/.nyc_output
+cloudproxy-ui/cypress/screenshots
+cloudproxy-ui/cypress/videos
+cloudproxy-ui/cypress/downloads
+cloudproxy-ui/test-results
+
+# Package manager
+yarn.lock
+cloudproxy-ui/yarn.lock
+cloudproxy-ui/package-lock.json.bak
+
+# Build artifacts
+*.log
+.cache
+.temp
+.tmp

cloudproxy-ui/cypress.config.js

@@ -0,0 +1,26 @@
+const { defineConfig } = require('cypress');
+
+module.exports = defineConfig({
+  e2e: {
+    baseUrl: 'http://localhost:8080',
+    specPattern: 'cypress/e2e/**/*.{js,jsx,ts,tsx}',
+    supportFile: 'cypress/support/e2e.js',
+    video: false,
+    screenshotOnRunFailure: true,
+    viewportWidth: 1280,
+    viewportHeight: 720,
+    defaultCommandTimeout: 10000,
+    requestTimeout: 10000,
+    responseTimeout: 10000,
+    setupNodeEvents(on, config) {
+      // implement node event listeners here
+    },
+  },
+  component: {
+    devServer: {
+      framework: 'vue',
+      bundler: 'webpack',
+    },
+    specPattern: 'src/**/*.cy.{js,jsx,ts,tsx}',
+  },
+});