import '@testing-library/jest-dom'

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

import { PktModal } from './Modal'

expect.extend(toHaveNoViolations)

afterEach(cleanup)

describe('PktModal', () => {
  test('ref works correctly', () => {
    const ref = createRef<HTMLDialogElement>()
    const { unmount } = render(
      <PktModal ref={ref} headingText="Modal Title">
        modal content
      </PktModal>,
    )
    expect(ref.current).toBeInstanceOf(HTMLDialogElement)
    unmount()
    expect(ref.current).toBeNull()
  })

  test('renders with the specified size', () => {
    const { container } = render(
      <PktModal headingText="Modal Title" size="small">
        modal content
      </PktModal>,
    )
    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>)
    const results = await axe(container)

    expect(results).toHaveNoViolations()
  })

  test('renders with default props', () => {
    const { container } = render(<PktModal>innhold</PktModal>)
    const dialog = container.querySelector('dialog.pkt-modal')
    expect(dialog).toBeInTheDocument()
    expect(dialog).toHaveClass('pkt-modal--medium')
  })

})