add cypress e2e testing

Author: NiloCK

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"
     }
 }