parent
c668cc1543
commit
2b36e2036c
@ -0,0 +1,170 @@
|
||||
// @vitest-environment jsdom
|
||||
|
||||
import { afterEach, describe, expect, it, vi } from 'vitest';
|
||||
|
||||
import { createActiveDom } from '$adom';
|
||||
import { CalendarDate } from '$libs/days';
|
||||
import type {
|
||||
DateOnInvalid,
|
||||
DateRange,
|
||||
DateRangeValidator,
|
||||
DateValue,
|
||||
EditableSegmentPart,
|
||||
Granularity,
|
||||
HourCycle
|
||||
} 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 {
|
||||
DateRangeFieldLabelProvider,
|
||||
DateRangeFieldProvider
|
||||
} from './date-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(DateRangeFieldProvider.ctx, 'set').mockImplementation((value) => value);
|
||||
|
||||
return { dom };
|
||||
}
|
||||
|
||||
function createDateRangeFieldOpts(root = document.createElement('div')) {
|
||||
return {
|
||||
id: state('date-range-field-root'),
|
||||
ref: state<HTMLElement | null>(root),
|
||||
value: state<DateRange>({ start: undefined, end: undefined }),
|
||||
placeholder: state<DateValue>(new CalendarDate(2026, 5, 15)),
|
||||
startValue: state<DateValue | undefined>(undefined),
|
||||
endValue: state<DateValue | undefined>(undefined),
|
||||
validate: state<DateRangeValidator | undefined>(undefined),
|
||||
onInvalid: state<DateOnInvalid | undefined>(undefined),
|
||||
minValue: state<DateValue | undefined>(undefined),
|
||||
maxValue: state<DateValue | undefined>(undefined),
|
||||
disabled: state(false),
|
||||
readonly: state(false),
|
||||
startReadonlySegments: state<EditableSegmentPart[]>([]),
|
||||
endReadonlySegments: state<EditableSegmentPart[]>([]),
|
||||
required: state(false),
|
||||
granularity: state<Granularity | 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('DateRangeFieldProvider', () => {
|
||||
afterEach(() => {
|
||||
vi.restoreAllMocks();
|
||||
document.body.innerHTML = '';
|
||||
});
|
||||
|
||||
it('validates endpoint ordering and min/max bounds', () => {
|
||||
const { dom } = installSomaHarness();
|
||||
const opts = createDateRangeFieldOpts();
|
||||
|
||||
const { result: provider, cleanup } = withEffectRoot(() => DateRangeFieldProvider.create(opts));
|
||||
|
||||
opts.value.current = {
|
||||
start: new CalendarDate(2026, 5, 20),
|
||||
end: new CalendarDate(2026, 5, 10)
|
||||
};
|
||||
expect(provider.validationStatus).toEqual({ reason: 'invalid' });
|
||||
expect(provider.isInvalid).toBe(true);
|
||||
|
||||
opts.value.current = {
|
||||
start: new CalendarDate(2026, 4, 30),
|
||||
end: new CalendarDate(2026, 5, 10)
|
||||
};
|
||||
opts.minValue.current = new CalendarDate(2026, 5, 1);
|
||||
expect(provider.validationStatus).toEqual({ reason: 'min' });
|
||||
|
||||
opts.minValue.current = undefined;
|
||||
opts.maxValue.current = new CalendarDate(2026, 5, 30);
|
||||
opts.value.current = {
|
||||
start: new CalendarDate(2026, 5, 10),
|
||||
end: new CalendarDate(2026, 6, 1)
|
||||
};
|
||||
expect(provider.validationStatus).toEqual({ reason: 'max' });
|
||||
|
||||
cleanup();
|
||||
dom.dispose();
|
||||
});
|
||||
|
||||
it('prefers custom validation when both endpoints are present', () => {
|
||||
const { dom } = installSomaHarness();
|
||||
const opts = createDateRangeFieldOpts();
|
||||
opts.value.current = {
|
||||
start: new CalendarDate(2026, 5, 10),
|
||||
end: new CalendarDate(2026, 5, 11)
|
||||
};
|
||||
opts.validate.current = () => 'Blocked range';
|
||||
|
||||
const { result: provider, cleanup } = withEffectRoot(() => DateRangeFieldProvider.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-month" data-segment></span></div>';
|
||||
document.body.appendChild(root);
|
||||
const opts = createDateRangeFieldOpts(root);
|
||||
const focus = vi.spyOn(dom, 'focus');
|
||||
|
||||
const { result: provider, cleanup } = withEffectRoot(() => {
|
||||
const p = DateRangeFieldProvider.create(opts);
|
||||
vi.spyOn(DateRangeFieldProvider.ctx, 'get').mockReturnValue(p);
|
||||
const label = DateRangeFieldLabelProvider.create({
|
||||
id: state('date-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-month'));
|
||||
|
||||
cleanup();
|
||||
dom.dispose();
|
||||
});
|
||||
});
|
||||
Loading…
Reference in new issue