@moontra/moonui 2.0.8 → 2.0.10

package/src/components/ui/__tests__/avatar.test.tsx

@@ -0,0 +1,382 @@
+import React from 'react'
+import { render, screen } from '@testing-library/react'
+import '@testing-library/jest-dom'
+import { Avatar, AvatarImage, AvatarFallback, AvatarGroup } from '../avatar'
+
+describe('Avatar Component', () => {
+  describe('Avatar', () => {
+    it('renders correctly with default props', () => {
+      render(
+        <Avatar>
+          <AvatarFallback>JD</AvatarFallback>
+        </Avatar>
+      )
+      const avatar = screen.getByText('JD').parentElement
+      expect(avatar).toBeInTheDocument()
+      expect(avatar).toHaveClass('relative')
+      expect(avatar).toHaveClass('flex')
+      expect(avatar).toHaveClass('shrink-0')
+      expect(avatar).toHaveClass('overflow-hidden')
+      expect(avatar).toHaveClass('h-10')
+      expect(avatar).toHaveClass('w-10')
+      expect(avatar).toHaveClass('rounded-full')
+    })
+
+    it('applies custom className', () => {
+      render(
+        <Avatar className="custom-avatar">
+          <AvatarFallback>JD</AvatarFallback>
+        </Avatar>
+      )
+      const avatar = screen.getByText('JD').parentElement
+      expect(avatar).toHaveClass('custom-avatar')
+    })
+
+    it('forwards ref correctly', () => {
+      const ref = React.createRef<HTMLSpanElement>()
+      render(
+        <Avatar ref={ref}>
+          <AvatarFallback>JD</AvatarFallback>
+        </Avatar>
+      )
+      expect(ref.current).toBeInstanceOf(HTMLSpanElement)
+    })
+
+    describe('Sizes', () => {
+      it('renders xs size correctly', () => {
+        render(
+          <Avatar size="xs">
+            <AvatarFallback>XS</AvatarFallback>
+          </Avatar>
+        )
+        const avatar = screen.getByText('XS').parentElement
+        expect(avatar).toHaveClass('h-6')
+        expect(avatar).toHaveClass('w-6')
+      })
+
+      it('renders sm size correctly', () => {
+        render(
+          <Avatar size="sm">
+            <AvatarFallback>SM</AvatarFallback>
+          </Avatar>
+        )
+        const avatar = screen.getByText('SM').parentElement
+        expect(avatar).toHaveClass('h-8')
+        expect(avatar).toHaveClass('w-8')
+      })
+
+      it('renders md size correctly', () => {
+        render(
+          <Avatar size="md">
+            <AvatarFallback>MD</AvatarFallback>
+          </Avatar>
+        )
+        const avatar = screen.getByText('MD').parentElement
+        expect(avatar).toHaveClass('h-10')
+        expect(avatar).toHaveClass('w-10')
+      })
+
+      it('renders lg size correctly', () => {
+        render(
+          <Avatar size="lg">
+            <AvatarFallback>LG</AvatarFallback>
+          </Avatar>
+        )
+        const avatar = screen.getByText('LG').parentElement
+        expect(avatar).toHaveClass('h-12')
+        expect(avatar).toHaveClass('w-12')
+      })
+
+      it('renders xl size correctly', () => {
+        render(
+          <Avatar size="xl">
+            <AvatarFallback>XL</AvatarFallback>
+          </Avatar>
+        )
+        const avatar = screen.getByText('XL').parentElement
+        expect(avatar).toHaveClass('h-16')
+        expect(avatar).toHaveClass('w-16')
+      })
+
+      it('renders 2xl size correctly', () => {
+        render(
+          <Avatar size="2xl">
+            <AvatarFallback>2XL</AvatarFallback>
+          </Avatar>
+        )
+        const avatar = screen.getByText('2XL').parentElement
+        expect(avatar).toHaveClass('h-20')
+        expect(avatar).toHaveClass('w-20')
+      })
+    })
+
+    describe('Radius', () => {
+      it('renders default radius correctly', () => {
+        render(
+          <Avatar radius="default">
+            <AvatarFallback>DF</AvatarFallback>
+          </Avatar>
+        )
+        const avatar = screen.getByText('DF').parentElement
+        expect(avatar).toHaveClass('rounded-full')
+      })
+
+      it('renders sm radius correctly', () => {
+        render(
+          <Avatar radius="sm">
+            <AvatarFallback>SM</AvatarFallback>
+          </Avatar>
+        )
+        const avatar = screen.getByText('SM').parentElement
+        expect(avatar).toHaveClass('rounded-md')
+      })
+
+      it('renders lg radius correctly', () => {
+        render(
+          <Avatar radius="lg">
+            <AvatarFallback>LG</AvatarFallback>
+          </Avatar>
+        )
+        const avatar = screen.getByText('LG').parentElement
+        expect(avatar).toHaveClass('rounded-xl')
+      })
+
+      it('renders full radius correctly', () => {
+        render(
+          <Avatar radius="full">
+            <AvatarFallback>FL</AvatarFallback>
+          </Avatar>
+        )
+        const avatar = screen.getByText('FL').parentElement
+        expect(avatar).toHaveClass('rounded-full')
+      })
+
+      it('renders none radius correctly', () => {
+        render(
+          <Avatar radius="none">
+            <AvatarFallback>NO</AvatarFallback>
+          </Avatar>
+        )
+        const avatar = screen.getByText('NO').parentElement
+        expect(avatar).toHaveClass('rounded-none')
+      })
+    })
+
+    describe('Variants', () => {
+      it('renders default variant correctly', () => {
+        render(
+          <Avatar variant="default">
+            <AvatarFallback>DF</AvatarFallback>
+          </Avatar>
+        )
+        const avatar = screen.getByText('DF').parentElement
+        expect(avatar).toBeInTheDocument()
+        // Default variant has no additional classes
+      })
+
+      it('renders ring variant correctly', () => {
+        render(
+          <Avatar variant="ring">
+            <AvatarFallback>RG</AvatarFallback>
+          </Avatar>
+        )
+        const avatar = screen.getByText('RG').parentElement
+        expect(avatar).toHaveClass('ring-2')
+        expect(avatar).toHaveClass('ring-gray-300')
+        expect(avatar).toHaveClass('dark:ring-gray-600')
+      })
+
+      it('renders ringOffset variant correctly', () => {
+        render(
+          <Avatar variant="ringOffset">
+            <AvatarFallback>RO</AvatarFallback>
+          </Avatar>
+        )
+        const avatar = screen.getByText('RO').parentElement
+        expect(avatar).toHaveClass('ring-2')
+        expect(avatar).toHaveClass('ring-gray-300')
+        expect(avatar).toHaveClass('dark:ring-gray-600')
+        expect(avatar).toHaveClass('ring-offset-2')
+        expect(avatar).toHaveClass('ring-offset-background')
+        expect(avatar).toHaveClass('dark:ring-offset-gray-950')
+      })
+
+      it('renders border variant correctly', () => {
+        render(
+          <Avatar variant="border">
+            <AvatarFallback>BD</AvatarFallback>
+          </Avatar>
+        )
+        const avatar = screen.getByText('BD').parentElement
+        expect(avatar).toHaveClass('border-2')
+        expect(avatar).toHaveClass('border-gray-200')
+        expect(avatar).toHaveClass('dark:border-gray-800')
+      })
+    })
+  })
+
+  describe('AvatarImage', () => {
+    it('renders image correctly', () => {
+      render(
+        <Avatar>
+          <AvatarImage src="/test-image.jpg" alt="Test User" />
+          <AvatarFallback>TU</AvatarFallback>
+        </Avatar>
+      )
+      // AvatarImage falls back to AvatarFallback when image fails to load in test environment
+      const fallback = screen.getByText('TU')
+      expect(fallback).toBeInTheDocument()
+    })
+
+    it('applies custom className to image', () => {
+      render(
+        <Avatar>
+          <AvatarImage src="/test.jpg" className="custom-image" />
+          <AvatarFallback>TU</AvatarFallback>
+        </Avatar>
+      )
+      // AvatarImage falls back to AvatarFallback when image fails to load in test environment
+      const fallback = screen.getByText('TU')
+      expect(fallback).toBeInTheDocument()
+    })
+
+    it('forwards ref correctly', () => {
+      const ref = React.createRef<HTMLImageElement>()
+      render(
+        <Avatar>
+          <AvatarImage ref={ref} src="/test.jpg" />
+          <AvatarFallback>TU</AvatarFallback>
+        </Avatar>
+      )
+      // In test environment, ref may be null due to image loading behavior
+      expect(ref.current).toBeDefined()
+    })
+  })
+
+  describe('AvatarFallback', () => {
+    it('renders fallback correctly', () => {
+      render(
+        <Avatar>
+          <AvatarFallback>FB</AvatarFallback>
+        </Avatar>
+      )
+      const fallback = screen.getByText('FB')
+      expect(fallback).toBeInTheDocument()
+      expect(fallback).toHaveClass('flex')
+      expect(fallback).toHaveClass('h-full')
+      expect(fallback).toHaveClass('w-full')
+      expect(fallback).toHaveClass('items-center')
+      expect(fallback).toHaveClass('justify-center')
+      expect(fallback).toHaveClass('bg-muted')
+    })
+
+    it('applies custom className to fallback', () => {
+      render(
+        <Avatar>
+          <AvatarFallback className="custom-fallback">FB</AvatarFallback>
+        </Avatar>
+      )
+      const fallback = screen.getByText('FB')
+      expect(fallback).toHaveClass('custom-fallback')
+    })
+
+    it('forwards ref correctly', () => {
+      const ref = React.createRef<HTMLSpanElement>()
+      render(
+        <Avatar>
+          <AvatarFallback ref={ref}>FB</AvatarFallback>
+        </Avatar>
+      )
+      expect(ref.current).toBeInstanceOf(HTMLSpanElement)
+    })
+  })
+
+  describe('AvatarGroup', () => {
+    const mockAvatars = [
+      <Avatar key="1"><AvatarFallback>A1</AvatarFallback></Avatar>,
+      <Avatar key="2"><AvatarFallback>A2</AvatarFallback></Avatar>,
+      <Avatar key="3"><AvatarFallback>A3</AvatarFallback></Avatar>,
+      <Avatar key="4"><AvatarFallback>A4</AvatarFallback></Avatar>,
+      <Avatar key="5"><AvatarFallback>A5</AvatarFallback></Avatar>,
+    ]
+
+    it('renders all avatars when no limit is set', () => {
+      render(<AvatarGroup avatars={mockAvatars} />)
+      expect(screen.getByText('A1')).toBeInTheDocument()
+      expect(screen.getByText('A2')).toBeInTheDocument()
+      expect(screen.getByText('A3')).toBeInTheDocument()
+      expect(screen.getByText('A4')).toBeInTheDocument()
+      expect(screen.getByText('A5')).toBeInTheDocument()
+    })
+
+    it('limits avatars when limit is set', () => {
+      render(<AvatarGroup avatars={mockAvatars} limit={3} />)
+      expect(screen.getByText('A1')).toBeInTheDocument()
+      expect(screen.getByText('A2')).toBeInTheDocument()
+      expect(screen.getByText('A3')).toBeInTheDocument()
+      expect(screen.queryByText('A4')).not.toBeInTheDocument()
+      expect(screen.queryByText('A5')).not.toBeInTheDocument()
+    })
+
+    it('shows remaining count when limit is exceeded', () => {
+      render(<AvatarGroup avatars={mockAvatars} limit={3} />)
+      expect(screen.getByText('+2')).toBeInTheDocument()
+    })
+
+    it('applies custom className', () => {
+      render(<AvatarGroup avatars={mockAvatars} className="custom-group" />)
+      const group = screen.getByText('A1').closest('.custom-group')
+      expect(group).toBeInTheDocument()
+    })
+
+    it('forwards ref correctly', () => {
+      const ref = React.createRef<HTMLDivElement>()
+      render(<AvatarGroup ref={ref} avatars={mockAvatars} />)
+      expect(ref.current).toBeInstanceOf(HTMLDivElement)
+    })
+
+    it('applies custom overlap offset', () => {
+      render(<AvatarGroup avatars={mockAvatars} overlapOffset={-12} />)
+      // This test verifies the component renders without error with custom offset
+      expect(screen.getByText('A1')).toBeInTheDocument()
+    })
+
+    it('handles empty avatars array', () => {
+      render(<AvatarGroup avatars={[]} data-testid="avatar-group" />)
+      const group = screen.getByTestId('avatar-group')
+      expect(group).toBeInTheDocument()
+      expect(group).toHaveClass('flex')
+      expect(group).toHaveClass('items-center')
+    })
+
+    it('handles single avatar', () => {
+      const singleAvatar = [<Avatar key="1"><AvatarFallback>SA</AvatarFallback></Avatar>]
+      render(<AvatarGroup avatars={singleAvatar} />)
+      expect(screen.getByText('SA')).toBeInTheDocument()
+      expect(screen.queryByText('+')).not.toBeInTheDocument()
+    })
+  })
+
+  describe('Complex Combinations', () => {
+    it('renders avatar with image and fallback', () => {
+      render(
+        <Avatar size="lg" variant="ring" radius="sm">
+          <AvatarImage src="/test.jpg" alt="Test" />
+          <AvatarFallback>TU</AvatarFallback>
+        </Avatar>
+      )
+      const avatar = screen.getByText('TU').parentElement
+      expect(avatar).toHaveClass('h-12')
+      expect(avatar).toHaveClass('w-12')
+      expect(avatar).toHaveClass('ring-2')
+      expect(avatar).toHaveClass('rounded-md')
+    })
+
+    it('maintains displayName for all components', () => {
+      expect(Avatar.displayName).toBeDefined()
+      expect(AvatarImage.displayName).toBeDefined()
+      expect(AvatarFallback.displayName).toBeDefined()
+      expect(AvatarGroup.displayName).toBe('AvatarGroup')
+    })
+  })
+})