import { beforeEach, describe, expect, it, vi } from 'vitest'
import { elementUpdated, fixture, html } from '@open-wc/testing-helpers'
import './UsSwitch'
import type { LitElement } from 'lit'
import type { ISwitchProps } from './model/ISwitchProps'

type ITestUsSwitch = LitElement & ISwitchProps

describe('UsSwitch', () => {
  let input: HTMLInputElement
  let el: ITestUsSwitch
  const getElShadowRoot = (): HTMLElement => {
    return el.shadowRoot?.querySelector('.switch-container') as HTMLElement
  }

  let mockHandleChange: Function

  beforeEach(async () => {
    el = await fixture(html`<us-switch></us-switch>`)
    input = getElShadowRoot().children[0] as HTMLInputElement

    mockHandleChange = vi.fn()
  })

  it('should has default props and classes', () => {
    expect(el.checked).toBeFalsy()
    expect(el.disabled).toBeFalsy()
    expect(el.dataTestId).toBe('switch')
    expect(getElShadowRoot().className).toContain('switch-container')
  })

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

    expect(testSwitch).not.toBeNull()
  })

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

  it('should have a handleChange function', () => {
    const handleChange = el.handleChange

    expect(handleChange).not.toBeUndefined()
  })

  it('should be checked switch and set input attribute "checked"', async () => {
    el.checked = true

    await elementUpdated(el)

    expect(input.hasAttribute('checked')).toBeTruthy()
  })

  it('should be disabled switch and set input attribute "disabled"', async () => {
    el.disabled = true

    await elementUpdated(el)

    expect(input.hasAttribute('disabled')).toBeTruthy()
  })

  it('should dispatch event on change', async () => {
    input.addEventListener('click', () => mockHandleChange())
    input.click()

    expect(mockHandleChange).toHaveBeenCalled()
  })
})