import '@testing-library/jest-dom'

import { fireEvent, render } from '@testing-library/react'
import { axe, toHaveNoViolations } from 'jest-axe'
import { beforeAll, beforeEach, describe, expect, test, vi } from 'vitest'

// Control the measured width to switch between desktop and tablet layouts.
let mockedWidth = 1280

vi.mock('../../hooks/useElementWidth', async () => ({
  useElementWidth: () => mockedWidth,
}))

import { PktHeaderService } from './HeaderService'

expect.extend(toHaveNoViolations)

describe('PktHeaderService – tilgjengelighet', () => {
  beforeAll(() => {
    window.scrollTo = vi.fn()
  })
  beforeEach(() => {
    mockedWidth = 1280
    vi.clearAllMocks()
  })

  test('ingen brudd i standardvisning (desktop)', async () => {
    const { container } = render(
      <PktHeaderService serviceName="Min tjeneste" serviceLink="#" position="relative">
        <a href="#en">Lenke én</a>
        <a href="#to">Lenke to</a>
      </PktHeaderService>,
    )
    expect(await axe(container)).toHaveNoViolations()
  })

  test('ingen brudd med søk og innlogget bruker', async () => {
    const { container } = render(
      <PktHeaderService
        serviceName="Min tjeneste"
        position="relative"
        showSearch
        user={{ name: 'Aksel Web Opdahl' }}
      />,
    )
    expect(await axe(container)).toHaveNoViolations()
  })

  test('ingen brudd med åpen brukermeny', async () => {
    const { container } = render(
      <PktHeaderService
        serviceName="Min tjeneste"
        position="relative"
        user={{ name: 'Aksel Web Opdahl' }}
      />,
    )
    fireEvent.click(container.querySelector('.pkt-header-service__user-button') as Element)
    expect(await axe(container)).toHaveNoViolations()
  })

  test('ingen brudd i nettbrettvisning (meny som knapp)', async () => {
    mockedWidth = 800
    const { container } = render(
      <PktHeaderService serviceName="Min tjeneste" position="relative" showSearch>
        <a href="#en">Lenke én</a>
      </PktHeaderService>,
    )
    expect(await axe(container)).toHaveNoViolations()
  })
})