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