From 67fe09eca0ba4167a60c1587537fac951a26e0d1 Mon Sep 17 00:00:00 2001
From: ahmed saeed <76794210+AhmedSaeed456@users.noreply.github.com>
Date: Thu, 5 Jun 2025 19:46:05 +0300
Subject: [PATCH] Add NavBar component test

---
 jest.config.js                           | 15 +++++++++++++++
 jest.setup.js                            |  1 +
 package.json                             | 12 ++++++++++--
 src/components/EventCalender.tsx         |  2 +-
 src/components/__tests__/NavBar.test.tsx |  9 +++++++++
 5 files changed, 36 insertions(+), 3 deletions(-)
 create mode 100644 jest.config.js
 create mode 100644 jest.setup.js
 create mode 100644 src/components/__tests__/NavBar.test.tsx

diff --git a/jest.config.js b/jest.config.js
new file mode 100644
index 000000000..d1e311d72
--- /dev/null
+++ b/jest.config.js
@@ -0,0 +1,15 @@
+const nextJest = require('next/jest')
+
+const createJestConfig = nextJest({
+  dir: './',
+})
+
+const customJestConfig = {
+  setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
+  moduleNameMapper: {
+    '^@/(.*)$': '<rootDir>/src/$1',
+  },
+  testEnvironment: 'jest-environment-jsdom',
+}
+
+module.exports = createJestConfig(customJestConfig)
diff --git a/jest.setup.js b/jest.setup.js
new file mode 100644
index 000000000..264828a90
--- /dev/null
+++ b/jest.setup.js
@@ -0,0 +1 @@
+import '@testing-library/jest-dom/extend-expect'
diff --git a/package.json b/package.json
index 8f7727a78..3d4fd616f 100644
--- a/package.json
+++ b/package.json
@@ -6,7 +6,8 @@
     "dev": "next dev",
     "build": "next build",
     "start": "next start",
-    "lint": "next lint"
+    "lint": "next lint",
+    "test": "jest"
   },
   "dependencies": {
     "clsx": "^2.1.1",
@@ -24,6 +25,13 @@
     "eslint-config-next": "14.2.5",
     "postcss": "^8",
     "tailwindcss": "^3.4.1",
-    "typescript": "^5"
+    "typescript": "^5",
+    "@testing-library/jest-dom": "^6.1.2",
+    "@testing-library/react": "^14.1.2",
+    "@testing-library/user-event": "^14.4.3",
+    "@types/jest": "^29.5.5",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
+    "ts-jest": "^29.1.2"
   }
 }
diff --git a/src/components/EventCalender.tsx b/src/components/EventCalender.tsx
index 17e04afd7..9990d5748 100644
--- a/src/components/EventCalender.tsx
+++ b/src/components/EventCalender.tsx
@@ -52,7 +52,7 @@ const EventCalender = () => {
         {events.map(item => (
           <div
             key={item.id}
-            className={`shadow-md p-5 border-2 border-gray-100 border-top-4 odd:border-t-lamaSky even:border-t-lamaPurple  rounded-md mb-3 w-full`}
+            className={`shadow-md p-5 border-2 border-gray-100 border-t-4 odd:border-t-lamaSky even:border-t-lamaPurple  rounded-md mb-3 w-full`}
           >
             <div className="flex flex-row justify-between items-center">
               <h1>{item.title}</h1>
diff --git a/src/components/__tests__/NavBar.test.tsx b/src/components/__tests__/NavBar.test.tsx
new file mode 100644
index 000000000..35d193609
--- /dev/null
+++ b/src/components/__tests__/NavBar.test.tsx
@@ -0,0 +1,9 @@
+import { render, screen } from '@testing-library/react';
+import NavBar from '../NavBar';
+
+describe('NavBar component', () => {
+  it('renders the user name', () => {
+    render(<NavBar />);
+    expect(screen.getByText('John Doe')).toBeInTheDocument();
+  });
+});