From 7a14c707bd7ae2c5320d1089bede2f6a7b0b67f1 Mon Sep 17 00:00:00 2001
From: Krizza Bullecer <krizzabullecer@gmail.com>
Date: Sun, 29 Jun 2025 20:27:38 +0900
Subject: [PATCH 01/12] code of conduct tests

---
 src/routes/CodeOfConduct/CodeOfConduct.test.tsx | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)
 create mode 100644 src/routes/CodeOfConduct/CodeOfConduct.test.tsx

diff --git a/src/routes/CodeOfConduct/CodeOfConduct.test.tsx b/src/routes/CodeOfConduct/CodeOfConduct.test.tsx
new file mode 100644
index 0000000..bc9500b
--- /dev/null
+++ b/src/routes/CodeOfConduct/CodeOfConduct.test.tsx
@@ -0,0 +1,16 @@
+import { describe, expect, it } from 'vitest'
+import { render } from '@/tests/customRender'
+import { screen } from '@testing-library/react'
+import CodeOfConduct from './CodeOfConduct'
+
+describe('CodeOfConduct Route', () => {
+    it('should display the CodeOfConduct Route', async () => {
+        render(<CodeOfConduct />)
+        const heading = await screen.findByRole('heading', {
+            name: 'Code of Conduct',
+        })
+        expect(heading).toBeVisible()
+
+        expect(await screen.findAllByRole('heading')).toHaveLength(5)
+    })
+})

From 87b5e101fd7841b2ac8a6e46824ec32dd415ce0c Mon Sep 17 00:00:00 2001
From: "Krizza B." <29673385+sirbully@users.noreply.github.com>
Date: Tue, 15 Jul 2025 20:02:44 +0900
Subject: [PATCH 02/12] add body 1 test (#158)

---
 src/components/TextBlock/Body1.test.tsx | 12 ++++++++++++
 1 file changed, 12 insertions(+)
 create mode 100644 src/components/TextBlock/Body1.test.tsx

diff --git a/src/components/TextBlock/Body1.test.tsx b/src/components/TextBlock/Body1.test.tsx
new file mode 100644
index 0000000..764d5dc
--- /dev/null
+++ b/src/components/TextBlock/Body1.test.tsx
@@ -0,0 +1,12 @@
+import { describe, expect, it } from 'vitest'
+import { screen } from '@testing-library/react'
+import { render } from '@/tests/customRender'
+import Body1 from './Body1'
+
+describe('Body', () => {
+    it('should render Body component correctly', async () => {
+        render(<Body1>Test</Body1>)
+        const text = await screen.findByText('Test')
+        expect(text).toBeVisible()
+    })
+})

From 97e4de8a5ad2931339c4a6dd94c614cd114a2006 Mon Sep 17 00:00:00 2001
From: Krizza Bullecer <krizzabullecer@gmail.com>
Date: Mon, 11 Aug 2025 22:31:32 +0900
Subject: [PATCH 03/12] modify test to check content and translation

---
 .../CodeOfConduct/CodeOfConduct.test.tsx      | 62 ++++++++++++++++---
 1 file changed, 55 insertions(+), 7 deletions(-)

diff --git a/src/routes/CodeOfConduct/CodeOfConduct.test.tsx b/src/routes/CodeOfConduct/CodeOfConduct.test.tsx
index bc9500b..a5affbb 100644
--- a/src/routes/CodeOfConduct/CodeOfConduct.test.tsx
+++ b/src/routes/CodeOfConduct/CodeOfConduct.test.tsx
@@ -1,16 +1,64 @@
-import { describe, expect, it } from 'vitest'
+import { describe, expect, it, beforeEach } from 'vitest'
 import { render } from '@/tests/customRender'
 import { screen } from '@testing-library/react'
 import CodeOfConduct from './CodeOfConduct'
+import i18next from 'i18next'
 
 describe('CodeOfConduct Route', () => {
-    it('should display the CodeOfConduct Route', async () => {
-        render(<CodeOfConduct />)
-        const heading = await screen.findByRole('heading', {
-            name: 'Code of Conduct',
+    const changeLanguage = async (language: string) => {
+        await i18next.changeLanguage(language)
+    }
+
+    describe('English Language', () => {
+        beforeEach(async () => {
+            await changeLanguage('en')
+        })
+
+        it('should display the Code of Conduct heading in English', async () => {
+            render(<CodeOfConduct />)
+            const heading = await screen.findByRole('heading', {
+                name: 'Code of Conduct',
+            })
+            expect(heading).toBeVisible()
         })
-        expect(heading).toBeVisible()
 
-        expect(await screen.findAllByRole('heading')).toHaveLength(5)
+        it('should display all expected headings in English', async () => {
+            render(<CodeOfConduct />)
+            const headings = await screen.findAllByRole('heading')
+            expect(headings).toHaveLength(5)
+
+            expect(headings[0]).toHaveTextContent('Code of Conduct')
+            expect(headings[1]).toHaveTextContent('Women in Software Engineering Japan Statement of Intent')
+            expect(headings[2]).toHaveTextContent('Code of Conduct for Women in Software Engineering Japan Events')
+            expect(headings[3]).toHaveTextContent('How to Report Harassment and Discrimination')
+            expect(headings[4]).toHaveTextContent('Periodic Review')
+        })
+    })
+
+    describe('Japanese Language', () => {
+        beforeEach(async () => {
+            await changeLanguage('ja')
+        })
+
+        it('should display the Code of Conduct heading in Japanese', async () => {
+            render(<CodeOfConduct />)
+            const heading = await screen.findByRole('heading', {
+                name: '行動規範',
+            })
+            expect(heading).toBeVisible()
+        })
+
+        it('should display all expected headings in Japanese', async () => {
+            render(<CodeOfConduct />)
+            const headings = await screen.findAllByRole('heading')
+            expect(headings).toHaveLength(5)
+
+            expect(headings[0]).toHaveTextContent('行動規範')
+            // FIXME: The other headings are have not been translated yet, testing the English headings for now
+            expect(headings[1]).toHaveTextContent('Women in Software Engineering Japan Statement of Intent')
+            expect(headings[2]).toHaveTextContent('Code of Conduct for Women in Software Engineering Japan Events')
+            expect(headings[3]).toHaveTextContent('How to Report Harassment and Discrimination')
+            expect(headings[4]).toHaveTextContent('Periodic Review')
+        })
     })
 })

From 2f887d367c376d1e2b61c352a7960ff7f0e641a9 Mon Sep 17 00:00:00 2001
From: Krizza Bullecer <krizzabullecer@gmail.com>
Date: Sun, 29 Jun 2025 20:39:39 +0900
Subject: [PATCH 04/12] image card test

---
 src/components/ImageCard/ImageCard.test.tsx | 14 ++++++++++++++
 1 file changed, 14 insertions(+)
 create mode 100644 src/components/ImageCard/ImageCard.test.tsx

diff --git a/src/components/ImageCard/ImageCard.test.tsx b/src/components/ImageCard/ImageCard.test.tsx
new file mode 100644
index 0000000..4bb8dd5
--- /dev/null
+++ b/src/components/ImageCard/ImageCard.test.tsx
@@ -0,0 +1,14 @@
+import { describe, expect, it } from 'vitest'
+import { screen } from '@testing-library/react'
+import { render } from '@/tests/customRender'
+import ImageCard from './ImageCard'
+
+describe('ImageCard', () => {
+    it('should render ImageCard component correctly', async () => {
+        render(
+            <ImageCard src="https://i.imgur.com/pEI5qWM.jpeg" alt="Cat 🐱" />
+        )
+        const image = await screen.findByRole('img')
+        expect(image).toBeVisible()
+    })
+})

From dfd444452f14a67551d5d97e66f8ffe17165eb52 Mon Sep 17 00:00:00 2001
From: Krizza Bullecer <krizzabullecer@gmail.com>
Date: Mon, 11 Aug 2025 22:38:16 +0900
Subject: [PATCH 05/12] add more tests to image card

---
 src/components/ImageCard/ImageCard.test.tsx | 48 ++++++++++++++++++++-
 1 file changed, 47 insertions(+), 1 deletion(-)

diff --git a/src/components/ImageCard/ImageCard.test.tsx b/src/components/ImageCard/ImageCard.test.tsx
index 4bb8dd5..c9ab8b1 100644
--- a/src/components/ImageCard/ImageCard.test.tsx
+++ b/src/components/ImageCard/ImageCard.test.tsx
@@ -4,11 +4,57 @@ import { render } from '@/tests/customRender'
 import ImageCard from './ImageCard'
 
 describe('ImageCard', () => {
-    it('should render ImageCard component correctly', async () => {
+    it('should render ImageCard component correctly with basic props', async () => {
         render(
             <ImageCard src="https://i.imgur.com/pEI5qWM.jpeg" alt="Cat 🐱" />
         )
         const image = await screen.findByRole('img')
         expect(image).toBeVisible()
+        expect(image).toHaveAttribute('src', 'https://i.imgur.com/pEI5qWM.jpeg')
+        expect(image).toHaveAttribute('alt', 'Cat 🐱')
+    })
+
+    it('should apply custom width and height when provided', () => {
+        const testWidth = 300
+        const testHeight = 200
+
+        render(
+            <ImageCard
+                src="test.jpg"
+                alt="Test"
+                width={testWidth}
+                height={testHeight}
+            />
+        )
+
+        const image = screen.getByRole('img')
+        expect(image).toHaveAttribute('width', testWidth.toString())
+        expect(image).toHaveAttribute('height', testHeight.toString())
+    })
+
+    it('should handle string-based width and height', () => {
+        const testWidth = '50%'
+        const testHeight = 'auto'
+
+        render(
+            <ImageCard
+                src="test.jpg"
+                alt="Test"
+                width={testWidth}
+                height={testHeight}
+            />
+        )
+
+        const image = screen.getByRole('img')
+        expect(image).toHaveAttribute('width', testWidth)
+        expect(image).toHaveAttribute('height', testHeight)
+    })
+
+    it('should render even when width and height are not provided', () => {
+        render(<ImageCard src="test.jpg" alt="Test" />)
+
+        const image = screen.getByRole('img')
+        expect(image).not.toHaveAttribute('width')
+        expect(image).not.toHaveAttribute('height')
     })
 })

From 6d807cbc06092202bb9b9f714b0647d1c0cbfa9e Mon Sep 17 00:00:00 2001
From: Krizza Bullecer <krizzabullecer@gmail.com>
Date: Mon, 11 Aug 2025 22:39:23 +0900
Subject: [PATCH 06/12] tobevisible check

---
 src/components/ImageCard/ImageCard.test.tsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/components/ImageCard/ImageCard.test.tsx b/src/components/ImageCard/ImageCard.test.tsx
index c9ab8b1..60452e5 100644
--- a/src/components/ImageCard/ImageCard.test.tsx
+++ b/src/components/ImageCard/ImageCard.test.tsx
@@ -9,9 +9,9 @@ describe('ImageCard', () => {
             <ImageCard src="https://i.imgur.com/pEI5qWM.jpeg" alt="Cat 🐱" />
         )
         const image = await screen.findByRole('img')
-        expect(image).toBeVisible()
         expect(image).toHaveAttribute('src', 'https://i.imgur.com/pEI5qWM.jpeg')
         expect(image).toHaveAttribute('alt', 'Cat 🐱')
+        expect(image).toBeVisible()
     })
 
     it('should apply custom width and height when provided', () => {
@@ -30,6 +30,7 @@ describe('ImageCard', () => {
         const image = screen.getByRole('img')
         expect(image).toHaveAttribute('width', testWidth.toString())
         expect(image).toHaveAttribute('height', testHeight.toString())
+        expect(image).toBeVisible()
     })
 
     it('should handle string-based width and height', () => {
@@ -48,6 +49,7 @@ describe('ImageCard', () => {
         const image = screen.getByRole('img')
         expect(image).toHaveAttribute('width', testWidth)
         expect(image).toHaveAttribute('height', testHeight)
+        expect(image).toBeVisible()
     })
 
     it('should render even when width and height are not provided', () => {
@@ -56,5 +58,6 @@ describe('ImageCard', () => {
         const image = screen.getByRole('img')
         expect(image).not.toHaveAttribute('width')
         expect(image).not.toHaveAttribute('height')
+        expect(image).toBeVisible()
     })
 })

From f62acc74a68ff685f1f646f317ccc47ed2a2032e Mon Sep 17 00:00:00 2001
From: Krizza Bullecer <krizzabullecer@gmail.com>
Date: Wed, 13 Aug 2025 18:59:08 +0900
Subject: [PATCH 07/12] don't make network request in test

---
 src/components/ImageCard/ImageCard.test.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/ImageCard/ImageCard.test.tsx b/src/components/ImageCard/ImageCard.test.tsx
index 60452e5..21c381f 100644
--- a/src/components/ImageCard/ImageCard.test.tsx
+++ b/src/components/ImageCard/ImageCard.test.tsx
@@ -6,10 +6,10 @@ import ImageCard from './ImageCard'
 describe('ImageCard', () => {
     it('should render ImageCard component correctly with basic props', async () => {
         render(
-            <ImageCard src="https://i.imgur.com/pEI5qWM.jpeg" alt="Cat 🐱" />
+            <ImageCard src="Krizza.jpg" alt="Cat 🐱" />
         )
         const image = await screen.findByRole('img')
-        expect(image).toHaveAttribute('src', 'https://i.imgur.com/pEI5qWM.jpeg')
+        expect(image).toHaveAttribute('src', 'Krizza.jpg')
         expect(image).toHaveAttribute('alt', 'Cat 🐱')
         expect(image).toBeVisible()
     })

From 2b8ad96dc6f0bd8b2555399015010ad345d86591 Mon Sep 17 00:00:00 2001
From: Krizza Bullecer <krizzabullecer@gmail.com>
Date: Sun, 29 Jun 2025 21:16:07 +0900
Subject: [PATCH 08/12] baselayout and router test

---
 src/routes/__test__/BaseLayout.test.tsx | 106 ++++++++++++++++++++++++
 src/routes/__test__/Router.test.tsx     |  65 +++++++++++++++
 2 files changed, 171 insertions(+)
 create mode 100644 src/routes/__test__/BaseLayout.test.tsx
 create mode 100644 src/routes/__test__/Router.test.tsx

diff --git a/src/routes/__test__/BaseLayout.test.tsx b/src/routes/__test__/BaseLayout.test.tsx
new file mode 100644
index 0000000..8fbedaa
--- /dev/null
+++ b/src/routes/__test__/BaseLayout.test.tsx
@@ -0,0 +1,106 @@
+import { describe, expect, it, vi } from 'vitest'
+import { render, screen } from '@testing-library/react'
+import { MemoryRouter, Routes, Route } from 'react-router-dom'
+import CssBaseline from '@mui/material/CssBaseline'
+import CustomThemeProvider from '@/theme/CustomThemeProvider'
+import BaseLayout from '../BaseLayout'
+import '@/i18n/config'
+
+// Mock the child components
+vi.mock('@/components/Header/Header', () => ({
+    default: () => <div data-testid="header">Header Component</div>,
+}))
+
+vi.mock('@/components/Footer/Footer', () => ({
+    default: () => <div data-testid="footer">Footer Component</div>,
+}))
+
+const mockFetchData = vi.fn<() => unknown>()
+
+// Mock a child component for testing Outlet
+const MockChildComponent = () => {
+    const data = mockFetchData()
+    if (data instanceof Promise) {
+        // eslint-disable-next-line @typescript-eslint/only-throw-error
+        throw data
+    }
+    return <div data-testid="child-content">Child Content</div>
+}
+
+// Wrapper component for testing BaseLayout with routing
+const TestWrapper = ({ children }: { children: React.ReactNode }) => (
+    <CustomThemeProvider>
+        <CssBaseline />
+        <MemoryRouter>{children}</MemoryRouter>
+    </CustomThemeProvider>
+)
+
+describe('BaseLayout', () => {
+    it('should render header, outlet, and footer components', () => {
+        render(
+            <TestWrapper>
+                <Routes>
+                    <Route path="/" element={<BaseLayout />}>
+                        <Route index element={<MockChildComponent />} />
+                    </Route>
+                </Routes>
+            </TestWrapper>
+        )
+
+        expect(screen.getByTestId('header')).toBeInTheDocument()
+        expect(screen.getByTestId('child-content')).toBeInTheDocument()
+        expect(screen.getByTestId('footer')).toBeInTheDocument()
+    })
+
+    it('should render components in correct order', () => {
+        render(
+            <TestWrapper>
+                <Routes>
+                    <Route path="/" element={<BaseLayout />}>
+                        <Route index element={<MockChildComponent />} />
+                    </Route>
+                </Routes>
+            </TestWrapper>
+        )
+
+        const container = screen.getByTestId('header').parentElement
+        const children = Array.from(container?.children || [])
+
+        // Check that header comes first
+        expect(children[0]).toHaveAttribute('data-testid', 'header')
+        // Check that footer comes last
+        expect(children[children.length - 1]).toHaveAttribute(
+            'data-testid',
+            'footer'
+        )
+    })
+
+    it('should render Suspense with fallback loader', () => {
+        // Create a component that will trigger Suspense by using a promise
+        mockFetchData.mockReturnValue(new Promise(() => {}))
+
+        render(
+            <TestWrapper>
+                <Routes>
+                    <Route path="/" element={<BaseLayout />}>
+                        <Route index element={<MockChildComponent />} />
+                    </Route>
+                </Routes>
+            </TestWrapper>
+        )
+
+        // Should show loading fallback
+        expect(screen.getByText('Loading...')).toBeInTheDocument()
+    })
+
+    it('should render without crashing when no child route is provided', () => {
+        render(
+            <TestWrapper>
+                <BaseLayout />
+            </TestWrapper>
+        )
+
+        expect(screen.getByTestId('header')).toBeInTheDocument()
+        expect(screen.getByTestId('footer')).toBeInTheDocument()
+    })
+})
diff --git a/src/routes/__test__/Router.test.tsx b/src/routes/__test__/Router.test.tsx
new file mode 100644
index 0000000..3e9cd1b
--- /dev/null
+++ b/src/routes/__test__/Router.test.tsx
@@ -0,0 +1,65 @@
+import { describe, expect, it, vi } from 'vitest'
+import { render, screen } from '@testing-library/react'
+import CssBaseline from '@mui/material/CssBaseline'
+import CustomThemeProvider from '@/theme/CustomThemeProvider'
+import Router from '../Router'
+import '@/i18n/config'
+
+// Mock all the route components
+vi.mock('../Home/Home', () => ({
+    default: () => <div data-testid="home-page">Home Page</div>
+}))
+
+vi.mock('../CodeOfConduct/CodeOfConduct', () => ({
+    default: () => <div data-testid="code-of-conduct-page">Code of Conduct Page</div>
+}))
+
+vi.mock('../Team/Team', () => ({
+    default: () => <div data-testid="team-page">Team Page</div>
+}))
+
+vi.mock('../JobBoard/JobBoard', () => ({
+    default: () => <div data-testid="job-board-page">Job Board Page</div>
+}))
+
+vi.mock('../ThemePreview/ThemePreview', () => ({
+    default: () => <div data-testid="theme-preview-page">Theme Preview Page</div>
+}))
+
+vi.mock('../NotFound/NotFound', () => ({
+    default: () => <div data-testid="not-found-page">Not Found Page</div>
+}))
+
+// Mock the BaseLayout component
+vi.mock('../BaseLayout', () => ({
+    default: ({ children }: { children: React.ReactNode }) => (
+        <div data-testid="base-layout">
+            <div data-testid="header">Header</div>
+            {children}
+            <div data-testid="footer">Footer</div>
+        </div>
+    )
+}))
+
+// Wrapper component for testing Router
+const TestWrapper = ({ children }: { children: React.ReactNode }) => (
+    <CustomThemeProvider>
+        <CssBaseline />
+        {children}
+    </CustomThemeProvider>
+)
+
+describe('Router', () => {
+    it('should render RouterProvider without crashing', () => {
+        render(
+            <TestWrapper>
+                <Router />
+            </TestWrapper>
+        )
+
+        // Should render without errors
+        expect(screen.getByTestId('base-layout')).toBeInTheDocument()
+        expect(screen.getByTestId('header')).toBeInTheDocument()
+        expect(screen.getByTestId('footer')).toBeInTheDocument()
+    })
+})

From 75ababfdff1031a49251beb06ca8e3596d689571 Mon Sep 17 00:00:00 2001
From: Krizza Bullecer <krizzabullecer@gmail.com>
Date: Mon, 11 Aug 2025 23:04:13 +0900
Subject: [PATCH 09/12] address feedback for base layout

---
 src/routes/__test__/BaseLayout.test.tsx | 74 +++++++++----------------
 1 file changed, 25 insertions(+), 49 deletions(-)

diff --git a/src/routes/__test__/BaseLayout.test.tsx b/src/routes/__test__/BaseLayout.test.tsx
index 8fbedaa..74066da 100644
--- a/src/routes/__test__/BaseLayout.test.tsx
+++ b/src/routes/__test__/BaseLayout.test.tsx
@@ -1,12 +1,11 @@
+import { lazy } from 'react'
+import { Route, Routes } from 'react-router-dom'
 import { describe, expect, it, vi } from 'vitest'
-import { render, screen } from '@testing-library/react'
-import { MemoryRouter, Routes, Route } from 'react-router-dom'
-import CssBaseline from '@mui/material/CssBaseline'
-import CustomThemeProvider from '@/theme/CustomThemeProvider'
+import { screen } from '@testing-library/react'
+import { render } from '@/tests/customRender'
 import BaseLayout from '../BaseLayout'
 import '@/i18n/config'
 
-// Mock the child components
 vi.mock('@/components/Header/Header', () => ({
     default: () => <div data-testid="header">Header Component</div>,
 }))
@@ -15,36 +14,24 @@ vi.mock('@/components/Footer/Footer', () => ({
     default: () => <div data-testid="footer">Footer Component</div>,
 }))
 
-const mockFetchData = vi.fn<() => unknown>()
-
 // Mock a child component for testing Outlet
 const MockChildComponent = () => {
-    const data = mockFetchData()
-    if (data instanceof Promise) {
-        // eslint-disable-next-line @typescript-eslint/only-throw-error
-        throw data
-    }
     return <div data-testid="child-content">Child Content</div>
 }
 
-// Wrapper component for testing BaseLayout with routing
-const TestWrapper = ({ children }: { children: React.ReactNode }) => (
-    <CustomThemeProvider>
-        <CssBaseline />
-        <MemoryRouter>{children}</MemoryRouter>
-    </CustomThemeProvider>
+// Create a lazy component for testing loading state
+const MockLazyChildComponent = lazy(() =>
+    new Promise(() => {}) // Never resolves, so Suspense will show fallback
 )
 
 describe('BaseLayout', () => {
     it('should render header, outlet, and footer components', () => {
         render(
-            <TestWrapper>
-                <Routes>
-                    <Route path="/" element={<BaseLayout />}>
-                        <Route index element={<MockChildComponent />} />
-                    </Route>
-                </Routes>
-            </TestWrapper>
+            <Routes>
+                <Route path="/" element={<BaseLayout />}>
+                    <Route index element={<MockChildComponent />} />
+                </Route>
+            </Routes>
         )
 
         expect(screen.getByTestId('header')).toBeInTheDocument()
@@ -54,13 +41,11 @@ describe('BaseLayout', () => {
 
     it('should render components in correct order', () => {
         render(
-            <TestWrapper>
-                <Routes>
-                    <Route path="/" element={<BaseLayout />}>
-                        <Route index element={<MockChildComponent />} />
-                    </Route>
-                </Routes>
-            </TestWrapper>
+            <Routes>
+                <Route path="/" element={<BaseLayout />}>
+                    <Route index element={<MockChildComponent />} />
+                </Route>
+            </Routes>
         )
 
         const container = screen.getByTestId('header').parentElement
@@ -75,30 +60,21 @@ describe('BaseLayout', () => {
         )
     })
 
-    it('should render Suspense with fallback loader', () => {
-        // Create a component that will trigger Suspense by using a promise
-        mockFetchData.mockReturnValue(new Promise(() => {}))
-
+    it('should show loading fallback when Suspense is triggered', () => {
+        // Test that the BaseLayout component properly shows the loading fallback
         render(
-            <TestWrapper>
-                <Routes>
-                    <Route path="/" element={<BaseLayout />}>
-                        <Route index element={<MockChildComponent />} />
-                    </Route>
-                </Routes>
-            </TestWrapper>
+            <Routes>
+                <Route path="/" element={<BaseLayout />}>
+                    <Route index element={<MockLazyChildComponent />} />
+                </Route>
+            </Routes>
         )
 
-        // Should show loading fallback
         expect(screen.getByText('Loading...')).toBeInTheDocument()
     })
 
     it('should render without crashing when no child route is provided', () => {
-        render(
-            <TestWrapper>
-                <BaseLayout />
-            </TestWrapper>
-        )
+        render(<BaseLayout />)
 
         expect(screen.getByTestId('header')).toBeInTheDocument()
         expect(screen.getByTestId('footer')).toBeInTheDocument()

From 273e97605ccf1d36d7b90619d7e9f9cefa59d246 Mon Sep 17 00:00:00 2001
From: Krizza Bullecer <krizzabullecer@gmail.com>
Date: Mon, 11 Aug 2025 23:05:09 +0900
Subject: [PATCH 10/12] removed comment

---
 src/routes/__test__/BaseLayout.test.tsx | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/src/routes/__test__/BaseLayout.test.tsx b/src/routes/__test__/BaseLayout.test.tsx
index 74066da..cf51936 100644
--- a/src/routes/__test__/BaseLayout.test.tsx
+++ b/src/routes/__test__/BaseLayout.test.tsx
@@ -14,14 +14,12 @@ vi.mock('@/components/Footer/Footer', () => ({
     default: () => <div data-testid="footer">Footer Component</div>,
 }))
 
-// Mock a child component for testing Outlet
 const MockChildComponent = () => {
     return <div data-testid="child-content">Child Content</div>
 }
 
-// Create a lazy component for testing loading state
 const MockLazyChildComponent = lazy(() =>
-    new Promise(() => {}) // Never resolves, so Suspense will show fallback
+    new Promise(() => {})
 )
 
 describe('BaseLayout', () => {

From 86d688e84f20b32c3290a4173a5b890265753073 Mon Sep 17 00:00:00 2001
From: Krizza Bullecer <krizzabullecer@gmail.com>
Date: Mon, 11 Aug 2025 23:05:49 +0900
Subject: [PATCH 11/12] remove comment

---
 src/routes/__test__/BaseLayout.test.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/routes/__test__/BaseLayout.test.tsx b/src/routes/__test__/BaseLayout.test.tsx
index cf51936..941a90d 100644
--- a/src/routes/__test__/BaseLayout.test.tsx
+++ b/src/routes/__test__/BaseLayout.test.tsx
@@ -59,7 +59,6 @@ describe('BaseLayout', () => {
     })
 
     it('should show loading fallback when Suspense is triggered', () => {
-        // Test that the BaseLayout component properly shows the loading fallback
         render(
             <Routes>
                 <Route path="/" element={<BaseLayout />}>

From 680440d9427bd1b16ff02da1308b5eea819365ce Mon Sep 17 00:00:00 2001
From: Krizza Bullecer <krizzabullecer@gmail.com>
Date: Mon, 11 Aug 2025 23:37:33 +0900
Subject: [PATCH 12/12] simple router test

---
 src/routes/__test__/Router.test.tsx | 45 ++---------------------------
 1 file changed, 2 insertions(+), 43 deletions(-)

diff --git a/src/routes/__test__/Router.test.tsx b/src/routes/__test__/Router.test.tsx
index 3e9cd1b..1308ccf 100644
--- a/src/routes/__test__/Router.test.tsx
+++ b/src/routes/__test__/Router.test.tsx
@@ -1,36 +1,8 @@
 import { describe, expect, it, vi } from 'vitest'
 import { render, screen } from '@testing-library/react'
-import CssBaseline from '@mui/material/CssBaseline'
-import CustomThemeProvider from '@/theme/CustomThemeProvider'
 import Router from '../Router'
 import '@/i18n/config'
 
-// Mock all the route components
-vi.mock('../Home/Home', () => ({
-    default: () => <div data-testid="home-page">Home Page</div>
-}))
-
-vi.mock('../CodeOfConduct/CodeOfConduct', () => ({
-    default: () => <div data-testid="code-of-conduct-page">Code of Conduct Page</div>
-}))
-
-vi.mock('../Team/Team', () => ({
-    default: () => <div data-testid="team-page">Team Page</div>
-}))
-
-vi.mock('../JobBoard/JobBoard', () => ({
-    default: () => <div data-testid="job-board-page">Job Board Page</div>
-}))
-
-vi.mock('../ThemePreview/ThemePreview', () => ({
-    default: () => <div data-testid="theme-preview-page">Theme Preview Page</div>
-}))
-
-vi.mock('../NotFound/NotFound', () => ({
-    default: () => <div data-testid="not-found-page">Not Found Page</div>
-}))
-
-// Mock the BaseLayout component
 vi.mock('../BaseLayout', () => ({
     default: ({ children }: { children: React.ReactNode }) => (
         <div data-testid="base-layout">
@@ -41,23 +13,10 @@ vi.mock('../BaseLayout', () => ({
     )
 }))
 
-// Wrapper component for testing Router
-const TestWrapper = ({ children }: { children: React.ReactNode }) => (
-    <CustomThemeProvider>
-        <CssBaseline />
-        {children}
-    </CustomThemeProvider>
-)
-
 describe('Router', () => {
-    it('should render RouterProvider without crashing', () => {
-        render(
-            <TestWrapper>
-                <Router />
-            </TestWrapper>
-        )
+    it('should render RouterProvider with necessary components', () => {
+        render(<Router />)
 
-        // Should render without errors
         expect(screen.getByTestId('base-layout')).toBeInTheDocument()
         expect(screen.getByTestId('header')).toBeInTheDocument()
         expect(screen.getByTestId('footer')).toBeInTheDocument()