Add Cypress (#610)

Adds e2e framework to monorepo.

Uses updated `yarn dev` and couchdb scripts / submodule together for
manual testing of general workflows.

Adds config for nightly run.

Author: NiloCK

.github/dependabot.yml

@@ -5,39 +5,26 @@
 
 version: 2
 updates:
-  # Configuration for minor and patch updates (grouped)
+  # Configuration for all updates
   - package-ecosystem: 'npm'
     directory: '/'
     schedule:
       interval: 'weekly'
-    # Only allow minor and patch updates
-    ignore:
-      - dependency-name: '*'
-        update-types: ['version-update:semver-major']
+    # Group minor and patch updates
     groups:
-      dependencies:
+      minor-patch-dependencies:
         patterns:
           - '*'
+        update-types:
+          - 'minor'
+          - 'patch'
         exclude-patterns:
           - '@types/*' # Exclude type definitions from grouping for better clarity
+    # Handle major updates separately (they won't be grouped)
+    # Limit the number of open PRs for major updates
+    open-pull-requests-limit: 5
     labels:
       - 'dependencies'
-      - 'minor-patch-update'
-
-  # Separate configuration for major version updates
-  - package-ecosystem: 'npm'
-    directory: '/'
-    schedule:
-      interval: 'monthly' # Check less frequently to avoid PR noise
-    # Only include major updates
-    ignore:
-      - dependency-name: '*'
-        update-types: ['version-update:semver-minor', 'version-update:semver-patch']
-    # Don't group major updates so they can be reviewed individually
-    open-pull-requests-limit: 5 # Limit the number of open PRs for major updates
-    labels:
-      - 'dependencies'
-      - 'major-update'
-      - 'breaking-change'
-    assignees:
-      - 'nilock'
+    commit-message:
+      prefix: 'deps'
+      include: 'scope'

.github/workflows/e2e-tests.yml

@@ -0,0 +1,56 @@
+name: E2E Tests
+
+on:
+  schedule:
+    - cron: '0 0 * * *' # Run daily at midnight
+  workflow_dispatch: # Allow manual triggering
+
+jobs:
+  e2e-tests:
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v3
+        with:
+          submodules: 'recursive' # Get submodule for couchdb snapshot
+
+      - 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 cypress install
+
+      - name: Run E2E tests
+        run: |
+          # Start the dev environment in background
+          yarn dev &
+          # Wait for the server to be ready
+          npx wait-on http://localhost:8080
+          # Run Cypress tests
+          yarn cypress run
+          # Clean up
+          kill $(lsof -t -i:8080)
+          yarn couchdb:stop
+
+      - name: Upload screenshots on failure
+        uses: actions/upload-artifact@v3
+        if: failure()
+        with:
+          name: cypress-screenshots
+          path: cypress/screenshots
+
+      - name: Upload videos
+        uses: actions/upload-artifact@v3
+        if: always()
+        with:
+          name: cypress-videos
+          path: cypress/videos

cypress.config.js

@@ -0,0 +1,17 @@
+const { defineConfig } = require('cypress');
+
+module.exports = defineConfig({
+  e2e: {
+    baseUrl: 'http://localhost:5173', // package/vue 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,
+});

cypress/.gitignore

@@ -0,0 +1,4 @@
+videos/
+screenshots/
+downloads/
+cypress.env.json

cypress/e2e/smoke.cy.js

@@ -0,0 +1,9 @@
+describe('Smoke Test', () => {
+  it('should load the application', () => {
+    cy.visit('/');
+
+    cy.get('h1') // find 'banner' element on front page
+      .contains(/edu.*Quilt/)
+      .should('be.visible');
+  });
+});

cypress/support/commands.js

@@ -0,0 +1,15 @@
+// vue-skuilder/cypress/support/commands.js
+// This file contains custom commands for Cypress tests
+
+// Add any custom commands you need, for example:
+
+// -- Example: Custom command for login --
+// Cypress.Commands.add('login', (email, password) => {
+//   cy.visit('/login');
+//   cy.get('[data-cy="email-input"]').type(email);
+//   cy.get('[data-cy="password-input"]').type(password);
+//   cy.get('[data-cy="login-button"]').click();
+// });
+
+// You can read more about custom commands here:
+// https://on.cypress.io/custom-commands

cypress/support/e2e.js

@@ -0,0 +1,23 @@
+// vue-skuilder/cypress/support/e2e.js
+// This is the main support file for Cypress E2E tests
+// You can add global configurations, commands, and hooks here
+
+// Import commands.js using ES2015 syntax:
+import './commands';
+
+// Alternatively you can use CommonJS syntax:
+// require('./commands')
+
+// You can read more here: https://on.cypress.io/configuration
+
+// cypress/support/e2e.js
+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
+});

package.json

@@ -10,6 +10,9 @@
         "couchdb:status": "node scripts/dev-couchdb.js status",
         "couchdb:remove": "node scripts/dev-couchdb.js remove",
         "postdev": "node scripts/dev-couchdb.js stop",
+        "test:e2e": "cypress open",
+        "test:e2e:headless": "cypress run",
+        "ci:e2e": "yarn dev & wait-on http://localhost:5173 && cypress run; kill $(lsof -t -i:8080); yarn couchdb:stop",
         "build": "yarn workspace @vue-skuilder/common build && yarn workspace @vue-skuilder/vue build && yarn workspace @vue-skuilder/express build"
     },
     "private": true,
@@ -18,6 +21,9 @@
     ],
     "packageManager": "yarn@4.6.0",
     "devDependencies": {
-        "concurrently": "^9.1.2"
+        "@types/cypress": "^1.1.6",
+        "concurrently": "^9.1.2",
+        "cypress": "^14.1.0",
+        "wait-on": "^8.0.2"
     }
 }