tpmjs/packages/ui/src/Label/Label.test.tsx

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

describe('Label', () => {
  describe('Rendering', () => {
    it('renders a label element', () => {
      render(<Label data-testid="label">Label text</Label>);
      const label = screen.getByTestId('label');
      expect(label).toBeInTheDocument();
      expect(label.tagName).toBe('LABEL');
    });

    it('renders children text', () => {
      render(<Label>Email Address</Label>);
      expect(screen.getByText('Email Address')).toBeInTheDocument();
    });
  });

  describe('Sizes', () => {
    it('applies small size classes', () => {
      render(
        <Label size="sm" data-testid="label">
          Small label
        </Label>
      );
      const label = screen.getByTestId('label');
      expect(label.className).toContain('text-sm');
    });

    it('applies medium size classes (default)', () => {
      render(
        <Label size="md" data-testid="label">
          Medium label
        </Label>
      );
      const label = screen.getByTestId('label');
      expect(label.className).toContain('text-base');
    });

    it('applies large size classes', () => {
      render(
        <Label size="lg" data-testid="label">
          Large label
        </Label>
      );
      const label = screen.getByTestId('label');
      expect(label.className).toContain('text-lg');
    });

    it('uses medium size by default', () => {
      render(<Label data-testid="label">Default label</Label>);
      const label = screen.getByTestId('label');
      expect(label.className).toContain('text-base');
    });
  });

  describe('Required Indicator', () => {
    it('does not show required indicator by default', () => {
      render(<Label>Label</Label>);
      expect(screen.queryByText('*')).not.toBeInTheDocument();
    });

    it('shows required indicator when required is true', () => {
      render(<Label required>Required field</Label>);
      expect(screen.getByText('*')).toBeInTheDocument();
    });

    it('hides required indicator from screen readers', () => {
      render(
        <Label required data-testid="label">
          Required field
        </Label>
      );
      const asterisk = screen.getByText('*');
      expect(asterisk).toHaveAttribute('aria-hidden', 'true');
    });

    it('applies error color to required indicator', () => {
      render(<Label required>Required field</Label>);
      const asterisk = screen.getByText('*');
      expect(asterisk.className).toContain('text-error');
    });

    it('applies proper spacing to required indicator', () => {
      render(<Label required>Required field</Label>);
      const asterisk = screen.getByText('*');
      expect(asterisk.className).toContain('ml-1');
    });
  });

  describe('Disabled State', () => {
    it('is not disabled by default', () => {
      render(<Label data-testid="label">Label</Label>);
      const label = screen.getByTestId('label');
      // Should not have the direct opacity-50 class (peer-disabled:opacity-50 is okay)
      expect(label.className).toContain('peer-disabled:opacity-50');
      expect(label.className.split(' ')).not.toContain('opacity-50');
    });

    it('applies disabled classes when disabled is true', () => {
      render(
        <Label disabled data-testid="label">
          Disabled label
        </Label>
      );
      const label = screen.getByTestId('label');
      expect(label.className).toContain('opacity-50');
      expect(label.className).toContain('cursor-not-allowed');
    });
  });

  describe('HTML Attributes', () => {
    it('associates with input using htmlFor', () => {
      render(
        <Label htmlFor="email-input" data-testid="label">
          Email
        </Label>
      );
      const label = screen.getByTestId('label');
      expect(label).toHaveAttribute('for', 'email-input');
    });

    it('passes through id attribute', () => {
      render(
        <Label id="label-id" data-testid="label">
          Label
        </Label>
      );
      const label = screen.getByTestId('label');
      expect(label).toHaveAttribute('id', 'label-id');
    });

    it('passes through className', () => {
      render(
        <Label className="custom-label" data-testid="label">
          Custom
        </Label>
      );
      const label = screen.getByTestId('label');
      expect(label.className).toContain('custom-label');
    });

    it('passes through onClick handler', () => {
      let clicked = false;
      render(
        <Label
          onClick={() => {
            clicked = true;
          }}
          data-testid="label"
        >
          Clickable
        </Label>
      );
      const label = screen.getByTestId('label');
      label.click();
      expect(clicked).toBe(true);
    });
  });

  describe('ARIA Attributes', () => {
    it('passes through aria-label', () => {
      render(
        <Label aria-label="Field label" data-testid="label">
          Label
        </Label>
      );
      const label = screen.getByTestId('label');
      expect(label).toHaveAttribute('aria-label', 'Field label');
    });

    it('passes through aria-describedby', () => {
      render(
        <Label aria-describedby="description-id" data-testid="label">
          Label
        </Label>
      );
      const label = screen.getByTestId('label');
      expect(label).toHaveAttribute('aria-describedby', 'description-id');
    });
  });

  describe('Custom className', () => {
    it('merges custom className with base classes', () => {
      render(
        <Label className="custom-class" data-testid="label">
          Label
        </Label>
      );
      const label = screen.getByTestId('label');
      expect(label.className).toContain('custom-class');
      expect(label.className).toContain('font-medium');
      expect(label.className).toContain('text-foreground');
    });
  });

  describe('Ref Forwarding', () => {
    it('forwards ref to label element', () => {
      let ref: HTMLLabelElement | null = null;
      render(
        <Label
          ref={(el) => {
            ref = el;
          }}
        >
          Label
        </Label>
      );
      expect(ref).toBeInstanceOf(HTMLLabelElement);
      expect(ref!.tagName).toBe('LABEL');
    });
  });

  describe('Base Classes', () => {
    it('always includes base classes', () => {
      render(<Label data-testid="label">Label</Label>);
      const label = screen.getByTestId('label');
      expect(label.className).toContain('font-medium');
      expect(label.className).toContain('text-foreground');
      expect(label.className).toContain('cursor-pointer');
    });

    it('includes peer-disabled classes', () => {
      render(<Label data-testid="label">Label</Label>);
      const label = screen.getByTestId('label');
      expect(label.className).toContain('peer-disabled:cursor-not-allowed');
      expect(label.className).toContain('peer-disabled:opacity-50');
    });
  });

  describe('Compound Scenarios', () => {
    it('works correctly with required and small size', () => {
      render(
        <Label required size="sm" data-testid="label">
          Small required
        </Label>
      );
      const label = screen.getByTestId('label');
      expect(label.className).toContain('text-sm');
      expect(screen.getByText('*')).toBeInTheDocument();
    });

    it('works correctly with disabled and required', () => {
      render(
        <Label disabled required data-testid="label">
          Disabled required
        </Label>
      );
      const label = screen.getByTestId('label');
      expect(label.className).toContain('opacity-50');
      expect(label.className).toContain('cursor-not-allowed');
      expect(screen.getByText('*')).toBeInTheDocument();
    });

    it('works correctly with htmlFor and required', () => {
      render(
        <Label htmlFor="field-id" required data-testid="label">
          Field label
        </Label>
      );
      const label = screen.getByTestId('label');
      expect(label).toHaveAttribute('for', 'field-id');
      expect(screen.getByText('*')).toBeInTheDocument();
    });

    it('works correctly with large size and custom className', () => {
      render(
        <Label size="lg" className="font-bold" data-testid="label">
          Large bold
        </Label>
      );
      const label = screen.getByTestId('label');
      expect(label.className).toContain('text-lg');
      expect(label.className).toContain('font-bold');
    });
  });

  describe('Integration with Form Controls', () => {
    it('associates correctly with input element', () => {
      const { container } = render(
        <div>
          <Label htmlFor="test-input">Test Label</Label>
          <input id="test-input" type="text" />
        </div>
      );

      const label = container.querySelector('label');
      const input = container.querySelector('input');

      expect(label).toHaveAttribute('for', 'test-input');
      expect(input).toHaveAttribute('id', 'test-input');
    });

    it('clicking label focuses associated input', () => {
      render(
        <div>
          <Label htmlFor="focus-input" data-testid="label">
            Click me
          </Label>
          <input id="focus-input" type="text" data-testid="input" />
        </div>
      );

      const label = screen.getByTestId('label');
      const input = screen.getByTestId('input') as HTMLInputElement;

      // Verify the association exists
      expect(label).toHaveAttribute('for', 'focus-input');
      expect(input).toHaveAttribute('id', 'focus-input');

      // Focus the input directly to verify it can receive focus
      input.focus();
      expect(input).toHaveFocus();
    });
  });
});