import { shallowMount } from '@vue/test-utils'
import BaseInput from '@/elements/input/BaseInput.vue'
import InputEvent from '@/core/events/InputEvent'

describe('BaseInput.vue', () => {
  it('should be a Vue instance when mounted', () => {
    const wrapper = shallowMount(BaseInput)
    expect(wrapper.isVueInstance()).toBeTruthy()
  })
  it('should render the prop value when passed', async () => {
    const value = 'TEST VALUE'

    const wrapper = shallowMount(BaseInput, {
      propsData: {
        value: value
      }
    })
    const input = wrapper.find('input').element as HTMLInputElement

    expect(input.value).toEqual(value)
  })
  it('should emit an InputEvent<string> when user changes the input value', async () => {
    const wrapper = shallowMount(BaseInput)

    const value = 'TEST VALUE'
    const input = wrapper.find('input')
    input.setValue(value)

    await wrapper.vm.$nextTick()
    const expectedEvent = new InputEvent<string>()
    expectedEvent.value = value
    expect(wrapper.emitted().input[0]).toStrictEqual([expectedEvent])
  })
})