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

describe('UsHeader', () => {
  let header: UsHeader
  const expectedTitle = 'Test title'

  function getShadowRootElement(selector: string): HTMLElement | null {
    return header.shadowRoot!.querySelector(selector)
  }

  beforeEach(async () => {
    header = await fixture(html`<us-header 
      .headerTitle="${expectedTitle}"
      icon="card"
    ></us-header>`)
  })

  it('should display default structure', () => {
    expect(header).toBeDefined()
    expect(header.tagName).toBe('US-HEADER')
  })

  it('check passed props', () => {
    expect(header.getAttribute('icon')).toBe('card')
    expect(header.headerTitle).toBe(expectedTitle)
    expect(header.hideInsightButton).toBeFalsy()
    expect(header.hideMenu).toBeFalsy()
    expect(header.showCloseButton).toBeFalsy()
    expect(header.showBackButton).toBeFalsy()
    expect(header.menuItems).toEqual([])
    expect(header.variant).toBe('primary')
    expect(header.dataTestId).toBe('header')
  })

  it('should emit `close` if the "Close" button is clicked', async () => {
    header.showCloseButton = true
    await elementUpdated(header)
    const listener = oneEvent(header, 'close')
    const closeBtn = getShadowRootElement('.us-header__close')

    closeBtn?.click()
    const { detail } = await listener

    expect(detail.data).toBeTruthy()
  })

  it('should emit `back` if the "Back" button is clicked', async () => {
    header.showBackButton = true
    await elementUpdated(header)
    const listener = oneEvent(header, 'back')
    const backBtn = getShadowRootElement('.us-header__back-btn us-button')

    backBtn?.click()
    const { detail } = await listener

    expect(detail.data).toBeTruthy()
  })
})