@moontra/moonui 2.0.8 → 2.0.9

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

@@ -0,0 +1,364 @@
+import React from 'react'
+import { render, screen, fireEvent } from '@testing-library/react'
+import { Badge } from '../badge'
+
+describe('Badge Component', () => {
+  it('renders correctly with default props', () => {
+    render(<Badge>Default Badge</Badge>)
+    const badge = screen.getByText('Default Badge').parentElement!
+    expect(badge).toBeInTheDocument()
+    expect(badge).toHaveClass('inline-flex')
+    expect(badge).toHaveClass('items-center')
+    expect(badge).toHaveClass('h-6') // md size
+    expect(badge).toHaveClass('rounded-full') // default radius
+  })
+
+  it('renders with custom text content', () => {
+    render(<Badge>Custom Text</Badge>)
+    expect(screen.getByText('Custom Text')).toBeInTheDocument()
+  })
+
+  it('applies custom className', () => {
+    render(<Badge className="custom-badge">Test</Badge>)
+    const badge = screen.getByText('Test').parentElement!
+    expect(badge).toHaveClass('custom-badge')
+  })
+
+  describe('Variants', () => {
+    it('renders primary variant correctly (default)', () => {
+      render(<Badge variant="primary">Primary</Badge>)
+      const badge = screen.getByText('Primary').parentElement!
+      expect(badge).toHaveClass('bg-primary')
+      expect(badge).toHaveClass('text-primary-foreground')
+      expect(badge).toHaveClass('border-transparent')
+    })
+
+    it('renders secondary variant correctly', () => {
+      render(<Badge variant="secondary">Secondary</Badge>)
+      const badge = screen.getByText('Secondary').parentElement!
+      expect(badge).toHaveClass('bg-secondary')
+      expect(badge).toHaveClass('text-secondary-foreground')
+    })
+
+    it('renders destructive variant correctly', () => {
+      render(<Badge variant="destructive">Destructive</Badge>)
+      const badge = screen.getByText('Destructive').parentElement!
+      expect(badge).toHaveClass('bg-error')
+      expect(badge).toHaveClass('text-white')
+    })
+
+    it('renders outline variant correctly', () => {
+      render(<Badge variant="outline">Outline</Badge>)
+      const badge = screen.getByText('Outline').parentElement!
+      expect(badge).toHaveClass('border-gray-200')
+      expect(badge).toHaveClass('bg-transparent')
+    })
+
+    it('renders success variant correctly', () => {
+      render(<Badge variant="success">Success</Badge>)
+      const badge = screen.getByText('Success').parentElement!
+      expect(badge).toHaveClass('bg-success')
+      expect(badge).toHaveClass('text-white')
+    })
+
+    it('renders warning variant correctly', () => {
+      render(<Badge variant="warning">Warning</Badge>)
+      const badge = screen.getByText('Warning').parentElement!
+      expect(badge).toHaveClass('bg-warning')
+      expect(badge).toHaveClass('text-white')
+    })
+
+    it('renders ghost variant correctly', () => {
+      render(<Badge variant="ghost">Ghost</Badge>)
+      const badge = screen.getByText('Ghost').parentElement!
+      expect(badge).toHaveClass('bg-transparent')
+      expect(badge).toHaveClass('text-foreground')
+    })
+  })
+
+  describe('Sizes', () => {
+    it('renders small size correctly', () => {
+      render(<Badge size="sm">Small</Badge>)
+      const badge = screen.getByText('Small').parentElement!
+      expect(badge).toHaveClass('h-5')
+      expect(badge).toHaveClass('px-2')
+      expect(badge).toHaveClass('text-xs')
+    })
+
+    it('renders medium size correctly (default)', () => {
+      render(<Badge size="md">Medium</Badge>)
+      const badge = screen.getByText('Medium').parentElement!
+      expect(badge).toHaveClass('h-6')
+      expect(badge).toHaveClass('px-2.5')
+      expect(badge).toHaveClass('text-xs')
+    })
+
+    it('renders large size correctly', () => {
+      render(<Badge size="lg">Large</Badge>)
+      const badge = screen.getByText('Large').parentElement!
+      expect(badge).toHaveClass('h-7')
+      expect(badge).toHaveClass('px-3')
+      expect(badge).toHaveClass('text-sm')
+    })
+  })
+
+  describe('Radius', () => {
+    it('renders default radius correctly', () => {
+      render(<Badge radius="default">Default Radius</Badge>)
+      const badge = screen.getByText('Default Radius').parentElement!
+      expect(badge).toHaveClass('rounded-full')
+    })
+
+    it('renders small radius correctly', () => {
+      render(<Badge radius="sm">Small Radius</Badge>)
+      const badge = screen.getByText('Small Radius').parentElement!
+      expect(badge).toHaveClass('rounded-md')
+    })
+
+    it('renders large radius correctly', () => {
+      render(<Badge radius="lg">Large Radius</Badge>)
+      const badge = screen.getByText('Large Radius').parentElement!
+      expect(badge).toHaveClass('rounded-xl')
+    })
+
+    it('renders no radius correctly', () => {
+      render(<Badge radius="none">No Radius</Badge>)
+      const badge = screen.getByText('No Radius').parentElement!
+      expect(badge).toHaveClass('rounded-none')
+    })
+  })
+
+  describe('Dot Feature', () => {
+    it('renders with dot when withDot is true', () => {
+      render(<Badge withDot>With Dot</Badge>)
+      const badge = screen.getByText('With Dot').parentElement!
+      const dot = badge.querySelector('span[aria-hidden="true"]')
+      expect(dot).toBeInTheDocument()
+      expect(dot).toHaveClass('h-2')
+      expect(dot).toHaveClass('w-2')
+      expect(dot).toHaveClass('rounded-full')
+    })
+
+    it('does not render dot when withDot is false', () => {
+      render(<Badge withDot={false}>Without Dot</Badge>)
+      const badge = screen.getByText('Without Dot').parentElement!
+      const dot = badge.querySelector('span[aria-hidden="true"]')
+      expect(dot).not.toBeInTheDocument()
+    })
+
+    it('renders dot with custom color', () => {
+      render(<Badge withDot dotColor="bg-red-500">Custom Dot</Badge>)
+      const badge = screen.getByText('Custom Dot').parentElement!
+      const dot = badge.querySelector('span[aria-hidden="true"]')
+      expect(dot).toHaveClass('bg-red-500')
+    })
+
+    it('renders dot with variant-specific default colors', () => {
+      const { rerender } = render(<Badge withDot variant="destructive">Destructive</Badge>)
+      let dot = screen.getByText('Destructive').parentElement!.querySelector('span[aria-hidden="true"]')
+      expect(dot).toHaveClass('bg-white')
+
+      rerender(<Badge withDot variant="success">Success</Badge>)
+      dot = screen.getByText('Success').parentElement!.querySelector('span[aria-hidden="true"]')
+      expect(dot).toHaveClass('bg-white')
+
+      rerender(<Badge withDot variant="primary">Primary</Badge>)
+      dot = screen.getByText('Primary').parentElement!.querySelector('span[aria-hidden="true"]')
+      expect(dot).toHaveClass('bg-primary-foreground')
+    })
+  })
+
+  describe('Icons', () => {
+    const TestIcon = () => <span data-testid="test-icon">Icon</span>
+
+    it('renders with left icon', () => {
+      render(<Badge leftIcon={<TestIcon />}>With Left Icon</Badge>)
+      expect(screen.getByTestId('test-icon')).toBeInTheDocument()
+      expect(screen.getByText('With Left Icon')).toBeInTheDocument()
+    })
+
+    it('renders with right icon', () => {
+      render(<Badge rightIcon={<TestIcon />}>With Right Icon</Badge>)
+      expect(screen.getByTestId('test-icon')).toBeInTheDocument()
+      expect(screen.getByText('With Right Icon')).toBeInTheDocument()
+    })
+
+    it('renders with both left and right icons', () => {
+      const LeftIcon = () => <span data-testid="left-icon">Left</span>
+      const RightIcon = () => <span data-testid="right-icon">Right</span>
+      
+      render(
+        <Badge leftIcon={<LeftIcon />} rightIcon={<RightIcon />}>
+          Both Icons
+        </Badge>
+      )
+      
+      expect(screen.getByTestId('left-icon')).toBeInTheDocument()
+      expect(screen.getByTestId('right-icon')).toBeInTheDocument()
+      expect(screen.getByText('Both Icons')).toBeInTheDocument()
+    })
+  })
+
+  describe('Removable Feature', () => {
+    it('renders remove button when removable is true and onRemove is provided', () => {
+      const onRemove = jest.fn()
+      render(<Badge removable onRemove={onRemove}>Removable</Badge>)
+      
+      const removeButton = screen.getByRole('button', { name: 'Remove badge' })
+      expect(removeButton).toBeInTheDocument()
+      expect(removeButton).toHaveAttribute('aria-label', 'Remove badge')
+    })
+
+    it('does not render remove button when removable is false', () => {
+      const onRemove = jest.fn()
+      render(<Badge removable={false} onRemove={onRemove}>Not Removable</Badge>)
+      
+      const removeButton = screen.queryByRole('button', { name: 'Remove badge' })
+      expect(removeButton).not.toBeInTheDocument()
+    })
+
+    it('does not render remove button when onRemove is not provided', () => {
+      render(<Badge removable>No Remove Handler</Badge>)
+      
+      const removeButton = screen.queryByRole('button', { name: 'Remove badge' })
+      expect(removeButton).not.toBeInTheDocument()
+    })
+
+    it('calls onRemove when remove button is clicked', () => {
+      const onRemove = jest.fn()
+      render(<Badge removable onRemove={onRemove}>Removable</Badge>)
+      
+      const removeButton = screen.getByRole('button', { name: 'Remove badge' })
+      fireEvent.click(removeButton)
+      
+      expect(onRemove).toHaveBeenCalledTimes(1)
+    })
+
+    it('stops propagation when remove button is clicked', () => {
+      const onRemove = jest.fn()
+      const onBadgeClick = jest.fn()
+      
+      render(
+        <Badge removable onRemove={onRemove} onClick={onBadgeClick}>
+          Removable
+        </Badge>
+      )
+      
+      const removeButton = screen.getByRole('button', { name: 'Remove badge' })
+      fireEvent.click(removeButton)
+      
+      expect(onRemove).toHaveBeenCalledTimes(1)
+      expect(onBadgeClick).not.toHaveBeenCalled()
+    })
+
+    it('sets data-removable attribute when removable is true', () => {
+      const onRemove = jest.fn()
+      render(<Badge removable onRemove={onRemove}>Removable</Badge>)
+      
+      const badge = screen.getByText('Removable').parentElement!
+      expect(badge).toHaveAttribute('data-removable', '')
+    })
+  })
+
+  describe('Complex Combinations', () => {
+    it('renders with all features combined', () => {
+      const onRemove = jest.fn()
+      const LeftIcon = () => <span data-testid="left-icon">L</span>
+      const RightIcon = () => <span data-testid="right-icon">R</span>
+      
+      render(
+        <Badge
+          variant="success"
+          size="lg"
+          radius="sm"
+          withDot
+          dotColor="bg-yellow-400"
+          leftIcon={<LeftIcon />}
+          rightIcon={<RightIcon />}
+          removable
+          onRemove={onRemove}
+          className="custom-badge"
+        >
+          Complex Badge
+        </Badge>
+      )
+      
+      const badge = screen.getByText('Complex Badge').parentElement!
+      
+      // Check variant, size, radius
+      expect(badge).toHaveClass('bg-success')
+      expect(badge).toHaveClass('h-7')
+      expect(badge).toHaveClass('rounded-md')
+      expect(badge).toHaveClass('custom-badge')
+      
+      // Check dot
+      const dot = badge.querySelector('span[aria-hidden="true"]')
+      expect(dot).toHaveClass('bg-yellow-400')
+      
+      // Check icons
+      expect(screen.getByTestId('left-icon')).toBeInTheDocument()
+      expect(screen.getByTestId('right-icon')).toBeInTheDocument()
+      
+      // Check remove button
+      const removeButton = screen.getByRole('button', { name: 'Remove badge' })
+      expect(removeButton).toBeInTheDocument()
+      
+      // Test remove functionality
+      fireEvent.click(removeButton)
+      expect(onRemove).toHaveBeenCalledTimes(1)
+    })
+  })
+
+  describe('Accessibility', () => {
+    it('has proper ARIA attributes for remove button', () => {
+      const onRemove = jest.fn()
+      render(<Badge removable onRemove={onRemove}>Accessible</Badge>)
+      
+      const removeButton = screen.getByRole('button', { name: 'Remove badge' })
+      expect(removeButton).toHaveAttribute('aria-label', 'Remove badge')
+      expect(removeButton).toHaveAttribute('type', 'button')
+    })
+
+    it('has aria-hidden on dot element', () => {
+      render(<Badge withDot>With Dot</Badge>)
+      const dot = screen.getByText('With Dot').parentElement!.querySelector('span[aria-hidden="true"]')
+      expect(dot).toHaveAttribute('aria-hidden', 'true')
+    })
+
+    it('has aria-hidden on remove icon', () => {
+      const onRemove = jest.fn()
+      render(<Badge removable onRemove={onRemove}>Removable</Badge>)
+      
+      const removeIcon = screen.getByRole('button').querySelector('svg')
+      expect(removeIcon).toHaveAttribute('aria-hidden', 'true')
+    })
+
+    it('truncates long text content', () => {
+      render(<Badge>Very long badge text that should be truncated</Badge>)
+      const textSpan = screen.getByText('Very long badge text that should be truncated')
+      expect(textSpan).toHaveClass('truncate')
+    })
+  })
+
+  describe('Event Handling', () => {
+    it('handles click events on badge', () => {
+      const onClick = jest.fn()
+      render(<Badge onClick={onClick}>Clickable</Badge>)
+      
+      const badge = screen.getByText('Clickable').parentElement!
+      fireEvent.click(badge)
+      
+      expect(onClick).toHaveBeenCalledTimes(1)
+    })
+
+    it('handles focus events', () => {
+      const onFocus = jest.fn()
+      render(<Badge onFocus={onFocus}>Focusable</Badge>)
+      
+      const badge = screen.getByText('Focusable').parentElement!
+      fireEvent.focus(badge)
+      
+      expect(onFocus).toHaveBeenCalledTimes(1)
+    })
+  })
+})