import { describe, it, expect } from 'vitest'
import { h, nextTick } from 'vue'
import { mount } from '@vue/test-utils'
import { Dialog, DialogContent, DialogTitle } from '../src/lib'

describe('Dialog', () => {
  it('does not render content when closed', async () => {
    mount(Dialog, {
      props: { open: false },
      slots: {
        default: () => h(DialogContent, undefined, {
          default: () => h(DialogTitle, undefined, { default: () => 'Oracle of Delphi' }),
        }),
      },
      attachTo: document.body,
    })
    await nextTick()
    expect(document.body.textContent).not.toContain('Oracle of Delphi')
  })

  it('renders content in a teleported portal when open', async () => {
    mount(Dialog, {
      props: { open: true },
      slots: {
        default: () => h(DialogContent, undefined, {
          default: () => h(DialogTitle, undefined, { default: () => 'Oracle of Delphi' }),
        }),
      },
      attachTo: document.body,
    })
    await nextTick()
    await nextTick()
    expect(document.body.textContent).toContain('Oracle of Delphi')
  })
})