import { render } from '@testing-library/vue';
import { describe, expect, test } from 'vitest';
import { UiFieldError } from '../index';

describe('UiFieldError', () => {
  test('renders single error as text', () => {
    const { getByRole } = render(UiFieldError, {
      props: { errors: ['Required'] },
    });

    expect(getByRole('alert')).toHaveTextContent('Required');
  });

  test('renders an alert when errors are provided', () => {
    const { getByRole } = render(UiFieldError, {
      props: {
        errors: [
          'Too short',
          { message: 'Too short' },
          { message: 'Invalid format' },
        ],
      },
    });

    expect(getByRole('alert')).toBeInTheDocument();
  });

  test('prefers slot content over errors rendering', () => {
    const { getByRole } = render(UiFieldError, {
      props: { errors: ['Required'] },
      slots: {
        default: 'Custom error slot',
      },
    });

    expect(getByRole('alert')).toHaveTextContent('Custom error slot');
    expect(getByRole('alert')).not.toHaveTextContent('Required');
  });
});
