@moontra/moonui 2.0.7 → 2.0.9

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

@@ -0,0 +1,253 @@
+import React from 'react'
+import { render, screen } from '@testing-library/react'
+import '@testing-library/jest-dom'
+import { Skeleton, SkeletonText, SkeletonAvatar, SkeletonCard } from '../skeleton'
+
+describe('Skeleton Components', () => {
+  describe('Skeleton Component', () => {
+    it('renders correctly with default props', () => {
+      render(<Skeleton data-testid="skeleton" />)
+      const skeleton = screen.getByTestId('skeleton')
+      expect(skeleton).toBeInTheDocument()
+      expect(skeleton).toHaveClass('animate-pulse')
+      expect(skeleton).toHaveClass('rounded-md')
+      expect(skeleton).toHaveClass('bg-muted')
+    })
+
+    it('applies custom className', () => {
+      render(<Skeleton className="custom-skeleton" data-testid="skeleton" />)
+      const skeleton = screen.getByTestId('skeleton')
+      expect(skeleton).toHaveClass('custom-skeleton')
+    })
+
+    it('forwards ref correctly', () => {
+      const ref = React.createRef<HTMLDivElement>()
+      render(<Skeleton ref={ref} data-testid="skeleton" />)
+      expect(ref.current).toBeInstanceOf(HTMLDivElement)
+    })
+
+    it('applies custom dimensions', () => {
+      render(<Skeleton height="100px" width="200px" data-testid="skeleton" />)
+      const skeleton = screen.getByTestId('skeleton')
+      expect(skeleton).toHaveStyle({ height: '100px', width: '200px' })
+    })
+
+    it('renders primary variant', () => {
+      render(<Skeleton variant="primary" data-testid="skeleton" />)
+      const skeleton = screen.getByTestId('skeleton')
+      expect(skeleton).toHaveClass('bg-primary/10')
+    })
+
+    it('renders circle shape', () => {
+      render(<Skeleton shape="circle" data-testid="skeleton" />)
+      const skeleton = screen.getByTestId('skeleton')
+      expect(skeleton).toHaveClass('rounded-full')
+    })
+
+    it('shows children when loaded', () => {
+      render(<Skeleton isLoaded={true} data-testid="skeleton">Content</Skeleton>)
+      expect(screen.getByText('Content')).toBeInTheDocument()
+    })
+
+    it('shows skeleton when not loaded', () => {
+      render(<Skeleton isLoaded={false} data-testid="skeleton">Content</Skeleton>)
+      const skeleton = screen.getByTestId('skeleton')
+      expect(skeleton).toHaveClass('animate-pulse')
+      expect(screen.queryByText('Content')).not.toBeInTheDocument()
+    })
+
+    it('maintains displayName', () => {
+      expect(Skeleton.displayName).toBe('Skeleton')
+    })
+  })
+
+  describe('SkeletonText Component', () => {
+    it('renders correctly with default props', () => {
+      render(<SkeletonText data-testid="skeleton-text" />)
+      const container = screen.getByTestId('skeleton-text')
+      expect(container).toBeInTheDocument()
+      expect(container).toHaveClass('flex')
+
+      const skeletons = container.querySelectorAll('.animate-pulse')
+      expect(skeletons).toHaveLength(3) // default lines
+    })
+
+    it('renders custom number of lines', () => {
+      render(<SkeletonText lines={5} data-testid="skeleton-text" />)
+      const container = screen.getByTestId('skeleton-text')
+      const skeletons = container.querySelectorAll('.animate-pulse')
+      expect(skeletons).toHaveLength(5)
+    })
+
+    it('applies custom line height', () => {
+      render(<SkeletonText lineHeight="1rem" data-testid="skeleton-text" />)
+      const container = screen.getByTestId('skeleton-text')
+      const firstLine = container.querySelector('.animate-pulse')
+      expect(firstLine).toHaveStyle({ height: '1rem' })
+    })
+
+    it('applies custom spacing', () => {
+      render(<SkeletonText spacing="1rem" data-testid="skeleton-text" />)
+      const container = screen.getByTestId('skeleton-text')
+      expect(container).toHaveStyle({ gap: '1rem' })
+    })
+
+    it('forwards ref correctly', () => {
+      const ref = React.createRef<HTMLDivElement>()
+      render(<SkeletonText ref={ref} data-testid="skeleton-text" />)
+      expect(ref.current).toBeInstanceOf(HTMLDivElement)
+    })
+
+    it('maintains displayName', () => {
+      expect(SkeletonText.displayName).toBe('SkeletonText')
+    })
+  })
+
+  describe('SkeletonAvatar Component', () => {
+    it('renders correctly with default props', () => {
+      render(<SkeletonAvatar data-testid="skeleton-avatar" />)
+      const avatar = screen.getByTestId('skeleton-avatar')
+      expect(avatar).toBeInTheDocument()
+      expect(avatar).toHaveClass('animate-pulse')
+      expect(avatar).toHaveClass('rounded-full')
+      expect(avatar).toHaveClass('shrink-0')
+      expect(avatar).toHaveStyle({ height: '2.5rem', width: '2.5rem' })
+    })
+
+    it('applies custom size', () => {
+      render(<SkeletonAvatar size="3rem" data-testid="skeleton-avatar" />)
+      const avatar = screen.getByTestId('skeleton-avatar')
+      expect(avatar).toHaveStyle({ height: '3rem', width: '3rem' })
+    })
+
+    it('applies custom size as number', () => {
+      render(<SkeletonAvatar size={48} data-testid="skeleton-avatar" />)
+      const avatar = screen.getByTestId('skeleton-avatar')
+      expect(avatar).toHaveStyle({ height: '48px', width: '48px' })
+    })
+
+    it('forwards ref correctly', () => {
+      const ref = React.createRef<HTMLDivElement>()
+      render(<SkeletonAvatar ref={ref} data-testid="skeleton-avatar" />)
+      expect(ref.current).toBeInstanceOf(HTMLDivElement)
+    })
+
+    it('renders with custom variant', () => {
+      render(<SkeletonAvatar variant="primary" data-testid="skeleton-avatar" />)
+      const avatar = screen.getByTestId('skeleton-avatar')
+      expect(avatar).toHaveClass('bg-primary/10')
+    })
+
+    it('maintains displayName', () => {
+      expect(SkeletonAvatar.displayName).toBe('SkeletonAvatar')
+    })
+  })
+
+  describe('SkeletonCard Component', () => {
+    it('renders correctly with default props', () => {
+      render(<SkeletonCard data-testid="skeleton-card" />)
+      const card = screen.getByTestId('skeleton-card')
+      expect(card).toBeInTheDocument()
+      expect(card).toHaveClass('overflow-hidden')
+      expect(card).toHaveClass('rounded-md')
+      expect(card).toHaveClass('border')
+      expect(card).toHaveClass('bg-background')
+      expect(card).toHaveClass('p-4')
+    })
+
+    it('shows header by default', () => {
+      render(<SkeletonCard data-testid="skeleton-card" />)
+      const card = screen.getByTestId('skeleton-card')
+
+      // Check for avatar in header
+      const avatar = card.querySelector('.shrink-0.rounded-full')
+      expect(avatar).toBeInTheDocument()
+    })
+
+    it('hides header when showHeader is false', () => {
+      render(<SkeletonCard showHeader={false} data-testid="skeleton-card" />)
+      const card = screen.getByTestId('skeleton-card')
+
+      // Avatar should not be present
+      const avatar = card.querySelector('.shrink-0.rounded-full')
+      expect(avatar).not.toBeInTheDocument()
+    })
+
+    it('renders custom number of content lines', () => {
+      render(<SkeletonCard contentLines={5} data-testid="skeleton-card" />)
+      const card = screen.getByTestId('skeleton-card')
+
+      const textContainer = card.querySelector('.flex.flex-col')
+      expect(textContainer).toBeInTheDocument()
+
+      const contentLines = textContainer?.querySelectorAll('.animate-pulse')
+      expect(contentLines).toHaveLength(5)
+    })
+
+    it('shows footer by default', () => {
+      render(<SkeletonCard data-testid="skeleton-card" />)
+      const card = screen.getByTestId('skeleton-card')
+
+      const footer = card.querySelector('.border-t')
+      expect(footer).toBeInTheDocument()
+    })
+
+    it('hides footer when showFooter is false', () => {
+      render(<SkeletonCard showFooter={false} data-testid="skeleton-card" />)
+      const card = screen.getByTestId('skeleton-card')
+
+      const footer = card.querySelector('.border-t')
+      expect(footer).not.toBeInTheDocument()
+    })
+
+    it('forwards ref correctly', () => {
+      const ref = React.createRef<HTMLDivElement>()
+      render(<SkeletonCard ref={ref} data-testid="skeleton-card" />)
+      expect(ref.current).toBeInstanceOf(HTMLDivElement)
+    })
+
+    it('maintains displayName', () => {
+      expect(SkeletonCard.displayName).toBe('SkeletonCard')
+    })
+  })
+
+  describe('Edge Cases', () => {
+    it('handles zero lines in SkeletonText', () => {
+      render(<SkeletonText lines={0} data-testid="skeleton-text" />)
+      const container = screen.getByTestId('skeleton-text')
+      const skeletons = container.querySelectorAll('.animate-pulse')
+      expect(skeletons).toHaveLength(0)
+    })
+
+    it('handles all sections disabled in SkeletonCard', () => {
+      render(
+        <SkeletonCard
+          showHeader={false}
+          showFooter={false}
+          contentLines={1}
+          data-testid="skeleton-card"
+        />
+      )
+      const card = screen.getByTestId('skeleton-card')
+
+      // No header avatar
+      const avatar = card.querySelector('.shrink-0.rounded-full')
+      expect(avatar).not.toBeInTheDocument()
+
+      // No footer
+      const footer = card.querySelector('.border-t')
+      expect(footer).not.toBeInTheDocument()
+
+      // Only content lines
+      const textContainer = card.querySelector('.flex.flex-col')
+      const contentLines = textContainer?.querySelectorAll('.animate-pulse')
+      expect(contentLines).toHaveLength(1)
+    })
+
+    it('passes through HTML attributes', () => {
+      render(<Skeleton data-testid="skeleton-test" id="skeleton-1" />)
+      const skeleton = screen.getByTestId('skeleton-test')
+      expect(skeleton).toHaveAttribute('id', 'skeleton-1')
+    })
+  })
+})