import { beforeEach, describe, expect, it } from 'vitest'
import { aTimeout, fixture, html } from '@open-wc/testing-helpers'
import './UsTooltip'
import type { UsTooltip } from './UsTooltip'
import type { ITooltipProps } from './model/ITooltipProps'

type ITestUsTooltip = UsTooltip & ITooltipProps

describe('UsTooltip', async () => {
  let el: ITestUsTooltip
  const getElShadowRoot = (): HTMLElement => {
    return el.shadowRoot?.querySelector('.tooltip') as HTMLElement
  }

  beforeEach(async () => {
    el = await fixture(html`
      <us-tooltip>
        <button slot="activator">Some button</button>
        <p>Tooltip text</p>
      </us-tooltip>`)
  })

  it('should be created component us-tooltip', () => {
    const testTooltip = document.querySelector('us-tooltip')

    expect(testTooltip).not.toBeNull()
  })

  it('should be created shadowRoot of component us-tooltip', () => {
    expect(getElShadowRoot()).not.toBeNull()
  })

  it('should be created tooltip content with id=tooltipContent', () => {
    expect(getElShadowRoot().querySelector('#tooltipContent')).not.toBeNull()
  })

  it('should has default props', () => {
    expect(el.corner).toBe('bottom')
    expect(el.showArrow).toBeFalsy()
    expect(el.scrolledMaxHeight).toBe('140px')
    expect(el.scrolledWidth).toBe('324px')
    expect(el.dataTestId).toBe('tooltip')
  })

  it('should be defined the inner tooltip content when hover the element', () => {
    let result = null
    const toltipContent = getElShadowRoot().querySelector('#tooltipContent')
    const testFunc = vi.fn(async () => {
      el.show = !el.show
      await aTimeout(100)
      return toltipContent?.querySelector('.tooltip__content')
    })

    getElShadowRoot().addEventListener('click', () => {
      result = testFunc()
    })
    getElShadowRoot().click()

    expect(result).resolves.not.toBeNull()
  })
})