import { describe, it, expect } from 'vitest'
import { createInteraction } from '@remix-run/events'

import { render } from '../render'

describe('events', () => {
  it('waits until all DOM is accessible before attaching events', () => {
    let element = document.createElement('div')
    let capturedPopover: HTMLElement | null = null

    let customInteraction = createInteraction<HTMLElement, any>(
      'customInteraction',
      ({ target }) => {
        capturedPopover = element.querySelector(`#${target.getAttribute('popovertarget')}`)
      },
    )

    let root = render(
      <div>
        <button
          popovertarget="test"
          // this interaction needs to access dom to create the custom event
          on={customInteraction(() => {})}
        >
          Open Popover
        </button>
        <div popover id="test">
          <div>Hello</div>
        </div>
      </div>,
      element,
    )

    expect(capturedPopover).toBeInstanceOf(HTMLElement)

    root.unmount()
  })
})