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

import { cleanup } from '@testing-library/react'

import '@testing-library/jest-dom'

expect.extend(toHaveNoViolations)

afterEach(cleanup)

describe('PktModal', () => {
  test('ref works correctly', async () => {
    const ref = createRef<HTMLElement>()
    const { unmount } = render(
      <PktModal ref={ref} headingText="Modal Title">
        modal content
      </PktModal>,
    )
    await window.customElements.whenDefined('pkt-modal')
    expect(ref.current).toBeInstanceOf(HTMLElement)
    unmount()
    expect(ref.current).toBeNull()
  })

  test('renders with the specified size', async () => {
    const { container } = render(
      <PktModal headingText="Modal Title" size="small">
        modal content
      </PktModal>,
    )
    await window.customElements.whenDefined('pkt-modal')
    const dialogElement = container.querySelector('dialog.pkt-modal')
    expect(dialogElement).toHaveClass('pkt-modal--small')
  })

  test('renders with no wcag errors with axe', async () => {
    const { container } = render(<PktModal headingText="Modal Title"></PktModal>)
    await window.customElements.whenDefined('pkt-modal')
    const results = await axe(container)

    expect(results).toHaveNoViolations()
  })
})