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

// @vitest-environment jsdom

import { afterEach, describe, expect, it, vi } from 'vitest';

import { createActiveDom } from '$adom';
import { createActiveTimers } from '$timer';
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 { FloatingProvider, FloatingAnchor } from '$soma/layers/floating';

import { ComboboxProvider, ComboboxInputProvider } from './combobox-provider.svelte';
import type { ComboboxType } from './types';

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 = createActiveTimers();
	const soma = {
		dom,
		uix: { timers },
		langs: { ts: (key: string) => key },
		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(ComboboxProvider.ctx, 'set').mockImplementation((value) => value);
	vi.spyOn(FloatingProvider, 'create').mockReturnValue({} as FloatingProvider);

	return { dom, timers };
}

function createComboboxOpts() {
	return {
		id: state('combobox-root'),
		ref: state<HTMLElement | null>(null),
		open: state(true),
		value: state<string[]>([]),
		inputValue: state(''),
		type: state<ComboboxType>('single'),
		disabled: state(false),
		required: state(false),
		name: state('choice'),
		loop: state(false),
		allowDeselect: state(false),
		allowsCustomValue: state(false),
		dir: state<'ltr' | 'rtl'>('ltr'),
		onOpenChangeComplete: state(() => {})
	};
}

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

	it('selects, closes and resolves display labels in single-select mode', () => {
		const { dom, timers } = installSomaHarness();
		const opts = createComboboxOpts();

		const { result: provider, cleanup } = withEffectRoot(() => ComboboxProvider.create(opts));
		provider.registerLabel('a', 'Alpha');

		provider.selectItem('a');

		expect(opts.value.current).toEqual(['a']);
		expect(opts.open.current).toBe(false);
		expect(provider.getDisplayText()).toBe('Alpha');

		opts.open.current = true;
		opts.allowDeselect.current = true;
		provider.selectItem('a');

		expect(opts.value.current).toEqual([]);
		expect(opts.open.current).toBe(false);

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

	it('updates input value and toggles multiple selections without closing', () => {
		const { dom, timers } = installSomaHarness();
		const opts = createComboboxOpts();
		opts.type.current = 'multiple';
		opts.value.current = ['a'];

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

		provider.updateInputValue('alp');
		expect(opts.inputValue.current).toBe('alp');

		provider.selectItem('b');
		expect(opts.value.current).toEqual(['a', 'b']);
		expect(opts.open.current).toBe(true);

		provider.selectItem('a');
		expect(opts.value.current).toEqual(['b']);
		expect(opts.open.current).toBe(true);

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

	it('filters disabled DOM items from navigation candidates', () => {
		const { dom, timers } = installSomaHarness();
		const opts = createComboboxOpts();
		const container = document.createElement('div');
		container.innerHTML = `
			<div id="a" data-combobox-item data-value="a"></div>
			<div id="b" data-combobox-item data-value="b" data-disabled></div>
			<div id="c" data-combobox-item data-value="c"></div>
		`;

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

		expect(provider.getItems(container).map((el) => el.id)).toEqual(['a', 'c']);

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

// ── Keyboard navigation (virtual focus on the input) — covers combobox-001 ───
//
// The Input route owns navigation via `moveHighlight` (the shared `nextIndex`
// helper) and NEVER moves DOM focus onto an item — focus stays on the textbox
// (APG combobox). These pin: keys move `highlightedId` in the right order, the
// no-selection seed lands ArrowUp on the LAST item, focus never leaves the
// input, and the Backspace / custom-value branches behave.

function keyEvent(key: string) {
	return { key, preventDefault: vi.fn() };
}

function setupComboboxKeyboard(configure?: (opts: ReturnType<typeof createComboboxOpts>) => void) {
	const { dom, timers } = installSomaHarness();
	const opts = createComboboxOpts(); // open: true by default
	configure?.(opts);
	const root = withEffectRoot(() => ComboboxProvider.create(opts));
	vi.spyOn(ComboboxProvider, 'require').mockReturnValue(root.result);
	vi.spyOn(FloatingAnchor, 'create').mockReturnValue({} as never);
	const inputEl = document.createElement('input');
	document.body.appendChild(inputEl);
	const input = withEffectRoot(() =>
		ComboboxInputProvider.create({ id: state('combobox-input'), ref: state(inputEl) })
	);
	const container = document.createElement('div');
	// tabindex="-1" mirrors real virtual-focus items: programmatically focusable,
	// so a stray `dom.focus(item)` WOULD move focus — that is what the virtual-
	// focus test must be able to catch (a div with no tabindex is unfocusable, so
	// `.focus()` is a jsdom no-op and the test would be vacuous).
	container.innerHTML =
		'<div id="a" data-combobox-item data-value="a" tabindex="-1">Alpha</div>' +
		'<div id="b" data-combobox-item data-value="b" tabindex="-1">Beta</div>' +
		'<div id="c" data-combobox-item data-value="c" tabindex="-1">Gamma</div>';
	document.body.appendChild(container);
	root.result.setContentRef(container);
	const dispose = () => {
		input.cleanup();
		root.cleanup();
		timers.dispose();
		dom.dispose();
	};
	return { provider: root.result, input: input.result, inputEl, dispose };
}

describe('ComboboxProvider keyboard navigation (virtual focus on the input)', () => {
	afterEach(() => {
		vi.restoreAllMocks();
		document.body.innerHTML = '';
	});

	it('ArrowDown highlights the first item, then advances', () => {
		const s = setupComboboxKeyboard();
		const down = keyEvent('ArrowDown');
		s.input.onkeydown(down as never);
		expect(down.preventDefault).toHaveBeenCalledOnce();
		expect(s.provider.highlightedId).toBe('a');
		s.input.onkeydown(keyEvent('ArrowDown') as never);
		expect(s.provider.highlightedId).toBe('b');
		s.dispose();
	});

	it('ArrowUp from no highlight lands on the LAST item (no-selection seed)', () => {
		const s = setupComboboxKeyboard();
		s.input.onkeydown(keyEvent('ArrowUp') as never);
		expect(s.provider.highlightedId).toBe('c');
		s.dispose();
	});

	it('Home highlights the first item, End the last', () => {
		const s = setupComboboxKeyboard();
		s.input.onkeydown(keyEvent('End') as never);
		expect(s.provider.highlightedId).toBe('c');
		s.input.onkeydown(keyEvent('Home') as never);
		expect(s.provider.highlightedId).toBe('a');
		s.dispose();
	});

	it('clamps at the end without loop', () => {
		const s = setupComboboxKeyboard();
		s.provider.highlightedId = 'c';
		s.input.onkeydown(keyEvent('ArrowDown') as never);
		expect(s.provider.highlightedId).toBe('c');
		s.dispose();
	});

	it('wraps around with loop on', () => {
		const s = setupComboboxKeyboard((o) => {
			o.loop.current = true;
		});
		s.provider.highlightedId = 'c';
		s.input.onkeydown(keyEvent('ArrowDown') as never);
		expect(s.provider.highlightedId).toBe('a');
		s.dispose();
	});

	it('keeps virtual focus: ArrowDown leaves DOM focus on the input, never an item (combobox-001)', () => {
		const s = setupComboboxKeyboard();
		s.inputEl.focus();
		expect(document.activeElement).toBe(s.inputEl);
		s.input.onkeydown(keyEvent('ArrowDown') as never);
		expect(s.provider.highlightedId).toBe('a');
		expect(document.activeElement).toBe(s.inputEl); // focus did NOT move to the item
		s.dispose();
	});

	it('Backspace on an empty input removes the last value in multiple mode', () => {
		const s = setupComboboxKeyboard((o) => {
			o.type.current = 'multiple';
			o.value.current = ['a', 'b'];
			o.inputValue.current = '';
		});
		s.input.onkeydown(keyEvent('Backspace') as never);
		expect(s.provider.opts.value.current).toEqual(['a']);
		s.dispose();
	});

	it('Enter commits a custom value when allowed and nothing is highlighted', () => {
		const s = setupComboboxKeyboard((o) => {
			o.allowsCustomValue.current = true;
			o.inputValue.current = 'Custom';
		});
		s.input.onkeydown(keyEvent('Enter') as never);
		expect(s.provider.opts.value.current).toContain('Custom');
		s.dispose();
	});
});