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

var wrapper
var 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()
  });
})