Add Cypress E2E test infrastructure for standalone-ui

- Create Cypress configuration with port 6173
- Set up basic test framework with support files
- Add smoke test for standalone-ui
- Create CI workflow for standalone-ui E2E tests
- Add status badge to README

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>

Author: NiloCK

.github/workflows/standalone-e2e-tests.yml

@@ -0,0 +1,86 @@
+name: Standalone UI E2E Tests
+
+on:
+  schedule:
+    - cron: '0 0 * * *' # Run daily at midnight
+  workflow_dispatch: # Allow manual triggering
+  push:
+    paths:
+      - '.github/workflows/standalone-e2e-tests.yml'
+      - 'packages/standalone-ui/**'
+
+jobs:
+  e2e-tests:
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v3
+        with:
+          submodules: 'recursive' # Get submodule for couchdb snapshot
+
+      - name: Display submodule information
+        run: |
+          echo "Submodule information:"
+          git submodule status
+          echo "CouchDB snapshot details:"
+          cd test-couch && git log -1 --pretty=format:'%h - %s (%cr) <%an>'
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: '18'
+          cache: 'yarn'
+
+      - name: Setup Docker
+        uses: docker/setup-buildx-action@v2
+
+      - name: Install dependencies
+        run: yarn install
+
+      - name: Install Cypress
+        run: yarn workspace @vue-skuilder/standalone-ui cypress install
+
+      - name: Build dependencies
+        run: |
+          yarn workspace @vue-skuilder/common build
+          yarn workspace @vue-skuilder/db build
+          yarn workspace @vue-skuilder/common-ui build
+          yarn workspace @vue-skuilder/courses build
+
+      - name: Start CouchDB
+        run: yarn couchdb:start
+
+      - name: Start standalone UI and wait for services
+        run: |
+          # Start the standalone-ui in background
+          yarn workspace @vue-skuilder/standalone-ui dev &
+          # Wait for the webserver to be ready
+          npx wait-on http://localhost:6173
+          # Wait for the database to be ready
+          npx wait-on http://localhost:5984
+
+      - name: Run E2E tests
+        run: yarn workspace @vue-skuilder/standalone-ui cypress run
+
+      - name: Cleanup services
+        if: always()
+        run: |
+          # Clean up
+          kill $(lsof -t -i:6173) || true
+          yarn couchdb:stop
+
+      - name: Upload screenshots on failure
+        uses: actions/upload-artifact@v4
+        if: failure()
+        with:
+          name: cypress-screenshots
+          path: packages/standalone-ui/cypress/screenshots
+          retention-days: 7
+
+      - name: Upload videos
+        uses: actions/upload-artifact@v4
+        if: always()
+        with:
+          name: cypress-videos
+          path: packages/standalone-ui/cypress/videos
+          retention-days: 7

packages/standalone-ui/cypress.config.js

@@ -0,0 +1,17 @@
+const { defineConfig } = require('cypress');
+
+module.exports = defineConfig({
+  e2e: {
+    baseUrl: 'http://localhost:6173', // package/standalone-ui vite dev server port
+    supportFile: 'cypress/support/e2e.js',
+    specPattern: 'cypress/e2e/**/*.cy.{js,jsx,ts,tsx}',
+    setupNodeEvents(on, config) {
+      // implement node event listeners here
+    },
+  },
+  //  increase the default timeout for slower operations
+  defaultCommandTimeout: 10000,
+  // Viewport configuration
+  viewportWidth: 1280,
+  viewportHeight: 800,
+});

packages/standalone-ui/cypress/e2e/smoke.cy.js

@@ -0,0 +1,10 @@
+// Basic smoke test for standalone-ui
+describe('Smoke Test', () => {
+  it('should load the application', () => {
+    cy.visit('/');
+    
+    // Verify that the application loaded
+    // Update selector as needed based on your actual UI
+    cy.get('body').should('be.visible');
+  });
+});

packages/standalone-ui/cypress/support/commands.js

@@ -0,0 +1,7 @@
+// standalone-ui/cypress/support/commands.js
+// Basic commands file - will be expanded with specific commands as needed
+
+// Example of a custom command format:
+// Cypress.Commands.add('commandName', (param1, param2) => {
+//   // Command implementation
+// });

packages/standalone-ui/cypress/support/e2e.js

@@ -0,0 +1,17 @@
+// standalone-ui/cypress/support/e2e.js
+// This is the main support file for Cypress E2E tests
+
+// Import commands.js using ES2015 syntax:
+import './commands';
+
+// Cypress exception handling
+Cypress.on('uncaught:exception', (err) => {
+  // Log the error for debugging
+  console.log('Uncaught exception:', err.message);
+
+  // If the error is from PouchDB, ignore it
+  if (err.message.includes('not_found') || err.message.includes('missing')) {
+    return false; // Prevents Cypress from failing the test
+  }
+  return true; // Otherwise, fail the test
+});

packages/standalone-ui/package.json

@@ -6,7 +6,10 @@
     "scripts": {
         "dev": "vite",
         "build": "vue-tsc --noEmit && vite build",
-        "preview": "vite preview"
+        "preview": "vite preview",
+        "test:e2e": "cypress open",
+        "test:e2e:headless": "cypress run",
+        "ci:e2e": "vite dev & wait-on http://localhost:6173 && cypress run"
     },
     "dependencies": {
         "@mdi/font": "^7.3.67",
@@ -18,9 +21,12 @@
         "vuetify": "^3.7.0"
     },
     "devDependencies": {
+        "@types/cypress": "1.1.6",
         "@vitejs/plugin-vue": "^5.2.1",
+        "cypress": "14.1.0",
         "typescript": "^5.7.2",
         "vite": "^6.0.9",
-        "vue-tsc": "^1.8.0"
+        "vue-tsc": "^1.8.0",
+        "wait-on": "8.0.2"
     }
 }

readme.md

@@ -1,4 +1,5 @@
 ![`platform-ui` E2E](https://github.com/patched-network/vue-skuilder/actions/workflows/e2e-tests.yml/badge.svg)
+![`standalone-ui` E2E](https://github.com/patched-network/vue-skuilder/actions/workflows/standalone-e2e-tests.yml/badge.svg)
 
 General tooling for interactive tutoring systems, with experimentation toward
 - mass-collaborative authoring