From 319e4918c0778957be190caba636d93cc36016fa Mon Sep 17 00:00:00 2001
From: rose191919 <jamesrose1902@gmail.com>
Date: Sat, 4 Oct 2025 18:02:09 -0400
Subject: [PATCH 1/5] Added a few tests on frontend

---
 code/frontend/package-lock.json               |  8 +--
 code/frontend/package.json                    |  5 +-
 code/frontend/src/tests/Aside.tdd.test.tsx    | 50 +++++++++++++++++
 code/frontend/src/tests/Field.tdd.test.tsx    | 30 +++++++++++
 .../src/tests/MyJobsButton.tdd.test.tsx       | 16 ++++++
 .../src/tests/RegisterForm.tdd.test.tsx       | 54 +++++++++++++++++++
 code/frontend/src/tests/setupTests.ts         | 36 +++++++++++++
 .../src/tests/validation.tdd.test.tsx         | 24 +++++++++
 8 files changed, 217 insertions(+), 6 deletions(-)
 create mode 100644 code/frontend/src/tests/Aside.tdd.test.tsx
 create mode 100644 code/frontend/src/tests/Field.tdd.test.tsx
 create mode 100644 code/frontend/src/tests/MyJobsButton.tdd.test.tsx
 create mode 100644 code/frontend/src/tests/RegisterForm.tdd.test.tsx
 create mode 100644 code/frontend/src/tests/validation.tdd.test.tsx

diff --git a/code/frontend/package-lock.json b/code/frontend/package-lock.json
index 7fa68b8..3ccfaf8 100644
--- a/code/frontend/package-lock.json
+++ b/code/frontend/package-lock.json
@@ -16,7 +16,7 @@
       },
       "devDependencies": {
         "@eslint/js": "^9.33.0",
-        "@testing-library/jest-dom": "^6.8.0",
+        "@testing-library/jest-dom": "^6.9.1",
         "@testing-library/react": "^16.3.0",
         "@testing-library/user-event": "^14.6.1",
         "@types/jest": "^30.0.0",
@@ -2669,9 +2669,9 @@
       "peer": true
     },
     "node_modules/@testing-library/jest-dom": {
-      "version": "6.8.0",
-      "resolved": "https://registry.npmjs.org/@testing-library/jest-dom/-/jest-dom-6.8.0.tgz",
-      "integrity": "sha512-WgXcWzVM6idy5JaftTVC8Vs83NKRmGJz4Hqs4oyOuO2J4r/y79vvKZsb+CaGyCSEbUPI6OsewfPd0G1A0/TUZQ==",
+      "version": "6.9.1",
+      "resolved": "https://registry.npmjs.org/@testing-library/jest-dom/-/jest-dom-6.9.1.tgz",
+      "integrity": "sha512-zIcONa+hVtVSSep9UT3jZ5rizo2BsxgyDYU7WFD5eICBE7no3881HGeb/QkGfsJs6JTkY1aQhT7rIPC7e+0nnA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
diff --git a/code/frontend/package.json b/code/frontend/package.json
index 328cab6..e9bcf09 100644
--- a/code/frontend/package.json
+++ b/code/frontend/package.json
@@ -8,7 +8,8 @@
     "build": "tsc -b && vite build",
     "lint": "eslint .",
     "preview": "vite preview",
-    "test": "jest"
+    "test": "jest",
+    "test:ci": "jest --ci --runInBand"
   },
   "dependencies": {
     "bootstrap": "^5.3.8",
@@ -19,7 +20,7 @@
   },
   "devDependencies": {
     "@eslint/js": "^9.33.0",
-    "@testing-library/jest-dom": "^6.8.0",
+    "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "^14.6.1",
     "@types/jest": "^30.0.0",
diff --git a/code/frontend/src/tests/Aside.tdd.test.tsx b/code/frontend/src/tests/Aside.tdd.test.tsx
new file mode 100644
index 0000000..56dfe65
--- /dev/null
+++ b/code/frontend/src/tests/Aside.tdd.test.tsx
@@ -0,0 +1,50 @@
+import { render, screen, fireEvent } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import Aside from '../components/asideAndToggler/Aside';
+import { MemoryRouter } from 'react-router-dom';
+import { ThemeProvider } from '../theme/ThemeContext';
+
+/*
+AI-generated code: 70% (tool: ChatGPT, adapted; functions: jest.mock usage and test case scaffolding; AI chat links: [https://chatgpt.com/share/68e18e34-9110-8006-b694-a6dadf0cafd5])
+Human code (James): 25% (test logic, expectations, and navigation assertions)
+Framework-generated code: 5% (React Testing Library, Jest DOM APIs)
+*/
+
+// Mock navigate so we can assert where it goes
+const mockNavigate = jest.fn();
+jest.mock('react-router-dom', () => {
+  const actual = jest.requireActual('react-router-dom');
+  return {
+    ...actual,
+    useNavigate: () => mockNavigate
+  };
+});
+
+
+test('shows "My Jobs" on non-MyJobs routes and navigates to /myJobs', () => {
+  render(
+    <MemoryRouter initialEntries={['/content']}>
+      <ThemeProvider>
+        <Aside />
+      </ThemeProvider>
+    </MemoryRouter>
+  );
+  const btn = screen.getByRole('button', { name: /my jobs/i });
+  fireEvent.click(btn);
+  expect(mockNavigate).toHaveBeenCalledWith('/myJobs');
+});
+
+
+test('shows "Home" on /myJobs and navigates to /content', () => {
+  mockNavigate.mockClear();
+  render(
+    <MemoryRouter initialEntries={['/myJobs']}>
+      <ThemeProvider>
+        <Aside />
+      </ThemeProvider>
+    </MemoryRouter>
+  );
+  const btn = screen.getByRole('button', { name: /home/i });
+  fireEvent.click(btn);
+  expect(mockNavigate).toHaveBeenCalledWith('/content');
+});
diff --git a/code/frontend/src/tests/Field.tdd.test.tsx b/code/frontend/src/tests/Field.tdd.test.tsx
new file mode 100644
index 0000000..42a59f0
--- /dev/null
+++ b/code/frontend/src/tests/Field.tdd.test.tsx
@@ -0,0 +1,30 @@
+import { render, screen, fireEvent } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import Field from '../components/asideAndToggler/Field';
+
+/*
+AI-generated code: 70% (tool: ChatGPT, adapted; functions: structure of test and RTL interactions[https://chatgpt.com/share/68e18e34-9110-8006-b694-a6dadf0cafd5])
+Human code (James): 25% (custom onChange mock, assertion logic, expected behavior for selection)
+Framework-generated code: 5% (React Testing Library, Jest DOM APIs)
+*/
+
+// The popover is rendered via portal into document.body, which RTL supports by default.
+test('opens field menu and selects an option, calling onChange', () => {
+  const onChange = jest.fn();
+  render(<Field onChange={onChange} />);
+
+
+  // Open
+  const openBtn = screen.getByRole('button', { name: /field/i });
+  fireEvent.click(openBtn);
+
+
+  // Choose "Engineering"
+  const opt = screen.getByRole('option', { name: /engineering/i });
+  fireEvent.click(opt);
+
+
+  expect(onChange).toHaveBeenCalledWith('Engineering');
+  // Button label should now reflect the selection
+  expect(screen.getByRole('button', { name: /engineering/i })).toBeInTheDocument();
+});
diff --git a/code/frontend/src/tests/MyJobsButton.tdd.test.tsx b/code/frontend/src/tests/MyJobsButton.tdd.test.tsx
new file mode 100644
index 0000000..479fa2f
--- /dev/null
+++ b/code/frontend/src/tests/MyJobsButton.tdd.test.tsx
@@ -0,0 +1,16 @@
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import MyJobsButton from '../components/buttons/MyJobsButton';
+
+/*
+AI-generated code: 70% (tool: ChatGPT, adapted; test structure suggestion)
+Human code(James): 25% (assertions for styling and rendering)
+Framework-generated code: 5% (React Testing Library, Jest DOM APIs)
+*/
+
+test('renders My Jobs button with correct styling class', () => {
+  render(<MyJobsButton />);
+  const btn = screen.getByRole('button', { name: /my jobs/i });
+  expect(btn).toBeInTheDocument();
+  expect(btn).toHaveClass('my-jobs-button');
+});
diff --git a/code/frontend/src/tests/RegisterForm.tdd.test.tsx b/code/frontend/src/tests/RegisterForm.tdd.test.tsx
new file mode 100644
index 0000000..46baee7
--- /dev/null
+++ b/code/frontend/src/tests/RegisterForm.tdd.test.tsx
@@ -0,0 +1,54 @@
+import { render, screen, fireEvent } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import RegisterForm from '../components/loginAndRegistration/RegisterForm';
+import { MemoryRouter } from 'react-router-dom';
+import { ThemeProvider } from '../theme/ThemeContext';
+
+/*
+AI-generated code: 70% (tool: ChatGPT, adapted; helper fill function, structure of test case)
+Human code: 25% (custom assertion flow, expected form submission payloads)
+Framework-generated code: 5% (React Testing Library, Jest DOM APIs)
+*/
+
+function fill(input: HTMLElement, value: string) {
+  fireEvent.change(input, { target: { value } });
+  fireEvent.blur(input);
+}
+
+
+test('requires name, email, password; submits when valid', () => {
+  const onSubmit = jest.fn();
+  render(
+    <MemoryRouter>
+      <ThemeProvider>
+        <RegisterForm onSubmit={onSubmit} showSubmitButton />
+      </ThemeProvider>
+    </MemoryRouter>
+  );
+
+
+  const name = screen.getByLabelText(/name/i);
+  const email = screen.getByLabelText(/^email$/i);
+  const password = screen.getByLabelText(/password/i);
+
+
+  // Trigger errors
+  fireEvent.blur(name);
+  fireEvent.blur(email);
+  fireEvent.blur(password);
+  expect(screen.getByText(/name is required/i)).toBeInTheDocument();
+  expect(screen.getByText(/email is required/i)).toBeInTheDocument();
+  expect(screen.getByText(/password is required/i)).toBeInTheDocument();
+
+
+  // Fill valid values and submit
+  fill(name, 'James');
+  fill(email, 'james@example.com');
+  fill(password, 'secret123');
+  fireEvent.click(screen.getByRole('button', { name: /register/i }));
+  expect(onSubmit).toHaveBeenCalledWith({
+    name: 'James',
+    email: 'james@example.com',
+    password: 'secret123'
+  });
+});
diff --git a/code/frontend/src/tests/setupTests.ts b/code/frontend/src/tests/setupTests.ts
index d812f04..c3a6052 100644
--- a/code/frontend/src/tests/setupTests.ts
+++ b/code/frontend/src/tests/setupTests.ts
@@ -16,3 +16,39 @@ if (typeof (global as any).TextDecoder === 'undefined') {
   // @ts-ignore
   (global as any).TextDecoder = TextDecoder as unknown as new () => TextDecoder;
 }
+// Polyfill for window.matchMedia used by CSS/media-query based code (e.g. theme detection).
+// Some components call window.matchMedia(...) which is not implemented in the jsdom used by Jest.
+if (typeof window !== 'undefined' && typeof (window as any).matchMedia === 'undefined') {
+  Object.defineProperty(window, 'matchMedia', {
+    writable: true,
+    configurable: true,
+    value: (query: string) => ({
+      matches: false,
+      media: query,
+      onchange: null,
+      addListener: () => {}, // deprecated
+      removeListener: () => {}, // deprecated
+      addEventListener: () => {},
+      removeEventListener: () => {},
+      dispatchEvent: () => false,
+    }),
+  });
+}
+
+// Provide a no-op for window.scrollTo (some libs call it during rendering)
+if (typeof window !== 'undefined' && typeof (window as any).scrollTo === 'undefined') {
+  // @ts-ignore
+  window.scrollTo = () => {};
+}
+
+// Optional: stub ResizeObserver if components use it (safe no-op implementation)
+if (typeof (window as any).ResizeObserver === 'undefined') {
+  // @ts-ignore
+  class ResizeObserver {
+    observe() {}
+    unobserve() {}
+    disconnect() {}
+  }
+  // @ts-ignore
+  window.ResizeObserver = ResizeObserver;
+}
diff --git a/code/frontend/src/tests/validation.tdd.test.tsx b/code/frontend/src/tests/validation.tdd.test.tsx
new file mode 100644
index 0000000..b02fc97
--- /dev/null
+++ b/code/frontend/src/tests/validation.tdd.test.tsx
@@ -0,0 +1,24 @@
+import { isRequired, isEmail } from '../components/loginAndRegistration/validation';
+
+/*
+AI-generated code: 95% (tool: ChatGPT, adapted; test scaffolding and helper structure)
+Human code (James): 0%
+Framework-generated code: 5% (Jest test runner functions)
+*/
+
+describe('validation helpers', () => {
+  test('isRequired rejects empty/whitespace', () => {
+    expect(isRequired('')).toBe(false);
+    expect(isRequired('   ')).toBe(false);
+    expect(isRequired('ok')).toBe(true);
+  });
+
+
+  test('isEmail basic format check', () => {
+    expect(isEmail('')).toBe(false);
+    expect(isEmail('hello')).toBe(false);
+    expect(isEmail('a@b')).toBe(false);
+    expect(isEmail('jane.doe@example.com')).toBe(true);
+  });
+ 
+});

From 503356f6bf295935fce150eed32ebda8ceb79961 Mon Sep 17 00:00:00 2001
From: Pedro Ramirez <prlara23@bu.com>
Date: Fri, 10 Oct 2025 12:38:33 -0500
Subject: [PATCH 2/5] fix mobile version

---
 code/frontend/src/api/auth/login.ts           |  5 +-
 code/frontend/src/api/pages/myJobs.ts         | 11 ----
 .../api/savedAndApplied/savedAndApplied.ts    |  4 +-
 .../src/components/asideAndToggler/Aside.tsx  |  6 +-
 .../asideAndToggler/themeToggler.tsx          | 15 +++--
 .../src/components/headerAndFooter/Footer.css |  1 +
 .../src/components/headerAndFooter/Footer.tsx |  7 ++-
 .../components/jobsList/MyJobsViewList.tsx    |  2 -
 .../jobsList/SavedJobApplyButton.tsx          |  3 -
 .../jobsList/localStorageHelpers.ts           |  1 -
 .../loginAndRegistration/LoginForm.tsx        |  1 -
 .../loginAndRegistration/RegisterForm.tsx     |  2 -
 .../loginAndRegistration/validation.ts        |  4 +-
 .../src/components/wrapper/Layout.css         | 61 +++++++++++++++++++
 .../src/components/wrapper/Layout.tsx         | 51 +++++++++++++++-
 code/frontend/welcome-to-docker               |  1 -
 16 files changed, 137 insertions(+), 38 deletions(-)
 create mode 100644 code/frontend/src/components/wrapper/Layout.css
 delete mode 160000 code/frontend/welcome-to-docker

diff --git a/code/frontend/src/api/auth/login.ts b/code/frontend/src/api/auth/login.ts
index 2c153b6..0fde7f8 100644
--- a/code/frontend/src/api/auth/login.ts
+++ b/code/frontend/src/api/auth/login.ts
@@ -1,5 +1,8 @@
 // src/api/auth/login.ts
 // Centralized login request helper
+// Copilot generated initial structure and logic
+// Human refined error handling, types, and token management
+// 40% AI-generated, 60% human refined
 
 import { postJson, stripEnvelope } from '../http';
 
@@ -22,7 +25,6 @@ export async function login(
 ): Promise<{ token: string; raw: LoginResponseEnvelope }> {
   // Normalize input
   const trimmedEmail = (username || '').trim();
-  console.log('Attempting login with:', { email: trimmedEmail });
 
   // IMPORTANT: ensure we never send stale tokens on the login call
   try {
@@ -52,7 +54,6 @@ export async function login(
       localStorage.setItem('jwt', token);
     } catch {}
 
-    console.log('Login response data:', data);
     return { token, raw: unwrapped };
   } catch (error: any) {
     console.error('Login error:', error);
diff --git a/code/frontend/src/api/pages/myJobs.ts b/code/frontend/src/api/pages/myJobs.ts
index d8fb4e3..185271a 100644
--- a/code/frontend/src/api/pages/myJobs.ts
+++ b/code/frontend/src/api/pages/myJobs.ts
@@ -52,7 +52,6 @@ export async function getMySaved(): Promise<SavedAppliedJob[]> {
   const body = { size: 10, page: 0 };
   const { data } = await postJson<any>('/jobs/saved/list', body);
 
-  console.log('getMySaved response data:', data);
   return normalizeJobs(data);
 }
 
@@ -61,7 +60,6 @@ export async function getMyApplied(): Promise<SavedAppliedJob[]> {
   const body = { size: 10, page: 0 };
   const { data } = await postJson<any>('/jobs/applied/list', body);
 
-  console.log('getMyApplied response data:', data);
   return normalizeJobs(data);
 }
 
@@ -95,8 +93,6 @@ export async function deleteSavedJob(id: string | number): Promise<void> {
     uid: uid, // Include the user ID which is required by the backend
   });
 
-  console.log('deleteSavedJob response:', response?.status, data);
-
   // Check if the deletion was successful
   const success =
     data?.success ||
@@ -119,7 +115,6 @@ export async function deleteAppliedJob(id: string | number): Promise<void> {
     jobIds: [jobId],
     uid: uid, // Include the user ID which is required by the backend
   };
-  console.log('deleteAppliedJob request body:', requestBody);
 
   try {
     // Use the specified endpoint /jobs/applied/delete with the correct request body format
@@ -128,8 +123,6 @@ export async function deleteAppliedJob(id: string | number): Promise<void> {
       requestBody
     );
 
-    console.log('deleteAppliedJob response:', response?.status, data);
-
     // Check if the deletion was successful
     const success =
       data?.success ||
@@ -164,8 +157,6 @@ export async function deleteAllSaved(): Promise<void> {
     uid, // Include the user ID which is required by the backend
   });
 
-  console.log('deleteAllSaved response:', response?.status, data);
-
   // Check if the deletion was successful
   const success =
     data?.success ||
@@ -193,8 +184,6 @@ export async function deleteAllApplied(): Promise<void> {
     uid, // Include the user ID which is required by the backend
   });
 
-  console.log('deleteAllApplied response:', response?.status, data);
-
   // Check if the deletion was successful
   const success =
     data?.success ||
diff --git a/code/frontend/src/api/savedAndApplied/savedAndApplied.ts b/code/frontend/src/api/savedAndApplied/savedAndApplied.ts
index 4d85201..3c8f92b 100644
--- a/code/frontend/src/api/savedAndApplied/savedAndApplied.ts
+++ b/code/frontend/src/api/savedAndApplied/savedAndApplied.ts
@@ -126,7 +126,7 @@ export function buildSavedJobPayload(job: Job): SavedJobPayload {
 export async function saveJob(job: Job): Promise<SaveJobResponse> {
   const payload = buildSavedJobPayload(job);
   const { data } = await postJson<SaveJobResponse>('/jobs/saved/save', payload);
-  console.log('Save job response data:', data);
+
   return data;
 }
 
@@ -136,6 +136,6 @@ export async function applyJob(job: Job): Promise<SaveJobResponse> {
     '/jobs/applied/apply',
     payload
   );
-  console.log('Apply job response data:', data);
+
   return data;
 }
diff --git a/code/frontend/src/components/asideAndToggler/Aside.tsx b/code/frontend/src/components/asideAndToggler/Aside.tsx
index 385a464..b858c5b 100644
--- a/code/frontend/src/components/asideAndToggler/Aside.tsx
+++ b/code/frontend/src/components/asideAndToggler/Aside.tsx
@@ -40,8 +40,10 @@ export default function Aside({ myJobsView, onMyJobsViewChange }: AsideProps) {
         role="group"
         aria-label="Filters"
       >
-        <Field />
-        <Type />
+        {/* Hide Field and Type components on MyJobs page */}
+        {!isMyJobs && <div className="fw-semibold mb-1">FILTERS</div>}
+        {!isMyJobs && <Field />}
+        {!isMyJobs && <Type />}
         <button
           type="button"
           className={`${buttonClass} filter-button`}
diff --git a/code/frontend/src/components/asideAndToggler/themeToggler.tsx b/code/frontend/src/components/asideAndToggler/themeToggler.tsx
index 6c11a43..211ac4c 100644
--- a/code/frontend/src/components/asideAndToggler/themeToggler.tsx
+++ b/code/frontend/src/components/asideAndToggler/themeToggler.tsx
@@ -11,23 +11,28 @@ export default function ThemeToggler() {
 
   return (
     <div
-      className="w-100 d-flex justify-content-end"
       onClick={toggle}
       aria-label="Toggle color theme"
+      style={{
+        cursor: 'pointer',
+        width: 'fit-content',
+        float: 'right',
+        marginBottom: '1.5rem',
+      }}
     >
       {theme === 'light' ? (
         <img
           src={moonImage}
           alt="Switch to dark mode"
-          style={{ width: '47px', height: '47px' }}
-          className="user-select-none me-3"
+          style={{ width: '40px', height: '40px' }}
+          className="user-select-none"
         />
       ) : (
         <img
           src={sunImage}
           alt="Switch to light mode"
-          style={{ width: '47px', height: '47px' }}
-          className="user-select-none me-3"
+          style={{ width: '40px', height: '40px' }}
+          className="user-select-none"
         />
       )}
     </div>
diff --git a/code/frontend/src/components/headerAndFooter/Footer.css b/code/frontend/src/components/headerAndFooter/Footer.css
index 536fa36..00365ed 100644
--- a/code/frontend/src/components/headerAndFooter/Footer.css
+++ b/code/frontend/src/components/headerAndFooter/Footer.css
@@ -12,6 +12,7 @@
   text-align: center;
   padding: 1rem;
   color: #717273;
+  transition: background-color 0.3s ease;
 }
 
 /* Dark theme override */
diff --git a/code/frontend/src/components/headerAndFooter/Footer.tsx b/code/frontend/src/components/headerAndFooter/Footer.tsx
index f6ea586..173990b 100644
--- a/code/frontend/src/components/headerAndFooter/Footer.tsx
+++ b/code/frontend/src/components/headerAndFooter/Footer.tsx
@@ -7,12 +7,17 @@
 */
 
 import './Footer.css';
+import { useTheme } from '../../theme/ThemeContext';
 
 const Footer: React.FC = () => {
   const currentYear = new Date().getFullYear();
+  const { theme } = useTheme();
 
   return (
-    <div className="footer-container">
+    <div
+      className="footer-container"
+      style={{ backgroundColor: theme === 'light' ? 'white' : '#1A1A1A' }}
+    >
       CS673OLFall25-Team2 | {currentYear} |{' '}
       <span className="university-title">Boston University</span>
     </div>
diff --git a/code/frontend/src/components/jobsList/MyJobsViewList.tsx b/code/frontend/src/components/jobsList/MyJobsViewList.tsx
index cd11802..b3771cf 100644
--- a/code/frontend/src/components/jobsList/MyJobsViewList.tsx
+++ b/code/frontend/src/components/jobsList/MyJobsViewList.tsx
@@ -160,8 +160,6 @@ const MyJobsViewList: React.FC<MyJobsViewListProps> = ({
         const updatedJobs =
           view === 'saved' ? await getMySaved() : await getMyApplied();
 
-        console.log(`Updated ${label} jobs list:`, updatedJobs);
-
         // Check if the job was actually deleted
         const jobStillExists = updatedJobs.some((job) => job.id === id);
         if (jobStillExists) {
diff --git a/code/frontend/src/components/jobsList/SavedJobApplyButton.tsx b/code/frontend/src/components/jobsList/SavedJobApplyButton.tsx
index aa326eb..8b854a6 100644
--- a/code/frontend/src/components/jobsList/SavedJobApplyButton.tsx
+++ b/code/frontend/src/components/jobsList/SavedJobApplyButton.tsx
@@ -203,9 +203,6 @@ export default function SavedJobApplyButton({
 
         // Add the alert to the container
         container.appendChild(alertDiv);
-
-        // Log to confirm alert is triggered
-        console.log('Job applied successfully, showing alert');
       } else {
         throw new Error('Apply did not succeed');
       }
diff --git a/code/frontend/src/components/jobsList/localStorageHelpers.ts b/code/frontend/src/components/jobsList/localStorageHelpers.ts
index 3245a00..d3938b9 100644
--- a/code/frontend/src/components/jobsList/localStorageHelpers.ts
+++ b/code/frontend/src/components/jobsList/localStorageHelpers.ts
@@ -10,7 +10,6 @@ export const clearSavedAppliedJobs = (): string => {
   localStorage.removeItem(SAVED_JOBS_KEY);
   localStorage.removeItem(APPLIED_JOBS_KEY);
 
-  console.log('Cleared saved and applied jobs from localStorage');
   return 'Cleared';
 };
 
diff --git a/code/frontend/src/components/loginAndRegistration/LoginForm.tsx b/code/frontend/src/components/loginAndRegistration/LoginForm.tsx
index d6fb51d..5f549b0 100644
--- a/code/frontend/src/components/loginAndRegistration/LoginForm.tsx
+++ b/code/frontend/src/components/loginAndRegistration/LoginForm.tsx
@@ -81,7 +81,6 @@ const LoginForm: React.FC<Props> = ({ onSubmit, showSubmitButton = false }) => {
 
     try {
       setLoading(true);
-      console.log('Login attempt with:', { email: values.username });
       const { token, raw } = await loginRequest(
         values.username.trim(),
         values.password
diff --git a/code/frontend/src/components/loginAndRegistration/RegisterForm.tsx b/code/frontend/src/components/loginAndRegistration/RegisterForm.tsx
index d112323..5a2c492 100644
--- a/code/frontend/src/components/loginAndRegistration/RegisterForm.tsx
+++ b/code/frontend/src/components/loginAndRegistration/RegisterForm.tsx
@@ -90,7 +90,6 @@ const RegisterForm: React.FC<Props> = ({
 
     try {
       setLoading(true);
-      console.log('Submitting registration with:', values);
 
       const payload: RegisterPayload = {
         name: values.name,
@@ -99,7 +98,6 @@ const RegisterForm: React.FC<Props> = ({
       };
 
       try {
-        console.log('Sending registration request with payload:', payload);
         const result = await registerRequest(payload);
         console.log('Registration successful:', result);
 
diff --git a/code/frontend/src/components/loginAndRegistration/validation.ts b/code/frontend/src/components/loginAndRegistration/validation.ts
index dfbb687..2da52b9 100644
--- a/code/frontend/src/components/loginAndRegistration/validation.ts
+++ b/code/frontend/src/components/loginAndRegistration/validation.ts
@@ -2,7 +2,7 @@
  AI-generated code: ~50% 
    - Tool: ChatGPT (link: https://chatgpt.com/share/68d43c9d-4d60-8006-a1a7-14ae49475a5a)
    - Functions/classes: isRequired, isEmail utility functions suggested by AI
- Human code (James Rose): ~50% 
+ Human code: ~50% 
    - Adjustments: simplified regex validation, added doc comments, integration testing with forms
  Framework-generated code: 0%
    - (Plain TypeScript helpers, no framework generation)
@@ -14,4 +14,4 @@ export const isRequired = (v: string) => v.trim().length > 0;
 
 // Simple regex check for email format
 export const isEmail = (v: string) =>
-    /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(v.trim());
\ No newline at end of file
+  /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(v.trim());
diff --git a/code/frontend/src/components/wrapper/Layout.css b/code/frontend/src/components/wrapper/Layout.css
new file mode 100644
index 0000000..ba42a12
--- /dev/null
+++ b/code/frontend/src/components/wrapper/Layout.css
@@ -0,0 +1,61 @@
+/* Layout.css
+Styles for both mobile and desktop layouts 
+Copilot-generated code: ~40%, Human code: ~60%
+*/
+
+#mobile-layout-container {
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+}
+
+#layout-aside {
+  width: 100%;
+}
+
+#layout-main {
+  flex: 1;
+  overflow: auto;
+}
+
+/* Mobile-specific styles using parent-child selectors */
+#mobile-layout-container #layout-aside > div {
+  /* Styles for layout-mobile-aside-internal */
+  flex-direction: row !important;
+  justify-content: space-between;
+  align-items: center;
+  padding: 7px !important;
+}
+
+#mobile-layout-container #layout-aside > div > div:first-child {
+  /* Styles for layout-mobile-aside-filters */
+  width: 70%;
+  margin: 1rem;
+}
+
+#layout-footer {
+  /* make sticky footer */
+  position: sticky;
+  bottom: 0;
+  width: 100%;
+}
+
+#desktop-layout-container {
+  transition: all 0.3s ease;
+}
+
+/* Desktop-specific styles to override mobile styles */
+#desktop-layout-container aside > div {
+  flex-direction: column !important;
+  padding: 0 !important;
+}
+
+#desktop-layout-container aside > div > div:first-child {
+  width: 100%;
+  margin: 0;
+}
+
+/* Utility classes for smooth transitions */
+.layout-transition {
+  transition: all 0.3s ease-in-out;
+}
diff --git a/code/frontend/src/components/wrapper/Layout.tsx b/code/frontend/src/components/wrapper/Layout.tsx
index b898a1c..5914b2c 100644
--- a/code/frontend/src/components/wrapper/Layout.tsx
+++ b/code/frontend/src/components/wrapper/Layout.tsx
@@ -2,7 +2,9 @@
 // Copilot assisted with this component
 // 60% AI-generated, 40% human refined
 
+import { useState, useEffect } from 'react';
 import type { ReactNode } from 'react';
+import './Layout.css';
 
 type LayoutProps = {
   header?: ReactNode;
@@ -21,8 +23,45 @@ export default function Layout({
 }: LayoutProps) {
   const main = mainContent ?? children;
 
-  return (
-    <div className="d-flex flex-column vh-100">
+  // State to track viewport width with SSR safety
+  const [isDesktop, setIsDesktop] = useState(false);
+  const [isMounted, setIsMounted] = useState(false);
+
+  // Effect to handle window resize and initialize
+  useEffect(() => {
+    setIsMounted(true);
+    setIsDesktop(window.innerWidth >= 992); // 992px is Bootstrap's lg breakpoint
+
+    const handleResize = () => {
+      setIsDesktop(window.innerWidth >= 992);
+    };
+
+    // Add event listener
+    window.addEventListener('resize', handleResize);
+
+    // Clean up
+    return () => {
+      window.removeEventListener('resize', handleResize);
+    };
+  }, []);
+
+  // Only conditionally render after component is mounted in client
+  // This prevents hydration errors due to SSR vs client-side differences
+  if (!isMounted) {
+    // Return a simple placeholder with same structure until client-side hydration
+    return (
+      <div id="mobile-layout-container">
+        {header}
+        <div id="layout-aside">{aside}</div>
+        <div id="layout-main">{main}</div>
+        <div id="layout-footer">{footer}</div>
+      </div>
+    );
+  }
+
+  // Once mounted, conditionally render based on viewport size
+  return isDesktop ? (
+    <div id="desktop-layout-container" className="d-flex flex-column vh-100">
       <header className="w-100 mb-0 bg-body">{header}</header>
       <main className="container-fluid w-100 flex-grow-1 d-flex min-h-0">
         <div className="row g-3 flex-grow-1 min-h-0 w-100">
@@ -32,7 +71,6 @@ export default function Layout({
               className="col-12 order-0 order-lg-2 col-lg-auto bg-body overflow-auto p-3"
               style={{ width: 'clamp(260px, 22vw, 320px)', minHeight: 0 }}
             >
-              <div className="fw-semibold mb-3">FILTERS</div>
               {aside}
             </aside>
           )}
@@ -49,5 +87,12 @@ export default function Layout({
 
       <footer className="w-100 mt-0 bg-body">{footer}</footer>
     </div>
+  ) : (
+    <div id="mobile-layout-container">
+      {header}
+      <div id="layout-aside">{aside}</div>
+      <div id="layout-main">{main}</div>
+      <div id="layout-footer">{footer}</div>
+    </div>
   );
 }
diff --git a/code/frontend/welcome-to-docker b/code/frontend/welcome-to-docker
deleted file mode 160000
index c8cd4b3..0000000
--- a/code/frontend/welcome-to-docker
+++ /dev/null
@@ -1 +0,0 @@
-Subproject commit c8cd4b31b2f1f06bb865fe7a0d328f2d85777353

From dc5a2d7edc51c489ac425310c77d2336f4a2b17d Mon Sep 17 00:00:00 2001
From: Pedro Ramirez <prlara23@bu.com>
Date: Fri, 10 Oct 2025 13:36:50 -0500
Subject: [PATCH 3/5] fix filters

---
 .../src/components/wrapper/Layout.css         | 32 ++++++++++++++++++
 .../src/components/wrapper/Layout.tsx         | 33 +++++++++++++++++--
 2 files changed, 63 insertions(+), 2 deletions(-)

diff --git a/code/frontend/src/components/wrapper/Layout.css b/code/frontend/src/components/wrapper/Layout.css
index ba42a12..d14cdfe 100644
--- a/code/frontend/src/components/wrapper/Layout.css
+++ b/code/frontend/src/components/wrapper/Layout.css
@@ -9,6 +9,38 @@ Copilot-generated code: ~40%, Human code: ~60%
   min-height: 100vh;
 }
 
+/* Filters dropdown styles */
+.filters-toggle-container {
+  padding: 0.5rem;
+  text-align: center;
+  background-color: #f8f9fa;
+  border-bottom: 1px solid #dee2e6;
+}
+
+.filters-toggle-button {
+  width: 90%;
+  max-width: 300px;
+}
+
+.mobile-filters-container {
+  display: flex;
+  flex-direction: column;
+  transition: max-height 0.3s ease-in-out, opacity 0.3s ease-in-out;
+  overflow: hidden;
+}
+
+.mobile-filters-container.open {
+  max-height: 1000px; /* Large enough to contain content */
+  opacity: 1;
+}
+
+.mobile-filters-container.closed {
+  max-height: 0;
+  opacity: 0;
+  padding: 0;
+  margin: 0;
+}
+
 #layout-aside {
   width: 100%;
 }
diff --git a/code/frontend/src/components/wrapper/Layout.tsx b/code/frontend/src/components/wrapper/Layout.tsx
index 5914b2c..08842f5 100644
--- a/code/frontend/src/components/wrapper/Layout.tsx
+++ b/code/frontend/src/components/wrapper/Layout.tsx
@@ -26,6 +26,7 @@ export default function Layout({
   // State to track viewport width with SSR safety
   const [isDesktop, setIsDesktop] = useState(false);
   const [isMounted, setIsMounted] = useState(false);
+  const [isFiltersOpen, setIsFiltersOpen] = useState(false);
 
   // Effect to handle window resize and initialize
   useEffect(() => {
@@ -52,7 +53,18 @@ export default function Layout({
     return (
       <div id="mobile-layout-container">
         {header}
-        <div id="layout-aside">{aside}</div>
+        <div className="filters-toggle-container">
+          <button
+            className="filters-toggle-button btn btn-sm btn-outline-secondary"
+            aria-expanded={false}
+            aria-controls="filters-dropdown"
+          >
+            Show Filters
+          </button>
+        </div>
+        <div id="filters-dropdown" className="mobile-filters-container closed">
+          <div id="layout-aside">{aside}</div>
+        </div>
         <div id="layout-main">{main}</div>
         <div id="layout-footer">{footer}</div>
       </div>
@@ -90,7 +102,24 @@ export default function Layout({
   ) : (
     <div id="mobile-layout-container">
       {header}
-      <div id="layout-aside">{aside}</div>
+      <div className="filters-toggle-container">
+        <button
+          className="filters-toggle-button btn btn-sm btn-outline-secondary"
+          onClick={() => setIsFiltersOpen(!isFiltersOpen)}
+          aria-expanded={isFiltersOpen}
+          aria-controls="filters-dropdown"
+        >
+          {isFiltersOpen ? 'Hide Filters' : 'Show Filters'}
+        </button>
+      </div>
+      <div
+        id="filters-dropdown"
+        className={`mobile-filters-container ${
+          isFiltersOpen ? 'open' : 'closed'
+        }`}
+      >
+        <div id="layout-aside">{aside}</div>
+      </div>
       <div id="layout-main">{main}</div>
       <div id="layout-footer">{footer}</div>
     </div>

From 2805e6c5f97da921e13fda9f96dec072a0497f8c Mon Sep 17 00:00:00 2001
From: Pedro Ramirez <prlara23@bu.com>
Date: Fri, 10 Oct 2025 14:05:50 -0500
Subject: [PATCH 4/5] fix tests

---
 .../src/components/buttons/MyJobs.css         |  25 ++++
 .../src/components/buttons/MyJobsButton.tsx   |  19 ++-
 code/frontend/src/tests/Aside.tdd.test.tsx    |   8 +-
 code/frontend/src/tests/Field.tdd.test.tsx    |  27 +++-
 .../frontend/src/tests/LoginForm.tdd.test.tsx |  77 +++++++++-
 .../src/tests/MyJobsButton.tdd.test.tsx       |  38 ++++-
 .../src/tests/RegisterForm.tdd.test.tsx       | 136 ++++++++++++++----
 .../src/tests/__mocks__/api/auth/register.ts  |  25 ++++
 code/frontend/src/tests/__mocks__/api/http.ts |  12 ++
 9 files changed, 312 insertions(+), 55 deletions(-)
 create mode 100644 code/frontend/src/components/buttons/MyJobs.css
 create mode 100644 code/frontend/src/tests/__mocks__/api/auth/register.ts
 create mode 100644 code/frontend/src/tests/__mocks__/api/http.ts

diff --git a/code/frontend/src/components/buttons/MyJobs.css b/code/frontend/src/components/buttons/MyJobs.css
new file mode 100644
index 0000000..5d679b5
--- /dev/null
+++ b/code/frontend/src/components/buttons/MyJobs.css
@@ -0,0 +1,25 @@
+/*
+ AI-generated code: 0%
+ Human code: 100%
+ Framework-generated code: 0%
+*/
+
+.my-jobs-button {
+  padding: 8px 16px;
+  background-color: #0d6efd;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  font-weight: 500;
+  transition: background-color 0.2s;
+}
+
+.my-jobs-button:hover {
+  background-color: #0b5ed7;
+}
+
+.my-jobs-button:focus {
+  outline: none;
+  box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5);
+}
diff --git a/code/frontend/src/components/buttons/MyJobsButton.tsx b/code/frontend/src/components/buttons/MyJobsButton.tsx
index 0306f01..6efe2b9 100644
--- a/code/frontend/src/components/buttons/MyJobsButton.tsx
+++ b/code/frontend/src/components/buttons/MyJobsButton.tsx
@@ -4,13 +4,26 @@
  Framework-generated code: 0%
 */
 
-
 import React from 'react';
 import './MyJobs.css';
 
-const MyJobsButton: React.FC = () => {
+interface MyJobsButtonProps {
+  onClick?: () => void;
+  className?: string;
+  ariaLabel?: string;
+}
+
+const MyJobsButton: React.FC<MyJobsButtonProps> = ({
+  onClick,
+  className = '',
+  ariaLabel = 'Navigate to My Jobs page',
+}) => {
   return (
-    <button className="my-jobs-button">
+    <button
+      className={`my-jobs-button ${className}`.trim()}
+      onClick={onClick}
+      aria-label={ariaLabel}
+    >
       My Jobs
     </button>
   );
diff --git a/code/frontend/src/tests/Aside.tdd.test.tsx b/code/frontend/src/tests/Aside.tdd.test.tsx
index 56dfe65..b81aaf2 100644
--- a/code/frontend/src/tests/Aside.tdd.test.tsx
+++ b/code/frontend/src/tests/Aside.tdd.test.tsx
@@ -16,11 +16,10 @@ jest.mock('react-router-dom', () => {
   const actual = jest.requireActual('react-router-dom');
   return {
     ...actual,
-    useNavigate: () => mockNavigate
+    useNavigate: () => mockNavigate,
   };
 });
 
-
 test('shows "My Jobs" on non-MyJobs routes and navigates to /myJobs', () => {
   render(
     <MemoryRouter initialEntries={['/content']}>
@@ -34,8 +33,7 @@ test('shows "My Jobs" on non-MyJobs routes and navigates to /myJobs', () => {
   expect(mockNavigate).toHaveBeenCalledWith('/myJobs');
 });
 
-
-test('shows "Home" on /myJobs and navigates to /content', () => {
+test('shows "Jobs List" on /myJobs and navigates to /content', () => {
   mockNavigate.mockClear();
   render(
     <MemoryRouter initialEntries={['/myJobs']}>
@@ -44,7 +42,7 @@ test('shows "Home" on /myJobs and navigates to /content', () => {
       </ThemeProvider>
     </MemoryRouter>
   );
-  const btn = screen.getByRole('button', { name: /home/i });
+  const btn = screen.getByRole('button', { name: /jobs list/i });
   fireEvent.click(btn);
   expect(mockNavigate).toHaveBeenCalledWith('/content');
 });
diff --git a/code/frontend/src/tests/Field.tdd.test.tsx b/code/frontend/src/tests/Field.tdd.test.tsx
index 42a59f0..6567be5 100644
--- a/code/frontend/src/tests/Field.tdd.test.tsx
+++ b/code/frontend/src/tests/Field.tdd.test.tsx
@@ -1,4 +1,4 @@
-import { render, screen, fireEvent } from '@testing-library/react';
+import { render, screen, fireEvent, act } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import Field from '../components/asideAndToggler/Field';
 
@@ -13,18 +13,33 @@ test('opens field menu and selects an option, calling onChange', () => {
   const onChange = jest.fn();
   render(<Field onChange={onChange} />);
 
+  // Dispatch the departments event to simulate available departments
+  act(() => {
+    window.dispatchEvent(
+      new CustomEvent('jobs:departments', {
+        detail: {
+          departments: ['Engineering', 'Marketing', 'Sales'],
+          selectedDepartment: null,
+        },
+      })
+    );
+  });
 
   // Open
   const openBtn = screen.getByRole('button', { name: /field/i });
-  fireEvent.click(openBtn);
-
+  act(() => {
+    fireEvent.click(openBtn);
+  });
 
   // Choose "Engineering"
   const opt = screen.getByRole('option', { name: /engineering/i });
-  fireEvent.click(opt);
-
+  act(() => {
+    fireEvent.click(opt);
+  });
 
   expect(onChange).toHaveBeenCalledWith('Engineering');
   // Button label should now reflect the selection
-  expect(screen.getByRole('button', { name: /engineering/i })).toBeInTheDocument();
+  expect(
+    screen.getByRole('button', { name: /engineering/i })
+  ).toBeInTheDocument();
 });
diff --git a/code/frontend/src/tests/LoginForm.tdd.test.tsx b/code/frontend/src/tests/LoginForm.tdd.test.tsx
index fcbca67..f861eb1 100644
--- a/code/frontend/src/tests/LoginForm.tdd.test.tsx
+++ b/code/frontend/src/tests/LoginForm.tdd.test.tsx
@@ -10,11 +10,9 @@ import LoginForm from '../components/loginAndRegistration/LoginForm';
 import { ThemeProvider } from '../theme/ThemeContext';
 
 // Mock the API helper
+const loginMock = jest.fn();
 jest.mock('../api/auth/login', () => ({
-  login: jest.fn(async (_username: string, _password: string) => ({
-    token: 'fake-jwt',
-    raw: { success: true, result: { jwt: 'fake-jwt' } },
-  })),
+  login: () => loginMock(),
 }));
 
 // Mock useNavigate to observe navigation
@@ -28,12 +26,31 @@ jest.mock('react-router-dom', () => {
 });
 
 describe('LoginForm (TDD)', () => {
+  // Mock localStorage
+  const localStorageMock = {
+    getItem: jest.fn(),
+    setItem: jest.fn(),
+    removeItem: jest.fn(),
+    clear: jest.fn(),
+  };
+  Object.defineProperty(window, 'localStorage', { value: localStorageMock });
+
   beforeEach(() => {
     mockedNavigate.mockClear();
-    localStorage.clear();
+    loginMock.mockClear();
+    localStorageMock.clear.mockClear();
+    localStorageMock.setItem.mockClear();
+    localStorageMock.getItem.mockClear();
+    localStorageMock.removeItem.mockClear();
   });
 
   it('logs in with username/password, saves jwt, and navigates to /content', async () => {
+    // Setup the mock return value
+    loginMock.mockResolvedValueOnce({
+      token: 'fake-jwt',
+      raw: { success: true, result: { jwt: 'fake-jwt' } },
+    });
+
     render(
       <MemoryRouter>
         <ThemeProvider>
@@ -51,10 +68,58 @@ describe('LoginForm (TDD)', () => {
 
     // Assert jwt saved
     await waitFor(() => {
-      expect(localStorage.getItem('jwt')).toBe('fake-jwt');
+      expect(localStorageMock.setItem).toHaveBeenCalledWith('jwt', 'fake-jwt');
     });
 
     // Navigated to /content
     expect(mockedNavigate).toHaveBeenCalledWith('/content', { replace: true });
   });
+
+  it('shows validation errors when fields are empty', async () => {
+    render(
+      <MemoryRouter>
+        <ThemeProvider>
+          <LoginForm showSubmitButton />
+        </ThemeProvider>
+      </MemoryRouter>
+    );
+
+    // Submit without filling fields
+    await userEvent.click(screen.getByRole('button', { name: /login/i }));
+
+    // Check for validation error messages
+    expect(screen.getByText(/username is required/i)).toBeInTheDocument();
+    expect(screen.getByText(/password is required/i)).toBeInTheDocument();
+
+    // Verify login was not called
+    expect(loginMock).not.toHaveBeenCalled();
+  });
+
+  it('shows error message when login fails', async () => {
+    // Setup the mock to reject
+    loginMock.mockRejectedValueOnce(new Error('Invalid credentials'));
+
+    render(
+      <MemoryRouter>
+        <ThemeProvider>
+          <LoginForm showSubmitButton />
+        </ThemeProvider>
+      </MemoryRouter>
+    );
+
+    // Fill username and password
+    await userEvent.type(screen.getByLabelText(/email address/i), 'pedrotest');
+    await userEvent.type(screen.getByLabelText(/password/i), 'wrongpassword');
+
+    // Submit
+    await userEvent.click(screen.getByRole('button', { name: /login/i }));
+
+    // Check for error message
+    await waitFor(() => {
+      expect(screen.getByText(/Invalid credentials/i)).toBeInTheDocument();
+    });
+
+    // Verify we didn't navigate
+    expect(mockedNavigate).not.toHaveBeenCalled();
+  });
 });
diff --git a/code/frontend/src/tests/MyJobsButton.tdd.test.tsx b/code/frontend/src/tests/MyJobsButton.tdd.test.tsx
index 479fa2f..3b7dbe2 100644
--- a/code/frontend/src/tests/MyJobsButton.tdd.test.tsx
+++ b/code/frontend/src/tests/MyJobsButton.tdd.test.tsx
@@ -1,4 +1,4 @@
-import { render, screen } from '@testing-library/react';
+import { render, screen, fireEvent } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import MyJobsButton from '../components/buttons/MyJobsButton';
 
@@ -8,9 +8,35 @@ Human code(James): 25% (assertions for styling and rendering)
 Framework-generated code: 5% (React Testing Library, Jest DOM APIs)
 */
 
-test('renders My Jobs button with correct styling class', () => {
-  render(<MyJobsButton />);
-  const btn = screen.getByRole('button', { name: /my jobs/i });
-  expect(btn).toBeInTheDocument();
-  expect(btn).toHaveClass('my-jobs-button');
+describe('MyJobsButton', () => {
+  test('renders with correct default styling class', () => {
+    render(<MyJobsButton />);
+    const btn = screen.getByRole('button', { name: /my jobs/i });
+    expect(btn).toBeInTheDocument();
+    expect(btn).toHaveClass('my-jobs-button');
+  });
+
+  test('calls onClick handler when clicked', () => {
+    const handleClick = jest.fn();
+    render(<MyJobsButton onClick={handleClick} />);
+    const btn = screen.getByRole('button', { name: /my jobs/i });
+    fireEvent.click(btn);
+    expect(handleClick).toHaveBeenCalledTimes(1);
+  });
+
+  test('applies additional CSS classes from className prop', () => {
+    render(<MyJobsButton className="test-class another-class" />);
+    const btn = screen.getByRole('button', { name: /my jobs/i });
+    expect(btn).toHaveClass('my-jobs-button');
+    expect(btn).toHaveClass('test-class');
+    expect(btn).toHaveClass('another-class');
+  });
+
+  test('uses custom aria-label when provided', () => {
+    render(<MyJobsButton ariaLabel="Custom accessibility label" />);
+    const btn = screen.getByRole('button', {
+      name: /custom accessibility label/i,
+    });
+    expect(btn).toBeInTheDocument();
+  });
 });
diff --git a/code/frontend/src/tests/RegisterForm.tdd.test.tsx b/code/frontend/src/tests/RegisterForm.tdd.test.tsx
index 46baee7..3090b97 100644
--- a/code/frontend/src/tests/RegisterForm.tdd.test.tsx
+++ b/code/frontend/src/tests/RegisterForm.tdd.test.tsx
@@ -1,9 +1,41 @@
-import { render, screen, fireEvent } from '@testing-library/react';
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import RegisterForm from '../components/loginAndRegistration/RegisterForm';
 import { MemoryRouter } from 'react-router-dom';
 import { ThemeProvider } from '../theme/ThemeContext';
 
+// Mock the HTTP module to avoid Vite import.meta issues
+jest.mock('../api/http', () => ({
+  API_BASE: 'http://localhost:8080/api',
+  postJson: jest.fn(),
+  stripEnvelope: jest.fn((data) => data.result),
+}));
+
+// Mock the register function
+const registerMock = jest.fn().mockResolvedValue({
+  user: {
+    id: 1,
+    username: 'james@example.com',
+    email: 'james@example.com',
+    firstName: 'James',
+    lastName: '',
+    userType: 'user',
+  },
+});
+jest.mock('../api/auth/register', () => ({
+  register: (payload: any) => registerMock(payload),
+}));
+
+// Mock navigate
+const mockedNavigate = jest.fn();
+jest.mock('react-router-dom', () => {
+  const actual = jest.requireActual('react-router-dom');
+  return {
+    ...actual,
+    useNavigate: () => mockedNavigate,
+  };
+});
+
 /*
 AI-generated code: 70% (tool: ChatGPT, adapted; helper fill function, structure of test case)
 Human code: 25% (custom assertion flow, expected form submission payloads)
@@ -15,40 +47,86 @@ function fill(input: HTMLElement, value: string) {
   fireEvent.blur(input);
 }
 
+describe('RegisterForm', () => {
+  beforeEach(() => {
+    mockedNavigate.mockClear();
+    registerMock.mockClear();
+
+    // Mock setTimeout to execute immediately
+    jest.useFakeTimers();
+  });
+
+  afterEach(() => {
+    jest.useRealTimers();
+  });
 
-test('requires name, email, password; submits when valid', () => {
-  const onSubmit = jest.fn();
-  render(
-    <MemoryRouter>
-      <ThemeProvider>
-        <RegisterForm onSubmit={onSubmit} showSubmitButton />
-      </ThemeProvider>
-    </MemoryRouter>
-  );
+  test('requires name, email, password; submits when valid', async () => {
+    const onSubmit = jest.fn();
+    render(
+      <MemoryRouter>
+        <ThemeProvider>
+          <RegisterForm onSubmit={onSubmit} showSubmitButton />
+        </ThemeProvider>
+      </MemoryRouter>
+    );
 
+    const name = screen.getByLabelText(/name/i);
+    const email = screen.getByLabelText(/^email$/i);
+    const password = screen.getByLabelText(/password/i);
 
-  const name = screen.getByLabelText(/name/i);
-  const email = screen.getByLabelText(/^email$/i);
-  const password = screen.getByLabelText(/password/i);
+    // Trigger errors
+    fireEvent.blur(name);
+    fireEvent.blur(email);
+    fireEvent.blur(password);
+    expect(screen.getByText(/name is required/i)).toBeInTheDocument();
+    expect(screen.getByText(/email is required/i)).toBeInTheDocument();
+    expect(screen.getByText(/password is required/i)).toBeInTheDocument();
 
+    // Fill valid values and submit
+    fill(name, 'James');
+    fill(email, 'james@example.com');
+    fill(password, 'secret123');
+    fireEvent.click(screen.getByRole('button', { name: /register/i }));
 
-  // Trigger errors
-  fireEvent.blur(name);
-  fireEvent.blur(email);
-  fireEvent.blur(password);
-  expect(screen.getByText(/name is required/i)).toBeInTheDocument();
-  expect(screen.getByText(/email is required/i)).toBeInTheDocument();
-  expect(screen.getByText(/password is required/i)).toBeInTheDocument();
+    expect(onSubmit).toHaveBeenCalledWith({
+      name: 'James',
+      email: 'james@example.com',
+      password: 'secret123',
+    });
+  });
 
+  test('calls register API and navigates on successful registration', async () => {
+    render(
+      <MemoryRouter>
+        <ThemeProvider>
+          <RegisterForm showSubmitButton />
+        </ThemeProvider>
+      </MemoryRouter>
+    );
 
-  // Fill valid values and submit
-  fill(name, 'James');
-  fill(email, 'james@example.com');
-  fill(password, 'secret123');
-  fireEvent.click(screen.getByRole('button', { name: /register/i }));
-  expect(onSubmit).toHaveBeenCalledWith({
-    name: 'James',
-    email: 'james@example.com',
-    password: 'secret123'
+    // Fill in the form with valid data
+    fill(screen.getByLabelText(/name/i), 'James Smith');
+    fill(screen.getByLabelText(/^email$/i), 'james@example.com');
+    fill(screen.getByLabelText(/password/i), 'password123');
+
+    // Submit the form
+    fireEvent.click(screen.getByRole('button', { name: /register/i }));
+
+    // Check the API was called with the correct data
+    await waitFor(() => {
+      expect(registerMock).toHaveBeenCalledWith({
+        name: 'James Smith',
+        email: 'james@example.com',
+        password: 'password123',
+      });
+    });
+
+    // Advance timers to trigger the navigation
+    jest.runAllTimers();
+
+    // Check navigation happened
+    await waitFor(() => {
+      expect(mockedNavigate).toHaveBeenCalledWith('/login', expect.anything());
+    });
   });
 });
diff --git a/code/frontend/src/tests/__mocks__/api/auth/register.ts b/code/frontend/src/tests/__mocks__/api/auth/register.ts
new file mode 100644
index 0000000..0718411
--- /dev/null
+++ b/code/frontend/src/tests/__mocks__/api/auth/register.ts
@@ -0,0 +1,25 @@
+// Mock for register.ts
+import type {
+  RegisterPayload,
+  RegisteredUser,
+} from '../../../../api/auth/register';
+
+export const register = jest.fn(
+  async (
+    payload: RegisterPayload
+  ): Promise<{ user: RegisteredUser; location?: string; raw?: any }> => {
+    return {
+      user: {
+        id: 1,
+        username: payload.email,
+        email: payload.email,
+        firstName: payload.name.split(' ')[0],
+        lastName: payload.name.split(' ')[1] || '',
+        userType: 'user',
+        isActive: true,
+      },
+      location: '/users/1',
+      raw: { success: true },
+    };
+  }
+);
diff --git a/code/frontend/src/tests/__mocks__/api/http.ts b/code/frontend/src/tests/__mocks__/api/http.ts
new file mode 100644
index 0000000..82b6653
--- /dev/null
+++ b/code/frontend/src/tests/__mocks__/api/http.ts
@@ -0,0 +1,12 @@
+// Mock for http.ts
+export const API_BASE = 'http://localhost:8080/api';
+
+export const postJson = jest.fn(async () => ({
+  data: {
+    success: true,
+    result: { user: { id: 1, username: 'test', email: 'test@example.com' } },
+  },
+  response: { headers: new Map() },
+}));
+
+export const stripEnvelope = jest.fn((data: any) => data.result);

From 3c030a5ade60953a6bffb52859643e7f952d706e Mon Sep 17 00:00:00 2001
From: Yongxiang Chen <yongxic1@bu.edu>
Date: Fri, 10 Oct 2025 13:29:03 -0400
Subject: [PATCH 5/5] Add tests for Type, ThemeToggler, ApplyJobButton,
 SaveJobButton, SavedJobApplyButton

---
 .../src/tests/ApplyJobButton.tdd.test.tsx     |  98 +++++++++++++++
 .../src/tests/SaveJobButton.tdd.test.tsx      |  97 +++++++++++++++
 .../tests/SavedJobApplyButton.tdd.test.tsx    | 111 +++++++++++++++++
 code/frontend/src/tests/Type.tdd.test.tsx     | 112 ++++++++++++++++++
 .../src/tests/themeToggler.tdd.test.tsx       |  55 +++++++++
 5 files changed, 473 insertions(+)
 create mode 100644 code/frontend/src/tests/ApplyJobButton.tdd.test.tsx
 create mode 100644 code/frontend/src/tests/SaveJobButton.tdd.test.tsx
 create mode 100644 code/frontend/src/tests/SavedJobApplyButton.tdd.test.tsx
 create mode 100644 code/frontend/src/tests/Type.tdd.test.tsx
 create mode 100644 code/frontend/src/tests/themeToggler.tdd.test.tsx

diff --git a/code/frontend/src/tests/ApplyJobButton.tdd.test.tsx b/code/frontend/src/tests/ApplyJobButton.tdd.test.tsx
new file mode 100644
index 0000000..05da3da
--- /dev/null
+++ b/code/frontend/src/tests/ApplyJobButton.tdd.test.tsx
@@ -0,0 +1,98 @@
+// src/tests/ApplyJobButton.tdd.test.tsx
+// Purpose: Verify ApplyJobButton’s UI states, user interactions, and API/localStorage behavior
+// 80% AI-generated, 20% human refined
+
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import ApplyJobButton from '../components/jobsList/ApplyJobButton';
+import { applyJob } from '../api/savedAndApplied/savedAndApplied';
+import type { Job } from '../types/job';
+
+// Mock the applyJob API
+jest.mock('../api/savedAndApplied/savedAndApplied', () => ({
+  applyJob: jest.fn(),
+}));
+
+// Mock localStorage helpers without importing (avoids TS unused import error)
+jest.mock('../components/jobsList/localStorageHelpers', () => ({
+  isJobApplied: jest.fn(() => false),
+  toggleAppliedJobId: jest.fn(() => true),
+}));
+
+describe('ApplyJobButton', () => {
+  // Mock window.open to avoid jsdom "Not implemented" error
+  beforeAll(() => {
+    window.open = jest.fn();
+  });
+
+  const mockJob: Job = {
+    _id: '1',
+    title: 'Frontend Developer',
+    url: 'https://example.com/apply',
+    createdAt: '',
+    department: 'Engineering',
+    descriptionBreakdown: {
+      employmentType: 'Full-time',
+      keywords: [],
+      oneSentenceJobSummary: 'Develop front-end apps',
+      salaryRangeMaxYearly: 120000,
+      salaryRangeMinYearly: 80000,
+      skillRequirements: ['React', 'TypeScript'],
+      workModel: 'Remote',
+    },
+    locationAddress: '123 Main St',
+    locationCoordinates: { lat: 0, lon: 0 },
+    owner: {
+      _id: 'o1',
+      companyName: 'Tech Co',
+      benefits: { title: 'Benefits', benefits: [] },
+      evaluatedSize: null,
+      funding: 'Series A',
+      isClaimed: true,
+      locationAddress: '123 Main St',
+      photo: '',
+      rating: '5',
+      slug: 'tech-co',
+      teamSize: 50,
+    },
+    seniority: 'Mid',
+    skills_suggest: ['React', 'TypeScript'],
+    type: 'Job',
+    updatedAt: '',
+  };
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('renders Apply button initially', () => {
+    render(<ApplyJobButton job={mockJob} detailed={true} />);
+    expect(screen.getByRole('button', { name: /apply/i })).toBeInTheDocument();
+  });
+
+  it('handles successful apply flow', async () => {
+    (applyJob as jest.Mock).mockResolvedValue({ success: true });
+
+    render(<ApplyJobButton job={mockJob} detailed={true} />);
+    const btn = screen.getByRole('button', { name: /apply/i });
+    fireEvent.click(btn);
+
+    await waitFor(() => {
+      expect(applyJob).toHaveBeenCalledWith(mockJob);
+      expect(screen.getByRole('button', { name: /applied/i })).toBeInTheDocument();
+      expect(screen.getByText(/successfully applied/i)).toBeInTheDocument();
+    });
+  });
+
+  it('handles failed apply flow', async () => {
+    (applyJob as jest.Mock).mockRejectedValue(new Error('Network fail'));
+
+    render(<ApplyJobButton job={mockJob} detailed={true} />);
+    const btn = screen.getByRole('button', { name: /apply/i });
+    fireEvent.click(btn);
+
+    await waitFor(() => {
+      expect(applyJob).toHaveBeenCalled();
+      expect(screen.getByText(/network fail/i)).toBeInTheDocument();
+    });
+  });
+});
diff --git a/code/frontend/src/tests/SaveJobButton.tdd.test.tsx b/code/frontend/src/tests/SaveJobButton.tdd.test.tsx
new file mode 100644
index 0000000..5fc49ee
--- /dev/null
+++ b/code/frontend/src/tests/SaveJobButton.tdd.test.tsx
@@ -0,0 +1,97 @@
+// SaveJobButton.test.tsx
+// Purpose: Verify SaveJobButton’s UI states and API/localStorage interactions
+// 80% AI-generated, 20% human refined
+
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import SaveJobButton from '../components/jobsList/SaveJobButton';
+import { saveJob } from '../api/savedAndApplied/savedAndApplied';
+import {
+  isJobSaved,
+  toggleSavedJobId,
+} from '../components/jobsList/localStorageHelpers';
+
+jest.mock('../api/savedAndApplied/savedAndApplied', () => ({
+  saveJob: jest.fn(),
+}));
+
+jest.mock('../components/jobsList/localStorageHelpers', () => ({
+  isJobSaved: jest.fn(),
+  toggleSavedJobId: jest.fn(),
+}));
+
+describe('SaveJobButton', () => {
+  const job = { _id: 'abc123', title: 'Frontend Engineer' } as any;
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('renders Save Job initially when not saved', () => {
+    (isJobSaved as jest.Mock).mockReturnValue(false);
+    render(<SaveJobButton job={job} detailed={true} />);
+    expect(screen.getByRole('button', { name: /save job/i })).toBeInTheDocument();
+  });
+
+  it('renders Saved when job is already saved', () => {
+    (isJobSaved as jest.Mock).mockReturnValue(true);
+    render(<SaveJobButton job={job} detailed={true} />);
+    expect(screen.getByRole('button', { name: /saved/i })).toBeInTheDocument();
+  });
+
+  it('disables button when detailed=false', () => {
+    (isJobSaved as jest.Mock).mockReturnValue(false);
+    render(<SaveJobButton job={job} detailed={false} />);
+    const btn = screen.getByRole('button');
+    expect(btn).toBeDisabled();
+    expect(btn).toHaveAttribute('title', 'Open the detailed view to save this job');
+  });
+
+  it('handles successful save flow', async () => {
+    (isJobSaved as jest.Mock).mockReturnValue(false);
+    (saveJob as jest.Mock).mockResolvedValue({ success: true });
+    (toggleSavedJobId as jest.Mock).mockReturnValue(true);
+
+    render(<SaveJobButton job={job} detailed={true} />);
+
+    const btn = screen.getByRole('button', { name: /save job/i });
+    fireEvent.click(btn);
+
+    // Should change to Saving…
+    expect(await screen.findByText(/saving/i)).toBeInTheDocument();
+
+    await waitFor(() => {
+      expect(saveJob).toHaveBeenCalledWith(job);
+      expect(toggleSavedJobId).toHaveBeenCalledWith('abc123');
+      expect(screen.getByText(/saved/i)).toBeInTheDocument();
+    });
+  });
+
+  it('handles failed save flow gracefully', async () => {
+    (isJobSaved as jest.Mock).mockReturnValue(false);
+    (saveJob as jest.Mock).mockRejectedValue(new Error('Network fail'));
+
+    render(<SaveJobButton job={job} detailed={true} />);
+
+    const btn = screen.getByRole('button', { name: /save job/i });
+    fireEvent.click(btn);
+
+    await waitFor(() => {
+      expect(saveJob).toHaveBeenCalled();
+      expect(screen.getByText(/network fail/i)).toBeInTheDocument();
+    });
+  });
+
+  it('unsaves when already saved and clicked again', async () => {
+    (isJobSaved as jest.Mock).mockReturnValue(true);
+    (toggleSavedJobId as jest.Mock).mockReturnValue(false);
+
+    render(<SaveJobButton job={job} detailed={true} />);
+    const btn = screen.getByRole('button', { name: /saved/i });
+    fireEvent.click(btn);
+
+    await waitFor(() => {
+      expect(toggleSavedJobId).toHaveBeenCalledWith('abc123');
+      expect(screen.getByRole('button', { name: /save job/i })).toBeInTheDocument();
+    });
+  });
+});
\ No newline at end of file
diff --git a/code/frontend/src/tests/SavedJobApplyButton.tdd.test.tsx b/code/frontend/src/tests/SavedJobApplyButton.tdd.test.tsx
new file mode 100644
index 0000000..7cbbc05
--- /dev/null
+++ b/code/frontend/src/tests/SavedJobApplyButton.tdd.test.tsx
@@ -0,0 +1,111 @@
+// src/tests/SavedJobApplyButton.tdd.test.tsx
+// Purpose: Verify SavedJobApplyButton’s UI states, application flow, and API interactions
+// 80% AI-generated, 20% human refined
+
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import SavedJobApplyButton from '../components/jobsList/SavedJobApplyButton';
+import { applyJob } from '../api/savedAndApplied/savedAndApplied';
+import { deleteSavedJob } from '../api/pages/myJobs';
+import type { SavedAppliedJob } from '../api/pages/myJobs';
+
+jest.mock('../api/savedAndApplied/savedAndApplied', () => ({
+  applyJob: jest.fn(),
+}));
+
+jest.mock('../api/pages/myJobs', () => ({
+  deleteSavedJob: jest.fn(),
+}));
+
+describe('SavedJobApplyButton', () => {
+  const mockJob: SavedAppliedJob = {
+    id: 1,
+    title: 'Frontend Developer',
+    company: 'Tech Co',
+    description: 'Build awesome UI',
+    department: 'Engineering',
+    url: 'http://example.com/job/frontend',
+    location: '123 Tech St',
+    locationAddress: '123 Tech St',
+    locationCoordinates: { lat: 0, lon: 0 },
+    salaryMin: 90000,
+    salaryMax: 120000,
+    employmentType: 'Full-time',
+    requirements: 'React,TypeScript',
+    type: 'Software',
+    seniority: 'Mid-level',
+    createdAt: new Date().toISOString(),
+    updatedAt: new Date().toISOString(),
+    benefits: 'Gym,Insurance',
+    // 修正类型
+    postedBy: 123,
+    applicationDeadline: Date.now() + 7 * 24 * 60 * 60 * 1000, // 7天后 timestamp
+  };
+
+  beforeAll(() => {
+    // mock window.open，避免 jsdom 报错
+    window.open = jest.fn();
+  });
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('renders Apply Now button initially', () => {
+    render(<SavedJobApplyButton job={mockJob} detailed={true} />);
+    expect(screen.getByRole('button', { name: /Apply Now/i })).toBeInTheDocument();
+  });
+
+  it('disables button if detailed is false', () => {
+    render(<SavedJobApplyButton job={mockJob} detailed={false} />);
+    const btn = screen.getByRole('button', { name: /Apply Now/i });
+    expect(btn).toBeDisabled();
+  });
+
+  it('calls applyJob and deleteSavedJob on successful apply', async () => {
+    (applyJob as jest.Mock).mockResolvedValue({ success: true });
+    (deleteSavedJob as jest.Mock).mockResolvedValue({ success: true });
+    const onAppliedMock = jest.fn();
+
+    render(
+      <SavedJobApplyButton job={mockJob} detailed={true} onApplied={onAppliedMock} />
+    );
+    const btn = screen.getByRole('button', { name: /Apply Now/i });
+    fireEvent.click(btn);
+
+    await waitFor(() => {
+      expect(applyJob).toHaveBeenCalled();
+      expect(deleteSavedJob).toHaveBeenCalledWith(mockJob.id);
+      expect(onAppliedMock).toHaveBeenCalledWith(mockJob.id);
+      expect(screen.getByText(/Applied Successfully/i)).toBeInTheDocument();
+    });
+  });
+
+  it('shows error message when applyJob fails', async () => {
+    (applyJob as jest.Mock).mockRejectedValue(new Error('Network fail'));
+    render(<SavedJobApplyButton job={mockJob} detailed={true} />);
+    const btn = screen.getByRole('button', { name: /Apply Now/i });
+    fireEvent.click(btn);
+
+    await waitFor(() => {
+      expect(applyJob).toHaveBeenCalled();
+      expect(screen.getByText(/Try Again/i)).toBeInTheDocument();
+      expect(screen.getByText(/Network fail/i)).toBeInTheDocument();
+    });
+  });
+
+  it('opens new tab when job has URL', async () => {
+    (applyJob as jest.Mock).mockResolvedValue({ success: true });
+
+    render(<SavedJobApplyButton job={mockJob} detailed={true} />);
+    const btn = screen.getByRole('button', { name: /Apply Now/i });
+    fireEvent.click(btn);
+
+    await waitFor(() => {
+      expect(window.open).toHaveBeenCalledWith(
+        mockJob.url,
+        '_blank',
+        'noopener,noreferrer'
+      );
+    });
+  });
+});
\ No newline at end of file
diff --git a/code/frontend/src/tests/Type.tdd.test.tsx b/code/frontend/src/tests/Type.tdd.test.tsx
new file mode 100644
index 0000000..d717ea6
--- /dev/null
+++ b/code/frontend/src/tests/Type.tdd.test.tsx
@@ -0,0 +1,112 @@
+// Type.tdd.test.tsx
+// Verifies open/close behavior, dynamic type population, selection logic, and event dispatching.
+// 80% AI-generated, 20% human refined
+
+import { render, screen, fireEvent, act } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import Type from '../components/asideAndToggler/Type.tsx';
+
+describe('Type component', () => {
+  beforeEach(() => {
+    // Clear listeners and any custom events between tests
+    jest.restoreAllMocks();
+  });
+
+  it('renders button with default label', () => {
+    render(<Type />);
+    expect(screen.getByRole('button', { name: /type/i })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: /type/i })).toHaveTextContent('Type');
+  });
+
+  it('opens and closes dropdown panel when clicked', async () => {
+    render(<Type />);
+    const button = screen.getByRole('button', { name: /type/i });
+
+    await userEvent.click(button);
+    expect(await screen.findByRole('dialog', { name: /type filter/i })).toBeInTheDocument();
+
+    // Close via X button
+    await userEvent.click(screen.getByLabelText(/close/i));
+    expect(screen.queryByRole('dialog', { name: /type filter/i })).not.toBeInTheDocument();
+  });
+
+  it('closes when clicking outside', async () => {
+    render(<Type />);
+    const button = screen.getByRole('button', { name: /type/i });
+
+    await userEvent.click(button);
+    const panel = await screen.findByRole('dialog', { name: /type filter/i });
+    expect(panel).toBeInTheDocument();
+
+    act(() => {
+      fireEvent.mouseDown(document.body); // simulate click outside
+    });
+    expect(screen.queryByRole('dialog', { name: /type filter/i })).not.toBeInTheDocument();
+  });
+
+  it('renders dynamic types from jobs:types event', async () => {
+    render(<Type />);
+    const button = screen.getByRole('button', { name: /type/i });
+
+    // Dispatch event before open — should sync value and list
+    act(() => {
+      const evt = new CustomEvent('jobs:types', {
+        detail: { types: ['Full-time', 'Internship'], selectedType: null },
+      });
+      window.dispatchEvent(evt);
+    });
+
+    await userEvent.click(button);
+    expect(await screen.findByRole('dialog', { name: /type filter/i })).toBeInTheDocument();
+    expect(screen.getByRole('option', { name: /full-time/i })).toBeInTheDocument();
+    expect(screen.getByRole('option', { name: /internship/i })).toBeInTheDocument();
+  });
+
+  it('calls onChange and dispatches jobs:typeSelect event when choosing a type', async () => {
+    const mockOnChange = jest.fn();
+    const spyDispatch = jest.spyOn(window, 'dispatchEvent');
+
+    render(<Type onChange={mockOnChange} />);
+    const button = screen.getByRole('button', { name: /type/i });
+
+    act(() => {
+      const evt = new CustomEvent('jobs:types', {
+        detail: { types: ['Contract', 'Remote'], selectedType: null },
+      });
+      window.dispatchEvent(evt);
+    });
+
+    await userEvent.click(button);
+    const option = await screen.findByRole('option', { name: /contract/i });
+    await userEvent.click(option);
+
+    expect(mockOnChange).toHaveBeenCalledWith('Contract');
+    expect(spyDispatch).toHaveBeenCalledWith(
+      expect.objectContaining({
+        type: 'jobs:typeSelect',
+        detail: expect.objectContaining({ value: 'Contract' }),
+      })
+    );
+
+    // After choosing, panel should close
+    expect(screen.queryByRole('dialog', { name: /type filter/i })).not.toBeInTheDocument();
+  });
+
+  it('choosing "Any type" calls onChange with null', async () => {
+    const mockOnChange = jest.fn();
+    render(<Type onChange={mockOnChange} />);
+
+    await userEvent.click(screen.getByRole('button', { name: /type/i }));
+    const anyOption = await screen.findByRole('option', { name: /any type/i });
+    await userEvent.click(anyOption);
+
+    expect(mockOnChange).toHaveBeenCalledWith(null);
+  });
+
+  it('shows "No types detected yet…" when there are no types', async () => {
+    render(<Type />);
+    await userEvent.click(screen.getByRole('button', { name: /type/i }));
+
+    expect(await screen.findByText(/no types detected yet/i)).toBeInTheDocument();
+  });
+});
diff --git a/code/frontend/src/tests/themeToggler.tdd.test.tsx b/code/frontend/src/tests/themeToggler.tdd.test.tsx
new file mode 100644
index 0000000..dc04b72
--- /dev/null
+++ b/code/frontend/src/tests/themeToggler.tdd.test.tsx
@@ -0,0 +1,55 @@
+// src/tests/themeToggler.tdd.test.tsx
+// 80% AI-generated, 20% human refined
+
+import { render, screen, fireEvent } from '@testing-library/react';
+import ThemeToggler from '../components/asideAndToggler/themeToggler';
+import { ThemeProvider } from '../theme/ThemeContext';
+
+describe('ThemeToggler', () => {
+  beforeEach(() => {
+    localStorage.clear();
+  });
+
+  it('renders moon icon when initial theme is light', () => {
+    localStorage.setItem('appTheme', 'light');
+    render(
+      <ThemeProvider>
+        <ThemeToggler />
+      </ThemeProvider>
+    );
+    const img = screen.getByAltText(/switch to dark mode/i);
+    expect(img).toBeInTheDocument();
+  });
+
+  it('renders sun icon when initial theme is dark', () => {
+    localStorage.setItem('appTheme', 'dark'); // 模拟初始 dark
+    render(
+      <ThemeProvider>
+        <ThemeToggler />
+      </ThemeProvider>
+    );
+    const img = screen.getByAltText(/switch to light mode/i);
+    expect(img).toBeInTheDocument();
+  });
+
+  it('toggles theme on click', () => {
+    localStorage.setItem('appTheme', 'light');
+    render(
+      <ThemeProvider>
+        <ThemeToggler />
+      </ThemeProvider>
+    );
+
+    const toggler = screen.getByLabelText(/toggle color theme/i);
+
+    expect(screen.getByAltText(/switch to dark mode/i)).toBeInTheDocument();
+
+    fireEvent.click(toggler);
+    expect(screen.getByAltText(/switch to light mode/i)).toBeInTheDocument();
+    expect(localStorage.getItem('appTheme')).toBe('dark');
+
+    fireEvent.click(toggler);
+    expect(screen.getByAltText(/switch to dark mode/i)).toBeInTheDocument();
+    expect(localStorage.getItem('appTheme')).toBe('light');
+  });
+});
\ No newline at end of file