import { createAppLocalVue } from '@/../tests/utils' // should be the first to implement default mocks
import modalTemplate from '../modalTemplate'
import { shallowMount } from '@vue/test-utils'
import flushPromises from 'flush-promises'

const localVue = createAppLocalVue()

describe('Element - Common - ModalTemplate', () => {
  it('Should display title, body, footer', async () => {
    const wrapper = shallowMount(modalTemplate, {
      localVue,
      slots: {
        header: '<div class="fake-header"></div>',
        title: '<div class="fake-title"></div>',
        body: '<div class="fake-body"></div>',
        footer: '<div class="fake-footer"></div>',
      },
    })

    await flushPromises()

    expect(wrapper.element).toMatchSnapshot()
    expect(wrapper.find('.fake-header').exists()).toBeFalsy()
    expect(wrapper.find('.fake-title').exists()).toBeTruthy()
    expect(wrapper.find('.fake-body').exists()).toBeTruthy()
    expect(wrapper.find('.fake-footer').exists()).toBeTruthy()
    expect(wrapper.isVueInstance()).toBeTruthy()
  })

  it('Should not display footer if prop isFooterHide is true', async () => {
    const wrapper = shallowMount(modalTemplate, {
      localVue,
      propsData: {
        isFooterHide: true,
        size: 'xl',
      },
    })

    await flushPromises()

    expect(wrapper.element).toMatchSnapshot()
    expect(wrapper.find("[hidefooter='true']").exists()).toBeTruthy()
    expect(wrapper.find("[size='xl']").exists()).toBeTruthy()
    expect(wrapper.isVueInstance()).toBeTruthy()
  })

  it('Should display Header, body, footer', async () => {
    const wrapper = shallowMount(modalTemplate, {
      localVue,
      propsData: {
        isHeaderShow: true,
      },
      slots: {
        header: '<div class="fake-header"></div>',
        body: '<div class="fake-body"></div>',
        footer: '<div class="fake-footer"></div>',
      },
    })

    await flushPromises()

    expect(wrapper.element).toMatchSnapshot()

    expect(wrapper.find('.fake-header').exists()).toBeTruthy()
    expect(wrapper.find('.fake-body').exists()).toBeTruthy()
    expect(wrapper.find('.fake-footer').exists()).toBeTruthy()
    expect(wrapper.isVueInstance()).toBeTruthy()
  })

  it('Should apply class to header', async () => {
    const wrapper = shallowMount(modalTemplate, {
      localVue,
      propsData: {
        isHeaderShow: true,
        headerClass: ['border-0'],
      },
      slots: {
        header: '<div class="fake-header"></div>',
        body: '<div class="fake-body"></div>',
        footer: '<div class="fake-footer"></div>',
      },
    })

    await flushPromises()
    expect(wrapper.element).toMatchSnapshot()
    expect(wrapper.find('[headerClass=border-0]')).toBeTruthy()
  })
})
