add tests

Author: mythz

package-lock.json

@@ -7,7 +7,10 @@
     "dev": "vite",
     "build": "tsc -b && vite build",
     "lint": "eslint .",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "test": "vitest",
+    "test:ui": "vitest --ui",
+    "test:coverage": "vitest --coverage"
   },
   "dependencies": {
     "@servicestack/react": "^2.0.8",
@@ -22,19 +25,26 @@
     "@tailwindcss/forms": "^0.5.10",
     "@tailwindcss/postcss": "^4.1.17",
     "@tailwindcss/typography": "^0.5.19",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.0",
+    "@testing-library/user-event": "^14.6.1",
     "@types/node": "^24.6.0",
     "@types/react": "^19.1.16",
     "@types/react-dom": "^19.1.9",
     "@vitejs/plugin-react": "^5.0.4",
+    "@vitest/ui": "^4.0.8",
     "eslint": "^9.36.0",
     "eslint-plugin-react-hooks": "^5.2.0",
     "eslint-plugin-react-refresh": "^0.4.22",
     "globals": "^16.4.0",
+    "happy-dom": "^20.0.10",
+    "jsdom": "^27.1.0",
     "postcss": "^8.5.6",
     "tailwindcss": "^4.0.0",
     "typescript": "~5.9.3",
     "typescript-eslint": "^8.45.0",
-    "vite": "npm:rolldown-vite@7.1.14"
+    "vite": "npm:rolldown-vite@7.1.14",
+    "vitest": "^4.0.8"
   },
   "overrides": {
     "vite": "npm:rolldown-vite@7.1.14"

package.json

@@ -0,0 +1,54 @@
+import { describe, it, expect } from 'vitest'
+import { render, screen, fireEvent } from '@testing-library/react'
+import App from './App'
+
+describe('App', () => {
+  it('should render the app', () => {
+    render(<App />)
+    expect(screen.getByText('Vite + React')).toBeInTheDocument()
+  })
+
+  it('should display initial count of 0', () => {
+    render(<App />)
+    expect(screen.getByRole('button')).toHaveTextContent('count is 0')
+  })
+
+  it('should increment count when button is clicked', () => {
+    render(<App />)
+    const button = screen.getByRole('button')
+    
+    fireEvent.click(button)
+    expect(button).toHaveTextContent('count is 1')
+    
+    fireEvent.click(button)
+    expect(button).toHaveTextContent('count is 2')
+  })
+
+  it('should render Vite logo', () => {
+    render(<App />)
+    const viteLogo = screen.getByAltText('Vite logo')
+    expect(viteLogo).toBeInTheDocument()
+    expect(viteLogo).toHaveAttribute('src')
+  })
+
+  it('should render React logo', () => {
+    render(<App />)
+    const reactLogo = screen.getByAltText('React logo')
+    expect(reactLogo).toBeInTheDocument()
+  })
+
+  it('should have links to documentation', () => {
+    render(<App />)
+    const links = screen.getAllByRole('link')
+    expect(links).toHaveLength(2)
+    expect(links[0]).toHaveAttribute('href', 'https://vite.dev')
+    expect(links[1]).toHaveAttribute('href', 'https://react.dev')
+  })
+
+  it('should display HMR message', () => {
+    render(<App />)
+    expect(screen.getByText(/Edit/)).toBeInTheDocument()
+    expect(screen.getByText(/src\/App.tsx/)).toBeInTheDocument()
+  })
+})
+

src/App.test.tsx

@@ -0,0 +1,61 @@
+import { describe, it, expect } from 'vitest'
+import { render, screen } from '@testing-library/react'
+import CodeBlock from './CodeBlock'
+
+describe('CodeBlock', () => {
+  it('should render code content', () => {
+    const code = 'const hello = "world";'
+    const { container } = render(<CodeBlock code={code} />)
+    const codeElement = container.querySelector('code')
+    expect(codeElement).toBeInTheDocument()
+    expect(codeElement?.textContent).toContain('const')
+    expect(codeElement?.textContent).toContain('hello')
+  })
+
+  it('should use tsx as default language', () => {
+    const code = 'const test = 123;'
+    const { container } = render(<CodeBlock code={code} />)
+    const pre = container.querySelector('pre')
+    expect(pre).toBeInTheDocument()
+  })
+
+  it('should accept custom language', () => {
+    const code = 'print("hello")'
+    const { container } = render(<CodeBlock code={code} language="python" />)
+    const pre = container.querySelector('pre')
+    expect(pre).toBeInTheDocument()
+  })
+
+  it('should apply custom className', () => {
+    const code = 'test'
+    const customClass = 'my-custom-class'
+    const { container } = render(<CodeBlock code={code} className={customClass} />)
+    expect(container.firstChild).toHaveClass(customClass)
+  })
+
+  it('should render multiline code', () => {
+    const code = `function test() {
+  return true;
+}`
+    const { container } = render(<CodeBlock code={code} />)
+    const codeElement = container.querySelector('code')
+    expect(codeElement?.textContent).toContain('function')
+    expect(codeElement?.textContent).toContain('test')
+    expect(codeElement?.textContent).toContain('return')
+    expect(codeElement?.textContent).toContain('true')
+  })
+
+  it('should handle empty code', () => {
+    const { container } = render(<CodeBlock code="" />)
+    expect(container.querySelector('code')).toBeInTheDocument()
+  })
+
+  it('should handle special characters in code', () => {
+    const code = 'const str = "<div>&nbsp;</div>";'
+    const { container } = render(<CodeBlock code={code} />)
+    const codeElement = container.querySelector('code')
+    expect(codeElement?.textContent).toContain('const')
+    expect(codeElement?.textContent).toContain('str')
+  })
+})
+

src/gallery/components/CodeBlock.test.tsx

@@ -0,0 +1,148 @@
+import { describe, it, expect, beforeEach, vi } from 'vitest'
+import { render, screen } from '@testing-library/react'
+import GalleryLayout from './GalleryLayout'
+
+// Mock the DarkModeToggle component from @servicestack/react
+vi.mock('@servicestack/react', () => ({
+  DarkModeToggle: () => <div data-testid="dark-mode-toggle">Dark Mode Toggle</div>
+}))
+
+describe('GalleryLayout', () => {
+  beforeEach(() => {
+    // Reset window.location.pathname before each test
+    Object.defineProperty(window, 'location', {
+      value: { pathname: '/' },
+      writable: true,
+    })
+  })
+
+  it('should render children content', () => {
+    render(
+      <GalleryLayout>
+        <div>Test Content</div>
+      </GalleryLayout>
+    )
+    expect(screen.getByText('Test Content')).toBeInTheDocument()
+  })
+
+  it('should render title when provided', () => {
+    render(
+      <GalleryLayout title="Test Title">
+        <div>Content</div>
+      </GalleryLayout>
+    )
+    expect(screen.getByText('Test Title')).toBeInTheDocument()
+  })
+
+  it('should not render title when not provided', () => {
+    const { container } = render(
+      <GalleryLayout>
+        <div>Content</div>
+      </GalleryLayout>
+    )
+    const h1 = container.querySelector('h1')
+    expect(h1).toBeNull()
+  })
+
+  it('should render header with logo and site name', () => {
+    render(<GalleryLayout><div>Content</div></GalleryLayout>)
+    expect(screen.getByText('React Component Gallery')).toBeInTheDocument()
+  })
+
+  it('should render React logo SVG', () => {
+    const { container } = render(<GalleryLayout><div>Content</div></GalleryLayout>)
+    const svg = container.querySelector('svg')
+    expect(svg).toBeInTheDocument()
+    expect(svg).toHaveClass('w-8', 'h-8', 'text-[#61DAFB]')
+  })
+
+  it('should render DarkModeToggle', () => {
+    render(<GalleryLayout><div>Content</div></GalleryLayout>)
+    expect(screen.getByTestId('dark-mode-toggle')).toBeInTheDocument()
+  })
+
+  it('should render navigation sidebar', () => {
+    render(<GalleryLayout><div>Content</div></GalleryLayout>)
+    expect(screen.getByText('Getting Started')).toBeInTheDocument()
+    expect(screen.getByText('Component Gallery')).toBeInTheDocument()
+    expect(screen.getByText('Library')).toBeInTheDocument()
+  })
+
+  it('should render all navigation links', () => {
+    render(<GalleryLayout><div>Content</div></GalleryLayout>)
+    
+    // Getting Started
+    expect(screen.getByText('Installation')).toBeInTheDocument()
+    
+    // Component Gallery
+    expect(screen.getByText('AutoQueryGrid')).toBeInTheDocument()
+    expect(screen.getByText('DataGrid')).toBeInTheDocument()
+    expect(screen.getByText('Auto Forms')).toBeInTheDocument()
+    expect(screen.getByText('FileInput')).toBeInTheDocument()
+    expect(screen.getByText('TagInput')).toBeInTheDocument()
+    expect(screen.getByText('Combobox')).toBeInTheDocument()
+    expect(screen.getByText('Autocomplete')).toBeInTheDocument()
+    expect(screen.getByText('Markdown Editor')).toBeInTheDocument()
+    
+    // Library
+    expect(screen.getByText('useMetadata')).toBeInTheDocument()
+    expect(screen.getByText('useClient')).toBeInTheDocument()
+    expect(screen.getByText('useAuth')).toBeInTheDocument()
+  })
+
+  it('should highlight active link based on current path', () => {
+    Object.defineProperty(window, 'location', {
+      value: { pathname: '/gallery/autoquerygrid' },
+      writable: true,
+    })
+
+    const { container } = render(<GalleryLayout><div>Content</div></GalleryLayout>)
+    const activeLink = container.querySelector('a[href="/gallery/autoquerygrid"]')
+    
+    expect(activeLink).toHaveClass('text-indigo-600', 'dark:text-indigo-400', 'font-semibold')
+  })
+
+  it('should apply hover styles to non-active links', () => {
+    Object.defineProperty(window, 'location', {
+      value: { pathname: '/' },
+      writable: true,
+    })
+
+    const { container } = render(<GalleryLayout><div>Content</div></GalleryLayout>)
+    const link = container.querySelector('a[href="/gallery/autoquerygrid"]')
+    
+    expect(link).toHaveClass('text-gray-700', 'dark:text-gray-300')
+  })
+
+  it('should have correct link hrefs', () => {
+    const { container } = render(<GalleryLayout><div>Content</div></GalleryLayout>)
+    
+    const installLink = container.querySelector('a[href="/gallery/install"]')
+    expect(installLink).toBeInTheDocument()
+    
+    const autoQueryLink = container.querySelector('a[href="/gallery/autoquerygrid"]')
+    expect(autoQueryLink).toBeInTheDocument()
+    
+    const useMetadataLink = container.querySelector('a[href="/gallery/use-metadata"]')
+    expect(useMetadataLink).toBeInTheDocument()
+  })
+
+  it('should render main content area with prose styling', () => {
+    const { container } = render(
+      <GalleryLayout>
+        <div>Test Content</div>
+      </GalleryLayout>
+    )
+    
+    const main = container.querySelector('main')
+    expect(main).toHaveClass('prose', 'prose-slate', 'dark:prose-invert')
+  })
+
+  it('should have responsive layout classes', () => {
+    const { container } = render(<GalleryLayout><div>Content</div></GalleryLayout>)
+    
+    const aside = container.querySelector('aside')
+    expect(aside).toHaveClass('hidden', 'lg:block')
+  })
+})
+