test(uix): keyboard/focus tests for select + combobox (select-004, combobox-002)

Closes the SYS-3 test gap for the two virtual-focus overlays — the exact paths
the combobox-001 / select-003 focus bugs lived in. Provider-level tests (the
accordion sub-provider harness pattern): create the Trigger/Input provider, set
a contentRef with items, dispatch `onkeydown`, assert the result.

- select (9): ArrowDown/Up/Home/End move highlightedId via the shared nextIndex
  helper; ArrowUp from no-selection seeds the LAST item (the n-2 off-by the
  helper fixes); clamp vs loop; Enter selects + closes; Escape closes; typeahead;
  and DOM focus stays on the trigger (never an item).
- combobox (8): same nav + seed + clamp/loop; Backspace removes the last value
  in multi mode; Enter commits a custom value; and DOM focus stays on the INPUT
  (the combobox-001 invariant — APG combobox keeps focus on the textbox).

Each is proven to have teeth: breaking the seed (`nextIndex(0,…)`) fails the nav
tests; re-adding `dom.focus(item)` fails the virtual-focus tests. The item
fixtures carry `tabindex="-1"` so a stray `.focus()` actually moves focus —
without it the focus assertion is a jsdom no-op and the test is vacuous.

check: 0 new type errors; both files green (23 tests).

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
active-uix
dev 3 months ago
parent 4c5e33a098
commit 1114d00b7c

@ -8,9 +8,9 @@ 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 } from '$soma/layers/floating';
import { FloatingProvider, FloatingAnchor } from '$soma/layers/floating';
import { ComboboxProvider } from './combobox-provider.svelte';
import { ComboboxProvider, ComboboxInputProvider } from './combobox-provider.svelte';
import type { ComboboxType } from './types';
function withEffectRoot<T>(fn: () => T): { result: T; cleanup: () => void } {
@ -136,3 +136,130 @@ describe('ComboboxProvider', () => {
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();
});
});

@ -8,9 +8,9 @@ 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 } from '$soma/layers/floating';
import { FloatingProvider, FloatingAnchor } from '$soma/layers/floating';
import { SelectProvider } from './select-provider.svelte';
import { SelectProvider, SelectTriggerProvider } from './select-provider.svelte';
import type { ScrollAlignment, SelectType } from './types';
function withEffectRoot<T>(fn: () => T): { result: T; cleanup: () => void } {
@ -132,3 +132,140 @@ describe('SelectProvider', () => {
dom.dispose();
});
});
// ── Keyboard navigation (virtual focus) — covers select-003 ──────────────────
//
// The Trigger route owns ALL keyboard navigation via the shared `nextIndex`
// helper; the old real-focus Content route was deleted. These exercise the
// integration: keys move `highlightedId` (→ aria-activedescendant) in the right
// order, the no-selection seed lands ArrowUp on the LAST item (the `n-2`
// off-by the helper fixes), and focus never leaves the trigger for an item.
function keyEvent(key: string) {
return { key, preventDefault: vi.fn() };
}
function setupSelectKeyboard(configure?: (opts: ReturnType<typeof createSelectOpts>) => void) {
const { dom, timers } = installSomaHarness();
const opts = createSelectOpts(); // open: true by default
configure?.(opts);
const root = withEffectRoot(() => SelectProvider.create(opts));
vi.spyOn(SelectProvider, 'require').mockReturnValue(root.result);
vi.spyOn(FloatingAnchor, 'create').mockReturnValue({} as never);
const triggerEl = document.createElement('button');
document.body.appendChild(triggerEl);
const trigger = withEffectRoot(() =>
SelectTriggerProvider.create({ id: state('select-trigger'), ref: state(triggerEl) })
);
const container = document.createElement('div');
// tabindex="-1" mirrors real virtual-focus items: programmatically focusable,
// so a stray `dom.focus(item)` WOULD move focus — what the virtual-focus test
// must be able to catch (an unfocusable div makes `.focus()` a no-op → vacuous).
container.innerHTML =
'<div id="a" data-select-item data-value="a" tabindex="-1">Alpha</div>' +
'<div id="b" data-select-item data-value="b" tabindex="-1">Beta</div>' +
'<div id="c" data-select-item data-value="c" tabindex="-1">Gamma</div>';
document.body.appendChild(container);
root.result.setContentRef(container);
const dispose = () => {
trigger.cleanup();
root.cleanup();
timers.dispose();
dom.dispose();
};
return { provider: root.result, trigger: trigger.result, triggerEl, dispose };
}
describe('SelectProvider keyboard navigation (virtual focus)', () => {
afterEach(() => {
vi.restoreAllMocks();
document.body.innerHTML = '';
});
it('ArrowDown from no highlight lands on the first item, then advances', () => {
const s = setupSelectKeyboard();
expect(s.provider.highlightedId).toBe('');
const down = keyEvent('ArrowDown');
s.trigger.onkeydown(down as never);
expect(down.preventDefault).toHaveBeenCalledOnce();
expect(s.provider.highlightedId).toBe('a');
s.trigger.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 = setupSelectKeyboard();
s.trigger.onkeydown(keyEvent('ArrowUp') as never);
expect(s.provider.highlightedId).toBe('c'); // last, NOT n-2
s.dispose();
});
it('Home highlights the first item, End the last', () => {
const s = setupSelectKeyboard();
s.trigger.onkeydown(keyEvent('End') as never);
expect(s.provider.highlightedId).toBe('c');
s.trigger.onkeydown(keyEvent('Home') as never);
expect(s.provider.highlightedId).toBe('a');
s.dispose();
});
it('clamps at the ends when loop is off', () => {
const s = setupSelectKeyboard();
s.provider.highlightedId = 'c';
s.trigger.onkeydown(keyEvent('ArrowDown') as never);
expect(s.provider.highlightedId).toBe('c');
s.provider.highlightedId = 'a';
s.trigger.onkeydown(keyEvent('ArrowUp') as never);
expect(s.provider.highlightedId).toBe('a');
s.dispose();
});
it('wraps around when loop is on', () => {
const s = setupSelectKeyboard((o) => {
o.loop.current = true;
});
s.provider.highlightedId = 'c';
s.trigger.onkeydown(keyEvent('ArrowDown') as never);
expect(s.provider.highlightedId).toBe('a');
s.trigger.onkeydown(keyEvent('ArrowUp') as never);
expect(s.provider.highlightedId).toBe('c');
s.dispose();
});
it('Enter selects the highlighted item and closes (single mode)', () => {
const s = setupSelectKeyboard();
s.provider.highlightedId = 'b';
s.trigger.onkeydown(keyEvent('Enter') as never);
expect(s.provider.opts.value.current).toEqual(['b']);
expect(s.provider.opts.open.current).toBe(false);
s.dispose();
});
it('Escape closes without selecting', () => {
const s = setupSelectKeyboard();
s.provider.highlightedId = 'b';
s.trigger.onkeydown(keyEvent('Escape') as never);
expect(s.provider.opts.open.current).toBe(false);
expect(s.provider.opts.value.current).toEqual([]);
s.dispose();
});
it('typeahead jumps to the first item matching the typed prefix', () => {
const s = setupSelectKeyboard();
s.trigger.onkeydown(keyEvent('g') as never); // "Gamma"
expect(s.provider.highlightedId).toBe('c');
s.dispose();
});
it('keeps virtual focus: navigation moves highlightedId, DOM focus stays on the trigger', () => {
const s = setupSelectKeyboard();
s.triggerEl.focus();
expect(document.activeElement).toBe(s.triggerEl);
s.trigger.onkeydown(keyEvent('ArrowDown') as never);
expect(s.provider.highlightedId).toBe('a');
// focus must NOT move to the highlighted item — the route never dom.focus()es items
expect(document.activeElement).toBe(s.triggerEl);
s.dispose();
});
});

Loading…
Cancel
Save

Powered by TurnKey Linux.