import '@testing-library/jest-dom'

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

import { PktHeading } from './Heading'

expect.extend(toHaveNoViolations)

describe('PktHeading', () => {
  test('renders without errors', async () => {
    render(<PktHeading />)
    await window.customElements.whenDefined('pkt-heading')
  })

  test('renders with different levels', async () => {
    const { container } = render(
      <>
        <PktHeading level={1}>Heading 1</PktHeading>
        <PktHeading level={2}>Heading 2</PktHeading>
        <PktHeading level={3}>Heading 3</PktHeading>
      </>,
    )
    await window.customElements.whenDefined('pkt-heading')

    const headings = container.querySelectorAll('pkt-heading')
    expect(headings[0]).toHaveAttribute('aria-level', '1')
    expect(headings[1]).toHaveAttribute('aria-level', '2')
    expect(headings[2]).toHaveAttribute('aria-level', '3')
  })

  test('renders with different sizes', async () => {
    const ref = createRef<any>()
    const { container } = render(<PktHeading size="xlarge">Large Heading</PktHeading>)
    await window.customElements.whenDefined('pkt-heading')

    const headingElement = container.querySelector('pkt-heading')
    expect(headingElement).toHaveClass('pkt-heading--xlarge')
    expect(headingElement).toHaveAttribute('size', 'xlarge')
  })

  test('renders with visually hidden prop', async () => {
    const { container } = render(<PktHeading visuallyHidden>Hidden Heading</PktHeading>)
    await window.customElements.whenDefined('pkt-heading')

    const headingElement = container.querySelector('pkt-heading')
    expect(headingElement).toHaveClass('pkt-sr-only')
    expect(headingElement).toHaveAttribute('visuallyHidden')
  })

  test('renders with align props', async () => {
    const { container } = render(<PktHeading align="center">Center Heading</PktHeading>)
    await window.customElements.whenDefined('pkt-heading')

    const headingElement = container.querySelector('pkt-heading')
    expect(headingElement).toHaveAttribute('align', 'center')
  })

  describe('accessibility', () => {
    it('renders with no wcag errors with axe', async () => {
      const { container } = render(
        <PktHeading level={1} size="large">
          Accessible Heading
        </PktHeading>,
      )
      await window.customElements.whenDefined('pkt-heading')
      const results = await axe(container)
      expect(results).toHaveNoViolations()
    })
  })
})