parent
e4ce79cacd
commit
5971d6233d
@ -0,0 +1,158 @@
|
|||||||
|
// @vitest-environment jsdom
|
||||||
|
|
||||||
|
import { afterEach, describe, expect, it, vi } from 'vitest';
|
||||||
|
|
||||||
|
import { createActiveDom } from '$adom';
|
||||||
|
import { Time } from '$libs/days';
|
||||||
|
import type {
|
||||||
|
EditableTimeSegmentPart,
|
||||||
|
HourCycle,
|
||||||
|
TimeGranularity,
|
||||||
|
TimeOnInvalid,
|
||||||
|
TimeRange,
|
||||||
|
TimeRangeValidator,
|
||||||
|
TimeValue
|
||||||
|
} from '$libs/days';
|
||||||
|
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 type { Direction } from '../../types';
|
||||||
|
import { FieldProvider } from '../field/field-provider.svelte';
|
||||||
|
|
||||||
|
import {
|
||||||
|
TimeRangeFieldLabelProvider,
|
||||||
|
TimeRangeFieldProvider
|
||||||
|
} from './time-range-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: {
|
||||||
|
getLocale: () => 'en-US',
|
||||||
|
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(FieldProvider, 'get').mockReturnValue(undefined);
|
||||||
|
vi.spyOn(TimeRangeFieldProvider.ctx, 'set').mockImplementation((value) => value);
|
||||||
|
|
||||||
|
return { dom };
|
||||||
|
}
|
||||||
|
|
||||||
|
function createTimeRangeFieldOpts(root = document.createElement('div')) {
|
||||||
|
return {
|
||||||
|
id: state('time-range-field-root'),
|
||||||
|
ref: state<HTMLElement | null>(root),
|
||||||
|
value: state<TimeRange>({ start: undefined, end: undefined }),
|
||||||
|
placeholder: state<TimeValue>(new Time(9, 0)),
|
||||||
|
startValue: state<TimeValue | undefined>(undefined),
|
||||||
|
endValue: state<TimeValue | undefined>(undefined),
|
||||||
|
validate: state<TimeRangeValidator | undefined>(undefined),
|
||||||
|
onInvalid: state<TimeOnInvalid | undefined>(undefined),
|
||||||
|
minValue: state<TimeValue | undefined>(undefined),
|
||||||
|
maxValue: state<TimeValue | undefined>(undefined),
|
||||||
|
disabled: state(false),
|
||||||
|
readonly: state(false),
|
||||||
|
startReadonlySegments: state<EditableTimeSegmentPart[]>([]),
|
||||||
|
endReadonlySegments: state<EditableTimeSegmentPart[]>([]),
|
||||||
|
required: state(false),
|
||||||
|
granularity: state<TimeGranularity | undefined>(undefined),
|
||||||
|
hideTimeZone: state(false),
|
||||||
|
hourCycle: state<HourCycle | undefined>(undefined),
|
||||||
|
locale: state<string | undefined>('en-US'),
|
||||||
|
dir: state<Direction>('ltr'),
|
||||||
|
errorMessageId: state<string | undefined>(undefined)
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
describe('TimeRangeFieldProvider', () => {
|
||||||
|
afterEach(() => {
|
||||||
|
vi.restoreAllMocks();
|
||||||
|
document.body.innerHTML = '';
|
||||||
|
});
|
||||||
|
|
||||||
|
it('validates endpoint ordering and min/max bounds', () => {
|
||||||
|
const { dom } = installSomaHarness();
|
||||||
|
const opts = createTimeRangeFieldOpts();
|
||||||
|
|
||||||
|
const { result: provider, cleanup } = withEffectRoot(() => TimeRangeFieldProvider.create(opts));
|
||||||
|
|
||||||
|
opts.value.current = { start: new Time(10, 0), end: new Time(9, 0) };
|
||||||
|
expect(provider.validationStatus).toEqual({ reason: 'invalid' });
|
||||||
|
expect(provider.isInvalid).toBe(true);
|
||||||
|
|
||||||
|
opts.value.current = { start: new Time(8, 0), end: new Time(10, 0) };
|
||||||
|
opts.minValue.current = new Time(9, 0);
|
||||||
|
expect(provider.validationStatus).toEqual({ reason: 'min' });
|
||||||
|
|
||||||
|
opts.minValue.current = undefined;
|
||||||
|
opts.maxValue.current = new Time(17, 0);
|
||||||
|
opts.value.current = { start: new Time(10, 0), end: new Time(18, 0) };
|
||||||
|
expect(provider.validationStatus).toEqual({ reason: 'max' });
|
||||||
|
|
||||||
|
cleanup();
|
||||||
|
dom.dispose();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('prefers custom validation when both endpoints are present', () => {
|
||||||
|
const { dom } = installSomaHarness();
|
||||||
|
const opts = createTimeRangeFieldOpts();
|
||||||
|
opts.value.current = { start: new Time(9, 0), end: new Time(10, 0) };
|
||||||
|
opts.validate.current = () => 'Blocked range';
|
||||||
|
|
||||||
|
const { result: provider, cleanup } = withEffectRoot(() => TimeRangeFieldProvider.create(opts));
|
||||||
|
|
||||||
|
expect(provider.validationStatus).toEqual({
|
||||||
|
reason: 'custom',
|
||||||
|
message: 'Blocked range'
|
||||||
|
});
|
||||||
|
expect(provider.props['aria-invalid']).toBe(true);
|
||||||
|
|
||||||
|
cleanup();
|
||||||
|
dom.dispose();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('focuses the first start segment when the label is clicked', () => {
|
||||||
|
const { dom } = installSomaHarness();
|
||||||
|
const root = document.createElement('div');
|
||||||
|
root.innerHTML = '<div id="start-input"><span id="start-hour" data-segment></span></div>';
|
||||||
|
document.body.appendChild(root);
|
||||||
|
const opts = createTimeRangeFieldOpts(root);
|
||||||
|
const focus = vi.spyOn(dom, 'focus');
|
||||||
|
|
||||||
|
const { result: provider, cleanup } = withEffectRoot(() => {
|
||||||
|
const p = TimeRangeFieldProvider.create(opts);
|
||||||
|
vi.spyOn(TimeRangeFieldProvider.ctx, 'get').mockReturnValue(p);
|
||||||
|
const label = TimeRangeFieldLabelProvider.create({
|
||||||
|
id: state('time-range-label'),
|
||||||
|
ref: state<HTMLElement | null>(document.createElement('label'))
|
||||||
|
});
|
||||||
|
p.startInputId.current = 'start-input';
|
||||||
|
label.onclick();
|
||||||
|
return p;
|
||||||
|
});
|
||||||
|
|
||||||
|
expect(provider.startInputId.current).toBe('start-input');
|
||||||
|
expect(focus).toHaveBeenCalledWith(root.querySelector('#start-hour'));
|
||||||
|
|
||||||
|
cleanup();
|
||||||
|
dom.dispose();
|
||||||
|
});
|
||||||
|
});
|
||||||
Loading…
Reference in new issue