parent
558f76626b
commit
a6a8aec86d
@ -0,0 +1,367 @@
|
||||
// @vitest-environment jsdom
|
||||
|
||||
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 { FloatingAnchor, FloatingProvider } from '../../layers/floating';
|
||||
|
||||
import {
|
||||
MenuCheckboxGroupProvider,
|
||||
MenuCheckboxItemProvider,
|
||||
MenuGroupHeadingProvider,
|
||||
MenuGroupProvider,
|
||||
MenuItemProvider,
|
||||
MenuProvider,
|
||||
MenuRadioGroupProvider,
|
||||
MenuRadioItemProvider,
|
||||
MenuSeparatorProvider,
|
||||
MenuSubProvider,
|
||||
MenuSubTriggerProvider,
|
||||
MenuTriggerProvider
|
||||
} from './dropdown-menu-provider.svelte';
|
||||
|
||||
type ScheduledTimer = {
|
||||
key: string;
|
||||
delay: number;
|
||||
callback: () => void;
|
||||
cancel: ReturnType<typeof vi.fn>;
|
||||
};
|
||||
|
||||
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 scheduled: ScheduledTimer[] = [];
|
||||
const timers = {
|
||||
schedule: vi.fn((key: string, delay: number, callback: () => void) => {
|
||||
const timer = { key, delay, callback, cancel: vi.fn() };
|
||||
scheduled.push(timer);
|
||||
return timer;
|
||||
})
|
||||
};
|
||||
const soma = {
|
||||
dom,
|
||||
uix: { timers },
|
||||
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(FloatingProvider, 'create').mockReturnValue({} as FloatingProvider);
|
||||
vi.spyOn(FloatingAnchor, 'create').mockReturnValue({} as FloatingAnchor);
|
||||
|
||||
vi.spyOn(MenuProvider.ctx, 'set').mockImplementation((value) => value);
|
||||
vi.spyOn(MenuGroupProvider.ctx, 'set').mockImplementation((value) => value);
|
||||
vi.spyOn(MenuCheckboxGroupProvider.ctx, 'set').mockImplementation((value) => value);
|
||||
vi.spyOn(MenuRadioGroupProvider.ctx, 'set').mockImplementation((value) => value);
|
||||
vi.spyOn(MenuSubProvider.ctx, 'set').mockImplementation((value) => value);
|
||||
|
||||
vi.spyOn(MenuCheckboxGroupProvider, 'get').mockReturnValue(undefined);
|
||||
vi.spyOn(MenuGroupProvider, 'get').mockReturnValue(undefined);
|
||||
|
||||
return { dom, scheduled, timers };
|
||||
}
|
||||
|
||||
function createMenuOpts() {
|
||||
return {
|
||||
id: state('dropdown-menu-root'),
|
||||
ref: state<HTMLElement | null>(null),
|
||||
open: state(false),
|
||||
modal: state(true),
|
||||
dir: state<'ltr' | 'rtl'>('ltr'),
|
||||
accessibleWhenDisabled: state(true),
|
||||
onOpenChangeComplete: state<(open: boolean) => void>(() => undefined)
|
||||
};
|
||||
}
|
||||
|
||||
function partOpts(id: string, el: HTMLElement = document.createElement('div')) {
|
||||
return {
|
||||
id: state(id),
|
||||
ref: state<HTMLElement | null>(el)
|
||||
};
|
||||
}
|
||||
|
||||
function keyEvent(key: string) {
|
||||
return {
|
||||
key,
|
||||
preventDefault: vi.fn()
|
||||
};
|
||||
}
|
||||
|
||||
function clickEvent() {
|
||||
return {
|
||||
preventDefault: vi.fn(),
|
||||
stopPropagation: vi.fn()
|
||||
};
|
||||
}
|
||||
|
||||
function menuItem(value: string, disabled = false): HTMLElement {
|
||||
const item = document.createElement('div');
|
||||
item.setAttribute('data-dropdown-menu-item', '');
|
||||
item.setAttribute('data-text-value', value);
|
||||
item.textContent = value;
|
||||
if (disabled) item.setAttribute('data-disabled', '');
|
||||
return item;
|
||||
}
|
||||
|
||||
describe('MenuProvider', () => {
|
||||
afterEach(() => {
|
||||
vi.restoreAllMocks();
|
||||
document.body.innerHTML = '';
|
||||
});
|
||||
|
||||
it('toggles root open state from trigger click and keyboard activation', () => {
|
||||
const { dom } = installSomaHarness();
|
||||
const opts = createMenuOpts();
|
||||
|
||||
const { result, cleanup } = withEffectRoot(() => {
|
||||
const provider = MenuProvider.create(opts);
|
||||
vi.spyOn(MenuProvider.ctx, 'get').mockReturnValue(provider);
|
||||
provider.contentId.current = 'dropdown-menu-content';
|
||||
const trigger = MenuTriggerProvider.create({
|
||||
id: state('dropdown-menu-trigger'),
|
||||
ref: state<HTMLElement | null>(document.createElement('button'))
|
||||
});
|
||||
return { provider, trigger };
|
||||
});
|
||||
|
||||
expect(result.trigger.props).toMatchObject({
|
||||
type: 'button',
|
||||
'aria-haspopup': 'menu',
|
||||
'aria-expanded': false,
|
||||
'aria-controls': 'dropdown-menu-content',
|
||||
'data-state': 'closed'
|
||||
});
|
||||
|
||||
result.trigger.onclick({} as never);
|
||||
expect(opts.open.current).toBe(true);
|
||||
expect(result.trigger.props['data-state']).toBe('open');
|
||||
|
||||
result.trigger.onclick({} as never);
|
||||
expect(opts.open.current).toBe(false);
|
||||
|
||||
const event = keyEvent('Enter');
|
||||
result.trigger.onkeydown(event as never);
|
||||
expect(event.preventDefault).toHaveBeenCalledOnce();
|
||||
expect(opts.open.current).toBe(true);
|
||||
|
||||
cleanup();
|
||||
dom.dispose();
|
||||
});
|
||||
|
||||
it('scopes item queries to the current content and honors disabled navigation policy', () => {
|
||||
const { dom } = installSomaHarness();
|
||||
const opts = createMenuOpts();
|
||||
const container = document.createElement('div');
|
||||
container.setAttribute('data-dropdown-menu-content', '');
|
||||
const first = menuItem('first');
|
||||
const disabled = menuItem('disabled', true);
|
||||
const nestedContent = document.createElement('div');
|
||||
nestedContent.setAttribute('data-dropdown-menu-sub-content', '');
|
||||
const nested = menuItem('nested');
|
||||
nestedContent.appendChild(nested);
|
||||
container.append(first, disabled, nestedContent);
|
||||
|
||||
const { result: provider, cleanup } = withEffectRoot(() => MenuProvider.create(opts));
|
||||
|
||||
expect(provider.getItems(container)).toEqual([first, disabled]);
|
||||
|
||||
opts.accessibleWhenDisabled.current = false;
|
||||
expect(provider.getItems(container)).toEqual([first]);
|
||||
|
||||
cleanup();
|
||||
dom.dispose();
|
||||
});
|
||||
|
||||
it('activates items by click and keyboard, then closes when configured', () => {
|
||||
const { dom } = installSomaHarness();
|
||||
const opts = createMenuOpts();
|
||||
opts.open.current = true;
|
||||
const onSelect = vi.fn();
|
||||
|
||||
const { result, cleanup } = withEffectRoot(() => {
|
||||
const provider = MenuProvider.create(opts);
|
||||
vi.spyOn(MenuProvider.ctx, 'get').mockReturnValue(provider);
|
||||
const item = MenuItemProvider.create({
|
||||
...partOpts('dropdown-menu-item'),
|
||||
disabled: state(false),
|
||||
textValue: state('Save'),
|
||||
closeOnSelect: state(true),
|
||||
onSelect: state(onSelect)
|
||||
});
|
||||
return { item };
|
||||
});
|
||||
|
||||
expect(result.item.props).toMatchObject({
|
||||
role: 'menuitem',
|
||||
tabindex: -1,
|
||||
'data-text-value': 'Save'
|
||||
});
|
||||
|
||||
result.item.onkeydown(keyEvent(' ') as never);
|
||||
expect(onSelect).toHaveBeenCalledOnce();
|
||||
expect(opts.open.current).toBe(false);
|
||||
|
||||
opts.open.current = true;
|
||||
result.item.onclick({} as never);
|
||||
expect(onSelect).toHaveBeenCalledTimes(2);
|
||||
expect(opts.open.current).toBe(false);
|
||||
|
||||
cleanup();
|
||||
dom.dispose();
|
||||
});
|
||||
|
||||
it('updates checkbox and radio groups without duplicating selection logic', () => {
|
||||
const { dom } = installSomaHarness();
|
||||
const opts = createMenuOpts();
|
||||
const checkboxValues = state<string[]>(['bold']);
|
||||
const radioValue = state('left');
|
||||
|
||||
const { result, cleanup } = withEffectRoot(() => {
|
||||
const provider = MenuProvider.create(opts);
|
||||
vi.spyOn(MenuProvider.ctx, 'get').mockReturnValue(provider);
|
||||
|
||||
const checkboxGroup = MenuCheckboxGroupProvider.create({ value: checkboxValues });
|
||||
vi.spyOn(MenuCheckboxGroupProvider, 'get').mockReturnValue(checkboxGroup);
|
||||
const checkboxItem = MenuCheckboxItemProvider.create({
|
||||
...partOpts('dropdown-menu-checkbox'),
|
||||
checked: state(false),
|
||||
value: state<string | undefined>('bold'),
|
||||
disabled: state(false),
|
||||
textValue: state('Bold'),
|
||||
closeOnSelect: state(false),
|
||||
onSelect: state(() => undefined)
|
||||
});
|
||||
|
||||
const radioGroup = MenuRadioGroupProvider.create({
|
||||
...partOpts('dropdown-menu-radio-group'),
|
||||
value: radioValue
|
||||
});
|
||||
vi.spyOn(MenuRadioGroupProvider, 'require').mockReturnValue(radioGroup);
|
||||
const radioItem = MenuRadioItemProvider.create({
|
||||
...partOpts('dropdown-menu-radio'),
|
||||
value: state('right'),
|
||||
disabled: state(false),
|
||||
textValue: state('Right'),
|
||||
closeOnSelect: state(false),
|
||||
onSelect: state(() => undefined)
|
||||
});
|
||||
|
||||
return { checkboxItem, radioItem };
|
||||
});
|
||||
|
||||
expect(result.checkboxItem.effectiveChecked).toBe(true);
|
||||
expect(result.checkboxItem.props).toMatchObject({
|
||||
role: 'menuitemcheckbox',
|
||||
'aria-checked': true,
|
||||
'data-state': 'checked'
|
||||
});
|
||||
result.checkboxItem.onclick({} as never);
|
||||
expect(checkboxValues.current).toEqual([]);
|
||||
|
||||
expect(result.radioItem.isChecked).toBe(false);
|
||||
result.radioItem.onkeydown(keyEvent('Enter') as never);
|
||||
expect(radioValue.current).toBe('right');
|
||||
expect(result.radioItem.props['data-state']).toBe('checked');
|
||||
|
||||
cleanup();
|
||||
dom.dispose();
|
||||
});
|
||||
|
||||
it('opens submenus through delayed pointer hover and immediate click/keyboard paths', () => {
|
||||
const { dom, scheduled, timers } = installSomaHarness();
|
||||
const opts = createMenuOpts();
|
||||
const subOpen = state(false);
|
||||
|
||||
const { result, cleanup } = withEffectRoot(() => {
|
||||
const provider = MenuProvider.create(opts);
|
||||
vi.spyOn(MenuProvider.ctx, 'get').mockReturnValue(provider);
|
||||
const sub = MenuSubProvider.create({ open: subOpen });
|
||||
vi.spyOn(MenuSubProvider, 'require').mockReturnValue(sub);
|
||||
sub.contentId.current = 'dropdown-menu-sub-content';
|
||||
const trigger = MenuSubTriggerProvider.create({
|
||||
...partOpts('dropdown-menu-sub-trigger'),
|
||||
disabled: state(false),
|
||||
textValue: state('More')
|
||||
});
|
||||
return { trigger };
|
||||
});
|
||||
|
||||
result.trigger.onpointerenter();
|
||||
|
||||
expect(timers.schedule).toHaveBeenCalledWith(
|
||||
'soma:dropdown-menu:dropdown-menu-sub-trigger:submenu-open',
|
||||
100,
|
||||
expect.any(Function),
|
||||
{ replace: true, meta: { component: 'dropdown-menu', action: 'submenu-open' } }
|
||||
);
|
||||
expect(subOpen.current).toBe(false);
|
||||
|
||||
scheduled.at(-1)?.callback();
|
||||
expect(subOpen.current).toBe(true);
|
||||
expect(result.trigger.props).toMatchObject({
|
||||
role: 'menuitem',
|
||||
'aria-haspopup': 'menu',
|
||||
'aria-expanded': true,
|
||||
'aria-controls': 'dropdown-menu-sub-content',
|
||||
'data-state': 'open',
|
||||
'data-text-value': 'More'
|
||||
});
|
||||
|
||||
subOpen.current = false;
|
||||
const event = clickEvent();
|
||||
result.trigger.onclick(event as never);
|
||||
expect(event.preventDefault).toHaveBeenCalledOnce();
|
||||
expect(event.stopPropagation).toHaveBeenCalledOnce();
|
||||
expect(subOpen.current).toBe(true);
|
||||
|
||||
subOpen.current = false;
|
||||
result.trigger.onkeydown(keyEvent('ArrowRight') as never);
|
||||
expect(subOpen.current).toBe(true);
|
||||
|
||||
cleanup();
|
||||
dom.dispose();
|
||||
});
|
||||
|
||||
it('wires group heading and separator accessibility props', () => {
|
||||
const { dom } = installSomaHarness();
|
||||
const opts = createMenuOpts();
|
||||
|
||||
const { result, cleanup } = withEffectRoot(() => {
|
||||
const provider = MenuProvider.create(opts);
|
||||
vi.spyOn(MenuProvider.ctx, 'get').mockReturnValue(provider);
|
||||
const group = MenuGroupProvider.create(partOpts('dropdown-menu-group'));
|
||||
vi.spyOn(MenuGroupProvider, 'get').mockReturnValue(group);
|
||||
const heading = MenuGroupHeadingProvider.create(partOpts('dropdown-menu-heading'));
|
||||
const separator = MenuSeparatorProvider.create(partOpts('dropdown-menu-separator'));
|
||||
return { group, heading, separator };
|
||||
});
|
||||
|
||||
expect(result.group.props).toMatchObject({
|
||||
role: 'group',
|
||||
'aria-labelledby': 'dropdown-menu-heading'
|
||||
});
|
||||
expect(result.heading.props.id).toBe('dropdown-menu-heading');
|
||||
expect(result.separator.props).toMatchObject({
|
||||
role: 'separator',
|
||||
'aria-orientation': 'horizontal'
|
||||
});
|
||||
|
||||
cleanup();
|
||||
dom.dispose();
|
||||
});
|
||||
});
|
||||
Loading…
Reference in new issue