import { describe, it, expect, vi, afterEach } from 'vitest' import { ref } from 'vue' import { useDismissableLayer } from '../src/lib/use-dismissable-layer' function firePointerDown(target: EventTarget) { const event = new PointerEvent('pointerdown', { bubbles: true, cancelable: true }) target.dispatchEvent(event) } describe('useDismissableLayer', () => { afterEach(() => { document.body.replaceChildren() }) it('calls onDismiss on Escape keydown while active', () => { const containerRef = ref(document.createElement('div')) const active = ref(true) const onDismiss = vi.fn() useDismissableLayer(containerRef, active, { onDismiss }) document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true })) expect(onDismiss).toHaveBeenCalledOnce() }) it('does not call onDismiss on Escape when inactive', () => { const containerRef = ref(document.createElement('div')) const active = ref(false) const onDismiss = vi.fn() useDismissableLayer(containerRef, active, { onDismiss }) document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true })) expect(onDismiss).not.toHaveBeenCalled() }) it('calls onDismiss on pointerdown outside the container', () => { const container = document.createElement('div') const outside = document.createElement('div') document.body.append(container, outside) const containerRef = ref(container) const active = ref(true) const onDismiss = vi.fn() useDismissableLayer(containerRef, active, { onDismiss }) firePointerDown(outside) expect(onDismiss).toHaveBeenCalledOnce() }) it('does not call onDismiss on pointerdown inside the container', () => { const container = document.createElement('div') const inside = document.createElement('span') container.append(inside) document.body.append(container) const containerRef = ref(container) const active = ref(true) const onDismiss = vi.fn() useDismissableLayer(containerRef, active, { onDismiss }) firePointerDown(inside) expect(onDismiss).not.toHaveBeenCalled() }) it('skips onDismiss when onPointerDownOutside calls preventDefault', () => { const container = document.createElement('div') const outside = document.createElement('div') document.body.append(container, outside) const containerRef = ref(container) const active = ref(true) const onDismiss = vi.fn() useDismissableLayer(containerRef, active, { onDismiss, onPointerDownOutside: (event) => event.preventDefault(), }) firePointerDown(outside) expect(onDismiss).not.toHaveBeenCalled() }) })