parent
acab242c61
commit
eee0c6b4b1
@ -0,0 +1,252 @@
|
||||
// @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 { FieldProvider } from '../field/field-provider.svelte';
|
||||
|
||||
import {
|
||||
SearchFieldClearTriggerProvider,
|
||||
SearchFieldInputProvider,
|
||||
SearchFieldProvider
|
||||
} from './search-field-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,
|
||||
langs: {
|
||||
ts: vi.fn((key: string) => (key.includes('clear') ? 'Clear search' : 'Search'))
|
||||
},
|
||||
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(SearchFieldProvider.ctx, 'set').mockImplementation((value) => value);
|
||||
vi.spyOn(FieldProvider, 'get').mockReturnValue(undefined);
|
||||
|
||||
return { dom };
|
||||
}
|
||||
|
||||
function searchOpts(root = document.createElement('div')) {
|
||||
return {
|
||||
id: state('search-root'),
|
||||
ref: state<HTMLElement | null>(root),
|
||||
inputId: state('search-input'),
|
||||
value: state(''),
|
||||
disabled: state(false),
|
||||
readonly: state(false),
|
||||
required: state(false),
|
||||
invalid: state(false),
|
||||
name: state<string | undefined>('query'),
|
||||
placeholder: state<string | undefined>('Find'),
|
||||
clearOnEscape: state(true),
|
||||
ariaLabel: state<string | undefined>(undefined),
|
||||
onValueChange: state<((value: string) => void) | undefined>(undefined),
|
||||
onSubmit: state<((value: string) => void) | undefined>(undefined),
|
||||
onClear: state<(() => void) | undefined>(undefined)
|
||||
};
|
||||
}
|
||||
|
||||
function keyEvent(key: string) {
|
||||
return {
|
||||
key,
|
||||
preventDefault: vi.fn()
|
||||
};
|
||||
}
|
||||
|
||||
describe('SearchFieldProvider', () => {
|
||||
afterEach(() => {
|
||||
vi.restoreAllMocks();
|
||||
document.body.innerHTML = '';
|
||||
});
|
||||
|
||||
it('exposes root/input/clear props and projects root state attrs', async () => {
|
||||
const { dom } = installSomaHarness();
|
||||
const root = document.createElement('div');
|
||||
const inputEl = document.createElement('input');
|
||||
const clearEl = document.createElement('button');
|
||||
document.body.append(root, inputEl, clearEl);
|
||||
const opts = searchOpts(root);
|
||||
opts.required.current = true;
|
||||
opts.invalid.current = true;
|
||||
|
||||
const { result, cleanup } = withEffectRoot(() => {
|
||||
const provider = SearchFieldProvider.create(opts);
|
||||
vi.spyOn(SearchFieldProvider, 'require').mockReturnValue(provider);
|
||||
const input = SearchFieldInputProvider.create({
|
||||
id: state('search-input'),
|
||||
ref: state<HTMLElement | null>(inputEl)
|
||||
});
|
||||
const clear = SearchFieldClearTriggerProvider.create({
|
||||
id: state('search-clear'),
|
||||
ref: state<HTMLElement | null>(clearEl),
|
||||
ariaLabel: state<string | undefined>(undefined)
|
||||
});
|
||||
return { provider, input, clear };
|
||||
});
|
||||
|
||||
expect(result.provider.props).toMatchObject({
|
||||
id: 'search-root',
|
||||
'data-search-field': ''
|
||||
});
|
||||
expect(result.input.props).toMatchObject({
|
||||
id: 'search-input',
|
||||
'data-search-field-input': '',
|
||||
type: 'search',
|
||||
role: 'searchbox',
|
||||
value: '',
|
||||
name: 'query',
|
||||
placeholder: 'Find',
|
||||
required: true,
|
||||
'aria-label': 'Search',
|
||||
'aria-invalid': true
|
||||
});
|
||||
expect(result.clear.props).toMatchObject({
|
||||
id: 'search-clear',
|
||||
'data-search-field-clear-trigger': '',
|
||||
type: 'button',
|
||||
'aria-label': 'Clear search',
|
||||
disabled: true,
|
||||
tabindex: -1
|
||||
});
|
||||
|
||||
await tick();
|
||||
expect(root.getAttribute('data-required')).toBe('');
|
||||
expect(root.getAttribute('data-invalid')).toBe('');
|
||||
expect(root.getAttribute('data-empty')).toBe('');
|
||||
|
||||
result.input.props.onfocus({ currentTarget: inputEl } as never);
|
||||
await tick();
|
||||
expect(result.provider.snippetProps.isFocused).toBe(true);
|
||||
expect(root.getAttribute('data-focused')).toBe('');
|
||||
|
||||
result.input.props.onblur({ currentTarget: inputEl } as never);
|
||||
await tick();
|
||||
expect(result.provider.snippetProps.isFocused).toBe(false);
|
||||
expect(root.hasAttribute('data-focused')).toBe(false);
|
||||
|
||||
cleanup();
|
||||
dom.dispose();
|
||||
});
|
||||
|
||||
it('commits input, submits on Enter and clears on Escape/click', async () => {
|
||||
const { dom } = installSomaHarness();
|
||||
const focusSpy = vi.spyOn(dom, 'focus');
|
||||
const root = document.createElement('div');
|
||||
const inputEl = document.createElement('input');
|
||||
const clearEl = document.createElement('button');
|
||||
document.body.append(root, inputEl, clearEl);
|
||||
const opts = searchOpts(root);
|
||||
opts.value.current = 'abc';
|
||||
const onValueChange = vi.fn();
|
||||
const onSubmit = vi.fn();
|
||||
const onClear = vi.fn();
|
||||
opts.onValueChange.current = onValueChange;
|
||||
opts.onSubmit.current = onSubmit;
|
||||
opts.onClear.current = onClear;
|
||||
|
||||
const { result, cleanup } = withEffectRoot(() => {
|
||||
const provider = SearchFieldProvider.create(opts);
|
||||
vi.spyOn(SearchFieldProvider, 'require').mockReturnValue(provider);
|
||||
const input = SearchFieldInputProvider.create({
|
||||
id: state('search-input'),
|
||||
ref: state<HTMLElement | null>(inputEl)
|
||||
});
|
||||
const clear = SearchFieldClearTriggerProvider.create({
|
||||
id: state('search-clear'),
|
||||
ref: state<HTMLElement | null>(clearEl),
|
||||
ariaLabel: state<string | undefined>(undefined)
|
||||
});
|
||||
provider.setInputRef(inputEl);
|
||||
return { provider, input, clear };
|
||||
});
|
||||
|
||||
inputEl.value = 'abcd';
|
||||
result.input.props.oninput({
|
||||
currentTarget: inputEl,
|
||||
preventDefault: vi.fn()
|
||||
} as never);
|
||||
expect(opts.value.current).toBe('abcd');
|
||||
expect(onValueChange).toHaveBeenCalledWith('abcd');
|
||||
|
||||
const enter = keyEvent('Enter');
|
||||
result.input.props.onkeydown(enter as never);
|
||||
expect(enter.preventDefault).toHaveBeenCalledOnce();
|
||||
expect(onSubmit).toHaveBeenCalledWith('abcd');
|
||||
|
||||
const escape = keyEvent('Escape');
|
||||
result.input.props.onkeydown(escape as never);
|
||||
expect(escape.preventDefault).toHaveBeenCalledOnce();
|
||||
expect(opts.value.current).toBe('');
|
||||
expect(onValueChange).toHaveBeenLastCalledWith('');
|
||||
expect(onClear).toHaveBeenCalledOnce();
|
||||
expect(focusSpy).toHaveBeenCalledWith(inputEl);
|
||||
|
||||
opts.value.current = 'again';
|
||||
result.clear.props.onclick({ currentTarget: clearEl } as never);
|
||||
expect(opts.value.current).toBe('');
|
||||
expect(onClear).toHaveBeenCalledTimes(2);
|
||||
|
||||
cleanup();
|
||||
dom.dispose();
|
||||
});
|
||||
|
||||
it('OR-merges enclosing Field flags and labelling', () => {
|
||||
const { dom } = installSomaHarness();
|
||||
const field = {
|
||||
inputId: state(''),
|
||||
labelId: state('field-label'),
|
||||
helperId: state('field-helper'),
|
||||
errorId: state('field-error'),
|
||||
isDisabled: true,
|
||||
isReadonly: false,
|
||||
isRequired: true,
|
||||
isInvalid: true
|
||||
};
|
||||
vi.spyOn(FieldProvider, 'get').mockReturnValue(field as FieldProvider);
|
||||
const opts = searchOpts();
|
||||
|
||||
const { result, cleanup } = withEffectRoot(() => {
|
||||
const provider = SearchFieldProvider.create(opts);
|
||||
vi.spyOn(SearchFieldProvider, 'require').mockReturnValue(provider);
|
||||
const input = SearchFieldInputProvider.create({
|
||||
id: state('search-input'),
|
||||
ref: state<HTMLElement | null>(document.createElement('input'))
|
||||
});
|
||||
return { input };
|
||||
});
|
||||
|
||||
expect(field.inputId.current).toBe('search-input');
|
||||
expect(result.input.props).toMatchObject({
|
||||
disabled: true,
|
||||
required: true,
|
||||
'aria-label': undefined,
|
||||
'aria-labelledby': 'field-label',
|
||||
'aria-invalid': true,
|
||||
'aria-describedby': 'field-helper field-error',
|
||||
'data-disabled': ''
|
||||
});
|
||||
|
||||
cleanup();
|
||||
dom.dispose();
|
||||
});
|
||||
});
|
||||
Loading…
Reference in new issue