import { mount } from '@vue/test-utils'
import Vuetify from 'vuetify'
import Text from '~/components/Ui/Xeditable/Text'

let wrapper
let vuetify
beforeEach(() => {
  vuetify = new Vuetify()
  wrapper = mount(Text, {
    propsData: {
      data: 'foo'
    },
    stubs: ['UiInputText'],
    vuetify
  })
})

describe('edit-link', () => {
  it('should display by default', async () => {
    expect(wrapper.find('.edit-link').exists()).toBeTruthy()
  })

  it('should hide if we click on it', async () => {
    await wrapper.find('.edit-link').trigger('click')
    expect(wrapper.find('.edit-link').exists()).toBeFalsy()
  })

  it('should show if we click on it and after if we click on valid', async () => {
    await wrapper.find('.edit-link').trigger('click')
    await wrapper.find('.valid').trigger('click')
    expect(wrapper.find('.edit-link').exists()).toBeTruthy()
  })

  it('should show if we click on it and after if we click on cancel', async () => {
    await wrapper.find('.edit-link').trigger('click')
    await wrapper.find('.cancel').trigger('click')
    expect(wrapper.find('.edit-link').exists()).toBeTruthy()
  })
})

describe('x-editable-input', () => {
  it('should hide by default', async () => {
    expect(wrapper.find('.x-editable-input').exists()).toBeFalsy()
  })

  it('should show if we click on edit link it', async () => {
    await wrapper.find('.edit-link').trigger('click')
    expect(wrapper.find('.x-editable-input').exists()).toBeTruthy()
  })

  it('should emit an update event on valid button if inputValue has change', async () => {
    await wrapper.find('.edit-link').trigger('click')
    await wrapper.setData({ inputValue: 'bar' })
    await wrapper.find('.valid').trigger('click')
    expect(wrapper.emitted().update).toBeTruthy()
  })

  it('should not emit an update event on valid button if inputValue has not change', async () => {
    await wrapper.find('.edit-link').trigger('click')
    await wrapper.find('.valid').trigger('click')
    expect(wrapper.emitted().update).toBeFalsy()
  })
})