parent
a44338ff2c
commit
e4ce79cacd
@ -0,0 +1,170 @@
|
|||||||
|
// @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, OnChangeFn } from '../../types';
|
||||||
|
|
||||||
|
import { TimeRangePickerProvider } from './time-range-picker-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(hourCycle?: HourCycle) {
|
||||||
|
const dom = createActiveDom();
|
||||||
|
const soma = {
|
||||||
|
dom,
|
||||||
|
langs: {
|
||||||
|
getLocale: () => 'en-US',
|
||||||
|
ts: (key: string) => key
|
||||||
|
},
|
||||||
|
dates: {
|
||||||
|
getHourCycle: () => hourCycle
|
||||||
|
},
|
||||||
|
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(TimeRangePickerProvider.ctx, 'set').mockImplementation((value) => value);
|
||||||
|
|
||||||
|
return { dom };
|
||||||
|
}
|
||||||
|
|
||||||
|
function createTimeRangePickerOpts() {
|
||||||
|
return {
|
||||||
|
id: state('time-range-picker-root'),
|
||||||
|
ref: state<HTMLElement | null>(null),
|
||||||
|
value: state<TimeRange>({ start: undefined, end: undefined }),
|
||||||
|
placeholder: state<TimeValue>(new Time(13, 45, 30)),
|
||||||
|
startValue: state<TimeValue | undefined>(undefined),
|
||||||
|
endValue: state<TimeValue | undefined>(undefined),
|
||||||
|
open: state(true),
|
||||||
|
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[]>(['dayPeriod']),
|
||||||
|
required: state(false),
|
||||||
|
closeOnRangeComplete: state(true),
|
||||||
|
granularity: state<TimeGranularity | undefined>(undefined),
|
||||||
|
hideTimeZone: state(false),
|
||||||
|
hourCycle: state<HourCycle | undefined>(undefined),
|
||||||
|
locale: state<string | undefined>('en-US'),
|
||||||
|
dir: state<Direction>('ltr'),
|
||||||
|
hourStep: state(1),
|
||||||
|
minuteStep: state(1),
|
||||||
|
secondStep: state(1),
|
||||||
|
errorMessageId: state<string | undefined>(undefined),
|
||||||
|
onOpenChangeComplete: state<OnChangeFn<boolean>>(() => {})
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
describe('TimeRangePickerProvider', () => {
|
||||||
|
afterEach(() => {
|
||||||
|
vi.restoreAllMocks();
|
||||||
|
document.body.innerHTML = '';
|
||||||
|
});
|
||||||
|
|
||||||
|
it('registers the provider part and exposes placeholder values per endpoint', () => {
|
||||||
|
const { dom } = installSomaHarness(24);
|
||||||
|
const opts = createTimeRangePickerOpts();
|
||||||
|
|
||||||
|
const { result: provider, cleanup } = withEffectRoot(() =>
|
||||||
|
TimeRangePickerProvider.create(opts)
|
||||||
|
);
|
||||||
|
|
||||||
|
expect(provider.runtimePart.props.id).toBe('time-range-picker-root');
|
||||||
|
expect(provider.inferredGranularity).toBe('minute');
|
||||||
|
expect(provider.getHour('start')).toBe(13);
|
||||||
|
expect(provider.getMinute('end')).toBe(45);
|
||||||
|
expect(provider.getSecond('start')).toBe(30);
|
||||||
|
expect(provider.getDayPeriod('end')).toBe('PM');
|
||||||
|
expect(provider.getReadonlySegments('start')).toEqual([]);
|
||||||
|
expect(provider.getReadonlySegments('end')).toEqual(['dayPeriod']);
|
||||||
|
|
||||||
|
cleanup();
|
||||||
|
dom.dispose();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('writes slider changes to the selected endpoint only', () => {
|
||||||
|
const { dom } = installSomaHarness(24);
|
||||||
|
const opts = createTimeRangePickerOpts();
|
||||||
|
|
||||||
|
const { result: provider, cleanup } = withEffectRoot(() =>
|
||||||
|
TimeRangePickerProvider.create(opts)
|
||||||
|
);
|
||||||
|
|
||||||
|
provider.setHour('start', 9);
|
||||||
|
provider.setMinute('start', 5);
|
||||||
|
provider.setSecond('end', 10);
|
||||||
|
|
||||||
|
expect(opts.startValue.current?.hour).toBe(9);
|
||||||
|
expect(opts.startValue.current?.minute).toBe(5);
|
||||||
|
expect(opts.startValue.current?.second).toBe(30);
|
||||||
|
expect(opts.endValue.current?.hour).toBe(13);
|
||||||
|
expect(opts.endValue.current?.minute).toBe(45);
|
||||||
|
expect(opts.endValue.current?.second).toBe(10);
|
||||||
|
|
||||||
|
cleanup();
|
||||||
|
dom.dispose();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('maps 12-hour input and closes only after both endpoints exist', () => {
|
||||||
|
const { dom } = installSomaHarness(12);
|
||||||
|
const opts = createTimeRangePickerOpts();
|
||||||
|
|
||||||
|
const { result: provider, cleanup } = withEffectRoot(() =>
|
||||||
|
TimeRangePickerProvider.create(opts)
|
||||||
|
);
|
||||||
|
|
||||||
|
expect(provider.getHour('start')).toBe(1);
|
||||||
|
provider.setHour('start', 3);
|
||||||
|
expect(opts.startValue.current?.hour).toBe(15);
|
||||||
|
|
||||||
|
provider.handleSelect();
|
||||||
|
expect(opts.open.current).toBe(true);
|
||||||
|
|
||||||
|
provider.setDayPeriod('start', 'AM');
|
||||||
|
provider.setHour('end', 4);
|
||||||
|
expect(opts.startValue.current?.hour).toBe(3);
|
||||||
|
expect(opts.endValue.current?.hour).toBe(16);
|
||||||
|
|
||||||
|
provider.handleSelect();
|
||||||
|
expect(opts.open.current).toBe(false);
|
||||||
|
|
||||||
|
opts.open.current = true;
|
||||||
|
opts.closeOnRangeComplete.current = false;
|
||||||
|
provider.handleSelect();
|
||||||
|
expect(opts.open.current).toBe(true);
|
||||||
|
|
||||||
|
cleanup();
|
||||||
|
dom.dispose();
|
||||||
|
});
|
||||||
|
});
|
||||||
Loading…
Reference in new issue