svelte-kit-vice/src/uix/soma/components/date-range-picker/date-range-picker-provider.svelte.test.ts

// @vitest-environment jsdom

import { afterEach, describe, expect, it, vi } from 'vitest';

import { createActiveDom } from '$adom';
import { CalendarDate } from '$libs/days';
import type {
	DateMatcher,
	DateOnInvalid,
	DateRange,
	DateRangeValidator,
	DateValue,
	EditableSegmentPart,
	Granularity,
	HourCycle,
	WeekStartsOn
} 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 { DateRangePickerProvider } from './date-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() {
	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(DateRangePickerProvider.ctx, 'set').mockImplementation((value) => value);

	return { dom };
}

function createDateRangePickerOpts() {
	const placeholder = new CalendarDate(2026, 5, 15);

	return {
		id: state('date-range-picker-root'),
		ref: state<HTMLElement | null>(null),
		value: state<DateRange>({ start: undefined, end: undefined }),
		placeholder: state<DateValue>(placeholder),
		startValue: state<DateValue | undefined>(undefined),
		endValue: state<DateValue | undefined>(undefined),
		open: state(true),
		validate: state<DateRangeValidator | undefined>(undefined),
		onInvalid: state<DateOnInvalid | undefined>(undefined),
		minValue: state<DateValue | undefined>(undefined),
		maxValue: state<DateValue | undefined>(undefined),
		minDays: state<number | undefined>(undefined),
		maxDays: state<number | undefined>(undefined),
		allowSingleDay: state(true),
		isDateDisabled: state<DateMatcher | undefined>(undefined),
		isDateUnavailable: state<DateMatcher | undefined>(undefined),
		isDateHoliday: state<DateMatcher | undefined>(undefined),
		disabled: state(false),
		readonly: state(false),
		startReadonlySegments: state<EditableSegmentPart[]>([]),
		endReadonlySegments: state<EditableSegmentPart[]>([]),
		required: state(false),
		closeOnRangeSelect: state(true),
		granularity: state<Granularity | undefined>(undefined),
		hideTimeZone: state(false),
		hourCycle: state<HourCycle | undefined>(undefined),
		locale: state<string | undefined>('en-US'),
		dir: state<Direction>('ltr'),
		pagedNavigation: state(false),
		weekStartsOn: state<WeekStartsOn | undefined>(undefined),
		weekdayFormat: state<Intl.DateTimeFormatOptions['weekday']>('narrow'),
		fixedWeeks: state(false),
		numberOfMonths: state(1),
		calendarLabel: state<string | undefined>(undefined),
		disableDaysOutsideMonth: state(false),
		preventDeselect: state(false),
		initialFocus: state(false),
		monthFormat: state<Intl.DateTimeFormatOptions['month'] | ((month: number) => string)>('long'),
		yearFormat: state<Intl.DateTimeFormatOptions['year'] | ((year: number) => string)>('numeric'),
		showWeekNumbers: state(false),
		weekNumberFormat: state<'iso' | 'simple'>('iso'),
		announceNavigation: state(true),
		errorMessageId: state<string | undefined>(undefined),
		onOpenChangeComplete: state<OnChangeFn<boolean>>(() => {})
	};
}

describe('DateRangePickerProvider', () => {
	afterEach(() => {
		vi.restoreAllMocks();
		document.body.innerHTML = '';
	});

	it('registers the provider part through SomaRuntime', () => {
		const { dom } = installSomaHarness();
		const opts = createDateRangePickerOpts();

		const { result: provider, cleanup } = withEffectRoot(() =>
			DateRangePickerProvider.create(opts)
		);
		const props = provider.props as Record<string, unknown>;

		expect(provider.runtimePart.props.id).toBe('date-range-picker-root');
		expect(props.id).toBe('date-range-picker-root');
		expect(props['data-date-range-picker']).toBe('');
		expect(props['data-state']).toBe('open');

		cleanup();
		dom.dispose();
	});

	it('exposes root state flags for composed wrappers', () => {
		const { dom } = installSomaHarness();
		const opts = createDateRangePickerOpts();

		const { result: provider, cleanup } = withEffectRoot(() =>
			DateRangePickerProvider.create(opts)
		);

		opts.open.current = false;
		opts.disabled.current = true;
		opts.readonly.current = true;
		opts.required.current = true;
		opts.value.current = {
			start: new CalendarDate(2026, 4, 30),
			end: new CalendarDate(2026, 5, 2)
		};
		opts.minValue.current = new CalendarDate(2026, 5, 1);

		const props = provider.props as Record<string, unknown>;
		expect(props['data-state']).toBe('closed');
		expect(props['data-disabled']).toBe('');
		expect(props['data-readonly']).toBe('');
		expect(props['data-required']).toBe('');
		expect(props['data-invalid']).toBe('');

		cleanup();
		dom.dispose();
	});

	it('closes the popover only when closeOnRangeSelect is enabled', () => {
		const { dom } = installSomaHarness();
		const opts = createDateRangePickerOpts();

		const { result: provider, cleanup } = withEffectRoot(() =>
			DateRangePickerProvider.create(opts)
		);

		provider.handleRangeSelect();
		expect(opts.open.current).toBe(false);

		opts.open.current = true;
		opts.closeOnRangeSelect.current = false;
		provider.handleRangeSelect();
		expect(opts.open.current).toBe(true);

		cleanup();
		dom.dispose();
	});

	it('validates single-day and range length constraints', () => {
		const { dom } = installSomaHarness();
		const opts = createDateRangePickerOpts();
		const start = new CalendarDate(2026, 5, 10);

		const { result: provider, cleanup } = withEffectRoot(() =>
			DateRangePickerProvider.create(opts)
		);

		opts.allowSingleDay.current = false;
		opts.value.current = { start, end: start };
		expect(provider.validationStatus).toEqual({ reason: 'single-day' });
		expect(provider.props['data-invalid']).toBe('');

		opts.allowSingleDay.current = true;
		opts.minDays.current = 3;
		opts.value.current = { start, end: new CalendarDate(2026, 5, 11) };
		expect(provider.validationStatus).toEqual({ reason: 'min-days' });

		opts.minDays.current = undefined;
		opts.maxDays.current = 3;
		opts.value.current = { start, end: new CalendarDate(2026, 5, 20) };
		expect(provider.validationStatus).toEqual({ reason: 'max-days' });

		cleanup();
		dom.dispose();
	});
});