parent
c108d02512
commit
d2a0998dc8
@ -0,0 +1,293 @@
|
||||
// @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 {
|
||||
TagGroupItemProvider,
|
||||
TagGroupLabelProvider,
|
||||
TagGroupLinkProvider,
|
||||
TagGroupProvider,
|
||||
TagGroupRemoveButtonProvider
|
||||
} from './tag-group-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 soma = {
|
||||
dom,
|
||||
prefs: {
|
||||
getDir: vi.fn(() => 'ltr')
|
||||
},
|
||||
langs: {
|
||||
ts: vi.fn(() => 'Tags'),
|
||||
t: vi.fn((_key: string, vars?: Record<string, string>) => `Remove ${vars?.tag}`)
|
||||
},
|
||||
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(TagGroupProvider.ctx, 'set').mockImplementation((value) => value);
|
||||
vi.spyOn(TagGroupItemProvider.ctx, 'set').mockImplementation((value) => value);
|
||||
|
||||
return { dom };
|
||||
}
|
||||
|
||||
function tagGroupOpts(root = document.createElement('div')) {
|
||||
return {
|
||||
id: state('tag-group-root'),
|
||||
ref: state<HTMLElement | null>(root),
|
||||
value: state<string[]>(['beta']),
|
||||
items: state<string[] | undefined>(['alpha', 'beta', 'gamma']),
|
||||
selectionMode: state<'none' | 'single' | 'multiple'>('multiple'),
|
||||
disabled: state(false),
|
||||
ariaLabel: state<string | undefined>(undefined),
|
||||
ariaLabelledby: state<string | undefined>(undefined),
|
||||
onValueChange: state<((value: string[]) => void) | undefined>(undefined),
|
||||
onRemove: state<((value: string) => void) | undefined>(undefined)
|
||||
};
|
||||
}
|
||||
|
||||
function itemOpts(value: string, el: HTMLElement) {
|
||||
return {
|
||||
id: state(`tag-${value}`),
|
||||
ref: state<HTMLElement | null>(el),
|
||||
value: state(value),
|
||||
disabled: state(false),
|
||||
textValue: state<string | undefined>(value.toUpperCase())
|
||||
};
|
||||
}
|
||||
|
||||
function markRenderedItem(el: HTMLElement, value: string) {
|
||||
el.setAttribute('data-tag-group-item', '');
|
||||
el.setAttribute('data-value', value);
|
||||
}
|
||||
|
||||
function keyEvent(key: string, currentTarget: HTMLElement) {
|
||||
return {
|
||||
key,
|
||||
currentTarget,
|
||||
preventDefault: vi.fn()
|
||||
};
|
||||
}
|
||||
|
||||
describe('TagGroupProvider', () => {
|
||||
afterEach(() => {
|
||||
vi.restoreAllMocks();
|
||||
document.body.innerHTML = '';
|
||||
});
|
||||
|
||||
it('projects root labels and resolves roving item props from selection', async () => {
|
||||
const { dom } = installSomaHarness();
|
||||
const root = document.createElement('div');
|
||||
root.setAttribute('data-tag-group', '');
|
||||
const labelEl = document.createElement('div');
|
||||
const alphaEl = document.createElement('div');
|
||||
const betaEl = document.createElement('div');
|
||||
markRenderedItem(alphaEl, 'alpha');
|
||||
markRenderedItem(betaEl, 'beta');
|
||||
root.append(labelEl, alphaEl, betaEl);
|
||||
document.body.appendChild(root);
|
||||
const opts = tagGroupOpts(root);
|
||||
const onValueChange = vi.fn();
|
||||
opts.onValueChange.current = onValueChange;
|
||||
|
||||
const { result, cleanup } = withEffectRoot(() => {
|
||||
const provider = TagGroupProvider.create(opts);
|
||||
vi.spyOn(TagGroupProvider, 'require').mockReturnValue(provider);
|
||||
const label = TagGroupLabelProvider.create({
|
||||
id: state('tag-group-label'),
|
||||
ref: state<HTMLElement | null>(labelEl)
|
||||
});
|
||||
const alpha = TagGroupItemProvider.create(itemOpts('alpha', alphaEl));
|
||||
const beta = TagGroupItemProvider.create(itemOpts('beta', betaEl));
|
||||
return { provider, label, alpha, beta };
|
||||
});
|
||||
|
||||
expect(result.provider.resolvedAriaLabel.current).toBeUndefined();
|
||||
expect(result.provider.resolvedAriaLabelledby).toBe('tag-group-label');
|
||||
expect(result.provider.isEmpty).toBe(false);
|
||||
expect(result.provider.rovingTargetEl).toBe(betaEl);
|
||||
expect(result.provider.snippetProps).toMatchObject({
|
||||
value: ['beta'],
|
||||
isEmpty: false
|
||||
});
|
||||
expect(result.alpha.props).toMatchObject({
|
||||
id: 'tag-alpha',
|
||||
role: 'row',
|
||||
tabindex: -1,
|
||||
'aria-selected': false,
|
||||
'data-state': 'unselected',
|
||||
'data-value': 'alpha',
|
||||
'data-text-value': 'ALPHA'
|
||||
});
|
||||
expect(result.beta.props).toMatchObject({
|
||||
id: 'tag-beta',
|
||||
tabindex: 0,
|
||||
'aria-selected': true,
|
||||
'data-state': 'selected',
|
||||
'data-highlighted': ''
|
||||
});
|
||||
|
||||
result.provider.clear();
|
||||
expect(opts.value.current).toEqual([]);
|
||||
expect(onValueChange).toHaveBeenLastCalledWith([]);
|
||||
|
||||
await tick();
|
||||
expect(root.getAttribute('role')).toBe('grid');
|
||||
expect(root.getAttribute('aria-labelledby')).toBe('tag-group-label');
|
||||
expect(root.getAttribute('aria-multiselectable')).toBe('true');
|
||||
expect(root.getAttribute('data-selection-mode')).toBe('multiple');
|
||||
|
||||
cleanup();
|
||||
dom.dispose();
|
||||
});
|
||||
|
||||
it('selects, navigates and removes items from keyboard and click handlers', async () => {
|
||||
const { dom } = installSomaHarness();
|
||||
const focusSpy = vi.spyOn(dom, 'focus');
|
||||
const root = document.createElement('div');
|
||||
root.setAttribute('data-tag-group', '');
|
||||
const alphaEl = document.createElement('div');
|
||||
const betaEl = document.createElement('div');
|
||||
const gammaEl = document.createElement('div');
|
||||
markRenderedItem(alphaEl, 'alpha');
|
||||
markRenderedItem(betaEl, 'beta');
|
||||
markRenderedItem(gammaEl, 'gamma');
|
||||
root.append(alphaEl, betaEl, gammaEl);
|
||||
document.body.appendChild(root);
|
||||
const opts = tagGroupOpts(root);
|
||||
opts.value.current = [];
|
||||
const onValueChange = vi.fn();
|
||||
const onRemove = vi.fn();
|
||||
opts.onValueChange.current = onValueChange;
|
||||
opts.onRemove.current = onRemove;
|
||||
|
||||
const { result, cleanup } = withEffectRoot(() => {
|
||||
const provider = TagGroupProvider.create(opts);
|
||||
vi.spyOn(TagGroupProvider, 'require').mockReturnValue(provider);
|
||||
const alpha = TagGroupItemProvider.create(itemOpts('alpha', alphaEl));
|
||||
const beta = TagGroupItemProvider.create(itemOpts('beta', betaEl));
|
||||
const gamma = TagGroupItemProvider.create(itemOpts('gamma', gammaEl));
|
||||
return { provider, alpha, beta, gamma };
|
||||
});
|
||||
|
||||
const arrow = keyEvent('ArrowRight', alphaEl);
|
||||
result.alpha.onkeydown(arrow as never);
|
||||
expect(arrow.preventDefault).toHaveBeenCalledOnce();
|
||||
expect(focusSpy).toHaveBeenLastCalledWith(betaEl);
|
||||
|
||||
const end = keyEvent('End', alphaEl);
|
||||
result.alpha.onkeydown(end as never);
|
||||
expect(end.preventDefault).toHaveBeenCalledOnce();
|
||||
expect(focusSpy).toHaveBeenLastCalledWith(gammaEl);
|
||||
|
||||
const select = keyEvent('Enter', betaEl);
|
||||
result.beta.onkeydown(select as never);
|
||||
expect(select.preventDefault).toHaveBeenCalledOnce();
|
||||
expect(opts.value.current).toEqual(['beta']);
|
||||
expect(onValueChange).toHaveBeenLastCalledWith(['beta']);
|
||||
|
||||
result.gamma.onclick({ currentTarget: gammaEl } as never);
|
||||
expect(opts.value.current).toEqual(['beta', 'gamma']);
|
||||
expect(focusSpy).toHaveBeenLastCalledWith(gammaEl);
|
||||
|
||||
const remove = keyEvent('Delete', betaEl);
|
||||
result.beta.onkeydown(remove as never);
|
||||
expect(remove.preventDefault).toHaveBeenCalledOnce();
|
||||
expect(opts.value.current).toEqual(['gamma']);
|
||||
expect(onRemove).toHaveBeenCalledWith('beta');
|
||||
await Promise.resolve();
|
||||
expect(focusSpy).toHaveBeenLastCalledWith(gammaEl);
|
||||
|
||||
opts.disabled.current = true;
|
||||
result.gamma.onclick({ currentTarget: gammaEl } as never);
|
||||
expect(opts.value.current).toEqual(['gamma']);
|
||||
|
||||
cleanup();
|
||||
dom.dispose();
|
||||
});
|
||||
|
||||
it('exposes link and remove button props without breaking item roving semantics', () => {
|
||||
const { dom } = installSomaHarness();
|
||||
const root = document.createElement('div');
|
||||
root.setAttribute('data-tag-group', '');
|
||||
const itemEl = document.createElement('div');
|
||||
const linkEl = document.createElement('a');
|
||||
const removeEl = document.createElement('button');
|
||||
markRenderedItem(itemEl, 'alpha');
|
||||
markRenderedItem(linkEl, 'docs');
|
||||
root.append(itemEl, linkEl, removeEl);
|
||||
document.body.appendChild(root);
|
||||
const opts = tagGroupOpts(root);
|
||||
opts.value.current = ['docs'];
|
||||
const onRemove = vi.fn();
|
||||
opts.onRemove.current = onRemove;
|
||||
|
||||
const { result, cleanup } = withEffectRoot(() => {
|
||||
const provider = TagGroupProvider.create(opts);
|
||||
vi.spyOn(TagGroupProvider, 'require').mockReturnValue(provider);
|
||||
const item = TagGroupItemProvider.create(itemOpts('alpha', itemEl));
|
||||
vi.spyOn(TagGroupItemProvider, 'require').mockReturnValue(item);
|
||||
const link = TagGroupLinkProvider.create({
|
||||
id: state('tag-docs'),
|
||||
ref: state<HTMLElement | null>(linkEl),
|
||||
value: state('docs'),
|
||||
href: state('/docs'),
|
||||
disabled: state(false),
|
||||
textValue: state<string | undefined>('Docs')
|
||||
});
|
||||
const removeButton = TagGroupRemoveButtonProvider.create({
|
||||
id: state('tag-alpha-remove'),
|
||||
ref: state<HTMLElement | null>(removeEl),
|
||||
ariaLabel: state<string | undefined>(undefined)
|
||||
});
|
||||
return { provider, item, link, removeButton };
|
||||
});
|
||||
|
||||
expect(result.link.props).toMatchObject({
|
||||
id: 'tag-docs',
|
||||
'data-tag-group-link': '',
|
||||
'data-tag-group-item': '',
|
||||
role: 'row',
|
||||
href: '/docs',
|
||||
tabindex: 0,
|
||||
'data-state': 'selected',
|
||||
'data-value': 'docs',
|
||||
'data-text-value': 'Docs',
|
||||
'data-highlighted': ''
|
||||
});
|
||||
expect(result.removeButton.props).toMatchObject({
|
||||
id: 'tag-alpha-remove',
|
||||
type: 'button',
|
||||
'aria-label': 'Remove alpha',
|
||||
tabindex: 0
|
||||
});
|
||||
|
||||
const click = { stopPropagation: vi.fn() };
|
||||
result.removeButton.onclick(click as never);
|
||||
expect(click.stopPropagation).toHaveBeenCalledOnce();
|
||||
expect(onRemove).toHaveBeenCalledWith('alpha');
|
||||
|
||||
cleanup();
|
||||
dom.dispose();
|
||||
});
|
||||
});
|
||||
Loading…
Reference in new issue