import { describe, expect, it } from 'vitest'
import { render, screen } from '@testing-library/react'
import AppOverlay from '../../src/components/common/AppOverlay'

describe('AppOverlay', () => {
  it('does not leave a full-window layer in the DOM when closed', () => {
    const { rerender } = render(
      <AppOverlay open={false}>
        <div>blocked</div>
      </AppOverlay>
    )
    expect(document.querySelector('[data-app-overlay]')).toBeNull()

    rerender(
      <AppOverlay open className="z-[100]">
        <div>panel</div>
      </AppOverlay>
    )
    const overlay = document.querySelector('[data-app-overlay]')
    expect(overlay).toBeTruthy()
    expect(overlay).toHaveClass('app-overlay')
    expect(screen.getByText('panel')).toBeVisible()
  })

  it('portals onto document.body so layout overflow cannot trap it', () => {
    render(
      <div id="trap" className="overflow-hidden">
        <AppOverlay open>
          <span>layer</span>
        </AppOverlay>
      </div>
    )
    const overlay = document.querySelector('[data-app-overlay]')
    expect(overlay?.parentElement).toBe(document.body)
    expect(document.getElementById('trap')?.contains(overlay)).toBe(false)
  })
})