malio-layer-ui/app/components/malio/input/InputAutocomplete.test.ts

import {describe, expect, it, vi} from 'vitest'
import {mount} from '@vue/test-utils'
import type {DefineComponent} from 'vue'
import {Icon as IconifyIcon} from '@iconify/vue'
import InputAutocomplete from './InputAutocomplete.vue'

type Option = {
  label: string
  value: string | number
}

type InputAutocompleteProps = {
  id?: string
  label?: string
  name?: string
  modelValue?: string | number | null
  inputClass?: string
  labelClass?: string
  groupClass?: string
  required?: boolean
  disabled?: boolean
  readonly?: boolean
  hint?: string
  error?: string
  success?: string
  options?: Option[]
  loading?: boolean
  debounce?: number
  minSearchLength?: number
  allowCreate?: boolean
  localFilter?: boolean
  iconName?: string
  iconPosition?: 'left' | 'right'
  iconSize?: string | number
  iconColor?: string
  noResultsText?: string
  loadingText?: string
  minSearchText?: string
}

const InputAutocompleteForTest = InputAutocomplete as DefineComponent<InputAutocompleteProps>

const options: Option[] = [
  {label: 'France', value: 'fr'},
  {label: 'Belgique', value: 'be'},
  {label: 'Canada', value: 'ca'},
]

const mountComponent = (props: InputAutocompleteProps = {}) =>
  mount(InputAutocompleteForTest, {
    props,
    global: {
      stubs: {
        IconifyIcon: {
          template: '<span data-test="icon" v-bind="$attrs" />',
        },
      },
    },
  })

describe('MalioInputAutocomplete', () => {
  it('renders the label text', () => {
    const wrapper = mountComponent({label: 'Pays'})

    expect(wrapper.get('label').text()).toBe('Pays')
  })

  it('renders with type combobox role', () => {
    const wrapper = mountComponent()

    expect(wrapper.get('input').attributes('role')).toBe('combobox')
  })

  it('renders input with provided modelValue label when option matches', () => {
    const wrapper = mountComponent({modelValue: 'fr', options})

    expect(wrapper.get('input').element.value).toBe('France')
  })

  it('opens dropdown on focus', async () => {
    const wrapper = mountComponent({options})

    await wrapper.get('input').trigger('focus')

    expect(wrapper.find('[data-test="dropdown"]').exists()).toBe(true)
    expect(wrapper.get('input').attributes('aria-expanded')).toBe('true')
  })

  it('does not open dropdown on focus when disabled', async () => {
    const wrapper = mountComponent({options, disabled: true})

    await wrapper.get('input').trigger('focus')

    expect(wrapper.find('[data-test="dropdown"]').exists()).toBe(false)
  })

  it('does not open dropdown on focus when readonly', async () => {
    const wrapper = mountComponent({options, readonly: true})

    await wrapper.get('input').trigger('focus')

    expect(wrapper.find('[data-test="dropdown"]').exists()).toBe(false)
  })

  it('renders all options in dropdown', async () => {
    const wrapper = mountComponent({options})

    await wrapper.get('input').trigger('focus')

    const items = wrapper.findAll('[data-test="option"]')
    expect(items).toHaveLength(3)
    expect(items[0].text()).toBe('France')
    expect(items[1].text()).toBe('Belgique')
    expect(items[2].text()).toBe('Canada')
  })

  it('emits update:modelValue with option value when option is selected', async () => {
    const wrapper = mountComponent({options})

    await wrapper.get('input').trigger('focus')
    await wrapper.findAll('[data-test="option"]')[1].trigger('click')

    expect(wrapper.emitted('update:modelValue')?.[0]).toEqual(['be'])
  })

  it('emits select with full option object', async () => {
    const wrapper = mountComponent({options})

    await wrapper.get('input').trigger('focus')
    await wrapper.findAll('[data-test="option"]')[0].trigger('click')

    expect(wrapper.emitted('select')?.[0]).toEqual([options[0]])
  })

  it('closes dropdown after selecting an option', async () => {
    const wrapper = mountComponent({options})

    await wrapper.get('input').trigger('focus')
    await wrapper.findAll('[data-test="option"]')[0].trigger('click')

    expect(wrapper.find('[data-test="dropdown"]').exists()).toBe(false)
  })

  it('fills input with selected option label after selection', async () => {
    const wrapper = mountComponent({options, modelValue: null})

    await wrapper.get('input').trigger('focus')
    await wrapper.findAll('[data-test="option"]')[1].trigger('click')

    await wrapper.setProps({modelValue: 'be'})

    expect(wrapper.get('input').element.value).toBe('Belgique')
  })

  it('emits search after debounce when user types', async () => {
    vi.useFakeTimers()
    const wrapper = mountComponent({options, debounce: 300})

    await wrapper.get('input').setValue('fra')

    expect(wrapper.emitted('search')).toBeUndefined()

    vi.advanceTimersByTime(300)

    expect(wrapper.emitted('search')?.[0]).toEqual(['fra'])
    vi.useRealTimers()
  })

  it('does not emit search until minSearchLength is reached', async () => {
    vi.useFakeTimers()
    const wrapper = mountComponent({minSearchLength: 3, debounce: 300})

    await wrapper.get('input').setValue('fr')
    vi.advanceTimersByTime(300)

    expect(wrapper.emitted('search')).toBeUndefined()

    await wrapper.get('input').setValue('fra')
    vi.advanceTimersByTime(300)

    expect(wrapper.emitted('search')?.[0]).toEqual(['fra'])
    vi.useRealTimers()
  })

  it('shows minSearch text in dropdown when minSearchLength not reached', async () => {
    const wrapper = mountComponent({minSearchLength: 3, minSearchText: 'Tapez 3 caractères'})

    await wrapper.get('input').trigger('focus')

    expect(wrapper.find('[data-test="min-search-text"]').text()).toBe('Tapez 3 caractères')
  })

  it('shows loading text in dropdown when loading', async () => {
    const wrapper = mountComponent({loading: true, loadingText: 'En cours…'})

    await wrapper.get('input').trigger('focus')

    expect(wrapper.find('[data-test="loading-text"]').text()).toBe('En cours…')
  })

  it('shows loading icon when loading', async () => {
    const wrapper = mountComponent({loading: true})

    expect(wrapper.find('[data-test="loading-icon"]').exists()).toBe(true)
    expect(wrapper.find('[data-test="chevron"]').exists()).toBe(false)
  })

  it('shows no results text when options is empty', async () => {
    const wrapper = mountComponent({options: [], noResultsText: 'Rien trouvé'})

    await wrapper.get('input').trigger('focus')

    expect(wrapper.find('[data-test="no-results-text"]').text()).toBe('Rien trouvé')
  })

  it('clears selection when typing different value', async () => {
    const wrapper = mountComponent({options, modelValue: 'fr'})

    await wrapper.get('input').trigger('focus')
    await wrapper.get('input').setValue('belg')

    expect(wrapper.emitted('update:modelValue')?.[0]).toEqual([null])
    expect(wrapper.emitted('select')?.[0]).toEqual([null])
  })

  it('emits create event with typed value when allowCreate and Enter pressed', async () => {
    const wrapper = mountComponent({options, allowCreate: true})

    await wrapper.get('input').trigger('focus')
    await wrapper.get('input').setValue('Custom')
    await wrapper.get('input').trigger('keydown', {key: 'Enter'})

    expect(wrapper.emitted('create')?.[0]).toEqual(['Custom'])
    expect(wrapper.emitted('update:modelValue')?.some(e => e[0] === 'Custom')).toBe(true)
  })

  it('does not emit create when allowCreate is false', async () => {
    const wrapper = mountComponent({options, allowCreate: false})

    await wrapper.get('input').trigger('focus')
    await wrapper.get('input').setValue('Custom')
    await wrapper.get('input').trigger('keydown', {key: 'Enter'})

    expect(wrapper.emitted('create')).toBeUndefined()
  })

  it('selects option on Enter with active index', async () => {
    const wrapper = mountComponent({options})

    await wrapper.get('input').trigger('focus')
    await wrapper.get('input').trigger('keydown', {key: 'ArrowDown'})
    await wrapper.get('input').trigger('keydown', {key: 'Enter'})

    expect(wrapper.emitted('update:modelValue')?.[0]).toEqual(['fr'])
  })

  it('navigates options with ArrowDown', async () => {
    const wrapper = mountComponent({options})

    await wrapper.get('input').trigger('focus')
    await wrapper.get('input').trigger('keydown', {key: 'ArrowDown'})
    await wrapper.get('input').trigger('keydown', {key: 'ArrowDown'})

    expect(wrapper.get('input').attributes('aria-activedescendant')).toContain('-option-1')
  })

  it('closes dropdown on Escape', async () => {
    const wrapper = mountComponent({options})

    await wrapper.get('input').trigger('focus')
    expect(wrapper.find('[data-test="dropdown"]').exists()).toBe(true)

    await wrapper.get('input').trigger('keydown', {key: 'Escape'})

    expect(wrapper.find('[data-test="dropdown"]').exists()).toBe(false)
  })

  it('reverts input value on Escape', async () => {
    const wrapper = mountComponent({options, modelValue: 'fr'})

    await wrapper.get('input').trigger('focus')
    await wrapper.get('input').setValue('xyz')
    await wrapper.get('input').trigger('keydown', {key: 'Escape'})

    expect(wrapper.get('input').element.value).toBe('France')
  })

  it('shows error message and styles', () => {
    const wrapper = mountComponent({error: 'Champ invalide'})

    expect(wrapper.get('p.text-m-danger').text()).toBe('Champ invalide')
    expect(wrapper.get('input').classes()).toContain('border-m-danger')
    expect(wrapper.get('input').attributes('aria-invalid')).toBe('true')
  })

  it('shows success message and styles', () => {
    const wrapper = mountComponent({success: 'Champ valide'})

    expect(wrapper.get('p.text-m-success').text()).toBe('Champ valide')
    expect(wrapper.get('input').classes()).toContain('border-m-success')
  })

  it('shows hint message', () => {
    const wrapper = mountComponent({hint: 'Tapez pour rechercher'})

    expect(wrapper.get('p.text-m-muted').text()).toBe('Tapez pour rechercher')
  })

  it('renders left icon when iconName provided with left position', () => {
    const wrapper = mountComponent({iconName: 'mdi:magnify', iconPosition: 'left'})

    expect(wrapper.find('[data-test="icon-left"]').exists()).toBe(true)
    expect(wrapper.find('[data-test="icon-right"]').exists()).toBe(false)
  })

  it('renders right icon when iconName provided with right position', () => {
    const wrapper = mountComponent({iconName: 'mdi:magnify', iconPosition: 'right'})

    expect(wrapper.find('[data-test="icon-right"]').exists()).toBe(true)
    expect(wrapper.find('[data-test="icon-left"]').exists()).toBe(false)
  })

  it('does not render icon when iconName is empty', () => {
    const wrapper = mountComponent({iconName: ''})

    expect(wrapper.find('[data-test="icon-left"]').exists()).toBe(false)
    expect(wrapper.find('[data-test="icon-right"]').exists()).toBe(false)
  })

  it('uses left padding when icon is left', () => {
    const wrapper = mountComponent({iconName: 'mdi:magnify', iconPosition: 'left'})

    expect(wrapper.get('input').classes()).toContain('!pl-11')
  })

  it('uses extra right padding when icon is right', () => {
    const wrapper = mountComponent({iconName: 'mdi:magnify', iconPosition: 'right'})

    expect(wrapper.get('input').classes()).toContain('!pr-16')
  })

  it('renders the chevron with default icon', () => {
    const wrapper = mountComponent()

    const icons = wrapper.findAllComponents(IconifyIcon)
    const chevron = icons[icons.length - 1]
    expect(chevron.props('icon')).toBe('mdi:chevron-down')
  })

  it('rotates the chevron when dropdown is open', async () => {
    const wrapper = mountComponent({options})

    expect(wrapper.get('[data-test="chevron"]').classes()).toContain('rotate-0')

    await wrapper.get('input').trigger('focus')

    expect(wrapper.get('[data-test="chevron"]').classes()).toContain('rotate-180')
  })

  it('sets disabled attribute', () => {
    const wrapper = mountComponent({disabled: true})

    expect(wrapper.get('input').attributes('disabled')).toBeDefined()
    expect(wrapper.get('input').classes()).toContain('cursor-not-allowed')
  })

  it('sets readonly attribute', () => {
    const wrapper = mountComponent({readonly: true})

    expect(wrapper.get('input').attributes('readonly')).toBeDefined()
  })

  it('links label to input via for/id', () => {
    const wrapper = mountComponent({id: 'country', label: 'Pays'})

    expect(wrapper.get('input').attributes('id')).toBe('country')
    expect(wrapper.get('label').attributes('for')).toBe('country')
  })

  it('generates an id when missing and reuses it on label', () => {
    const wrapper = mountComponent({label: 'Pays'})

    const inputId = wrapper.get('input').attributes('id')

    expect(inputId?.startsWith('malio-input-autocomplete-')).toBe(true)
    expect(wrapper.get('label').attributes('for')).toBe(inputId)
  })

  it('aria-invalid is false when no error', () => {
    const wrapper = mountComponent()

    expect(wrapper.get('input').attributes('aria-invalid')).toBe('false')
  })

  it('marks the option matching modelValue as aria-selected', async () => {
    const wrapper = mountComponent({options, modelValue: 'be'})

    await wrapper.get('input').trigger('focus')

    const items = wrapper.findAll('[data-test="option"]')
    expect(items[0].attributes('aria-selected')).toBe('false')
    expect(items[1].attributes('aria-selected')).toBe('true')
    expect(items[2].attributes('aria-selected')).toBe('false')
  })

  it('updates inputValue when modelValue changes externally', async () => {
    const wrapper = mountComponent({options, modelValue: 'fr'})

    expect(wrapper.get('input').element.value).toBe('France')

    await wrapper.setProps({modelValue: 'ca'})

    expect(wrapper.get('input').element.value).toBe('Canada')
  })

  it('clears inputValue when modelValue is cleared externally', async () => {
    const wrapper = mountComponent({options, modelValue: 'fr'})

    expect(wrapper.get('input').element.value).toBe('France')

    await wrapper.setProps({modelValue: null})

    expect(wrapper.get('input').element.value).toBe('')
  })

  it('uses allowCreate modelValue as inputValue when no match in options', async () => {
    const wrapper = mountComponent({options, allowCreate: true, modelValue: 'Custom'})

    expect(wrapper.get('input').element.value).toBe('Custom')
  })

  it('does not filter options when localFilter is false (default)', async () => {
    const wrapper = mountComponent({options})

    await wrapper.get('input').trigger('focus')
    await wrapper.get('input').setValue('fr')

    expect(wrapper.findAll('[data-test="option"]')).toHaveLength(3)
  })

  it('filters options client-side when localFilter is true', async () => {
    const wrapper = mountComponent({options, localFilter: true})

    await wrapper.get('input').trigger('focus')
    await wrapper.get('input').setValue('fr')

    const items = wrapper.findAll('[data-test="option"]')
    expect(items).toHaveLength(1)
    expect(items[0].text()).toBe('France')
  })

  it('localFilter is case-insensitive and matches substrings', async () => {
    const wrapper = mountComponent({options, localFilter: true})

    await wrapper.get('input').trigger('focus')
    await wrapper.get('input').setValue('GIQ')

    const items = wrapper.findAll('[data-test="option"]')
    expect(items).toHaveLength(1)
    expect(items[0].text()).toBe('Belgique')
  })

  it('localFilter shows all options when input is empty', async () => {
    const wrapper = mountComponent({options, localFilter: true})

    await wrapper.get('input').trigger('focus')

    expect(wrapper.findAll('[data-test="option"]')).toHaveLength(3)
  })

  it('localFilter shows the no-results state when nothing matches', async () => {
    const wrapper = mountComponent({options, localFilter: true})

    await wrapper.get('input').trigger('focus')
    await wrapper.get('input').setValue('zzzzz')

    expect(wrapper.findAll('[data-test="option"]')).toHaveLength(0)
    expect(wrapper.find('[data-test="no-results-text"]').exists()).toBe(true)
  })

  it('keeps the floating label at the same position whether focused or not (no jump)', async () => {
    const wrapper = mountComponent({options, label: 'Pays', modelValue: 'fr'})

    // when a value is selected and the field is not focused, the label is already floated
    const labelClasses = wrapper.get('label').classes()
    expect(labelClasses).toContain('-translate-y-[1.25rem]')
    // and there is no extra peer-focus translate that would make it jump on click
    expect(labelClasses).not.toContain('peer-focus:-translate-y-[1.55rem]')
  })

  it('does not shift inner text horizontally on focus (no focus:pl change)', () => {
    const wrapper = mountComponent({options})

    const inputClasses = wrapper.get('input').classes()
    expect(inputClasses).not.toContain('focus:pl-[11px]')
  })

  it('keeps the bottom border allocation when open (transparent, not zero)', async () => {
    const wrapper = mountComponent({options})

    await wrapper.get('input').trigger('focus')

    const inputClasses = wrapper.get('input').classes()
    // border-b-0 would shrink the bottom border to 0px and grow content area by 1px;
    // border-b-transparent keeps the 1px allocation but hides the line
    expect(inputClasses).not.toContain('!border-b-0')
    expect(inputClasses).toContain('!border-b-transparent')
  })
})