parent
89790957a0
commit
30d77474f0
@ -0,0 +1,326 @@
|
||||
// @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 {
|
||||
TreeViewBranchContentProvider,
|
||||
TreeViewBranchControlProvider,
|
||||
TreeViewBranchIndentGuideProvider,
|
||||
TreeViewBranchIndicatorProvider,
|
||||
TreeViewBranchProvider,
|
||||
TreeViewItemProvider,
|
||||
TreeViewLabelProvider,
|
||||
TreeViewProvider
|
||||
} from './tree-view-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 timers = {
|
||||
schedule: vi.fn((_key: string, _delay: number, _callback: () => void) => ({
|
||||
cancel: vi.fn()
|
||||
}))
|
||||
};
|
||||
const soma = {
|
||||
dom,
|
||||
langs: { ts: vi.fn(() => 'Tree') },
|
||||
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(TreeViewProvider.ctx, 'set').mockImplementation((value) => value);
|
||||
vi.spyOn(TreeViewBranchProvider.ctx, 'set').mockImplementation((value) => value);
|
||||
|
||||
return { dom };
|
||||
}
|
||||
|
||||
function createTreeViewOpts(root = document.createElement('ul')) {
|
||||
root.setAttribute('data-tree-view', '');
|
||||
document.body.appendChild(root);
|
||||
return {
|
||||
id: state('tree-view-root'),
|
||||
ref: state<HTMLElement | null>(root),
|
||||
expandedValue: state<string[]>([]),
|
||||
selectedValue: state<string[]>([]),
|
||||
selectionMode: state<'single' | 'multiple'>('single'),
|
||||
dir: state<'ltr' | 'rtl'>('ltr'),
|
||||
expandOnClick: state(true),
|
||||
typeahead: state(true),
|
||||
ariaLabel: state<string | undefined>(undefined),
|
||||
ariaLabelledby: state<string | undefined>(undefined)
|
||||
};
|
||||
}
|
||||
|
||||
function branchOpts(id: string, value: string, el: HTMLElement, depth = 0, disabled = false) {
|
||||
return {
|
||||
id: state(id),
|
||||
ref: state<HTMLElement | null>(el),
|
||||
value: state(value),
|
||||
disabled: state(disabled),
|
||||
depth: state(depth)
|
||||
};
|
||||
}
|
||||
|
||||
function itemOpts(id: string, value: string, el: HTMLElement, depth = 0, disabled = false) {
|
||||
return {
|
||||
id: state(id),
|
||||
ref: state<HTMLElement | null>(el),
|
||||
value: state(value),
|
||||
disabled: state(disabled),
|
||||
depth: state(depth)
|
||||
};
|
||||
}
|
||||
|
||||
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.startsWith('aria-') && key !== 'role' && key !== 'id') {
|
||||
continue;
|
||||
}
|
||||
if (value === undefined || value === false || typeof value === 'function') continue;
|
||||
el.setAttribute(key, value === true ? '' : String(value));
|
||||
}
|
||||
}
|
||||
|
||||
function keyEvent(key: string, extras: Record<string, unknown> = {}) {
|
||||
return {
|
||||
key,
|
||||
preventDefault: vi.fn(),
|
||||
ctrlKey: false,
|
||||
metaKey: false,
|
||||
altKey: false,
|
||||
...extras
|
||||
};
|
||||
}
|
||||
|
||||
function clickEvent() {
|
||||
return {
|
||||
stopPropagation: vi.fn()
|
||||
};
|
||||
}
|
||||
|
||||
describe('TreeViewProvider', () => {
|
||||
afterEach(() => {
|
||||
vi.restoreAllMocks();
|
||||
document.body.innerHTML = '';
|
||||
});
|
||||
|
||||
it('exposes root props and tracks expansion/selection state', () => {
|
||||
const { dom } = installSomaHarness();
|
||||
const opts = createTreeViewOpts();
|
||||
opts.selectionMode.current = 'multiple';
|
||||
|
||||
const { result: provider, cleanup } = withEffectRoot(() => TreeViewProvider.create(opts));
|
||||
|
||||
expect(provider.props).toMatchObject({
|
||||
role: 'tree',
|
||||
dir: 'ltr',
|
||||
'aria-multiselectable': true,
|
||||
'aria-label': 'Tree'
|
||||
});
|
||||
|
||||
provider.expand('docs');
|
||||
expect(opts.expandedValue.current).toEqual(['docs']);
|
||||
provider.toggleExpand('docs');
|
||||
expect(opts.expandedValue.current).toEqual([]);
|
||||
|
||||
provider.select('alpha');
|
||||
provider.select('beta');
|
||||
expect(opts.selectedValue.current).toEqual(['alpha', 'beta']);
|
||||
provider.select('alpha');
|
||||
expect(opts.selectedValue.current).toEqual(['beta']);
|
||||
|
||||
cleanup();
|
||||
dom.dispose();
|
||||
});
|
||||
|
||||
it('navigates visible treeitems, expands branches and supports typeahead', () => {
|
||||
const { dom } = installSomaHarness();
|
||||
const focusSpy = vi.spyOn(dom, 'focus');
|
||||
const root = document.createElement('ul');
|
||||
const opts = createTreeViewOpts(root);
|
||||
|
||||
const { result, cleanup } = withEffectRoot(() => {
|
||||
const provider = TreeViewProvider.create(opts);
|
||||
vi.spyOn(TreeViewProvider.ctx, 'get').mockReturnValue(provider);
|
||||
applyAttrs(root, provider.props);
|
||||
|
||||
const branchEl = document.createElement('li');
|
||||
const contentEl = document.createElement('ul');
|
||||
const childEl = document.createElement('li');
|
||||
const siblingEl = document.createElement('li');
|
||||
childEl.textContent = 'Bravo';
|
||||
siblingEl.textContent = 'Charlie';
|
||||
root.append(branchEl, siblingEl);
|
||||
branchEl.appendChild(contentEl);
|
||||
contentEl.appendChild(childEl);
|
||||
|
||||
const branch = TreeViewBranchProvider.create(branchOpts('tree-branch', 'docs', branchEl));
|
||||
applyAttrs(branchEl, branch.props);
|
||||
const child = TreeViewItemProvider.create(itemOpts('tree-child', 'child', childEl, 1));
|
||||
applyAttrs(childEl, child.props);
|
||||
const sibling = TreeViewItemProvider.create(itemOpts('tree-sibling', 'sibling', siblingEl));
|
||||
applyAttrs(siblingEl, sibling.props);
|
||||
|
||||
return { provider, branchEl, childEl, siblingEl };
|
||||
});
|
||||
|
||||
expect(result.provider.getVisibleItems()).toEqual([
|
||||
result.branchEl,
|
||||
result.childEl,
|
||||
result.siblingEl
|
||||
]);
|
||||
|
||||
vi.spyOn(dom, 'activeElement').mockReturnValue(result.branchEl);
|
||||
const expand = keyEvent('ArrowRight');
|
||||
result.provider.onkeydown(expand as never);
|
||||
expect(expand.preventDefault).toHaveBeenCalledOnce();
|
||||
expect(opts.expandedValue.current).toEqual(['docs']);
|
||||
|
||||
result.provider.onkeydown(keyEvent('ArrowRight') as never);
|
||||
expect(focusSpy).toHaveBeenCalledWith(result.childEl);
|
||||
|
||||
vi.spyOn(dom, 'activeElement').mockReturnValue(result.childEl);
|
||||
result.provider.onkeydown(keyEvent('ArrowDown') as never);
|
||||
expect(focusSpy).toHaveBeenLastCalledWith(result.siblingEl);
|
||||
|
||||
result.provider.onkeydown(keyEvent('c') as never);
|
||||
expect(focusSpy).toHaveBeenLastCalledWith(result.siblingEl);
|
||||
|
||||
cleanup();
|
||||
dom.dispose();
|
||||
});
|
||||
|
||||
it('wires branch control, indicator, content and indent guide props', () => {
|
||||
const { dom } = installSomaHarness();
|
||||
const root = document.createElement('ul');
|
||||
const opts = createTreeViewOpts(root);
|
||||
|
||||
const { result, cleanup } = withEffectRoot(() => {
|
||||
const provider = TreeViewProvider.create(opts);
|
||||
vi.spyOn(TreeViewProvider.ctx, 'get').mockReturnValue(provider);
|
||||
applyAttrs(root, provider.props);
|
||||
const branchEl = document.createElement('li');
|
||||
const controlEl = document.createElement('div');
|
||||
const contentEl = document.createElement('ul');
|
||||
root.appendChild(branchEl);
|
||||
branchEl.append(controlEl, contentEl);
|
||||
|
||||
const branch = TreeViewBranchProvider.create(branchOpts('tree-branch', 'docs', branchEl, 1));
|
||||
applyAttrs(branchEl, branch.props);
|
||||
vi.spyOn(TreeViewBranchProvider, 'require').mockReturnValue(branch);
|
||||
const control = TreeViewBranchControlProvider.create(
|
||||
partOpts('tree-branch-control', controlEl)
|
||||
);
|
||||
applyAttrs(controlEl, control.props);
|
||||
const content = TreeViewBranchContentProvider.create(
|
||||
partOpts('tree-branch-content', contentEl)
|
||||
);
|
||||
const indicator = TreeViewBranchIndicatorProvider.create(partOpts('tree-branch-indicator'));
|
||||
const guide = TreeViewBranchIndentGuideProvider.create(partOpts('tree-branch-guide'));
|
||||
return { branch, control, content, indicator, guide };
|
||||
});
|
||||
|
||||
expect(result.branch.props).toMatchObject({
|
||||
role: 'treeitem',
|
||||
'aria-expanded': false,
|
||||
'aria-level': 2,
|
||||
'data-state': 'closed',
|
||||
'data-depth': 1
|
||||
});
|
||||
expect(result.control.props).toMatchObject({
|
||||
tabindex: 0,
|
||||
'data-value': 'docs',
|
||||
'data-state': 'closed',
|
||||
'data-depth': 1
|
||||
});
|
||||
|
||||
result.control.onclick({} as never);
|
||||
expect(opts.expandedValue.current).toEqual(['docs']);
|
||||
expect(opts.selectedValue.current).toEqual(['docs']);
|
||||
expect(result.content.props).toMatchObject({
|
||||
role: 'group',
|
||||
'data-state': 'open',
|
||||
'data-depth': 1
|
||||
});
|
||||
|
||||
const event = clickEvent();
|
||||
result.indicator.onclick(event as never);
|
||||
expect(event.stopPropagation).toHaveBeenCalledOnce();
|
||||
expect(opts.expandedValue.current).toEqual([]);
|
||||
expect(result.indicator.props).toMatchObject({
|
||||
'aria-hidden': true,
|
||||
'data-state': 'closed'
|
||||
});
|
||||
expect(result.guide.props).toMatchObject({
|
||||
'aria-hidden': true,
|
||||
'data-depth': 1
|
||||
});
|
||||
|
||||
cleanup();
|
||||
dom.dispose();
|
||||
});
|
||||
|
||||
it('wires leaf item and label props', () => {
|
||||
const { dom } = installSomaHarness();
|
||||
const root = document.createElement('ul');
|
||||
const opts = createTreeViewOpts(root);
|
||||
opts.selectedValue.current = ['leaf'];
|
||||
const leafEl = document.createElement('li');
|
||||
leafEl.setAttribute('data-tree-view-item', '');
|
||||
leafEl.setAttribute('data-value', 'leaf');
|
||||
leafEl.setAttribute('role', 'treeitem');
|
||||
root.appendChild(leafEl);
|
||||
|
||||
const { result, cleanup } = withEffectRoot(() => {
|
||||
const provider = TreeViewProvider.create(opts);
|
||||
vi.spyOn(TreeViewProvider.ctx, 'get').mockReturnValue(provider);
|
||||
applyAttrs(root, provider.props);
|
||||
const item = TreeViewItemProvider.create(itemOpts('tree-leaf', 'leaf', leafEl, 2));
|
||||
const label = TreeViewLabelProvider.create(partOpts('tree-label'));
|
||||
return { item, label };
|
||||
});
|
||||
|
||||
expect(result.item.props).toMatchObject({
|
||||
role: 'treeitem',
|
||||
'aria-selected': true,
|
||||
'aria-level': 3,
|
||||
tabindex: 0,
|
||||
'data-value': 'leaf',
|
||||
'data-selected': '',
|
||||
'data-depth': 2
|
||||
});
|
||||
|
||||
result.item.onclick({} as never);
|
||||
expect(opts.selectedValue.current).toEqual([]);
|
||||
expect(result.label.props.id).toBe('tree-label');
|
||||
|
||||
cleanup();
|
||||
dom.dispose();
|
||||
});
|
||||
});
|
||||
Loading…
Reference in new issue