parent
ef157feccc
commit
d6d23b3c9b
@ -0,0 +1,239 @@
|
||||
// @vitest-environment jsdom
|
||||
|
||||
import { tick } from 'svelte';
|
||||
import { afterEach, describe, expect, it, vi } from 'vitest';
|
||||
|
||||
import { createActiveDom } from '$adom';
|
||||
import { state } from '$libs/reactive';
|
||||
import type { Morfo } from '$uix/morfo';
|
||||
import { Soma } from '$soma/core/soma.svelte';
|
||||
import { createSomaRuntime, type SomaRuntimeSources } from '$soma/runtime.svelte';
|
||||
import { FloatingContent, FloatingProvider } from '$soma/layers/floating';
|
||||
|
||||
import {
|
||||
LinkPreviewArrowProvider,
|
||||
LinkPreviewContentProvider,
|
||||
LinkPreviewProvider,
|
||||
LinkPreviewTriggerProvider
|
||||
} from './link-preview-provider.svelte';
|
||||
|
||||
function withEffectRoot<T>(fn: () => T): { result: T; cleanup: () => void } {
|
||||
let result!: T;
|
||||
const cleanup = $effect.root(() => {
|
||||
result = fn();
|
||||
});
|
||||
return { result, cleanup };
|
||||
}
|
||||
|
||||
function installSomaHarness() {
|
||||
const dom = createActiveDom();
|
||||
const tasks = new Map<string, () => void>();
|
||||
const handles = new Map<
|
||||
string,
|
||||
{ cancel: ReturnType<typeof vi.fn>; reschedule: ReturnType<typeof vi.fn> }
|
||||
>();
|
||||
const schedule = vi.fn((key: string, _delay: number, task: () => void) => {
|
||||
tasks.set(key, task);
|
||||
const handle = {
|
||||
cancel: vi.fn(() => tasks.delete(key)),
|
||||
reschedule: vi.fn()
|
||||
};
|
||||
handles.set(key, handle);
|
||||
return handle;
|
||||
});
|
||||
const soma = {
|
||||
dom,
|
||||
uix: {
|
||||
timers: { schedule }
|
||||
},
|
||||
runtime: (morfo: Morfo, sources: Omit<SomaRuntimeSources, 'dom' | 'eventEngine'>) =>
|
||||
createSomaRuntime(morfo, {
|
||||
dom,
|
||||
translate: (key) => key,
|
||||
...sources
|
||||
})
|
||||
} as unknown as Soma;
|
||||
|
||||
vi.spyOn(Soma, 'require').mockReturnValue(soma);
|
||||
vi.spyOn(LinkPreviewProvider.ctx, 'set').mockImplementation((value) => value);
|
||||
vi.spyOn(FloatingProvider.ctx, 'set').mockImplementation((value) => value);
|
||||
vi.spyOn(FloatingContent.ctx, 'set').mockImplementation((value) => value);
|
||||
|
||||
return { dom, schedule, tasks, handles };
|
||||
}
|
||||
|
||||
function linkPreviewOpts() {
|
||||
return {
|
||||
id: state('link-preview-root'),
|
||||
ref: state(null),
|
||||
open: state(false),
|
||||
openDelay: state(30),
|
||||
closeDelay: state(40),
|
||||
disabled: state(false),
|
||||
onOpenChangeComplete: state(vi.fn())
|
||||
};
|
||||
}
|
||||
|
||||
function contentOpts(contentEl: HTMLElement) {
|
||||
return {
|
||||
id: state('link-preview-content'),
|
||||
ref: state<HTMLElement | null>(contentEl),
|
||||
side: state<'top'>('top'),
|
||||
sideOffset: state(8),
|
||||
align: state<'center'>('center'),
|
||||
alignOffset: state(0),
|
||||
arrowPadding: state(0),
|
||||
avoidCollisions: state(false),
|
||||
collisionBoundary: state([]),
|
||||
collisionPadding: state(8),
|
||||
sticky: state<'partial'>('partial'),
|
||||
hideWhenDetached: state(false),
|
||||
updatePositionStrategy: state<'optimized'>('optimized'),
|
||||
strategy: state<'fixed'>('fixed'),
|
||||
customAnchor: state(null),
|
||||
onEscapeKeydown: state(vi.fn()),
|
||||
escapeKeydownBehavior: state<'close'>('close'),
|
||||
onInteractOutside: state(vi.fn()),
|
||||
interactOutsideBehavior: state<'close'>('close'),
|
||||
onFocusOutside: state(vi.fn()),
|
||||
dir: state<'ltr'>('ltr'),
|
||||
style: state(null)
|
||||
};
|
||||
}
|
||||
|
||||
function pointerEvent(pointerType: 'mouse' | 'touch' = 'mouse') {
|
||||
return { pointerType };
|
||||
}
|
||||
|
||||
describe('LinkPreviewProvider', () => {
|
||||
afterEach(() => {
|
||||
vi.restoreAllMocks();
|
||||
document.body.innerHTML = '';
|
||||
});
|
||||
|
||||
it('uses delayed open/close timers and ignores touch hover', async () => {
|
||||
const harness = installSomaHarness();
|
||||
const triggerEl = document.createElement('a');
|
||||
document.body.appendChild(triggerEl);
|
||||
const opts = linkPreviewOpts();
|
||||
|
||||
const { result, cleanup } = withEffectRoot(() => {
|
||||
const provider = LinkPreviewProvider.create(opts);
|
||||
vi.spyOn(LinkPreviewProvider, 'require').mockReturnValue(provider);
|
||||
vi.spyOn(FloatingProvider.ctx, 'get').mockReturnValue(provider.floatingProvider);
|
||||
const trigger = LinkPreviewTriggerProvider.create({
|
||||
id: state('link-preview-trigger'),
|
||||
ref: state<HTMLElement | null>(triggerEl)
|
||||
});
|
||||
provider.triggerRef.current = triggerEl;
|
||||
return { provider, trigger };
|
||||
});
|
||||
|
||||
result.trigger.onpointerenter(pointerEvent('touch') as PointerEvent);
|
||||
expect(harness.schedule).not.toHaveBeenCalled();
|
||||
|
||||
result.trigger.onpointerenter(pointerEvent('mouse') as PointerEvent);
|
||||
expect(harness.schedule).toHaveBeenCalledWith(
|
||||
'soma:link-preview:link-preview-root:open',
|
||||
30,
|
||||
expect.any(Function),
|
||||
expect.objectContaining({
|
||||
replace: true,
|
||||
meta: { component: 'link-preview', action: 'open-delay' }
|
||||
})
|
||||
);
|
||||
expect(result.trigger.props['data-state']).toBe('closed');
|
||||
|
||||
harness.tasks.get('soma:link-preview:link-preview-root:open')?.();
|
||||
await tick();
|
||||
expect(opts.open.current).toBe(true);
|
||||
expect(result.trigger.props['data-state']).toBe('open');
|
||||
|
||||
result.trigger.onpointerleave(pointerEvent('mouse') as PointerEvent);
|
||||
expect(harness.schedule).toHaveBeenCalledWith(
|
||||
'soma:link-preview:link-preview-root:close',
|
||||
40,
|
||||
expect.any(Function),
|
||||
expect.objectContaining({
|
||||
replace: true,
|
||||
meta: { component: 'link-preview', action: 'close-delay' }
|
||||
})
|
||||
);
|
||||
harness.tasks.get('soma:link-preview:link-preview-root:close')?.();
|
||||
await tick();
|
||||
expect(opts.open.current).toBe(false);
|
||||
expect(result.trigger.props['data-state']).toBe('closed');
|
||||
|
||||
opts.disabled.current = true;
|
||||
result.provider.handleOpen();
|
||||
expect(harness.schedule).toHaveBeenCalledTimes(2);
|
||||
|
||||
cleanup();
|
||||
harness.dom.dispose();
|
||||
});
|
||||
|
||||
it('keeps content open while hovered and exposes floating content/arrow props', async () => {
|
||||
const harness = installSomaHarness();
|
||||
const contentEl = document.createElement('div');
|
||||
const arrowEl = document.createElement('div');
|
||||
document.body.append(contentEl, arrowEl);
|
||||
const opts = linkPreviewOpts();
|
||||
opts.open.current = true;
|
||||
|
||||
const { result, cleanup } = withEffectRoot(() => {
|
||||
const provider = LinkPreviewProvider.create(opts);
|
||||
vi.spyOn(LinkPreviewProvider, 'require').mockReturnValue(provider);
|
||||
vi.spyOn(FloatingProvider.ctx, 'get').mockReturnValue(provider.floatingProvider);
|
||||
provider.setContentRef(contentEl);
|
||||
const content = LinkPreviewContentProvider.create(contentOpts(contentEl));
|
||||
vi.spyOn(FloatingContent.ctx, 'get').mockReturnValue(content.floating);
|
||||
const arrow = LinkPreviewArrowProvider.create({
|
||||
id: state('link-preview-arrow'),
|
||||
ref: state<HTMLElement | null>(arrowEl)
|
||||
});
|
||||
return { provider, content, arrow };
|
||||
});
|
||||
|
||||
expect(result.content.isPresent).toBe(true);
|
||||
expect(result.content.props).toMatchObject({
|
||||
id: 'link-preview-content',
|
||||
'aria-hidden': true,
|
||||
'data-state': 'open',
|
||||
'data-align': 'center'
|
||||
});
|
||||
expect(['top', 'right', 'bottom', 'left']).toContain(result.content.props['data-side']);
|
||||
expect(result.content.wrapperProps).toMatchObject({
|
||||
id: 'link-preview-content-wrapper',
|
||||
'data-soma-floating-wrapper': ''
|
||||
});
|
||||
expect(result.content.wrapperProps.style).toMatchObject({
|
||||
'pointer-events': 'auto'
|
||||
});
|
||||
expect(result.arrow.props).toMatchObject({
|
||||
id: 'link-preview-arrow',
|
||||
'data-side': result.content.props['data-side']
|
||||
});
|
||||
|
||||
result.content.onpointerleave(pointerEvent('mouse') as PointerEvent);
|
||||
expect(harness.schedule).toHaveBeenCalledWith(
|
||||
'soma:link-preview:link-preview-root:close',
|
||||
40,
|
||||
expect.any(Function),
|
||||
expect.any(Object)
|
||||
);
|
||||
result.content.onpointerenter(pointerEvent('mouse') as PointerEvent);
|
||||
expect(
|
||||
harness.handles.get('soma:link-preview:link-preview-root:close')?.cancel
|
||||
).toHaveBeenCalled();
|
||||
expect(opts.open.current).toBe(true);
|
||||
|
||||
result.content.onpointerleave(pointerEvent('mouse') as PointerEvent);
|
||||
harness.tasks.get('soma:link-preview:link-preview-root:close')?.();
|
||||
await tick();
|
||||
expect(opts.open.current).toBe(false);
|
||||
expect(result.content.props['data-state']).toBe('closed');
|
||||
|
||||
cleanup();
|
||||
harness.dom.dispose();
|
||||
});
|
||||
});
|
||||
Loading…
Reference in new issue