import { mount } from '@vue/test-utils'
import Vue from 'vue'
import AutoComplete from '..'
import focusTest from '../../../tests/shared/focusTest'

describe('AutoComplete with Custom Input Element Render', () => {
  focusTest(AutoComplete)
  function $$ (className) {
    return document.body.querySelectorAll(className)
  }
  it('AutoComplete with custom Input render perfectly', (done) => {
    const wrapper = mount({
      render (h) {
        return <AutoComplete ref='component' dataSource={['12345', '23456', '34567']}>
          <input />
        </AutoComplete>
      },
    }, { attachToDocument: true, sync: false })
    expect(wrapper.findAll('input').length).toBe(1)
    const input = wrapper.find('input')
    input.element.value = '123'
    input.trigger('input')
    Vue.nextTick(() => {
      mount({
        render () {
          return wrapper.find({ name: 'Trigger' }).vm.getComponent()
        },
      }, { sync: false })
      Vue.nextTick(() => {
        expect($$('.ant-select-dropdown-menu-item').length).toBe(3)
        done()
      })
    })
  })
})