feat: add automated tests for some common components

Author: kevinjosethomas

__tests__/components/AnimatedNumber.test.tsx

@@ -0,0 +1,114 @@
+import { render, screen } from '@testing-library/react'
+import { AnimatedNumber } from '../../src/components/Common/AnimatedNumber'
+
+// Mock framer-motion to avoid complex animation testing
+let mockValue = 1000
+jest.mock('framer-motion', () => ({
+  motion: {
+    span: ({ children, className, ...props }: any) => (
+      <span className={className} {...props}>
+        {children}
+      </span>
+    ),
+  },
+  useSpring: jest.fn((value) => {
+    mockValue = value
+    return {
+      set: jest.fn((newValue) => {
+        mockValue = newValue
+      }),
+      get: jest.fn(() => mockValue),
+    }
+  }),
+  useTransform: jest.fn((_, transform) => {
+    return transform(mockValue)
+  }),
+}))
+
+describe('AnimatedNumber Component', () => {
+  beforeEach(() => {
+    jest.clearAllMocks()
+  })
+
+  it('should render with default formatting', () => {
+    render(<AnimatedNumber value={1000} />)
+
+    // The component should render the formatted value
+    expect(screen.getByText('1,000')).toBeInTheDocument()
+  })
+
+  it('should apply custom className', () => {
+    render(<AnimatedNumber value={1000} className="custom-class" />)
+
+    const element = screen.getByText('1,000')
+    expect(element).toHaveClass('custom-class')
+  })
+
+  it('should use custom formatValue function', () => {
+    const customFormat = (value: number) => `$${value.toFixed(2)}`
+    render(<AnimatedNumber value={1000} formatValue={customFormat} />)
+
+    expect(screen.getByText('$1000.00')).toBeInTheDocument()
+  })
+
+  it('should handle zero value', () => {
+    render(<AnimatedNumber value={0} />)
+
+    expect(screen.getByText('0')).toBeInTheDocument()
+  })
+
+  it('should handle negative values', () => {
+    render(<AnimatedNumber value={-500} />)
+
+    expect(screen.getByText('-500')).toBeInTheDocument()
+  })
+
+  it('should handle decimal values with default rounding', () => {
+    render(<AnimatedNumber value={1234.56} />)
+
+    expect(screen.getByText('1,235')).toBeInTheDocument()
+  })
+
+  it('should handle large numbers', () => {
+    render(<AnimatedNumber value={1000000} />)
+
+    expect(screen.getByText('1,000,000')).toBeInTheDocument()
+  })
+
+  it('should use custom duration prop', () => {
+    const { rerender } = render(<AnimatedNumber value={1000} duration={2.5} />)
+
+    // Test that component renders without error with custom duration
+    expect(screen.getByText('1,000')).toBeInTheDocument()
+
+    // Rerender with different value to test duration effect
+    rerender(<AnimatedNumber value={2000} duration={0.5} />)
+    expect(screen.getByText('2,000')).toBeInTheDocument()
+  })
+
+  it('should handle percentage formatting', () => {
+    const percentFormat = (value: number) => `${(value * 100).toFixed(1)}%`
+    render(<AnimatedNumber value={0.85} formatValue={percentFormat} />)
+
+    expect(screen.getByText('85.0%')).toBeInTheDocument()
+  })
+
+  it('should handle currency formatting', () => {
+    const currencyFormat = (value: number) =>
+      new Intl.NumberFormat('en-US', {
+        style: 'currency',
+        currency: 'USD',
+      }).format(value)
+
+    render(<AnimatedNumber value={1234.56} formatValue={currencyFormat} />)
+
+    expect(screen.getByText('$1,234.56')).toBeInTheDocument()
+  })
+
+  it('should render as motion.span element', () => {
+    render(<AnimatedNumber value={1000} />)
+
+    const element = screen.getByText('1,000')
+    expect(element.tagName).toBe('SPAN')
+  })
+})

__tests__/components/AuthenticatedWrapper.test.tsx

@@ -0,0 +1,143 @@
+import { render, screen } from '@testing-library/react'
+import { AuthenticatedWrapper } from '../../src/components/Common/AuthenticatedWrapper'
+import { AuthContext } from '../../src/contexts/AuthContext'
+import { User } from '../../src/types/auth'
+
+const mockUser: User = {
+  clientId: 'test-client-id',
+  displayName: 'TestUser',
+  lichessId: 'testuser',
+}
+
+const AuthProvider = ({
+  user,
+  children,
+}: {
+  user: User | null
+  children: React.ReactNode
+}) => (
+  <AuthContext.Provider
+    value={{
+      user,
+      connectLichess: jest.fn(),
+      logout: jest.fn(),
+    }}
+  >
+    {children}
+  </AuthContext.Provider>
+)
+
+describe('AuthenticatedWrapper Component', () => {
+  it('should render children when user is authenticated', () => {
+    render(
+      <AuthProvider user={mockUser}>
+        <AuthenticatedWrapper>
+          <div>Protected content</div>
+        </AuthenticatedWrapper>
+      </AuthProvider>,
+    )
+
+    expect(screen.getByText('Protected content')).toBeInTheDocument()
+  })
+
+  it('should not render children when user is not authenticated', () => {
+    render(
+      <AuthProvider user={null}>
+        <AuthenticatedWrapper>
+          <div>Protected content</div>
+        </AuthenticatedWrapper>
+      </AuthProvider>,
+    )
+
+    expect(screen.queryByText('Protected content')).not.toBeInTheDocument()
+  })
+
+  it('should handle multiple children when user is authenticated', () => {
+    render(
+      <AuthProvider user={mockUser}>
+        <AuthenticatedWrapper>
+          <div>First child</div>
+          <div>Second child</div>
+          <span>Third child</span>
+        </AuthenticatedWrapper>
+      </AuthProvider>,
+    )
+
+    expect(screen.getByText('First child')).toBeInTheDocument()
+    expect(screen.getByText('Second child')).toBeInTheDocument()
+    expect(screen.getByText('Third child')).toBeInTheDocument()
+  })
+
+  it('should not render multiple children when user is not authenticated', () => {
+    render(
+      <AuthProvider user={null}>
+        <AuthenticatedWrapper>
+          <div>First child</div>
+          <div>Second child</div>
+          <span>Third child</span>
+        </AuthenticatedWrapper>
+      </AuthProvider>,
+    )
+
+    expect(screen.queryByText('First child')).not.toBeInTheDocument()
+    expect(screen.queryByText('Second child')).not.toBeInTheDocument()
+    expect(screen.queryByText('Third child')).not.toBeInTheDocument()
+  })
+
+  it('should handle no children gracefully when user is authenticated', () => {
+    render(
+      <AuthProvider user={mockUser}>
+        <AuthenticatedWrapper />
+      </AuthProvider>,
+    )
+
+    // Should not crash and should render empty fragment
+    expect(screen.queryByText(/./)).not.toBeInTheDocument()
+  })
+
+  it('should handle no children gracefully when user is not authenticated', () => {
+    render(
+      <AuthProvider user={null}>
+        <AuthenticatedWrapper />
+      </AuthProvider>,
+    )
+
+    // Should not crash and should render empty fragment
+    expect(screen.queryByText(/./)).not.toBeInTheDocument()
+  })
+
+  it('should re-render when authentication state changes', () => {
+    const { rerender } = render(
+      <AuthProvider user={null}>
+        <AuthenticatedWrapper>
+          <div>Protected content</div>
+        </AuthenticatedWrapper>
+      </AuthProvider>,
+    )
+
+    // Initially not authenticated
+    expect(screen.queryByText('Protected content')).not.toBeInTheDocument()
+
+    // Re-render with authenticated user
+    rerender(
+      <AuthProvider user={mockUser}>
+        <AuthenticatedWrapper>
+          <div>Protected content</div>
+        </AuthenticatedWrapper>
+      </AuthProvider>,
+    )
+
+    expect(screen.getByText('Protected content')).toBeInTheDocument()
+
+    // Re-render back to unauthenticated
+    rerender(
+      <AuthProvider user={null}>
+        <AuthenticatedWrapper>
+          <div>Protected content</div>
+        </AuthenticatedWrapper>
+      </AuthProvider>,
+    )
+
+    expect(screen.queryByText('Protected content')).not.toBeInTheDocument()
+  })
+})

__tests__/components/Compose.test.tsx

@@ -0,0 +1,128 @@
+import { render, screen } from '@testing-library/react'
+import { Compose } from '../../src/components/Common/Compose'
+import { ErrorBoundary } from '../../src/components/Common/ErrorBoundary'
+
+// Mock ErrorBoundary to avoid chessground import issues
+jest.mock('../../src/components/Common/ErrorBoundary', () => ({
+  ErrorBoundary: ({ children }: { children: React.ReactNode }) => (
+    <div data-testid="error-boundary">{children}</div>
+  ),
+}))
+
+// Mock providers for testing
+const MockProvider1 = ({ children }: { children: React.ReactNode }) => (
+  <div data-testid="provider-1">{children}</div>
+)
+
+const MockProvider2 = ({ children }: { children: React.ReactNode }) => (
+  <div data-testid="provider-2">{children}</div>
+)
+
+const MockProvider3 = ({ children }: { children: React.ReactNode }) => (
+  <div data-testid="provider-3">{children}</div>
+)
+
+describe('Compose Component', () => {
+  it('should render children with single component', () => {
+    render(
+      <Compose components={[MockProvider1]}>
+        <div data-testid="child">Test Child</div>
+      </Compose>,
+    )
+
+    expect(screen.getByTestId('provider-1')).toBeInTheDocument()
+    expect(screen.getByTestId('child')).toBeInTheDocument()
+    expect(screen.getByText('Test Child')).toBeInTheDocument()
+  })
+
+  it('should nest multiple components correctly', () => {
+    render(
+      <Compose components={[MockProvider1, MockProvider2]}>
+        <div data-testid="child">Nested Child</div>
+      </Compose>,
+    )
+
+    expect(screen.getByTestId('provider-1')).toBeInTheDocument()
+    expect(screen.getByTestId('provider-2')).toBeInTheDocument()
+    expect(screen.getByTestId('child')).toBeInTheDocument()
+
+    // Verify nesting order
+    const provider1 = screen.getByTestId('provider-1')
+    const provider2 = screen.getByTestId('provider-2')
+    expect(provider1).toContainElement(provider2)
+  })
+
+  it('should handle three levels of nesting', () => {
+    render(
+      <Compose components={[MockProvider1, MockProvider2, MockProvider3]}>
+        <div data-testid="child">Deep Nested Child</div>
+      </Compose>,
+    )
+
+    expect(screen.getByTestId('provider-1')).toBeInTheDocument()
+    expect(screen.getByTestId('provider-2')).toBeInTheDocument()
+    expect(screen.getByTestId('provider-3')).toBeInTheDocument()
+    expect(screen.getByTestId('child')).toBeInTheDocument()
+
+    // Verify deep nesting
+    const provider1 = screen.getByTestId('provider-1')
+    const provider2 = screen.getByTestId('provider-2')
+    const provider3 = screen.getByTestId('provider-3')
+    expect(provider1).toContainElement(provider2)
+    expect(provider2).toContainElement(provider3)
+  })
+
+  it('should work with ErrorBoundary component', () => {
+    render(
+      <Compose components={[ErrorBoundary, MockProvider1]}>
+        <div data-testid="child">Error Wrapped Child</div>
+      </Compose>,
+    )
+
+    expect(screen.getByTestId('error-boundary')).toBeInTheDocument()
+    expect(screen.getByTestId('provider-1')).toBeInTheDocument()
+    expect(screen.getByTestId('child')).toBeInTheDocument()
+  })
+
+  it('should handle empty components array', () => {
+    render(
+      <Compose components={[]}>
+        <div data-testid="child">Unwrapped Child</div>
+      </Compose>,
+    )
+
+    expect(screen.getByTestId('child')).toBeInTheDocument()
+    expect(screen.getByText('Unwrapped Child')).toBeInTheDocument()
+  })
+
+  it('should render multiple children', () => {
+    render(
+      <Compose components={[MockProvider1]}>
+        <div data-testid="child-1">First Child</div>
+        <div data-testid="child-2">Second Child</div>
+      </Compose>,
+    )
+
+    expect(screen.getByTestId('provider-1')).toBeInTheDocument()
+    expect(screen.getByTestId('child-1')).toBeInTheDocument()
+    expect(screen.getByTestId('child-2')).toBeInTheDocument()
+    expect(screen.getByText('First Child')).toBeInTheDocument()
+    expect(screen.getByText('Second Child')).toBeInTheDocument()
+  })
+
+  it('should preserve React node types', () => {
+    render(
+      <Compose components={[MockProvider1]}>
+        <span>Text node</span>
+        <button>Button node</button>
+        <input placeholder="Input node" />
+      </Compose>,
+    )
+
+    expect(screen.getByText('Text node')).toBeInTheDocument()
+    expect(
+      screen.getByRole('button', { name: 'Button node' }),
+    ).toBeInTheDocument()
+    expect(screen.getByPlaceholderText('Input node')).toBeInTheDocument()
+  })
+})