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

type ItTestUsValidMessage = LitElement & IValidMessageProps

describe('UsValidMessage', () => {
  let el: ItTestUsValidMessage

  beforeEach(async () => {
    el = await fixture(html`<us-valid-message>Text</us-valid-message>`)
  })

  it('should have default props', () => {
    // Assert
    expect(el.isError).toBeFalsy()
    expect(el.dataTestId).toBe('message_valid')
  })

  it('should display default slot', () => {
    // Assert
    expect(el.innerText).toContain('Text')
  })

  it('should render with default classes when no attributes are set', async () => {
    // Act
    const validMessage = el.shadowRoot?.querySelector('.valid-message')

    // Assert
    expect(validMessage?.className).not.toContain('message_error')
  })

  it('should render with error class when isError is set', async () => {
    // Arrange
    el.isError = true

    // Act
    await elementUpdated(el)
    const validMessage = el.shadowRoot?.querySelector('.valid-message')

    // Assert
    expect(validMessage?.className).toContain('message_error')
  })
})