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

import { Field, FieldError, FieldLabel } from './field';
import { Input } from '@/components/input';

describe('Field', () => {
  describe('required marker', () => {
    it('draws nothing by default', () => {
      const { container } = render(<FieldLabel htmlFor="a">Email</FieldLabel>);

      expect(container.querySelector('[data-slot="field-label-required"]')).toBeNull();
    });

    /* The asterisk is decoration. An accessible name of "Email *" is noise, and
       the requirement itself belongs on the control, where assistive technology
       already looks for it. */
    it('hides the marker from the accessibility tree', () => {
      render(
        <Field>
          <FieldLabel htmlFor="email" required>
            Email
          </FieldLabel>
          <Input id="email" required />
        </Field>
      );

      const label = screen.getByText('Email');
      const marker = label.querySelector('[data-slot="field-label-required"]');

      expect(marker).toHaveAttribute('aria-hidden', 'true');
      expect(screen.getByRole('textbox')).toBeRequired();
    });
  });

  describe('error', () => {
    it('renders nothing without a message', () => {
      const { container } = render(<FieldError />);
      expect(container).toBeEmptyDOMElement();
    });

    it('announces a message when there is one', () => {
      render(<FieldError>Required</FieldError>);
      expect(screen.getByRole('alert')).toHaveTextContent('Required');
    });
  });
});