Router tests

src/components/ImageCard/ImageCard.test.tsx

@@ -0,0 +1,63 @@
+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 with basic props', async () => {
+        render(
+            <ImageCard src="Krizza.jpg" alt="Cat 🐱" />
+        )
+        const image = await screen.findByRole('img')
+        expect(image).toHaveAttribute('src', 'Krizza.jpg')
+        expect(image).toHaveAttribute('alt', 'Cat 🐱')
+        expect(image).toBeVisible()
+    })
+
+    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())
+        expect(image).toBeVisible()
+    })
+
+    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)
+        expect(image).toBeVisible()
+    })
+
+    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')
+        expect(image).toBeVisible()
+    })
+})

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()
+    })
+})

src/routes/CodeOfConduct/CodeOfConduct.test.tsx

@@ -0,0 +1,64 @@
+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', () => {
+    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()
+        })
+
+        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')
+        })
+    })
+})

src/routes/__test__/BaseLayout.test.tsx

@@ -0,0 +1,79 @@
+import { lazy } from 'react'
+import { Route, Routes } from 'react-router-dom'
+import { describe, expect, it, vi } from 'vitest'
+import { screen } from '@testing-library/react'
+import { render } from '@/tests/customRender'
+import BaseLayout from '../BaseLayout'
+import '@/i18n/config'
+
+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 MockChildComponent = () => {
+    return <div data-testid="child-content">Child Content</div>
+}
+
+const MockLazyChildComponent = lazy(() =>
+    new Promise(() => {})
+)
+
+describe('BaseLayout', () => {
+    it('should render header, outlet, and footer components', () => {
+        render(
+            <Routes>
+                <Route path="/" element={<BaseLayout />}>
+                    <Route index element={<MockChildComponent />} />
+                </Route>
+            </Routes>
+        )
+
+        expect(screen.getByTestId('header')).toBeInTheDocument()
+        expect(screen.getByTestId('child-content')).toBeInTheDocument()
+        expect(screen.getByTestId('footer')).toBeInTheDocument()
+    })
+
+    it('should render components in correct order', () => {
+        render(
+            <Routes>
+                <Route path="/" element={<BaseLayout />}>
+                    <Route index element={<MockChildComponent />} />
+                </Route>
+            </Routes>
+        )
+
+        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 show loading fallback when Suspense is triggered', () => {
+        render(
+            <Routes>
+                <Route path="/" element={<BaseLayout />}>
+                    <Route index element={<MockLazyChildComponent />} />
+                </Route>
+            </Routes>
+        )
+
+        expect(screen.getByText('Loading...')).toBeInTheDocument()
+    })
+
+    it('should render without crashing when no child route is provided', () => {
+        render(<BaseLayout />)
+
+        expect(screen.getByTestId('header')).toBeInTheDocument()
+        expect(screen.getByTestId('footer')).toBeInTheDocument()
+    })
+})

src/routes/__test__/Router.test.tsx

@@ -0,0 +1,24 @@
+import { describe, expect, it, vi } from 'vitest'
+import { render, screen } from '@testing-library/react'
+import Router from '../Router'
+import '@/i18n/config'
+
+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>
+    )
+}))
+
+describe('Router', () => {
+    it('should render RouterProvider with necessary components', () => {
+        render(<Router />)
+
+        expect(screen.getByTestId('base-layout')).toBeInTheDocument()
+        expect(screen.getByTestId('header')).toBeInTheDocument()
+        expect(screen.getByTestId('footer')).toBeInTheDocument()
+    })
+})