carmanagement/apps/homepage/tests/unit/components/forms.test.tsx

import { ErrorSummary } from '@/components/forms/ErrorSummary';
import { FormField } from '@/components/forms/FormField';
import { TextInput } from '@/components/forms/TextInput';
import { render, screen } from '@testing-library/react';
import { describe, expect, it } from 'vitest';

describe('form primitives', () => {
  it('associates labels, help, required state, and errors', () => {
    render(
      <FormField
        id="work-email"
        label="Work email"
        required
        supportingText="Use work email"
        error="Enter a valid address"
      >
        <TextInput
          id="work-email"
          type="email"
          required
          invalid
          describedBy="work-email-help work-email-error"
        />
      </FormField>,
    );
    const input = screen.getByLabelText(/Work email/);
    expect(input).toHaveAttribute('required');
    expect(input).toHaveAttribute('aria-invalid', 'true');
    expect(input).toHaveAccessibleDescription('Use work email Enter a valid address');
  });

  it('links summary errors back to fields', () => {
    render(
      <ErrorSummary
        title="Correct the fields"
        errors={[{ fieldId: 'work-email', message: 'Enter a valid address' }]}
      />,
    );
    expect(screen.getByRole('alert').querySelector('a')).toHaveAttribute('href', '#work-email');
  });
});