testing-patterns

🧪 Testing Patterns & Best Practices

🎯 Testing Philosophy

Testing Pyramid for POS System

    E2E Tests (Few)
    ↑ Full user workflows
    ↑ Critical business flows
    
  Integration Tests (Some)
  ↑ API + Database interactions
  ↑ Component + API integration
  
    Unit Tests (Many)
    ↑ Individual functions
    ↑ Component behavior
    ↑ Business logic validation

Test Coverage Targets

• Unit Tests: 80%+ coverage for business logic
• Integration Tests: All API endpoints with database
• E2E Tests: Core user journeys (login → order → payment → kitchen)

⚛️ Frontend Testing Patterns (React Testing Library)

Component Testing Setup

// test-utils.tsx - Custom testing utilities
import { render, RenderOptions } from '@testing-library/react'
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
import { ReactElement } from 'react'
import { BrowserRouter } from '@tanstack/react-router'

// Create a test query client with no retries
const createTestQueryClient = () => new QueryClient({
  defaultOptions: {
    queries: {
      retry: false,      // Don't retry on test failures
      gcTime: Infinity,  // Keep data in cache
    },
    mutations: {
      retry: false,
    },
  },
})

interface CustomRenderOptions extends Omit<RenderOptions, 'wrapper'> {
  queryClient?: QueryClient
  initialEntries?: string[]
}

// Custom render with providers
export const renderWithProviders = (
  ui: ReactElement,
  {
    queryClient = createTestQueryClient(),
    initialEntries = ['/'],
    ...renderOptions
  }: CustomRenderOptions = {}
) => {
  const Wrapper = ({ children }: { children: React.ReactNode }) => (
    <QueryClientProvider client={queryClient}>
      <BrowserRouter initialEntries={initialEntries}>
        {children}
      </BrowserRouter>
    </QueryClientProvider>
  )

  return { ...render(ui, { wrapper: Wrapper, ...renderOptions }), queryClient }
}

// Re-export everything
export * from '@testing-library/react'