import { fireEvent, render, screen, waitFor } from '@testing-library/react'
import { describe, expect, it, vi } from 'vitest'

import SidebarMobile from '@/components/layouts/SidebarMobile'

vi.mock('next/navigation', () => ({ usePathname: () => '/dashboard' }))
vi.mock('next/image', () => ({
  default: ({ alt }: { alt: string }) => (
    <span
      aria-label={alt}
      role="img"
    />
  ),
}))
vi.mock('@/components/layouts/sidebar/SidebarNav', () => ({
  default: () => <button type="button">پیشخوان</button>,
}))
vi.mock('@/components/layouts/SidebarUserFooter', () => ({ default: () => null }))
vi.mock('@/components/layouts/Loading', () => ({ default: () => null }))

describe('SidebarMobile', () => {
  it('keeps the closed navigation inert and closes it with Escape', async () => {
    render(<SidebarMobile />)

    const trigger = screen.getByRole('button', { name: 'باز کردن منو' })
    const dialog = screen.getByRole('dialog', { hidden: true })

    expect(trigger).toHaveAttribute('aria-expanded', 'false')
    expect(dialog).toHaveAttribute('inert')

    fireEvent.click(trigger)
    expect(trigger).toHaveAttribute('aria-expanded', 'true')
    expect(dialog).not.toHaveAttribute('inert')
    expect(document.body.style.overflow).toBe('hidden')

    fireEvent.keyDown(document, { key: 'Escape' })
    await waitFor(() => expect(trigger).toHaveAttribute('aria-expanded', 'false'))
    expect(dialog).toHaveAttribute('inert')
    expect(document.body.style.overflow).toBe('')
  })
})