import React from 'react'
import {render, screen} from '@testing-library/react'
import {FormField} from '../FormField'

describe('FormField', () => {
  it('should include an error icon when there is an error message', () => {
    render(
      <FormField
        id="test-id"
        label="Test Field"
        messages={[{type: 'error', text: 'Test error message'}]}
      />,
    )

    // This component enhances error messages to include an icon, so we check if an SVG exists
    expect(
      screen
        .getAllByRole('presentation', {hidden: true})
        .find(el => el.tagName === 'svg' && el.getAttribute('name') === 'IconWarning'),
    ).toBeDefined()
    expect(screen.getByText(/test error message/i)).toBeInTheDocument()
  })

  it('should render the label correctly', () => {
    render(<FormField id="test-id" label="Test Label" />)
    expect(screen.getByText(/test label/i)).toBeInTheDocument()
  })

  it('should render an asterisk for required fields', () => {
    render(<FormField id="test-id" label="Required Field" isRequired />)
    const label = screen.getByText(/required field/i)
    expect(label).toBeInTheDocument()
    expect(screen.getByText(/^\*$/)).toBeInTheDocument()
  })

  it('should not render asterisk when label is an empty string', () => {
    render(<FormField id="test-id" label="" isRequired />)
    const label = screen.queryByText(/^\*$/)
    expect(label).not.toBeInTheDocument()
  })
})