import { describe, it, expect, afterEach } from 'vitest'
import { nextTick } from 'vue'
import { open } from '../src/components/PopupBox/popupbox-service'

// Guards the imperative PopupBox service after INFRA-F43 moved the <Teleport> out of
// BasePopupBox up to the canonical wrapper. The service mounts BasePopupBox (no teleport)
// directly into a body-level container, so the overlay must still render in place and the
// content slot must still project. (The canonical/CE path is covered by the React
// render-verification slot-projection spec; this covers the Vue-package imperative path.)

describe('PopupBox service (imperative, base has no Teleport)', () => {
  afterEach(() => {
    document.querySelectorAll('.popup-overlay').forEach((el) => el.closest('div')?.remove())
    document.body.innerHTML = ''
  })

  it('renders the overlay + projects string content into the body', async () => {
    open({ title: 'Publish', content: 'HELLO-SERVICE' })
    await nextTick()

    const overlay = document.querySelector('.popup-overlay')
    const body = document.querySelector('.popup-box__body')
    expect(overlay, 'overlay should render at body level (no teleport in base)').not.toBeNull()
    expect(body?.textContent ?? '').toContain('HELLO-SERVICE')
    expect(document.querySelector('.popup-box__title')?.textContent).toContain('Publish')
  })

  it('closes and removes its container', async () => {
    const handle = open({ content: 'X' })
    await nextTick()
    expect(document.querySelector('.popup-box__body')?.textContent).toContain('X')
    handle.close()
    await nextTick()
    expect(document.querySelector('.popup-overlay')).toBeNull()
  })
})