// Test med axe https://www.npmjs.com/package/jest-axe
import '@testing-library/jest-dom'

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

import { PktLinkCard } from './LinkCard'

expect.extend(toHaveNoViolations)

describe('PktLinkCard', () => {
  // BASIC RENDERING TESTS
  describe('basic rendering', () => {
    it('renders correctly with only default props', async () => {
      const { getByText } = render(<PktLinkCard>LinkCard Content</PktLinkCard>)
      expect(getByText('LinkCard Content')).toBeInTheDocument()
    })

    it('renders with title', async () => {
      render(<PktLinkCard title="Link title">Link content</PktLinkCard>)
      const iconElement = document.querySelector('.pkt-linkcard__title')
      expect(iconElement).toBeInTheDocument()
    })

    it('renders without title', async () => {
      render(<PktLinkCard>Link content</PktLinkCard>)
      const iconElement = document.querySelector('.pkt-linkcard__title')
      expect(iconElement).not.toBeInTheDocument()
    })

    it('renders with correct href', async () => {
      const href = 'https://www.example.com'
      const { container } = render(
        <PktLinkCard title="Link title" href={href}>
          Link content
        </PktLinkCard>,
      )
      const linkElement = container.querySelector('.pkt-linkcard')
      expect(linkElement).toHaveAttribute('href', href)
    })
  })

  // SKIN TESTS

  describe('skins', () => {
    it('renders with normal skin', async () => {
      const { container } = render(
        <div>
          <PktLinkCard title="normal" skin="normal" />
        </div>,
      )
      const linkElement = container.querySelector('.pkt-linkcard')
      expect(linkElement).toHaveClass('pkt-linkcard pkt-linkcard--normal')
    })

    it('renders with blue skin', async () => {
      const { container } = render(
        <div>
          <PktLinkCard title="Blue" skin="blue" />
        </div>,
      )
      const linkElement = container.querySelector('.pkt-linkcard')
      expect(linkElement).toHaveClass('pkt-linkcard pkt-linkcard--blue')
    })

    it('renders with beige skin', async () => {
      const { container } = render(
        <div>
          <PktLinkCard title="Beige" skin="beige" />
        </div>,
      )
      const linkElement = container.querySelector('.pkt-linkcard')
      expect(linkElement).toHaveClass('pkt-linkcard pkt-linkcard--beige')
    })

    it('renders with green skin', async () => {
      const { container } = render(
        <div>
          <PktLinkCard title="Green" skin="green" />
        </div>,
      )
      const linkElement = container.querySelector('.pkt-linkcard')
      expect(linkElement).toHaveClass('pkt-linkcard pkt-linkcard--green')
    })

    it('renders with beige-outline skin', async () => {
      const { container } = render(
        <div>
          <PktLinkCard title="Beige outline" skin="beige-outline" />
        </div>,
      )
      const linkElement = container.querySelector('.pkt-linkcard')
      expect(linkElement).toHaveClass('pkt-linkcard pkt-linkcard--beige-outline')
    })
    it('renders with gray-outline skin', async () => {
      const { container } = render(
        <div>
          <PktLinkCard title="Gray outline" skin="gray-outline" />
        </div>,
      )
      const linkElement = container.querySelector('.pkt-linkcard')
      expect(linkElement).toHaveClass('pkt-linkcard pkt-linkcard--gray-outline')
    })
  })

  // ACCESSIBILITY TESTS

  describe('accessibility', () => {
    it('renders with no wcag errors with axe', async () => {
      const { container } = render(<PktLinkCard title="Normal" skin="normal"></PktLinkCard>)
      const results = await axe(container)

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