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

describe('UsPopup', () => {
  let element: UsPopup

  beforeEach(async () => {
    element = await fixture(html`
      <us-popup
        .name="${'test'}"
        ?show="${true}"
      >
        <p class="test-content">test content</p>
        <p slot="afterContent" class="test-after-content">test after content</p>
      </us-popup>
    `)
  })

  it('should has default and given values for its properties', () => {
    expect(element.width).toEqual('256px')
    expect(element.height).toEqual('auto')
    expect(element.maxHeight).toEqual('none')
    expect(element.name).toEqual('test')
    expect(element.boxShadow).toBeFalsy()
    expect(element.overlay).toBeFalsy()
    expect(element.show).toBeTruthy()
    expect(element.alternativeHeader).toBeFalsy()
    expect(element.scrollable).toBeFalsy()
    expect(element.hideCloseButton).toBeFalsy()
    expect(element.notFullWidth).toBeFalsy()
    expect(element.noContentPadding).toBeFalsy()
    expect(element.openOver).toBeFalsy()
    expect(element.position).toEqual('center')
    expect(element.variant).toEqual('default')
    expect(element.dataTestId).toBe('popup')
  })

  it('should render a default header', async () => {
    const header = element.shadowRoot?.querySelector(`us-modal-header[headertitle=${element.name}]`)

    expect(header).toBeTruthy()
  })

  it('should open and close', async () => {
    expect(element.show).toBeTruthy()

    element.closeModal()

    expect(element.show).toBeFalsy()
  })

  it('should render alternative header if the property is provided', async () => {
    element.variant = 'preview'
    await element.updateComplete

    const header = element.shadowRoot?.querySelector('us-header')

    expect(header).toBeTruthy()
  })

  it('should render popup with given slot content', () => {
    const popupContent = element.querySelector('.test-content')?.innerHTML
    const popupAfterContent = element.querySelector('.test-after-content')?.innerHTML

    expect(popupContent).toEqual('test content')
    expect(popupAfterContent).toEqual('test after content')
  })
})