veza/apps/web/src/components/ui/badge.test.tsx

import { render, screen } from '@testing-library/react';
import { describe, it, expect } from 'vitest';
import { Badge } from './badge';

describe('Badge Component', () => {
  describe('Rendering', () => {
    it('renders badge with children', () => {
      render(<Badge>Badge text</Badge>);

      expect(screen.getByText('Badge text')).toBeInTheDocument();
    });

    it('renders badge with ReactNode children', () => {
      render(
        <Badge>
          <span>Custom content</span>
        </Badge>,
      );

      expect(screen.getByText('Custom content')).toBeInTheDocument();
    });
  });

  describe('Variants', () => {
    it('renders default variant', () => {
      const { container } = render(<Badge>Default</Badge>);

      const badge = container.firstChild;
      expect(badge).toHaveClass('bg-muted/10');
    });

    it('renders primary variant', () => {
      const { container } = render(<Badge variant="primary">Primary</Badge>);

      const badge = container.firstChild;
      expect(badge).toHaveClass('bg-muted/10');
    });

    it('renders success variant', () => {
      const { container } = render(<Badge variant="success">Success</Badge>);

      const badge = container.firstChild;
      expect(badge).toHaveClass('bg-success/10');
    });

    it('renders warning variant', () => {
      const { container } = render(<Badge variant="warning">Warning</Badge>);

      const badge = container.firstChild;
      expect(badge).toHaveClass('bg-warning/10');
    });

    it('renders error variant', () => {
      const { container } = render(<Badge variant="error">Error</Badge>);

      const badge = container.firstChild;
      expect(badge).toHaveClass('bg-destructive/10');
    });
  });

  describe('Sizes', () => {
    it('renders small size', () => {
      const { container } = render(<Badge size="sm">Small</Badge>);

      const badge = container.firstChild;
      expect(badge).toHaveClass('px-2', 'py-0.5', 'text-xs');
    });

    it('renders medium size by default', () => {
      const { container } = render(<Badge>Medium</Badge>);

      const badge = container.firstChild;
      expect(badge).toHaveClass('px-2.5', 'py-0.5', 'text-xs');
    });

    it('renders large size', () => {
      const { container } = render(<Badge size="lg">Large</Badge>);

      const badge = container.firstChild;
      expect(badge).toHaveClass('px-4', 'py-1', 'text-xs');
    });
  });

  describe('Dot', () => {
    it('does not show dot by default', () => {
      const { container } = render(<Badge>No dot</Badge>);

      const dot = container.querySelector('.rounded-full.bg-current');
      expect(dot).not.toBeInTheDocument();
    });

    it('shows dot when dot prop is true', () => {
      const { container } = render(<Badge dot>With dot</Badge>);

      const dot = container.querySelector('.rounded-full.bg-current');
      expect(dot).toBeInTheDocument();
    });

    it('renders dot with correct size for small badge', () => {
      const { container } = render(
        <Badge dot size="sm">
          Small with dot
        </Badge>,
      );

      const dot = container.querySelector('.rounded-full.bg-current');
      expect(dot).toHaveClass('w-3', 'h-3');
    });

    it('renders dot with correct size for large badge', () => {
      const { container } = render(
        <Badge dot size="lg">
          Large with dot
        </Badge>,
      );

      const dot = container.querySelector('.rounded-full.bg-current');
      expect(dot).toHaveClass('w-3', 'h-3');
    });
  });

  describe('Count', () => {
    it('does not show count when count is undefined', () => {
      render(<Badge>No count</Badge>);

      expect(screen.queryByText(/\(\d+\)/)).not.toBeInTheDocument();
    });

    it('shows count when count is provided', () => {
      render(<Badge count={5}>With count</Badge>);

      expect(screen.getByText('5')).toBeInTheDocument();
    });

    it('shows count of 0', () => {
      // Component only shows count when count > 0
      render(<Badge count={0}>Zero count</Badge>);

      // count=0 is not > 0, so no count is displayed
      expect(screen.queryByText('0')).not.toBeInTheDocument();
    });

    it('shows large count', () => {
      render(<Badge count={999}>Large count</Badge>);

      expect(screen.getByText('999')).toBeInTheDocument();
    });

    it('shows count with dot', () => {
      const { container } = render(
        <Badge dot count={3}>
          With dot and count
        </Badge>,
      );

      expect(screen.getByText('3')).toBeInTheDocument();
      const dot = container.querySelector('.rounded-full.bg-current');
      expect(dot).toBeInTheDocument();
    });
  });

  describe('Combinations', () => {
    it('renders badge with variant, size, dot, and count', () => {
      const { container } = render(
        <Badge variant="success" size="lg" dot count={10}>
          Complete badge
        </Badge>,
      );

      const badge = container.firstChild;
      expect(badge).toHaveClass('bg-success/10', 'px-4', 'py-1', 'text-xs');
      expect(screen.getByText('Complete badge')).toBeInTheDocument();
      expect(screen.getByText('10')).toBeInTheDocument();
      const dot = container.querySelector('.rounded-full.bg-current');
      expect(dot).toBeInTheDocument();
    });
  });

  describe('Custom className', () => {
    it('applies custom className', () => {
      const { container } = render(
        <Badge className="custom-badge">Custom</Badge>,
      );

      const badge = container.firstChild;
      expect(badge).toHaveClass('custom-badge');
    });
  });
});