Add Cypress test setup and initial tests

frontend/package.json

@@ -28,6 +28,7 @@
     "@typescript-eslint/parser": "^8.41.0",
     "@vitejs/plugin-vue": "^6.0.1",
     "@vue/tsconfig": "^0.7.0",
+    "cypress": "^15.0.0",
     "eslint": "^9.34.0",
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-prettier": "^5.5.4",
@@ -44,4 +45,4 @@
     "vue-eslint-parser": "^10.2.0",
     "vue-tsc": "^3.0.5"
   }
-}
+}

tests/cypress_tests/README.md

@@ -0,0 +1,26 @@
+# Cypress Functional Testing
+
+This directory focuses on providing functional testing for the CHEFS application.
+
+# Running Cypress functional test cases
+
+If you'd like to quickly run these Cypress tests and see what they do, please follow the below steps below:
+
+# 1. Navigate to the Cypress tests folder
+
+    cd tests/cypress_tests
+
+# 2. Install the Cypress node dependencies
+
+Make sure your package.json is present in this folder:
+npm install
+
+# 3. Run the test cases
+
+# CLI Mode
+
+    npm run test
+
+# Interactive Mode (Cypress GUI)
+
+    npm run start

tests/cypress_tests/cypress.config.js

@@ -0,0 +1,13 @@
+import { defineConfig } from "cypress";
+
+export default defineConfig({
+  e2e: {
+    baseUrl: "http://localhost:5173", // Vue dev server URL
+    supportFile: "cypress/support/e2e.js",
+    specPattern: "cypress/e2e/**/*.cy.js",
+    setupNodeEvents() {
+      // implement node event listeners here if needed
+      // removed unused 'on' and 'config' parameters
+    },
+  },
+});

tests/cypress_tests/cypress/e2e/home.cy.js

@@ -0,0 +1,26 @@
+describe("CHEFS Vue Template - Home Page", () => {
+  beforeEach(() => {
+    cy.visit("/"); // loads Home page
+  });
+
+  it("loads the homepage", () => {
+    cy.get("#app").should("exist"); // root container
+  });
+
+  it("displays the Vite logo", () => {
+    cy.get('img[alt="Vite logo"]').should("be.visible");
+  });
+
+  it("displays the Vue logo", () => {
+    cy.get('img[alt="Vue logo"]').should("be.visible");
+  });
+
+  it("renders HelloWorld component with correct message", () => {
+    cy.contains("Vite + Vue").should("be.visible");
+  });
+
+  it("increments count when button is clicked", () => {
+    cy.get("button").contains("count is").click();
+    cy.get("button").contains("count is 1").should("be.visible");
+  });
+});

tests/cypress_tests/cypress/fixtures/home.json

@@ -0,0 +1,12 @@
+{
+  "pageTitle": "CHEFS Vue Template Home Page",
+  "logos": {
+    "vite": "Vite logo",
+    "vue": "Vue logo"
+  },
+  "helloMessage": "Vite + Vue",
+  "countButton": {
+    "initialText": "count is 0",
+    "afterClickText": "count is 1"
+  }
+}

tests/cypress_tests/cypress/support/commands.js

@@ -0,0 +1,4 @@
+// Example custom command
+Cypress.Commands.add("visitHome", () => {
+  cy.visit("/");
+});

tests/cypress_tests/cypress/support/e2e.js

@@ -0,0 +1,3 @@
+// Cypress support file
+// Loaded before every test file
+import "./commands"; // imports custom commands

tests/cypress_tests/cypress/support/index.js

@@ -0,0 +1 @@
+import "./commands";

tests/cypress_tests/eslint.config.js

@@ -0,0 +1,22 @@
+import cypress from "eslint-plugin-cypress";
+
+export default [
+    {
+        files: ["cypress/**/*.js"],
+        languageOptions: {
+            ecmaVersion: 2021,
+            sourceType: "module",
+            globals: {
+                cy: "readonly",
+                Cypress: "readonly"
+            }
+        },
+        plugins: {
+            cypress
+        },
+        rules: {
+            "cypress/no-assigning-return-values": "error",
+            "cypress/no-unnecessary-waiting": "warn"
+        }
+    }
+];