Uads 61/test/setup test cases

.github/workflows/build.yml

@@ -25,5 +25,8 @@ jobs:
       - name: Install Dependencies
         run: yarn
 
+      - name: Run Test Cases
+        run: yarn test
+
       - name: Build the Project
         run: yarn build

web/package.json

@@ -7,7 +7,8 @@
     "dev": "vite",
     "build": "tsc && vite build",
     "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "test": "vitest"
   },
   "dependencies": {
     "@tanstack/react-query": "^5.18.1",
@@ -24,8 +25,11 @@
     "zod": "^3.22.4"
   },
   "devDependencies": {
-    "@types/react": "^18.2.43",
-    "@types/react-dom": "^18.2.17",
+    "@testing-library/dom": "^10.1.0",
+    "@testing-library/jest-dom": "^6.4.5",
+    "@testing-library/react": "^16.0.0",
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
     "@typescript-eslint/eslint-plugin": "^6.14.0",
     "@typescript-eslint/parser": "^6.14.0",
     "@vitejs/plugin-react-swc": "^3.5.0",
@@ -34,9 +38,11 @@
     "eslint": "^8.55.0",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.5",
+    "jsdom": "^24.1.0",
     "postcss": "^8.4.34",
     "tailwindcss": "^3.4.1",
     "typescript": "^5.2.2",
-    "vite": "^5.0.8"
+    "vite": "^5.0.8",
+    "vitest": "^1.6.0"
   }
 }

web/src/pages/__tests__/About.test.tsx

@@ -0,0 +1,17 @@
+import { render, screen } from "@testing-library/react";
+import About from "../About";
+import '@testing-library/jest-dom'
+
+/*
+ * Test suite to test if the elements in the About Page are rendered correctly 
+ */
+describe("About Page Rendering", () => {
+	it("Should display the About page title", () => {
+		// Render the About component in a simulated DOM
+		render(<About />);
+
+		const message = screen.getByText(/About Us Page/i);
+
+		expect(message).toBeInTheDocument();
+	});
+});

web/src/pages/__tests__/Event.test.tsx

@@ -0,0 +1,17 @@
+import { render, screen } from "@testing-library/react";
+import Event from "../Event";
+import '@testing-library/jest-dom'
+
+/*
+ * Test suite to test if the elements in the Event Page are rendered correctly 
+ */
+describe("Event Page Rendering", () => {
+	it("Should display the Event page title", () => {
+		// Render the Event component in a simulated DOM
+		render(<Event />);
+
+		const message = screen.getByText(/Events Page/i);
+
+		expect(message).toBeInTheDocument();
+	});
+});

web/src/pages/__tests__/Home.test.tsx

@@ -0,0 +1,17 @@
+import { render, screen } from "@testing-library/react";
+import Home from "../Home";
+import "@testing-library/jest-dom";
+
+/*
+ * Test suite to test if the elements in the Home Page are rendered correctly
+ */
+describe("Home Page Rendering", () => {
+	it("Should display the Home page title", () => {
+		// Render the About component in a simulated DOM
+		render(<Home />);
+
+		const message = screen.getByText(/Home Page/i);
+
+		expect(message).toBeInTheDocument();
+	});
+});

web/src/pages/__tests__/SignUp.test.tsx

@@ -0,0 +1,17 @@
+import { render, screen } from "@testing-library/react";
+import SignUp from "../SignUp";
+import "@testing-library/jest-dom";
+
+/*
+ * Test suite to test if the elements in the SignUp Page are rendered correctly
+ */
+describe("SignUp Page Rendering", () => {
+	it("Should display the SignUp page title", () => {
+		// Render the About component in a simulated DOM
+		render(<SignUp />);
+
+		const message = screen.getByText(/Sign Up Page/i);
+
+		expect(message).toBeInTheDocument();
+	});
+});

web/src/pages/__tests__/Sponsor.test.tsx

@@ -0,0 +1,17 @@
+import { render, screen } from "@testing-library/react";
+import Sponsor from "../Sponsor";
+import '@testing-library/jest-dom'
+
+/*
+ * Test suite to test if the elements in the Sponsor Page are rendered correctly 
+ */
+describe("Sponsor Page Rendering", () => {
+	it("Should display the Sponsor page title", () => {
+		// Render the Sponsor component in a simulated DOM
+		render(<Sponsor />);
+
+		const message = screen.getByText(/Sponsors Page/i);
+
+		expect(message).toBeInTheDocument();
+	});
+});

web/tsconfig.json

@@ -5,6 +5,7 @@
     "lib": ["ES2020", "DOM", "DOM.Iterable"],
     "module": "ESNext",
     "skipLibCheck": true,
+    "types": ["vitest/globals"],
 
     "paths": {
       "@utils/*": ["./src/utils/*"],

web/vite.config.ts

@@ -1,3 +1,5 @@
+/// <reference types="vitest" />
+
 import { defineConfig } from 'vite';
 import react from '@vitejs/plugin-react-swc';
 
@@ -13,4 +15,4 @@ export default defineConfig({
       '@layouts': '/src/layouts',
     },
   },
-});
+});

web/vitest.config.ts

@@ -0,0 +1,14 @@
+/// <reference types="vitest" />
+/// <reference types = "vite/client" />
+
+import { defineConfig } from "vitest/config";
+
+export default defineConfig({
+  test: {
+    globals: true,
+    environment: "jsdom",
+    setupFiles: ["./vitest.setup.ts"],
+    css: true,
+
+  },
+});

web/vitest.setup.ts

@@ -0,0 +1 @@
+import "@testing-library/jest-dom";