import { render, fireEvent } from '@@/test/kalimotxo-test-utils'
import KaFormField from './KaFormField.vue'

describe('KaFormField should', () => {
  test('Not show error if field is pristine', () => {
    const { queryByText } = renderKaFormField()
    expect(queryByText('Este email no es correcto')).not.toBeInTheDocument()
  })
  test('Have the required asterisk in label if field is required', () => {
    const { getByText } = renderKaFormField({ isRequired: true })
    expect(getByText('*')).toBeInTheDocument()
  })
  test('Show validator error if field has error and has been blurred', async () => {
    const { findByText, input } = renderKaFormField({ value: 'test' })
    await fireEvent.focus(input)
    await fireEvent.blur(input)
    expect(await findByText('Este email no es correcto')).toBeInTheDocument()
  })
  test('Show required error if field is required and has been blurred', async () => {
    const { getByText, input } = renderKaFormField({ isRequired: true })
    await fireEvent.focus(input)
    await fireEvent.blur(input)
    expect(getByText('Este campo es obligatorio')).toBeInTheDocument()
  })
  test('Hide the required asterisk in label if field is required and hideAsterisk is enabled', async () => {
    const { getByText, queryByText, input } = renderKaFormField({
      isRequired: true,
      hideAsterisk: true,
    })
    await fireEvent.focus(input)
    await fireEvent.blur(input)
    expect(getByText('Este campo es obligatorio')).toBeInTheDocument()
    expect(queryByText('*')).not.toBeInTheDocument()
  })
  test('Be a text input if type is text', () => {
    const { getByRole } = renderKaFormField()
    expect(getByRole('textbox')).toBeInTheDocument()
  })
  test('Be a select if type is select', () => {
    const { getByRole } = renderKaFormField({ type: 'select' })
    expect(getByRole('combobox')).toBeInTheDocument()
  })
  test('Be a radio if type is radio', () => {
    const { getByRole } = renderKaFormField({ type: 'radio' })
    expect(getByRole('radio')).toBeInTheDocument()
  })
  test('Radio is checked when value and radioValue match', () => {
    const { getByRole } = renderKaFormField({
      type: 'radio',
      radioValue: 'radioValue',
      value: 'radioValue',
    })
    expect(getByRole('radio')).toBeChecked()
  })
  test('Radio is not checked when value and radioValue do not match', () => {
    const { getByRole } = renderKaFormField({
      type: 'radio',
      radioValue: 'radioValue1',
      value: 'radioValue2',
    })
    expect(getByRole('radio')).not.toBeChecked()
  })
  test('Be a checkbox if type is checkbox', () => {
    const { getByRole } = renderKaFormField({ type: 'checkbox' })
    expect(getByRole('checkbox')).toBeInTheDocument()
  })
  test('Have correct palceholder', () => {
    const { input } = renderKaFormField()
    expect(input.placeholder).toBe('test placeholder')
  })
})

function renderKaFormField({
  isRequired = false,
  hideAsterisk = false,
  validator = () => 'error-email-invalid',
  type = 'text',
  value = '',
  radioValue = '',
} = {}) {
  const view = render(KaFormField, {
    props: {
      label: 'test input',
      isRequired,
      hideAsterisk,
      validators: [validator],
      value,
      radioValue,
      type,
      placeholder: 'test placeholder',
      options: [],
    },
  })
  const roleType =
    type === 'text' ? 'textbox' : type === 'select' ? 'combobox' : type
  const input = view.getByRole(roleType) as HTMLInputElement
  return { ...view, input }
}