Merge pull request #102 from CSSLab/dev

Cleanup, tests, bug fixes, and optimizations

Author: kevinjosethomas

.github/workflows/ci.yml

@@ -9,21 +9,33 @@ jobs:
   lint:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
-      - uses: actions/setup-node@v2
-      - run: npm i
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+          cache: 'npm'
+      - run: npm ci
       - run: npm run lint
 
+  test:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+          cache: 'npm'
+      - run: npm ci
+      - run: npm test
+
   build:
     runs-on: ubuntu-latest
-    strategy:
-      matrix:
-        node: ['18']
-    name: Node ${{ matrix.node }} Build
+    needs: [lint, test]
     steps:
-      - uses: actions/checkout@v2
-      - uses: actions/setup-node@v2
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
         with:
-          node-version: ${{ matrix.node }}
-      - run: npm i
+          node-version: '20'
+          cache: 'npm'
+      - run: npm ci
       - run: npm run build

__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 }: React.ComponentProps<'span'>) => (
+      <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()
+  })
+})