(() => ({
+ reasoning: search.reasoning ?? undefined,
+ toolCall: search.toolCall ?? undefined,
+ openWeights: search.openWeights ?? undefined,
+ }))
+
// Query with pagination
const modelsQuery = useQuery({
- queryKey: ['models', pagination, globalFilter],
+ queryKey: ['models', pagination, globalFilter, filters],
queryFn: () =>
getModels({
data: {
page: pagination.pageIndex + 1,
limit: pagination.pageSize,
search: globalFilter,
+ reasoning: filters.reasoning,
+ toolCall: filters.toolCall,
+ openWeights: filters.openWeights,
},
}),
placeholderData: keepPreviousData,
@@ -467,7 +500,7 @@ function IndexPage() {
limit: pagination.pageSize,
}),
})
- }, [pagination, navigate])
+ }, [pagination, navigate, search])
// Update URL when search changes
useEffect(() => {
@@ -477,7 +510,30 @@ function IndexPage() {
search: globalFilter || undefined,
}),
})
- }, [globalFilter, navigate])
+ }, [globalFilter, navigate, search])
+
+ // Update URL when filters change
+ useEffect(() => {
+ // Only navigate if URL values differ from current filter state to prevent infinite loops
+ if (
+ search.reasoning === filters.reasoning &&
+ search.toolCall === filters.toolCall &&
+ search.openWeights === filters.openWeights
+ ) {
+ return
+ }
+
+ navigate({
+ search: (prev) => ({
+ ...prev,
+ reasoning:
+ filters.reasoning === undefined ? undefined : filters.reasoning,
+ toolCall: filters.toolCall === undefined ? undefined : filters.toolCall,
+ openWeights:
+ filters.openWeights === undefined ? undefined : filters.openWeights,
+ }),
+ })
+ }, [filters, navigate, search])
const selectedRows = table.getSelectedRowModel().rows
const totalCount = modelsQuery.data.pagination.total
@@ -516,6 +572,13 @@ function IndexPage() {
className="max-w-md"
/>
+ {/* Filter Controls */}
+
+
{/* Selection info */}
{selectedRows.length > 0 && (
diff --git a/src/types/filters.ts b/src/types/filters.ts
new file mode 100644
index 0000000..db306d3
--- /dev/null
+++ b/src/types/filters.ts
@@ -0,0 +1,32 @@
+/**
+ * Represents the state of simplified model filters.
+ * Each property is optional to allow for an "unset" state.
+ */
+export interface SimpleFiltersState {
+ /** Filter for models with reasoning capability */
+ reasoning?: boolean
+ /** Filter for models with tool calling capability */
+ toolCall?: boolean
+ /** Filter for models with open weights availability */
+ openWeights?: boolean
+}
+
+/** Default empty filter state with all filters unset */
+export const DEFAULT_SIMPLE_FILTERS: SimpleFiltersState = {
+ reasoning: undefined,
+ toolCall: undefined,
+ openWeights: undefined,
+}
+
+/**
+ * Checks if any filter is currently active (set to true).
+ * @param filters - The filter state to check
+ * @returns True if at least one filter is active
+ */
+export function hasActiveFilters(filters: SimpleFiltersState): boolean {
+ return (
+ filters.reasoning === true ||
+ filters.toolCall === true ||
+ filters.openWeights === true
+ )
+}
diff --git a/src/types/index.ts b/src/types/index.ts
index 27359d4..0162c65 100644
--- a/src/types/index.ts
+++ b/src/types/index.ts
@@ -1,3 +1,4 @@
// Re-export types from this directory
export * from './models'
+export * from './filters'
diff --git a/tests/components/SimplifiedFilters.test.tsx b/tests/components/SimplifiedFilters.test.tsx
new file mode 100644
index 0000000..0f60c0a
--- /dev/null
+++ b/tests/components/SimplifiedFilters.test.tsx
@@ -0,0 +1,438 @@
+/**
+ * Component Tests for SimplifiedFilters
+ *
+ * This file contains React component tests for the SimplifiedFilters
+ * component using Testing Library.
+ */
+
+import { fireEvent, screen } from '@testing-library/react'
+import { describe, expect, it, vi } from 'vitest'
+
+import { renderWithProviders } from '../utils/test-helpers'
+import {
+ FILTER_FIXTURES,
+ createMockFilterChangeHandler,
+} from '../fixtures/filter-fixtures'
+
+import { SimplifiedFilters } from '@/components/SimplifiedFilters'
+
+describe('SimplifiedFilters', () => {
+ describe('rendering', () => {
+ it('renders all three filter checkboxes', () => {
+ renderWithProviders(
+ ,
+ )
+
+ expect(
+ screen.getByRole('checkbox', {
+ name: 'Filter by reasoning capability',
+ }),
+ ).toBeInTheDocument()
+ expect(
+ screen.getByRole('checkbox', {
+ name: 'Filter by tool calling capability',
+ }),
+ ).toBeInTheDocument()
+ expect(
+ screen.getByRole('checkbox', {
+ name: 'Filter by open weights availability',
+ }),
+ ).toBeInTheDocument()
+ })
+
+ it('renders with correct checkbox IDs', () => {
+ renderWithProviders(
+ ,
+ )
+
+ const reasoningCheckbox = screen.getByRole('checkbox', {
+ name: 'Filter by reasoning capability',
+ })
+ expect(reasoningCheckbox).toHaveAttribute('id', 'filter-reasoning')
+ expect(
+ screen.getByRole('checkbox', {
+ name: 'Filter by tool calling capability',
+ }),
+ ).toHaveAttribute('id', 'filter-tool-call')
+ expect(
+ screen.getByRole('checkbox', {
+ name: 'Filter by open weights availability',
+ }),
+ ).toHaveAttribute('id', 'filter-open-weights')
+ })
+
+ it('renders with correct checkbox labels', () => {
+ renderWithProviders(
+ ,
+ )
+
+ expect(screen.getByText('Reasoning')).toBeInTheDocument()
+ expect(screen.getByText('Tool Calling')).toBeInTheDocument()
+ expect(screen.getByText('Open Weights')).toBeInTheDocument()
+ })
+
+ it('renders fieldset with correct accessibility attributes', () => {
+ renderWithProviders(
+ ,
+ )
+
+ expect(
+ screen.getByRole('group', { name: 'Filter options' }),
+ ).toBeInTheDocument()
+ })
+
+ it('applies custom className when provided', () => {
+ const customClass = 'custom-filter-class'
+ renderWithProviders(
+ ,
+ )
+
+ const fieldset = screen.getByRole('group', { name: 'Filter options' })
+ expect(fieldset).toHaveClass(customClass)
+ })
+ })
+
+ describe('checkbox state', () => {
+ it('shows unchecked state when filter is undefined', () => {
+ renderWithProviders(
+ ,
+ )
+
+ const reasoningCheckbox = screen.getByRole('checkbox', {
+ name: 'Filter by reasoning capability',
+ })
+ expect(reasoningCheckbox).not.toBeChecked()
+ })
+
+ it('shows checked state when filter is true', () => {
+ renderWithProviders(
+ ,
+ )
+
+ const reasoningCheckbox = screen.getByRole('checkbox', {
+ name: 'Filter by reasoning capability',
+ })
+ expect(reasoningCheckbox).toBeChecked()
+ })
+
+ it('shows unchecked state when filter is false', () => {
+ renderWithProviders(
+ ,
+ )
+
+ const reasoningCheckbox = screen.getByRole('checkbox', {
+ name: 'Filter by reasoning capability',
+ })
+ expect(reasoningCheckbox).not.toBeChecked()
+ })
+
+ it('displays correct state for multiple active filters', () => {
+ renderWithProviders(
+ ,
+ )
+
+ expect(
+ screen.getByRole('checkbox', {
+ name: 'Filter by reasoning capability',
+ }),
+ ).toBeChecked()
+ expect(
+ screen.getByRole('checkbox', {
+ name: 'Filter by tool calling capability',
+ }),
+ ).toBeChecked()
+ expect(
+ screen.getByRole('checkbox', {
+ name: 'Filter by open weights availability',
+ }),
+ ).not.toBeChecked()
+ })
+ })
+
+ describe('user interactions', () => {
+ it('calls onChange when reasoning checkbox is clicked', () => {
+ const { handler, reset } = createMockFilterChangeHandler()
+
+ renderWithProviders(
+ ,
+ )
+
+ reset()
+
+ const reasoningCheckbox = screen.getByRole('checkbox', {
+ name: 'Filter by reasoning capability',
+ })
+ fireEvent.click(reasoningCheckbox)
+
+ expect(handler).toHaveBeenCalledTimes(1)
+ expect(handler).toHaveBeenCalledWith(FILTER_FIXTURES.reasoningOnly)
+ })
+
+ it('calls onChange when toolCall checkbox is clicked', () => {
+ const { handler } = createMockFilterChangeHandler()
+
+ renderWithProviders(
+ ,
+ )
+
+ const toolCallCheckbox = screen.getByRole('checkbox', {
+ name: 'Filter by tool calling capability',
+ })
+ fireEvent.click(toolCallCheckbox)
+
+ expect(handler).toHaveBeenCalledWith(FILTER_FIXTURES.toolCallOnly)
+ })
+
+ it('calls onChange when openWeights checkbox is clicked', () => {
+ const { handler } = createMockFilterChangeHandler()
+
+ renderWithProviders(
+ ,
+ )
+
+ const openWeightsCheckbox = screen.getByRole('checkbox', {
+ name: 'Filter by open weights availability',
+ })
+ fireEvent.click(openWeightsCheckbox)
+
+ expect(handler).toHaveBeenCalledWith(FILTER_FIXTURES.openWeightsOnly)
+ })
+
+ it('toggles filter state from true to undefined', () => {
+ const { handler } = createMockFilterChangeHandler()
+
+ renderWithProviders(
+ ,
+ )
+
+ const reasoningCheckbox = screen.getByRole('checkbox', {
+ name: 'Filter by reasoning capability',
+ })
+ fireEvent.click(reasoningCheckbox)
+
+ expect(handler).toHaveBeenCalledWith(FILTER_FIXTURES.empty)
+ })
+
+ it('toggles filter state from undefined to true', () => {
+ const { handler } = createMockFilterChangeHandler()
+
+ renderWithProviders(
+ ,
+ )
+
+ const reasoningCheckbox = screen.getByRole('checkbox', {
+ name: 'Filter by reasoning capability',
+ })
+ fireEvent.click(reasoningCheckbox)
+
+ expect(handler).toHaveBeenCalledWith({
+ ...FILTER_FIXTURES.empty,
+ reasoning: true,
+ })
+ })
+
+ it('preserves other filter states when toggling one filter', () => {
+ const { handler } = createMockFilterChangeHandler()
+
+ renderWithProviders(
+ ,
+ )
+
+ const toolCallCheckbox = screen.getByRole('checkbox', {
+ name: 'Filter by tool calling capability',
+ })
+ fireEvent.click(toolCallCheckbox)
+
+ const expectedFilters = {
+ ...FILTER_FIXTURES.reasoningOnly,
+ toolCall: true,
+ }
+ expect(handler).toHaveBeenCalledWith(expectedFilters)
+ })
+ })
+
+ describe('accessibility', () => {
+ it('has proper aria-labels on checkboxes', () => {
+ renderWithProviders(
+ ,
+ )
+
+ const reasoningInput = document.getElementById('filter-reasoning')
+ expect(reasoningInput).toHaveAttribute(
+ 'aria-label',
+ 'Filter by reasoning capability',
+ )
+
+ const toolCallInput = document.getElementById('filter-tool-call')
+ expect(toolCallInput).toHaveAttribute(
+ 'aria-label',
+ 'Filter by tool calling capability',
+ )
+
+ const openWeightsInput = document.getElementById('filter-open-weights')
+ expect(openWeightsInput).toHaveAttribute(
+ 'aria-label',
+ 'Filter by open weights availability',
+ )
+ })
+
+ it('has screen-reader-only legend text', () => {
+ renderWithProviders(
+ ,
+ )
+
+ const legend = screen.getByText('Filter options')
+ expect(legend).toHaveClass('sr-only')
+ })
+
+ it('checkboxes have proper association with labels', () => {
+ renderWithProviders(
+ ,
+ )
+
+ const reasoningCheckbox = screen.getByRole('checkbox', {
+ name: 'Filter by reasoning capability',
+ })
+ expect(reasoningCheckbox).toBeEnabled()
+ })
+
+ it('responds to user interactions', () => {
+ const { handler } = createMockFilterChangeHandler()
+
+ renderWithProviders(
+ ,
+ )
+
+ const reasoningCheckbox = screen.getByRole('checkbox', {
+ name: 'Filter by reasoning capability',
+ })
+
+ fireEvent.click(reasoningCheckbox)
+
+ expect(handler).toHaveBeenCalled()
+ })
+ })
+
+ describe('edge cases', () => {
+ it('handles rapid successive clicks', () => {
+ const { handler, reset } = createMockFilterChangeHandler()
+
+ renderWithProviders(
+ ,
+ )
+
+ reset()
+
+ const reasoningCheckbox = screen.getByRole('checkbox', {
+ name: 'Filter by reasoning capability',
+ })
+
+ // Rapid clicks
+ fireEvent.click(reasoningCheckbox)
+ fireEvent.click(reasoningCheckbox)
+ fireEvent.click(reasoningCheckbox)
+
+ expect(handler).toHaveBeenCalledTimes(3)
+ })
+
+ it('works with empty onChange handler (no errors)', () => {
+ renderWithProviders(
+ {}}
+ />,
+ )
+
+ const reasoningCheckbox = screen.getByRole('checkbox', {
+ name: 'Filter by reasoning capability',
+ })
+
+ expect(() => fireEvent.click(reasoningCheckbox)).not.toThrow()
+ })
+
+ it('handles filter state transition from all false', () => {
+ const { handler } = createMockFilterChangeHandler()
+
+ renderWithProviders(
+ ,
+ )
+
+ const reasoningCheckbox = screen.getByRole('checkbox', {
+ name: 'Filter by reasoning capability',
+ })
+
+ fireEvent.click(reasoningCheckbox)
+
+ // When clicking from all-false, reasoning becomes true, others stay false
+ expect(handler).toHaveBeenCalledWith({
+ reasoning: true,
+ toolCall: false,
+ openWeights: false,
+ })
+ })
+ })
+})
diff --git a/tests/fixtures/filter-fixtures.ts b/tests/fixtures/filter-fixtures.ts
new file mode 100644
index 0000000..ee7ef4f
--- /dev/null
+++ b/tests/fixtures/filter-fixtures.ts
@@ -0,0 +1,208 @@
+/**
+ * Filter Test Fixtures
+ *
+ * This module provides reusable test fixtures for filter-related testing.
+ * Fixtures include sample filter states, mock data, and helper functions.
+ */
+
+import { vi } from 'vitest'
+
+import type { SimpleFiltersState } from '@/types/filters'
+
+/**
+ * Sample filter states for testing
+ */
+export const FILTER_FIXTURES = {
+ /** Empty filter state with all filters undefined */
+ empty: {
+ reasoning: undefined,
+ toolCall: undefined,
+ openWeights: undefined,
+ } as SimpleFiltersState,
+
+ /** All filters active */
+ allActive: {
+ reasoning: true,
+ toolCall: true,
+ openWeights: true,
+ } as SimpleFiltersState,
+
+ /** Only reasoning filter active */
+ reasoningOnly: {
+ reasoning: true,
+ toolCall: undefined,
+ openWeights: undefined,
+ } as SimpleFiltersState,
+
+ /** Only tool call filter active */
+ toolCallOnly: {
+ reasoning: undefined,
+ toolCall: true,
+ openWeights: undefined,
+ } as SimpleFiltersState,
+
+ /** Only open weights filter active */
+ openWeightsOnly: {
+ reasoning: undefined,
+ toolCall: undefined,
+ openWeights: true,
+ } as SimpleFiltersState,
+
+ /** Reasoning and tool call active */
+ reasoningAndToolCall: {
+ reasoning: true,
+ toolCall: true,
+ openWeights: undefined,
+ } as SimpleFiltersState,
+
+ /** Reasoning and open weights active */
+ reasoningAndOpenWeights: {
+ reasoning: true,
+ toolCall: undefined,
+ openWeights: true,
+ } as SimpleFiltersState,
+
+ /** Tool call and open weights active */
+ toolCallAndOpenWeights: {
+ reasoning: undefined,
+ toolCall: true,
+ openWeights: true,
+ } as SimpleFiltersState,
+
+ /** All filters set to false (inactive) */
+ allFalse: {
+ reasoning: false,
+ toolCall: false,
+ openWeights: false,
+ } as SimpleFiltersState,
+}
+
+/**
+ * Helper function to create custom filter states
+ */
+export function createFilterState(
+ overrides: Partial = {},
+): SimpleFiltersState {
+ return {
+ reasoning: undefined,
+ toolCall: undefined,
+ openWeights: undefined,
+ ...overrides,
+ }
+}
+
+/**
+ * Generator function for creating random filter states
+ * Useful for property-based testing
+ */
+export function generateRandomFilterState(): SimpleFiltersState {
+ const booleanOptions: Array = [true, false, undefined]
+
+ return {
+ reasoning:
+ booleanOptions[Math.floor(Math.random() * booleanOptions.length)],
+ toolCall: booleanOptions[Math.floor(Math.random() * booleanOptions.length)],
+ openWeights:
+ booleanOptions[Math.floor(Math.random() * booleanOptions.length)],
+ }
+}
+
+/**
+ * Expected filter state transitions after toggle
+ * Format: [initialState, toggledKey, expectedState]
+ */
+export const FILTER_TRANSITIONS: Array<
+ [SimpleFiltersState, keyof SimpleFiltersState, SimpleFiltersState]
+> = [
+ // Toggle undefined to true
+ [FILTER_FIXTURES.empty, 'reasoning', FILTER_FIXTURES.reasoningOnly],
+ [FILTER_FIXTURES.empty, 'toolCall', FILTER_FIXTURES.toolCallOnly],
+ [FILTER_FIXTURES.empty, 'openWeights', FILTER_FIXTURES.openWeightsOnly],
+
+ // Toggle true to undefined
+ [FILTER_FIXTURES.reasoningOnly, 'reasoning', FILTER_FIXTURES.empty],
+ [FILTER_FIXTURES.toolCallOnly, 'toolCall', FILTER_FIXTURES.empty],
+ [FILTER_FIXTURES.openWeightsOnly, 'openWeights', FILTER_FIXTURES.empty],
+
+ // Toggle between active filters
+ [
+ FILTER_FIXTURES.reasoningAndToolCall,
+ 'openWeights',
+ FILTER_FIXTURES.allActive,
+ ],
+ [
+ FILTER_FIXTURES.reasoningAndToolCall,
+ 'reasoning',
+ FILTER_FIXTURES.toolCallOnly,
+ ],
+
+ // Edge case: all active, toggle one off
+ [
+ FILTER_FIXTURES.allActive,
+ 'reasoning',
+ FILTER_FIXTURES.toolCallAndOpenWeights,
+ ],
+ [
+ FILTER_FIXTURES.allActive,
+ 'toolCall',
+ FILTER_FIXTURES.reasoningAndOpenWeights,
+ ],
+ [
+ FILTER_FIXTURES.allActive,
+ 'openWeights',
+ FILTER_FIXTURES.reasoningAndToolCall,
+ ],
+
+ // Edge case: all false, toggle one on
+ [FILTER_FIXTURES.allFalse, 'reasoning', FILTER_FIXTURES.reasoningOnly],
+ [FILTER_FIXTURES.allFalse, 'toolCall', FILTER_FIXTURES.toolCallOnly],
+ [FILTER_FIXTURES.allFalse, 'openWeights', FILTER_FIXTURES.openWeightsOnly],
+]
+
+/**
+ * Mock filter change handler that records calls
+ */
+export function createMockFilterChangeHandler() {
+ const calls: Array = []
+
+ const handler = vi.fn((filters: SimpleFiltersState) => {
+ calls.push(filters)
+ })
+
+ return {
+ handler,
+ calls,
+ getLastCall: () => calls[calls.length - 1],
+ getCallCount: () => calls.length,
+ reset: () => {
+ calls.length = 0
+ handler.mockClear()
+ },
+ }
+}
+
+/**
+ * Accessibility test fixtures
+ */
+export const A11Y_FIXTURES = {
+ filterGroupRole: 'group',
+ filterGroupLabel: 'Filter options',
+
+ reasoningCheckbox: {
+ id: 'filter-reasoning',
+ label: 'Reasoning',
+ ariaLabel: 'Filter by reasoning capability',
+ },
+
+ toolCallCheckbox: {
+ id: 'filter-tool-call',
+ label: 'Tool Calling',
+ ariaLabel: 'Filter by tool calling capability',
+ },
+
+ openWeightsCheckbox: {
+ id: 'filter-open-weights',
+ label: 'Open Weights',
+ ariaLabel: 'Filter by open weights availability',
+ },
+}
diff --git a/tests/setup.ts b/tests/setup.ts
new file mode 100644
index 0000000..f0756f4
--- /dev/null
+++ b/tests/setup.ts
@@ -0,0 +1,62 @@
+/**
+ * Vitest Test Setup
+ *
+ * This file runs before each test file and provides global configuration
+ * and utilities for testing.
+ */
+
+import * as matchers from '@testing-library/jest-dom/matchers'
+import { cleanup } from '@testing-library/react'
+import { afterEach, beforeEach, expect, vi } from 'vitest'
+
+// Extend expect with jest-dom matchers
+expect.extend(matchers)
+
+// Cleanup after each test to prevent state leakage between tests
+afterEach(() => {
+ cleanup()
+})
+
+// Mock window.matchMedia before each test
+beforeEach(() => {
+ vi.resetModules()
+ vi.clearAllMocks()
+
+ // Mock matchMedia
+ Object.defineProperty(window, 'matchMedia', {
+ writable: true,
+ value: vi.fn().mockImplementation((_query: string) => ({
+ matches: false,
+ media: '',
+ onchange: null,
+ addListener: vi.fn(),
+ removeListener: vi.fn(),
+ addEventListener: vi.fn(),
+ removeEventListener: vi.fn(),
+ dispatchEvent: vi.fn(),
+ })),
+ })
+
+ // Mock window.scrollTo
+ vi.spyOn(window, 'scrollTo').mockImplementation(() => {})
+
+ // Mock window.alert for tests that might trigger alerts
+ vi.spyOn(window, 'alert').mockImplementation(() => {})
+})
+
+// TypeScript declarations for extended matchers
+declare module 'vitest' {
+ interface Assertion {
+ toBeInTheDocument: () => T
+ toHaveAttribute: (attr: string, value?: string) => T
+ toHaveClass: (className: string) => T
+ toBeChecked: () => T
+ toBeEnabled: () => T
+ }
+
+ interface NotValue {
+ toBeInTheDocument: () => T
+ toBeChecked: () => T
+ toHaveAttribute: (attr: string, value?: string) => T
+ }
+}
diff --git a/tests/unit/filters.test.ts b/tests/unit/filters.test.ts
new file mode 100644
index 0000000..279cfa3
--- /dev/null
+++ b/tests/unit/filters.test.ts
@@ -0,0 +1,18 @@
+/**
+ * Unit Tests for Filter Functions
+ *
+ * This file contains unit tests for filter utility functions
+ * defined in src/types/filters.ts
+ */
+
+import { describe, expect, it } from 'vitest'
+
+import {
+ FILTER_FIXTURES,
+ createFilterState,
+ createMockFilterChangeHandler,
+ generateRandomFilterState,
+} from '../fixtures/filter-fixtures'
+
+import type { SimpleFiltersState } from '@/types/filters'
+import { DEFAULT_SIMPLE_FILTERS, hasActiveFilters } from '@/types/filters'
diff --git a/tests/utils/test-helpers.ts b/tests/utils/test-helpers.ts
new file mode 100644
index 0000000..c93469c
--- /dev/null
+++ b/tests/utils/test-helpers.ts
@@ -0,0 +1,48 @@
+/**
+ * Test Utilities and Custom Render Functions
+ *
+ * This module provides reusable utilities for testing React components.
+ */
+
+import { render } from '@testing-library/react'
+
+import type { ReactElement, ReactNode } from 'react'
+import type { RenderOptions } from '@testing-library/react'
+
+interface CustomRenderOptions extends RenderOptions {
+ // Add custom options here if needed
+}
+
+export function renderWithProviders(
+ ui: ReactElement,
+ _options: CustomRenderOptions = {},
+) {
+ function Wrapper({ children }: { children?: ReactNode }) {
+ return children
+ }
+
+ return render(ui, { wrapper: Wrapper, ..._options })
+}
+
+/**
+ * Render component without any providers
+ */
+export function renderWithoutProviders(
+ ui: ReactElement,
+ renderOptions?: RenderOptions,
+) {
+ return render(ui, renderOptions)
+}
+
+/**
+ * Generate unique test IDs
+ */
+let testIdCounter = 0
+
+export function generateTestId(prefix = 'test'): string {
+ testIdCounter += 1
+ return `${prefix}-${testIdCounter}-${Date.now()}`
+}
+
+// Re-export everything from @testing-library/react for convenience
+export * from '@testing-library/react'
diff --git a/vitest.config.ts b/vitest.config.ts
new file mode 100644
index 0000000..47a7c46
--- /dev/null
+++ b/vitest.config.ts
@@ -0,0 +1,41 @@
+import { defineConfig } from 'vitest/config'
+import react from '@vitejs/plugin-react'
+import tsconfigPaths from 'vite-tsconfig-paths'
+
+export default defineConfig({
+ plugins: [react(), tsconfigPaths()],
+ test: {
+ testTimeout: 10000,
+ environment: 'jsdom',
+ setupFiles: ['./tests/setup.ts'],
+ include: [
+ 'tests/**/*.{test,spec}.{ts,tsx}',
+ 'src/**/*.{test,spec}.{ts,tsx}',
+ ],
+ exclude: ['node_modules', 'dist', '.git', '.husky'],
+ coverage: {
+ provider: 'v8',
+ reporter: ['text', 'json', 'html'],
+ reportsDirectory: './coverage',
+ include: ['src/**/*.{ts,tsx}'],
+ exclude: [
+ 'node_modules/',
+ 'dist/',
+ '.git/',
+ '**/*.d.ts',
+ '**/*.test.{ts,tsx}',
+ '**/*.spec.{ts,tsx}',
+ 'tests/**',
+ 'src/types/**',
+ 'src/routes/demo/**',
+ ],
+ thresholds: {
+ lines: 80,
+ functions: 80,
+ branches: 80,
+ statements: 80,
+ },
+ },
+ reporters: ['default'],
+ },
+})