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

describe('BaseDateInput.vue', () => {
  it('should be a Vue instance when mounted', () => {
    const wrapper = shallowMount(BaseDateInput)
    expect(wrapper.isVueInstance()).toBeTruthy()
  })
  it('should render the prop value when passed', async () => {
    const value = new Date(2020, 1, 2)
    const expected = '02/02/2020'

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

    expect(input.value).toEqual(expected)
  })
  it('should render empty value if prop value is null', async () => {
    const wrapper = mount(BaseDateInput, {
      propsData: {
        value: null
      }
    })
    const input = wrapper.find('input').element as HTMLInputElement

    expect(input.value).toEqual('')
  })
  it('should emit an InputEvent<Date> with a valid date when user input a valid date with format dd/mm/yyyy', async () => {
    const wrapper = mount(BaseDateInput)

    const value = '02/02/2020'
    const input = wrapper.find('input')
    input.setValue(value)
    await wrapper.vm.$nextTick()

    input.trigger('blur')
    await wrapper.vm.$nextTick()

    const expectedEvent = new InputEvent<Date>()
    expectedEvent.value = new Date(2020, 1, 2)
    expect(wrapper.emitted().input[0]).toStrictEqual([expectedEvent])
  })
  it('should emit an InputEvent<Date> with null value when user input a invalid date', async () => {
    const wrapper = mount(BaseDateInput)

    const value = '02/02/'
    const input = wrapper.find('input')
    input.setValue(value)
    await wrapper.vm.$nextTick()

    input.trigger('blur')
    await wrapper.vm.$nextTick()

    const expectedEvent = new InputEvent<Date>()
    expectedEvent.value = null
    expect(wrapper.emitted().input[0]).toStrictEqual([expectedEvent])
  })
  it('should emit an InputEvent<Date> with a null value when user input an empty string', async () => {
    const wrapper = mount(BaseDateInput)

    const value = ''
    const input = wrapper.find('input')
    input.setValue(value)
    await wrapper.vm.$nextTick()

    input.trigger('blur')
    await wrapper.vm.$nextTick()

    const expectedEvent = new InputEvent<Date>()
    expectedEvent.value = null
    expect(wrapper.emitted().input[0]).toStrictEqual([expectedEvent])
  })
  it('should emit an InputEvent<Date> with a null value when user input an inexistent valid date', async () => {
    const wrapper = mount(BaseDateInput)

    const value = '31/11/2020'
    const input = wrapper.find('input')
    input.setValue(value)
    await wrapper.vm.$nextTick()

    input.trigger('blur')
    await wrapper.vm.$nextTick()

    const expectedEvent = new InputEvent<Date>()
    expectedEvent.value = null
    expect(wrapper.emitted().input[0]).toStrictEqual([expectedEvent])
  })
})