import { h, nextTick } from 'vue'
import { mount } from '@vue/test-utils'
import Tooltip from '../src/index'

import type { VNode } from 'vue'

const AXIOM = 'Rem is the best girl'

const _mount = (props: any = {}, content: string | VNode = '') =>
  mount(Tooltip, {
    slots: {
      default: () => h('div', AXIOM),
      content: () => content,
    },
    props,
    attachTo: 'body',
  })

const selector = '.el-popper'
describe('Tooltip.vue', () => {
  beforeEach(() => {
    document.body.innerHTML = ''
  })
  test('render test', () => {
    const wrapper = _mount(undefined, AXIOM)
    expect(wrapper.html()).toContain(AXIOM)
  })

  test('manual mode', async () => {
    const wrapper = _mount(
      {
        manual: true,
        modelValue: false,
      },
      AXIOM
    )
    // since VTU does not provide any functionality for testing teleported components
    expect(document.querySelector(selector).getAttribute('style')).toContain(
      'display: none'
    )

    await wrapper.setProps({
      modelValue: true,
    })

    await nextTick()
    expect(
      document.querySelector(selector).getAttribute('style')
    ).not.toContain('display: none')
  })
})