veza/apps/web/src/components/ui/radio-group.test.tsx

import { render, screen, fireEvent } from '@testing-library/react';
import { describe, it, expect, vi } from 'vitest';
import { RadioGroup, RadioGroupItem } from './radio-group';

describe('RadioGroup Component', () => {
  it('renders radio group', () => {
    render(
      <RadioGroup>
        <RadioGroupItem value="option1" />
        <RadioGroupItem value="option2" />
      </RadioGroup>,
    );

    // RadioGroupItem renders a <label role="radio"> wrapping an <input type="radio" class="sr-only">
    const radios = screen.getAllByRole('radio');
    // Each RadioGroupItem produces a label with role="radio"
    expect(radios.length).toBeGreaterThanOrEqual(2);
    // Check that the values are present via the hidden inputs
    const inputs = document.querySelectorAll('input[type="radio"]');
    expect(inputs).toHaveLength(2);
    expect(inputs[0]).toHaveAttribute('value', 'option1');
    expect(inputs[1]).toHaveAttribute('value', 'option2');
  });

  it('handles defaultValue (via controlled value)', () => {
    render(
      <RadioGroup value="option1">
        <RadioGroupItem value="option1" />
        <RadioGroupItem value="option2" />
      </RadioGroup>,
    );

    const inputs = document.querySelectorAll('input[type="radio"]');
    const option1 = Array.from(inputs).find((r) => r.getAttribute('value') === 'option1');
    const option2 = Array.from(inputs).find((r) => r.getAttribute('value') === 'option2');

    expect(option1).toBeChecked();
    expect(option2).not.toBeChecked();
  });

  it('handles controlled value', () => {
    const { rerender } = render(
      <RadioGroup value="option1">
        <RadioGroupItem value="option1" />
        <RadioGroupItem value="option2" />
      </RadioGroup>,
    );

    let inputs = document.querySelectorAll('input[type="radio"]');
    const option1 = Array.from(inputs).find((r) => r.getAttribute('value') === 'option1');
    expect(option1).toBeChecked();

    rerender(
      <RadioGroup value="option2">
        <RadioGroupItem value="option1" />
        <RadioGroupItem value="option2" />
      </RadioGroup>,
    );

    inputs = document.querySelectorAll('input[type="radio"]');
    const option2 = Array.from(inputs).find((r) => r.getAttribute('value') === 'option2');
    expect(option2).toBeChecked();
  });

  it('calls onValueChange when selection changes', () => {
    const handleChange = vi.fn();
    render(
      <RadioGroup onValueChange={handleChange}>
        <RadioGroupItem value="option1" />
        <RadioGroupItem value="option2" />
      </RadioGroup>,
    );

    // Click the label wrapping option2 to trigger selection
    const labels = screen.getAllByRole('radio');
    const option2Label = labels.find((el) => {
      const input = el.querySelector('input[type="radio"]');
      return input?.getAttribute('value') === 'option2';
    });
    fireEvent.click(option2Label!);

    expect(handleChange).toHaveBeenCalledWith('option2');
  });

  it('handles disabled state', () => {
    render(
      <RadioGroup disabled>
        <RadioGroupItem value="option1" />
        <RadioGroupItem value="option2" />
      </RadioGroup>,
    );

    const inputs = document.querySelectorAll('input[type="radio"]');
    expect(inputs[0]).toBeDisabled();
    expect(inputs[1]).toBeDisabled();
  });

  it('applies custom className', () => {
    const { container } = render(
      <RadioGroup className="custom-radio-group">
        <RadioGroupItem value="option1" />
      </RadioGroup>,
    );

    const radioGroup = container.querySelector('.custom-radio-group');
    expect(radioGroup).toBeInTheDocument();
  });
});