import '@testing-library/jest-dom'

import { render } from '@testing-library/react'
import { axe, toHaveNoViolations } from 'jest-axe'

import { PktLoader } from './Loader'
expect.extend(toHaveNoViolations)

describe('PktLoader', () => {
  describe('basic rendering', () => {
    it('renders correctly without any props', async () => {
      const { container } = render(<PktLoader id="loader1" />)
      await window.customElements.whenDefined('pkt-loader')

      const element = container.querySelector('pkt-loader')
      expect(element).toBeInTheDocument()
    })

    it('renders with size and variant', async () => {
      const { container } = render(<PktLoader id="loader1" size="small" variant="rainbow" message="Loading.." />)
      await window.customElements.whenDefined('pkt-loader')

      const loaderBox = container.querySelector('pkt-loader')
      const loaderSize = loaderBox?.querySelector('.pkt-loader--small')

      expect(loaderSize).toBeInTheDocument()
      expect(loaderBox).toHaveTextContent('Loading..')
    })

    it('renders inline', async () => {
      const { container } = render(<PktLoader size="medium" message="Loading.." inline />)
      await window.customElements.whenDefined('pkt-loader')
      const elementInline = container.querySelector('.pkt-loader--inline')

      expect(elementInline).toBeInTheDocument()
    })
  })

  describe('accessibility', () => {
    it('renders with no wcag errors with axe', async () => {
      const { container } = render(<PktLoader message="Loading.." variant="shapes" size="small" />)
      const results = await axe(container)
      expect(results).toHaveNoViolations()
    })
  })
})