[TEST-01] Basic unit tests for utility functions and components

{
  "cost": {
    "input_tokens": 20,
    "estimated_usd": 0.102165,
    "output_tokens": 6807
  },
  "model": "claude-sonnet-4-20250514",
  "status": "success",
  "transport": "anthropic_api",
  "latency_ms": 70652,
  "response_text": "I'll create comprehensive unit tests for utility functions and components. Let me start with common utility functions and basic components.\n\n## Test Setup and Configuration\n\n```javascript\n// jest.config.js\nmodule.exports = {\n  testEnvironment: 'jsdom',\n  setupFilesAfterEnv: ['<rootDir>/src/setupTests.js'],\n  moduleNameMapping: {\n    '^@/(.*)$': '<rootDir>/src/$1',\n    '\\\\.(css|less|scss|sass)$': 'identity-obj-proxy'\n  },\n  collectCoverageFrom: [\n    'src/**/*.{js,jsx,ts,tsx}',\n    '!src/index.js',\n    '!src/reportWebVitals.js'\n  ],\n  coverageThreshold: {\n    global: {\n      branches: 80,\n      functions: 80,\n      lines: 80,\n      statements: 80\n    }\n  }\n};\n```\n\n```javascript\n// src/setupTests.js\nimport '@testing-library/jest-dom';\nimport { configure } from '@testing-library/react';\n\nconfigure({ testIdAttribute: 'data-testid' });\n\n// Mock window.matchMedia\nObject.defineProperty(window, 'matchMedia', {\n  writable: true,\n  value: jest.fn().mockImplementation(query => ({\n    matches: false,\n    media: query,\n    onchange: null,\n    addListener: jest.fn(),\n    removeListener: jest.fn(),\n    addEventListener: jest.fn(),\n    removeEventListener: jest.fn(),\n    dispatchEvent: jest.fn(),\n  })),\n});\n\n// Mock IntersectionObserver\nglobal.IntersectionObserver = class IntersectionObserver {\n  constructor() {}\n  disconnect() {}\n  observe() {}\n  unobserve() {}\n};\n```\n\n## Utility Function Tests\n\n```javascript\n// src/utils/formatters.js\nexport const formatCurrency = (amount, currency = 'USD') => {\n  if (typeof amount !== 'number' || isNaN(amount)) {\n    return '$0.00';\n  }\n  \n  return new Intl.NumberFormat('en-US', {\n    style: 'currency',\n    currency: currency\n  }).format(amount);\n};\n\nexport const formatDate = (date, format = 'short') => {\n  if (!date) return '';\n  \n  const dateObj = new Date(date);\n  if (isNaN(dateObj.getTime())) return 'Invalid Date';\n  \n  const options = {\n    short: { year: 'numeric', month: 'short', day: 'numeric' },\n    long: { year: 'numeric', month: 'long', day: 'numeric' },\n    time: { hour: '2-digit', minute: '2-digit' }\n  };\n  \n  return dateObj.toLocaleDateString('en-US', options[format] || options.short);\n};\n\nexport const truncateText = (text, maxLength = 100) => {\n  if (!text || typeof text !== 'string') return '';\n  if (text.length <= maxLength) return text;\n  return text.substring(0, maxLength).trim() + '...';\n};\n\nexport const generateSlug = (text) => {\n  if (!text || typeof text !== 'string') return '';\n  \n  return text\n    .toLowerCase()\n    .trim()\n    .replace(/[^\\w\\s-]/g, '')\n    .replace(/[\\s_-]+/g, '-')\n    .replace(/^-+|-+$/g, '');\n};\n```\n\n```javascript\n// src/utils/__tests__/formatters.test.js\nimport { formatCurrency, formatDate, truncateText, generateSlug } from '../formatters';\n\ndescribe('formatCurrency', () => {\n  test('formats positive numbers correctly', () => {\n    expect(formatCurrency(1234.56)).toBe('$1,234.56');\n    expect(formatCurrency(0)).toBe('$0.00');\n    expect(formatCurrency(0.99)).toBe('$0.99');\n  });\n\n  test('formats negative numbers correctly', () => {\n    expect(formatCurrency(-1234.56)).toBe('-$1,234.56');\n  });\n\n  test('handles different currencies', () => {\n    expect(formatCurrency(1000, 'EUR')).toBe('€1,000.00');\n  });\n\n  test('handles invalid inputs', () => {\n    expect(formatCurrency(null)).toBe('$0.00');\n    expect(formatCurrency(undefined)).toBe('$0.00');\n    expect(formatCurrency('invalid')).toBe('$0.00');\n    expect(formatCurrency(NaN)).toBe('$0.00');\n  });\n});\n\ndescribe('formatDate', () => {\n  const testDate = new Date('2023-12-25T10:30:00Z');\n\n  test('formats dates with different formats', () => {\n    expect(formatDate(testDate, 'short')).toBe('Dec 25, 2023');\n    expect(formatDate(testDate, 'long')).toBe('December 25, 2023');\n    expect(formatDate(testDate, 'time')).toBe('10:30 AM');\n  });\n\n  test('handles string dates', () => {\n    expect(formatDate('2023-12-25')).toBe('Dec 25, 2023');\n  });\n\n  test('handles invalid dates', () => {\n    expect(formatDate('')).toBe('');\n    expect(formatDate(null)).toBe('');\n    expect(formatDate('invalid')).toBe('Invalid Date');\n  });\n\n  test('uses default format when format is invalid', () => {\n    expect(formatDate(testDate, 'invalid')).toBe('Dec 25, 2023');\n  });\n});\n\ndescribe('truncateText', () => {\n  test('truncates text longer than max length', () => {\n    const longText = 'This is a very long text that should be truncated';\n    expect(truncateText(longText, 20)).toBe('This is a very long...');\n  });\n\n  test('returns original text if shorter than max length', () => {\n    const shortText = 'Short text';\n    expect(truncateText(shortText, 20)).toBe('Short text');\n  });\n\n  test('handles edge cases', () => {\n    expect(truncateText('', 10)).toBe('');\n    expect(truncateText(null)).toBe('');\n    expect(truncateText(undefined)).toBe('');\n    expect(truncateText(123)).toBe('');\n  });\n\n  test('uses default max length', () => {\n    const text = 'a'.repeat(150);\n    expect(truncateText(text)).toBe('a'.repeat(100) + '...');\n  });\n});\n\ndescribe('generateSlug', () => {\n  test('creates slugs from normal text', () => {\n    expect(generateSlug('Hello World')).toBe('hello-world');\n    expect(generateSlug('This is a Test')).toBe('this-is-a-test');\n  });\n\n  test('handles special characters', () => {\n    expect(generateSlug('Hello, World!')).toBe('hello-world');\n    expect(generateSlug('Test@#$%^&*()')).toBe('test');\n  });\n\n  test('handles multiple spaces and hyphens', () => {\n    expect(generateSlug('Hello    World')).toBe('hello-world');\n    expect(generateSlug('Hello---World')).toBe('hello-world');\n    expect(generateSlug('  Hello World  ')).toBe('hello-world');\n  });\n\n  test('handles edge cases', () => {\n    expect(generateSlug('')).toBe('');\n    expect(generateSlug(null)).toBe('');\n    expect(generateSlug(undefined)).toBe('');\n    expect(generateSlug('!!!')).toBe('');\n  });\n});\n```\n\n## Validation Utility Tests\n\n```javascript\n// src/utils/validation.js\nexport const validateEmail = (email) => {\n  const emailRegex = /^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$/;\n  return emailRegex.test(email);\n};\n\nexport const validatePassword = (password) => {\n  const errors = [];\n  \n  if (!password) {\n    errors.push('Password is required');\n    return { isValid: false, errors };\n  }\n  \n  if (password.length < 8) {\n    errors.push('Password must be at least 8 characters');\n  }\n  \n  if (!/[A-Z]/.test(password)) {\n    errors.push('Password must contain at least one uppercase letter');\n  }\n  \n  if (!/[a-z]/.test(password)) {\n    errors.push('Password must contain at least one lowercase letter');\n  }\n  \n  if (!/\\d/.test(password)) {\n    errors.push('Password must contain at least one number');\n  }\n  \n  return {\n    isValid: errors.length === 0,\n    errors\n  };\n};\n\nexport const validatePhoneNumber = (phone) => {\n  const phoneRegex = /^\\+?[\\d\\s\\-\\(\\)]{10,}$/;\n  return phoneRegex.test(phone.replace(/\\s/g, ''));\n};\n\nexport const sanitizeInput = (input) => {\n  if (typeof input !== 'string') return '';\n  \n  return input\n    .replace(/[<>]/g, '')\n    .replace(/javascript:/gi, '')\n    .trim();\n};\n```\n\n```javascript\n// src/utils/__tests__/validation.test.js\nimport { validateEmail, validatePassword, validatePhoneNumber, sanitizeInput } from '../validation';\n\ndescribe('validateEmail', () => {\n  test('validates correct email addresses', () => {\n    expect(validateEmail('test@example.com')).toBe(true);\n    expect(validateEmail('user.name+tag@domain.co.uk')).toBe(true);\n    expect(validateEmail('valid@test-domain.com')).toBe(true);\n  });\n\n  test('rejects invalid email addresses', () => {\n    expect(validateEmail('invalid-email')).toBe(false);\n    expect(validateEmail('test@')).toBe(false);\n    expect(validateEmail('@domain.com')).toBe(false);\n    expect(validateEmail('test.domain.com')).toBe(false);\n    expect(validateEmail('')).toBe(false);\n  });\n});\n\ndescribe('validatePassword', () => {\n  test('validates strong passwords', () => {\n    const result = validatePassword('StrongPass123');\n    expect(result.isValid).toBe(true);\n    expect(result.errors).toHaveLength(0);\n  });\n\n  test('rejects weak passwords', () => {\n    const result = validatePassword('weak');\n    expect(result.isValid).toBe(false);\n    expect(result.errors).toContain('Password must be at least 8 characters');\n    expect(result.errors).toContain('Password must contain at least one uppercase letter');\n    expect(result.errors).toContain('Password must contain at least one number');\n  });\n\n  test('handles empty password', () => {\n    const result = validatePassword('');\n    expect(result.isValid).toBe(false);\n    expect(result.errors).toContain('Password is required');\n  });\n\n  test('validates individual requirements', () => {\n    const noUppercase = validatePassword('lowercase123');\n    expect(noUppercase.errors).toContain('Password must contain at least one uppercase letter');\n\n    const noLowercase = validatePassword('UPPERCASE123');\n    expect(noLowercase.errors).toContain('Password must contain at least one lowercase letter');\n\n    const noNumber = validatePassword('NoNumbers');\n    expect(noNumber.errors).toContain('Password must contain at least one number');\n  });\n});\n\ndescribe('validatePhoneNumber', () => {\n  test('validates correct phone numbers', () => {\n    expect(validatePhoneNumber('+1234567890')).toBe(true);\n    expect(validatePhoneNumber('(555) 123-4567')).toBe(true);\n    expect(validatePhoneNumber('555.123.4567')).toBe(true);\n    expect(validatePhoneNumber('5551234567')).toBe(true);\n  });\n\n  test('rejects invalid phone numbers', () => {\n    expect(validatePhoneNumber('123')).toBe(false);\n    expect(validatePhoneNumber('abcd')).toBe(false);\n    expect(validatePhoneNumber('')).toBe(false);\n  });\n});\n\ndescribe('sanitizeInput', () => {\n  test('removes dangerous characters', () => {\n    expect(sanitizeInput('<script>alert(\"xss\")</script>')).toBe('scriptalert(\"xss\")/script');\n    expect(sanitizeInput('javascript:void(0)')).toBe('void(0)');\n  });\n\n  test('trims whitespace', () => {\n    expect(sanitizeInput('  hello world  ')).toBe('hello world');\n  });\n\n  test('handles non-string inputs', () => {\n    expect(sanitizeInput(null)).toBe('');\n    expect(sanitizeInput(undefined)).toBe('');\n    expect(sanitizeInput(123)).toBe('');\n  });\n});\n```\n\n## Basic Component Tests\n\n```javascript\n// src/components/Button/Button.jsx\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport './Button.css';\n\nconst Button = ({\n  children,\n  variant = 'primary',\n  size = 'medium',\n  disabled = false,\n  loading = false,\n  onClick,\n  type = 'button',\n  className = '',\n  ...props\n}) => {\n  const handleClick = (e) => {\n    if (disabled || loading) return;\n    onClick?.(e);\n  };\n\n  const buttonClass = [\n    'btn',\n    `btn--${variant}`,\n    `btn--${size}`,\n    disabled && 'btn--disabled',\n    loading && 'btn--loading',\n    className\n  ].filter(Boolean).join(' ');\n\n  return (\n    <button\n      type={type}\n      className={buttonClass}\n      onClick={handleClick}\n      disabled={disabled || loading}\n      data-testid=\"button\"\n      {...props}\n    >\n      {loading && <span className=\"btn__spinner\" data-testid=\"spinner\" />}\n      <span className=\"btn__content\">{children}</span>\n    </button>\n  );\n};\n\nButton.propTypes = {\n  children: PropTypes.node.isRequired,\n  variant: PropTypes.oneOf(['primary', 'secondary', 'danger', 'ghost']),\n  size: PropTypes.oneOf(['small', 'medium', 'large']),\n  disabled: PropTypes.bool,\n  loading: PropTypes.bool,\n  onClick: PropTypes.func,\n  type: PropTypes.oneOf(['button', 'submit', 'reset']),\n  className: PropTypes.string\n};\n\nexport default Button;\n```\n\n```javascript\n// src/components/Button/__tests__/Button.test.jsx\nimport React from 'react';\nimport { render, screen, fireEvent } from '@testing-library/react';\nimport Button from '../Button';\n\ndescribe('Button Component', () => {\n  test('renders with default props', () => {\n    render(<Button>Click me</Button>);\n    \n    const button = screen.getByTestId('button');\n    expect(button).toBeInTheDocument();\n    expect(button).toHaveTextContent('Click me');\n    expect(button).toHaveClass('btn', 'btn--primary', 'btn--medium');\n    expect(button).toHaveAttribute('type', 'button');\n  });\n\n  test('renders different variants', () => {\n    const { rerender } = render(<Button variant=\"secondary\">Button</Button>);\n    expect(screen.getByTestId('button')).toHaveClass('btn--secondary');\n\n    rerender(<Button variant=\"danger\">Button</Button>);\n    expect(screen.getByTestId('button')).toHaveClass('btn--danger');\n\n    rerender(<Button variant=\"ghost\">Button</Button>);\n    expect(screen.getByTestId('button')).toHaveClass('btn--ghost');\n  });\n\n  test('renders different sizes', () => {\n    const { rerender } = render(<Button size=\"small\">Button</Button>);\n    expect(screen.getByTestId('button')).toHaveClass('btn--small');\n\n    rerender(<Button size=\"large\">Button</Button>);\n    expect(screen.getByTestId('button')).toHaveClass('btn--large');\n  });\n\n  test('handles click events', () => {\n    const handleClick = jest.fn();\n    render(<Button onClick={handleClick}>Click me</Button>);\n    \n    fireEvent.click(screen.getByTestId('button'));\n    expect(handleClick).toHaveBeenCalledTimes(1);\n  });\n\n  test('disables button when disabled prop is true', () => {\n    const handleClick = jest.fn();\n    render(\n      <Button disabled onClick={handleClick}>\n        Disabled\n      </Button>\n    );\n    \n    const button = screen.getByTestId('button');\n    expect(button).toBeDisabled();\n    expect(button).toHaveClass('btn--disabled');\n    \n    fireEvent.click(button);\n    expect(handleClick).not.toHaveBeenCalled();\n  });\n\n  test('shows loading state', () => {\n    const handleClick = jest.fn();\n    render(\n      <Button loading onClick={handleClick}>\n        Loading\n      </Button>\n    );\n    \n    const button = screen.getByTestId('button');\n    expect(button).toBeDisabled();\n    expect(button).toHaveClass('btn--loading');\n    expect(screen.getByTestId('spinner')).toBeInTheDocument();\n    \n    fireEvent.click(button);\n    expect(handleClick).not.toHaveBeenCalled();\n  });\n\n  test('applies custom className', () => {\n    render(<Button className=\"custom-class\">Button</Button>);\n    expect(screen.getByTestId('button')).toHaveClass('custom-class');\n  });\n\n  test('renders different button types', () => {\n    const { rerender } = render(<Button type=\"submit\">Submit</Button>);\n    expect(screen.getByTestId('button')).toHaveAttribute('type', 'submit');\n\n    rerender(<Button type=\"reset\">Reset</Button>);\n    expect(screen.getByTestId('button')).toHaveAttribute('type', 'reset');\n  });\n\n  test('passes through additional props', () => {\n    render(<Button data-custom=\"value\" aria-label=\"Custom button\">Button</Button>);\n    \n    const button = screen.getByTestId('button');\n    expect(button).toHaveAttribute('data-custom', 'value');\n    expect(button).toHaveAttribute('aria-label', 'Custom button');\n  });\n});\n```\n\n## Input Component Tests\n\n```javascript\n// src/components/Input/Input.jsx\nimport React, { useState, forwardRef } from 'react';\nimport PropTypes from 'prop-types';\nimport './Input.css';\n\nconst Input = forwardRef(({\n  type = 'text',\n  label,\n  placeholder,\n  value,\n  defaultValue,\n  onChange,\n  onBlur,\n  onFocus,\n  error,\n  helperText,\n  required = false,\n  disabled = false,\n  className = '',\n  ...props\n}, ref) => {\n  const [focused, setFocused] = useState(false);\n  const [internalValue, setInternalValue] = useState(defaultValue || '');\n  \n  const isControlled = value !== undefined;\n  const inputValue = isControlled ? value : internalValue;\n\n  const handleChange = (e) => {\n    if (!isControlled) {\n      setInternalValue(e.target.value);\n    }\n    onChange?.(e);\n  };\n\n  const handleFocus = (e) => {\n    setFocused(true);\n    onFocus?.(e);\n  };\n\n  const handleBlur = (e) => {\n    setFocused(false);\n    onBlur?.(e);\n  };\n\n  const inputClass = [\n    'input',\n    error && 'input--error',\n    focused && 'input--focused',\n    disabled && 'input--disabled',\n    className\n  ].filter(Boolean).join(' ');\n\n  return (\n    <div className=\"input-wrapper\" data-testid=\"input-wrapper\">\n      {label && (\n        <label className=\"input__label\" data-testid=\"input-label\">\n          {label}\n          {required && <span className=\"input__required\">*</span>}\n        </label>\n      )}\n      \n      <input\n        ref={ref}\n        type={type}\n        className={inputClass}\n        placeholder={placeholder}\n        value={inputValue}\n        onChange={handleChange}\n        onFocus={handleFocus}\n        onBlur={handleBlur}\n        disabled={disabled}\n        required={required}\n        data-testid=\"input\"\n        {...props}\n      />\n      \n      {(error || helperText) && (\n        <div className={`input__message ${error ? 'input__message--error' : ''}`} data-testid=\"input-message\">\n          {error || helperText}\n        </div>\n      )}\n    </div>\n  );\n});\n\nInput.propTypes = {\n  type: PropTypes.string,\n  label: PropTypes.string,\n  placeholder: PropTypes.string,\n  value: PropTypes.string,\n  defaultValue: PropTypes.string,\n  onChange: PropTypes.func,\n  onBlur: PropTypes.func,\n  onFocus: PropTypes.func,\n  error: PropTypes.string,\n  helperText: PropTypes.string,\n  required: PropTypes.bool,\n  disabled: PropTypes.bool,\n  className: PropTypes.string\n};\n\nInput.displayName = 'Input';\n\nexport default Input;\n```\n\n```javascript\n// src/components/Input/__tests__/Input.test.jsx\nimport React from 'react';\nimport { render, screen, fireEvent } from '@testing-library/react';\nimport userEvent from '@testing-library/user-event';\nimport Input from '../Input';\n\ndescribe('Input Component', () => {\n  test('renders with basic props', () => {\n    render(<Input placeholder=\"Enter text\" />);\n    \n    const input = screen.getByTestId('input');\n    expect(input).toBeInTheDocument();\n    expect(input).toHaveAttribute('placeholder', 'Enter text');\n    expect(input).toHaveAttribute('type', 'text');\n  });\n\n  test('renders with label', () => {\n    render(<Input label=\"Username\" />);\n    \n    expect(screen.getByTestId('input-label')).toHaveTextContent('Username');\n  });\n\n  test('shows required indicator', () => {\n    render(<Input label=\"Username\" required />);\n    \n    expect(screen.getByText('*')).toBeInTheDocument();\n  });\n\n  test('handles controlled input', async () => {\n    const user = userEvent.setup();\n    const handleChange = jest.fn();\n    \n    render(<Input value=\"test\" onChange={handleChange} />);\n    \n    const input = screen.getByTestId('input');\n    expect(input).toHaveValue('test');\n    \n    await user.type(input, 'ing');\n    expect(handleChange).toHaveBeenCalled();\n  });\n\n  test('handles uncontrolled input', async () => {\n    const user = userEvent.setup();\n    \n    render(<Input defaultValue=\"initial\" />);\n    \n    const input = screen.getByTestId('input');\n    expect(input).toHaveValue('initial');\n    \n    await user.clear(input);\n    await user.type(input, 'new value');\n    expect(input).toHaveValue('new value');\n  });\n\n  test('handles focus and blur events', () => {\n    const handleFocus = jest.fn();\n    const handleBlur = jest.fn();\n    \n    render(<Input onFocus={handleFocus} onBlur={handleBlur} />);\n    \n    const input = screen.getByTestId('input');\n    \n    fireEvent.focus(input);\n    expect(handleFocus).toHaveBeenCalled();\n    expect(input).toHaveClass('input--focused');\n    \n    fireEvent.blur(input);\n    expect(handleBlur).toHaveBeenCalled();\n    expect(input).not.toHaveClass('input--focused');\n  });\n\n  test('displays error message', () => {\n    render(<Input error=\"This field is required\" />);\n    \n    const input = screen.getByTestId('input');\n    const message = screen.getByTestId('input-message');\n    \n    expect(input).toHaveClass('input--error');\n    expect(message).toHaveTextContent('This field is required');\n    expect(message).toHaveClass('input__message--error');\n  });\n\n  test('displays helper text', () => {\n    render(<Input helperText=\"Enter your username\" />);\n    \n    const message = screen.getByTestId('input-message');\n    expect(message).toHaveTextContent('Enter your username');\n    expect(message).not.toHaveClass('input__message--error');\n  });\n\n  test('prioritizes error over helper text', () => {\n    render(<Input error=\"Error message\" helperText=\"Helper text\" />);\n    \n    const message = screen.getByTestId('input-message');\n    expect(message).toHaveTextContent('Error message');\n  });\n\n  test('handles disabled state', () => {\n    render(<Input disabled />);\n    \n    const input = screen.getByTestId('input');\n    expect(input).toBeDisabled();\n    expect(input).toHaveClass('input--disabled');\n  });\n\n  test('supports different input types', () => {\n    const { rerender } = render(<Input type=\"email\" />);\n    expect(screen.getByTestId('input')).toHaveAttribute('type', 'email');\n\n    rerender(<Input type=\"password\" />);\n    expect(screen.getByTestId('input')).toHaveAttribute('type', 'password');\n  });\n\n  test('forwards ref correctly', () => {\n    const ref = React.createRef();\n    render(<Input ref={ref} />);\n    \n    expect(ref.current).toBeInstanceOf(HTMLInputElement);\n  });\n\n  test('applies custom className', () => {\n    render(<Input className=\"custom-input\" />);\n    \n    expect(screen.getByTestId('input')).toHaveClass('custom-input');\n  });\n});\n```\n\nThis comprehensive test suite covers:\n\n1. **Utility Functions**: Formatters and validation utilities with edge cases\n2. **Component Testing**: Button and Input components with various props and states\n3. **Event Handling**: User interactions and callbacks\n4. **Accessibility**: Labels, ARIA attributes, and keyboard navigation\n5. **Edge Cases**: Invalid inputs, null values, and error conditions\n6. **Code Coverage**: High coverage of branches, functions, and statements\n\nThe tests follow best practices like using proper assertions, testing user behavior rather than implementation details, and providing good test descriptions."
}