feat: Add 404 page with tests

- Add custom 404 page component with responsive design
- Implement comprehensive test suite for 404 page
- Add Jest configuration for Next.js testing environment
- Include test cases for:
  - Component rendering
  - Link functionality
  - Styling verification
  - Text content validation

- Improve project code coverage to 100%

Author: attarchi

docs/Phases 1-3.md

@@ -69,7 +69,7 @@ Include example test files and yarn scripts for running tests. Create a test str
 
 **CursorAI Prompt**:
 ```
-Configure Next.js 14 for static export to GitHub Pages with these requirements:
+Configure Next.js 14 for static export to GitHub Pages with these requirements, first please check which one is needed and which one already done:
 - Update next.config.js for static export
 - Configure proper asset prefix and base path
 - Handle routing for static sites

src/app/__tests__/layout.test.tsx

@@ -0,0 +1,40 @@
+import { render } from '@testing-library/react'
+import RootLayout from '../layout'
+
+describe('RootLayout', () => {
+  it('renders children with correct font classes', () => {
+    const { container } = render(
+      <RootLayout>
+        <div>Test Child</div>
+      </RootLayout>,
+      { container: document.documentElement }
+    )
+
+    const body = container.querySelector('body')
+    expect(body).toHaveClass('antialiased')
+    expect(body?.className).toContain('variable')
+  })
+
+  it('renders with correct HTML lang attribute', () => {
+    const { container } = render(
+      <RootLayout>
+        <div>Test Child</div>
+      </RootLayout>,
+      { container: document.documentElement }
+    )
+
+    const html = container.querySelector('html')
+    expect(html).toHaveAttribute('lang', 'en')
+  })
+
+  it('renders children content', () => {
+    const { getByText } = render(
+      <RootLayout>
+        <div>Test Child</div>
+      </RootLayout>,
+      { container: document.documentElement }
+    )
+
+    expect(getByText('Test Child')).toBeInTheDocument()
+  })
+}) 

src/app/__tests__/not-found.test.tsx

@@ -0,0 +1,35 @@
+import { render, screen } from '@testing-library/react'
+import NotFound from '../not-found'
+
+describe('NotFound Page', () => {
+  it('renders 404 heading', () => {
+    render(<NotFound />)
+    const heading = screen.getByText('404')
+    expect(heading).toBeInTheDocument()
+  })
+
+  it('renders page not found message', () => {
+    render(<NotFound />)
+    const message = screen.getByText('Page Not Found')
+    expect(message).toBeInTheDocument()
+  })
+
+  it('renders description text', () => {
+    render(<NotFound />)
+    const description = screen.getByText(/The page you're looking for doesn't exist or has been moved./)
+    expect(description).toBeInTheDocument()
+  })
+
+  it('renders return home link', () => {
+    render(<NotFound />)
+    const homeLink = screen.getByRole('link', { name: /Return Home/i })
+    expect(homeLink).toBeInTheDocument()
+    expect(homeLink).toHaveAttribute('href', '/')
+  })
+
+  it('has correct styling classes', () => {
+    render(<NotFound />)
+    const container = screen.getByRole('link', { name: /Return Home/i }).parentElement?.parentElement
+    expect(container).toHaveClass('min-h-screen', 'flex', 'items-center', 'justify-center', 'bg-gray-100')
+  })
+}) 

src/app/__tests__/page.test.tsx

@@ -0,0 +1,44 @@
+import { render, screen } from '@testing-library/react'
+import Home from '../page'
+
+describe('Home Page', () => {
+  it('renders Next.js logo', () => {
+    render(<Home />)
+    const logo = screen.getByAltText('Next.js logo')
+    expect(logo).toBeInTheDocument()
+  })
+
+  it('renders getting started text', () => {
+    render(<Home />)
+    expect(screen.getByText(/Get started by editing/i)).toBeInTheDocument()
+    expect(screen.getByText(/Save and see your changes instantly/i)).toBeInTheDocument()
+  })
+
+  it('renders deployment link', () => {
+    render(<Home />)
+    const deployLink = screen.getByText('Deploy now')
+    expect(deployLink).toBeInTheDocument()
+    expect(deployLink.closest('a')).toHaveAttribute('href', 'https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app')
+  })
+
+  it('renders documentation link', () => {
+    render(<Home />)
+    const docsLink = screen.getByText('Read our docs')
+    expect(docsLink).toBeInTheDocument()
+    expect(docsLink.closest('a')).toHaveAttribute('href', 'https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app')
+  })
+
+  it('renders footer links', () => {
+    render(<Home />)
+    expect(screen.getByText('Learn')).toBeInTheDocument()
+    expect(screen.getByText('Examples')).toBeInTheDocument()
+    expect(screen.getByText('Go to nextjs.org →')).toBeInTheDocument()
+  })
+
+  it('renders footer icons', () => {
+    render(<Home />)
+    expect(screen.getByAltText('File icon')).toBeInTheDocument()
+    expect(screen.getByAltText('Window icon')).toBeInTheDocument()
+    expect(screen.getByAltText('Globe icon')).toBeInTheDocument()
+  })
+}) 

src/app/not-found.tsx

@@ -0,0 +1,19 @@
+import Link from 'next/link'
+
+export default function NotFound() {
+  return (
+    <div className="min-h-screen flex items-center justify-center bg-gray-100">
+      <div className="text-center">
+        <h1 className="text-6xl font-bold text-gray-800 mb-4">404</h1>
+        <h2 className="text-2xl font-semibold text-gray-600 mb-4">Page Not Found</h2>
+        <p className="text-gray-500 mb-8">The page you&apos;re looking for doesn&apos;t exist or has been moved.</p>
+        <Link 
+          href="/"
+          className="inline-block bg-blue-600 text-white px-6 py-3 rounded-lg hover:bg-blue-700 transition-colors"
+        >
+          Return Home
+        </Link>
+      </div>
+    </div>
+  )
+} 

src/app/page.test.tsx

@@ -0,0 +1,15 @@
+import { render } from '../test-utils'
+import { screen } from '@testing-library/react'
+
+describe('Test Utilities', () => {
+  it('renders children with custom render function', () => {
+    const TestComponent = () => <div>Test Content</div>
+    render(<TestComponent />)
+    expect(screen.getByText('Test Content')).toBeInTheDocument()
+  })
+
+  it('preserves testing-library exports', () => {
+    expect(screen).toBeDefined()
+    expect(render).toBeDefined()
+  })
+})