parent
c02b13cd47
commit
d678d4ee60
@ -0,0 +1,310 @@
|
||||
// @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 {
|
||||
NavigationMenuContentProvider,
|
||||
NavigationMenuItemProvider,
|
||||
NavigationMenuLinkProvider,
|
||||
NavigationMenuListProvider,
|
||||
NavigationMenuProvider,
|
||||
NavigationMenuTriggerProvider
|
||||
} from './navigation-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,
|
||||
langs: {
|
||||
ts: (key: string) => key
|
||||
},
|
||||
prefs: {
|
||||
getDir: () => 'ltr'
|
||||
},
|
||||
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(NavigationMenuProvider.ctx, 'set').mockImplementation((value) => value);
|
||||
vi.spyOn(NavigationMenuItemProvider.ctx, 'set').mockImplementation((value) => value);
|
||||
|
||||
return { dom, scheduled, timers };
|
||||
}
|
||||
|
||||
function createNavigationMenuOpts(root: HTMLElement = document.createElement('nav')) {
|
||||
return {
|
||||
id: state('navigation-menu-root'),
|
||||
ref: state<HTMLElement | null>(root),
|
||||
value: state<string | null>(null),
|
||||
orientation: state<'horizontal' | 'vertical'>('horizontal'),
|
||||
dir: state<'ltr' | 'rtl' | undefined>(undefined),
|
||||
openDelay: state(20),
|
||||
skipDelayDuration: state(5),
|
||||
closeDelay: state(30),
|
||||
hoverEnabled: state(true),
|
||||
loop: state(true),
|
||||
ariaLabel: state<string | undefined>(undefined),
|
||||
ariaLabelledby: state<string | undefined>(undefined),
|
||||
onValueChange: state<((value: string | null) => void) | undefined>(undefined)
|
||||
};
|
||||
}
|
||||
|
||||
function partOpts(id: string, el: HTMLElement = document.createElement('div')) {
|
||||
return {
|
||||
id: state(id),
|
||||
ref: state<HTMLElement | null>(el)
|
||||
};
|
||||
}
|
||||
|
||||
function applyAttrs(el: HTMLElement, props: Record<string, unknown>) {
|
||||
for (const [key, value] of Object.entries(props)) {
|
||||
if (!key.startsWith('data-') && key !== 'id') continue;
|
||||
if (value === undefined || value === false || typeof value === 'function') continue;
|
||||
el.setAttribute(key, value === true ? '' : String(value));
|
||||
}
|
||||
}
|
||||
|
||||
function keyEvent(key: string, currentTarget: HTMLElement) {
|
||||
return {
|
||||
key,
|
||||
currentTarget,
|
||||
preventDefault: vi.fn(),
|
||||
defaultPrevented: false
|
||||
};
|
||||
}
|
||||
|
||||
describe('NavigationMenuProvider', () => {
|
||||
afterEach(() => {
|
||||
vi.restoreAllMocks();
|
||||
document.body.innerHTML = '';
|
||||
});
|
||||
|
||||
it('schedules open, close and skip-delay transitions through UIX timers', () => {
|
||||
const { dom, scheduled, timers } = installSomaHarness();
|
||||
const opts = createNavigationMenuOpts();
|
||||
const onValueChange = vi.fn();
|
||||
opts.onValueChange.current = onValueChange;
|
||||
|
||||
const { result: provider, cleanup } = withEffectRoot(() => NavigationMenuProvider.create(opts));
|
||||
|
||||
provider.scheduleOpen('products');
|
||||
|
||||
expect(timers.schedule).toHaveBeenCalledWith(
|
||||
'soma:navigation-menu:navigation-menu-root:open',
|
||||
20,
|
||||
expect.any(Function),
|
||||
{ replace: true, meta: { component: 'navigation-menu', action: 'open-delay' } }
|
||||
);
|
||||
expect(opts.value.current).toBeNull();
|
||||
|
||||
scheduled[0]?.callback();
|
||||
expect(opts.value.current).toBe('products');
|
||||
expect(onValueChange).toHaveBeenCalledWith('products');
|
||||
|
||||
provider.scheduleClose();
|
||||
expect(scheduled.at(-1)?.delay).toBe(30);
|
||||
scheduled.at(-1)?.callback();
|
||||
|
||||
expect(opts.value.current).toBeNull();
|
||||
expect(onValueChange).toHaveBeenCalledWith(null);
|
||||
expect(timers.schedule).toHaveBeenCalledWith(
|
||||
'soma:navigation-menu:navigation-menu-root:skip-delay',
|
||||
20,
|
||||
expect.any(Function),
|
||||
{ replace: true, meta: { component: 'navigation-menu', action: 'skip-delay' } }
|
||||
);
|
||||
|
||||
cleanup();
|
||||
dom.dispose();
|
||||
});
|
||||
|
||||
it('links item trigger and content state, ids and keyboard focus', () => {
|
||||
const { dom } = installSomaHarness();
|
||||
const focus = vi.spyOn(dom, 'focus');
|
||||
const root = document.createElement('nav');
|
||||
const contentNode = document.createElement('div');
|
||||
const firstLink = document.createElement('a');
|
||||
contentNode.id = 'navigation-menu-products-content';
|
||||
contentNode.appendChild(firstLink);
|
||||
root.appendChild(contentNode);
|
||||
const opts = createNavigationMenuOpts(root);
|
||||
|
||||
const { result, cleanup } = withEffectRoot(() => {
|
||||
const provider = NavigationMenuProvider.create(opts);
|
||||
vi.spyOn(NavigationMenuProvider.ctx, 'get').mockReturnValue(provider);
|
||||
const item = NavigationMenuItemProvider.create({
|
||||
...partOpts('navigation-menu-products-item'),
|
||||
value: state('products')
|
||||
});
|
||||
vi.spyOn(NavigationMenuItemProvider.ctx, 'get').mockReturnValue(item);
|
||||
const trigger = NavigationMenuTriggerProvider.create({
|
||||
...partOpts('navigation-menu-products-trigger', document.createElement('button')),
|
||||
disabled: state(false),
|
||||
ariaLabel: state<string | undefined>('Products')
|
||||
});
|
||||
const content = NavigationMenuContentProvider.create({
|
||||
...partOpts('navigation-menu-products-content', contentNode),
|
||||
onEscapeKeydown: state((_: KeyboardEvent) => undefined)
|
||||
});
|
||||
return { provider, item, trigger, content };
|
||||
});
|
||||
|
||||
result.trigger.onclick({} as never);
|
||||
|
||||
expect(opts.value.current).toBe('products');
|
||||
expect(result.item.props).toMatchObject({
|
||||
'data-state': 'open',
|
||||
'data-value': 'products'
|
||||
});
|
||||
expect(result.trigger.props).toMatchObject({
|
||||
'aria-expanded': true,
|
||||
'aria-controls': 'navigation-menu-products-content',
|
||||
'data-state': 'open'
|
||||
});
|
||||
expect(result.content.props).toMatchObject({
|
||||
'aria-labelledby': 'navigation-menu-products-trigger',
|
||||
'data-state': 'open'
|
||||
});
|
||||
|
||||
result.trigger.onkeydown(keyEvent('ArrowDown', document.createElement('button')) as never);
|
||||
expect(focus).toHaveBeenCalledWith(firstLink);
|
||||
|
||||
cleanup();
|
||||
dom.dispose();
|
||||
});
|
||||
|
||||
it('moves focus between top-level triggers and closes stale content', () => {
|
||||
const { dom } = installSomaHarness();
|
||||
const focus = vi.spyOn(dom, 'focus');
|
||||
const root = document.createElement('nav');
|
||||
document.body.appendChild(root);
|
||||
const opts = createNavigationMenuOpts(root);
|
||||
opts.value.current = 'products';
|
||||
|
||||
const { result, cleanup } = withEffectRoot(() => {
|
||||
const provider = NavigationMenuProvider.create(opts);
|
||||
vi.spyOn(NavigationMenuProvider.ctx, 'get').mockReturnValue(provider);
|
||||
applyAttrs(root, provider.props);
|
||||
|
||||
const productsItemEl = document.createElement('li');
|
||||
const productsTriggerEl = document.createElement('button');
|
||||
const docsItemEl = document.createElement('li');
|
||||
const docsTriggerEl = document.createElement('button');
|
||||
root.append(productsItemEl, docsItemEl);
|
||||
productsItemEl.appendChild(productsTriggerEl);
|
||||
docsItemEl.appendChild(docsTriggerEl);
|
||||
|
||||
const productsItem = NavigationMenuItemProvider.create({
|
||||
...partOpts('navigation-menu-products-item', productsItemEl),
|
||||
value: state('products')
|
||||
});
|
||||
vi.spyOn(NavigationMenuItemProvider.ctx, 'get').mockReturnValue(productsItem);
|
||||
const productsTrigger = NavigationMenuTriggerProvider.create({
|
||||
...partOpts('navigation-menu-products-trigger', productsTriggerEl),
|
||||
disabled: state(false),
|
||||
ariaLabel: state<string | undefined>(undefined)
|
||||
});
|
||||
applyAttrs(productsItemEl, productsItem.props);
|
||||
applyAttrs(productsTriggerEl, productsTrigger.props);
|
||||
|
||||
const docsItem = NavigationMenuItemProvider.create({
|
||||
...partOpts('navigation-menu-docs-item', docsItemEl),
|
||||
value: state('docs')
|
||||
});
|
||||
vi.spyOn(NavigationMenuItemProvider.ctx, 'get').mockReturnValue(docsItem);
|
||||
const docsTrigger = NavigationMenuTriggerProvider.create({
|
||||
...partOpts('navigation-menu-docs-trigger', docsTriggerEl),
|
||||
disabled: state(false),
|
||||
ariaLabel: state<string | undefined>(undefined)
|
||||
});
|
||||
applyAttrs(docsItemEl, docsItem.props);
|
||||
applyAttrs(docsTriggerEl, docsTrigger.props);
|
||||
|
||||
return { provider, productsTriggerEl, docsTriggerEl };
|
||||
});
|
||||
|
||||
result.provider.handleListKeydown(keyEvent('ArrowRight', result.productsTriggerEl) as never);
|
||||
|
||||
expect(opts.value.current).toBeNull();
|
||||
expect(focus).toHaveBeenCalledWith(result.docsTriggerEl);
|
||||
|
||||
cleanup();
|
||||
dom.dispose();
|
||||
});
|
||||
|
||||
it('exposes list and link accessibility props', () => {
|
||||
const { dom } = installSomaHarness();
|
||||
const opts = createNavigationMenuOpts();
|
||||
opts.ariaLabel.current = 'Primary';
|
||||
|
||||
const { result, cleanup } = withEffectRoot(() => {
|
||||
const provider = NavigationMenuProvider.create(opts);
|
||||
vi.spyOn(NavigationMenuProvider.ctx, 'get').mockReturnValue(provider);
|
||||
const list = NavigationMenuListProvider.create(partOpts('navigation-menu-list'));
|
||||
const link = NavigationMenuLinkProvider.create({
|
||||
...partOpts('navigation-menu-link'),
|
||||
active: state(true)
|
||||
});
|
||||
return { provider, list, link };
|
||||
});
|
||||
|
||||
expect(result.provider.props).toMatchObject({
|
||||
dir: 'ltr',
|
||||
'data-orientation': 'horizontal'
|
||||
});
|
||||
expect(result.list.props).toMatchObject({
|
||||
'aria-label': 'Primary',
|
||||
'aria-orientation': 'horizontal',
|
||||
'data-orientation': 'horizontal'
|
||||
});
|
||||
expect(result.link.props).toMatchObject({
|
||||
'aria-current': 'page',
|
||||
'data-active': ''
|
||||
});
|
||||
|
||||
cleanup();
|
||||
dom.dispose();
|
||||
});
|
||||
});
|
||||
Loading…
Reference in new issue