svelte-kit-vice/src/uix/soma/components/listbox/listbox-provider.svelte.test.ts

// @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 { FieldProvider } from '../field/field-provider.svelte';

import {
	ListboxGroupLabelProvider,
	ListboxGroupProvider,
	ListboxItemIndicatorProvider,
	ListboxItemProvider,
	ListboxProvider
} from './listbox-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) => {
			const timer = { key, delay, callback, cancel: vi.fn() };
			return timer;
		})
	};
	const soma = {
		dom,
		prefs: { getDir: () => 'ltr' },
		langs: { ts: vi.fn(() => 'Options') },
		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(FieldProvider, 'get').mockReturnValue(undefined);
	vi.spyOn(ListboxProvider.ctx, 'set').mockImplementation((value) => value);
	vi.spyOn(ListboxItemProvider.ctx, 'set').mockImplementation((value) => value);
	vi.spyOn(ListboxGroupProvider.ctx, 'set').mockImplementation((value) => value);

	return { dom };
}

function createRoot() {
	const root = document.createElement('div');
	root.setAttribute('data-listbox', '');
	document.body.appendChild(root);
	return root;
}

function createItemEl(value: string, text: string, disabled = false) {
	const item = document.createElement('div');
	item.setAttribute('data-listbox-item', '');
	item.setAttribute('data-value', value);
	item.setAttribute('data-text-value', text);
	item.textContent = text;
	if (disabled) item.setAttribute('data-disabled', '');
	return item;
}

function createListboxOpts(root = createRoot()) {
	return {
		id: state('listbox-root'),
		ref: state<HTMLElement | null>(root),
		value: state<string[]>([]),
		selectionMode: state<'single' | 'multiple'>('single'),
		loop: state(true),
		typeahead: state(true),
		typeaheadTimeout: state(500),
		orientation: state<'horizontal' | 'vertical'>('vertical'),
		dir: state<'ltr' | 'rtl' | undefined>(undefined),
		disabled: state(false),
		readonly: state(false),
		required: state(false),
		invalid: state(false),
		name: state<string | undefined>(undefined),
		ariaLabel: state<string | undefined>(undefined),
		ariaLabelledby: state<string | undefined>(undefined),
		onValueChange: state<((value: string[]) => void) | undefined>(undefined)
	};
}

function itemOpts(id: string, value: string, el: HTMLElement, disabled = false) {
	return {
		id: state(id),
		ref: state<HTMLElement | null>(el),
		value: state(value),
		disabled: state(disabled),
		textValue: state<string | undefined>(el.getAttribute('data-text-value') ?? undefined)
	};
}

function keyEvent(key: string, currentTarget: HTMLElement, init: Partial<KeyboardEvent> = {}) {
	return {
		key,
		currentTarget,
		ctrlKey: false,
		metaKey: false,
		altKey: false,
		preventDefault: vi.fn(),
		...init
	};
}

function clickEvent(currentTarget: HTMLElement) {
	return {
		currentTarget
	};
}

describe('ListboxProvider', () => {
	afterEach(() => {
		vi.restoreAllMocks();
		document.body.innerHTML = '';
	});

	it('exposes root accessibility props and focus state', () => {
		const { dom } = installSomaHarness();
		const opts = createListboxOpts();
		opts.selectionMode.current = 'multiple';
		opts.required.current = true;

		const { result: provider, cleanup } = withEffectRoot(() => ListboxProvider.create(opts));

		expect(provider.props).toMatchObject({
			role: 'listbox',
			dir: 'ltr',
			'aria-orientation': 'vertical',
			'aria-multiselectable': true,
			'aria-required': true,
			'aria-label': 'Options',
			'data-orientation': 'vertical',
			'data-required': '',
			'data-empty': ''
		});

		provider.onfocus();
		expect(provider.snippetProps).toMatchObject({
			value: [],
			isEmpty: true,
			isFocused: true
		});
		expect(provider.props['data-focused']).toBe('');

		cleanup();
		dom.dispose();
	});

	it('selects and toggles items while focusing through ActiveDom', () => {
		const { dom } = installSomaHarness();
		const focusSpy = vi.spyOn(dom, 'focus');
		const root = createRoot();
		const alphaEl = createItemEl('alpha', 'Alpha');
		const betaEl = createItemEl('beta', 'Beta');
		root.append(alphaEl, betaEl);
		const opts = createListboxOpts(root);
		opts.selectionMode.current = 'multiple';
		const onValueChange = vi.fn();
		opts.onValueChange.current = onValueChange;

		const { result, cleanup } = withEffectRoot(() => {
			const provider = ListboxProvider.create(opts);
			vi.spyOn(ListboxProvider.ctx, 'get').mockReturnValue(provider);
			const alpha = ListboxItemProvider.create(itemOpts('listbox-alpha', 'alpha', alphaEl));
			const beta = ListboxItemProvider.create(itemOpts('listbox-beta', 'beta', betaEl));
			return { provider, alpha, beta };
		});

		expect(result.alpha.props).toMatchObject({
			role: 'option',
			tabindex: 0,
			'aria-selected': false,
			'data-state': 'unselected',
			'data-value': 'alpha'
		});

		result.alpha.onclick(clickEvent(alphaEl) as never);
		expect(opts.value.current).toEqual(['alpha']);
		expect(onValueChange).toHaveBeenCalledWith(['alpha']);
		expect(focusSpy).toHaveBeenCalledWith(alphaEl);
		expect(result.alpha.props['data-state']).toBe('selected');
		expect(result.beta.props.tabindex).toBe(-1);

		result.alpha.onclick(clickEvent(alphaEl) as never);
		expect(opts.value.current).toEqual([]);
		expect(onValueChange).toHaveBeenLastCalledWith([]);

		cleanup();
		dom.dispose();
	});

	it('navigates enabled items and supports typeahead', () => {
		const { dom } = installSomaHarness();
		const focusSpy = vi.spyOn(dom, 'focus');
		const root = createRoot();
		const alphaEl = createItemEl('alpha', 'Alpha');
		const betaEl = createItemEl('beta', 'Beta');
		const gammaEl = createItemEl('gamma', 'Gamma');
		root.append(alphaEl, betaEl, gammaEl);
		const opts = createListboxOpts(root);
		opts.selectionMode.current = 'multiple';

		const { result, cleanup } = withEffectRoot(() => {
			const provider = ListboxProvider.create(opts);
			vi.spyOn(ListboxProvider.ctx, 'get').mockReturnValue(provider);
			const alpha = ListboxItemProvider.create(itemOpts('listbox-alpha', 'alpha', alphaEl));
			return { alpha };
		});

		const next = keyEvent('ArrowDown', alphaEl);
		result.alpha.onkeydown(next as never);
		expect(next.preventDefault).toHaveBeenCalledOnce();
		expect(focusSpy).toHaveBeenCalledWith(betaEl);

		const end = keyEvent('End', alphaEl);
		result.alpha.onkeydown(end as never);
		expect(end.preventDefault).toHaveBeenCalledOnce();
		expect(focusSpy).toHaveBeenLastCalledWith(gammaEl);

		const selectAll = keyEvent('A', alphaEl, { ctrlKey: true });
		result.alpha.onkeydown(selectAll as never);
		expect(selectAll.preventDefault).toHaveBeenCalledOnce();
		expect(opts.value.current).toEqual(['alpha', 'beta', 'gamma']);

		result.alpha.onkeydown(keyEvent('g', alphaEl) as never);
		expect(focusSpy).toHaveBeenLastCalledWith(gammaEl);

		cleanup();
		dom.dispose();
	});

	it('wires item indicators and group labels to their parent contexts', () => {
		const { dom } = installSomaHarness();
		const root = createRoot();
		const alphaEl = createItemEl('alpha', 'Alpha');
		root.append(alphaEl);
		const opts = createListboxOpts(root);
		opts.value.current = ['alpha'];

		const { result, cleanup } = withEffectRoot(() => {
			const provider = ListboxProvider.create(opts);
			vi.spyOn(ListboxProvider.ctx, 'get').mockReturnValue(provider);
			const item = ListboxItemProvider.create(itemOpts('listbox-alpha', 'alpha', alphaEl));
			vi.spyOn(ListboxItemProvider, 'require').mockReturnValue(item);
			const indicator = ListboxItemIndicatorProvider.create({
				id: state('listbox-alpha-indicator'),
				ref: state<HTMLElement | null>(document.createElement('span'))
			});
			const group = ListboxGroupProvider.create({
				id: state('listbox-group'),
				ref: state<HTMLElement | null>(document.createElement('div'))
			});
			vi.spyOn(ListboxGroupProvider, 'require').mockReturnValue(group);
			const label = ListboxGroupLabelProvider.create({
				id: state('listbox-group-label'),
				ref: state<HTMLElement | null>(document.createElement('div'))
			});
			return { item, indicator, group, label };
		});

		expect(result.item.props).toMatchObject({
			'aria-selected': true,
			'data-state': 'selected'
		});
		expect(result.indicator.isPresent).toBe(true);
		expect(result.indicator.props).toMatchObject({
			'aria-hidden': true,
			'data-state': 'selected'
		});
		expect(result.group.props).toMatchObject({
			role: 'group',
			'aria-labelledby': 'listbox-group-label'
		});
		expect(result.label.props.id).toBe('listbox-group-label');

		cleanup();
		dom.dispose();
	});
});