@flickfyi/flkr 0.0.141 → 0.0.146

package/node_modules/@flickfyi/core/tests/kowalski-date-time.test.tsx

@@ -0,0 +1,462 @@
+// @vitest-environment happy-dom
+import { act, cleanup, fireEvent, render, screen } from '@testing-library/react'
+import * as React from 'react'
+import { afterEach, beforeEach, expect, it, vi } from 'vitest'
+
+import { FeatureDate, FeatureDateTime } from '~/kowalski/date-time'
+
+vi.mock('@stylexjs/stylex', () => ({
+	create: <T,>(styles: T) => styles,
+	defineVars: <T,>(vars: T) => vars,
+	props: () => ({}),
+}))
+
+vi.mock('@flickfyi/photon', async () => {
+	const { Children, createElement, isValidElement } = await import('react')
+	const Host = ({ children }: React.PropsWithChildren) =>
+		createElement('div', {}, children)
+	return {
+		Button: ({
+			children,
+			disabled,
+			onClick,
+		}: React.PropsWithChildren<{
+			disabled?: boolean
+			onClick?: () => void
+		}>) => createElement('button', { disabled, onClick }, children),
+		Flex: Host,
+		Icon: () => null,
+		Input: ({
+			onChange,
+			placeholder,
+			value,
+		}: {
+			onChange: (value: string) => void
+			placeholder: string
+			value: string
+		}) =>
+			createElement('input', {
+				onChange: (event: React.ChangeEvent<HTMLInputElement>) =>
+					onChange(event.target.value),
+				placeholder,
+				value,
+			}),
+		Picker: ({
+			children,
+			label,
+			onChange,
+			value,
+		}: React.PropsWithChildren<{
+			label: string
+			onChange: (value: string) => void
+			value: string
+		}>) =>
+			createElement(
+				'select',
+				{
+					'aria-label': label,
+					onChange: (event: React.ChangeEvent<HTMLSelectElement>) =>
+						onChange(event.target.value),
+					value,
+				},
+				Children.map(children, child =>
+					isValidElement<{ value: string }>(child)
+						? createElement('option', { value: child.props.value }, child.props.value)
+						: null
+				)
+			),
+		Text: Host,
+	}
+})
+
+beforeEach(() => vi.stubGlobal('_CRAYONCORE_$REACT', React))
+afterEach(() => {
+	cleanup()
+	vi.unstubAllGlobals()
+})
+
+it('edits the requested timezone and only publishes an ISO instant on Save', () => {
+	const onChange = vi.fn()
+	render(
+		<FeatureDateTime
+			component="countdown"
+			label="Target"
+			onChange={onChange}
+			ready
+			timeZone="Asia/Kolkata"
+			value="2026-12-31T20:00:00Z"
+		/>
+	)
+	expect(screen.getByText('Fri, January 1, 2027')).toBeTruthy()
+	expect(screen.queryByRole('textbox')).toBeNull()
+	fireEvent.click(screen.getByRole('button', { name: 'Change date & time' }))
+	expect(screen.getByPlaceholderText<HTMLInputElement>('h:mm AM/PM').value).toBe(
+		'1:30 AM'
+	)
+	fireEvent.change(screen.getByPlaceholderText('MM/DD/YYYY'), {
+		target: { value: '01/02/2027' },
+	})
+	fireEvent.change(screen.getByPlaceholderText('h:mm AM/PM'), {
+		target: { value: '3:45 PM' },
+	})
+	expect(onChange).not.toHaveBeenCalled()
+	fireEvent.click(screen.getByRole('button', { name: 'Save date' }))
+	expect(onChange).toHaveBeenCalledWith('2027-01-02T10:15:00.000Z')
+})
+
+it('rejects a nonexistent daylight-saving wall time without shifting the date', () => {
+	const onChange = vi.fn()
+	render(
+		<FeatureDateTime
+			component="countdown"
+			label="Target"
+			onChange={onChange}
+			ready
+			timeZone="America/Los_Angeles"
+			value="2027-03-14T09:30:00Z"
+		/>
+	)
+	fireEvent.click(screen.getByRole('button', { name: 'Change date & time' }))
+	fireEvent.change(screen.getByPlaceholderText('h:mm AM/PM'), {
+		target: { value: '2:30 AM' },
+	})
+	expect(
+		screen.getByText('This time is skipped when the clocks change. Choose another time.')
+	).toBeTruthy()
+	expect(
+		screen.getByRole<HTMLButtonElement>('button', { name: 'Save date' }).disabled
+	).toBe(true)
+	expect(onChange).not.toHaveBeenCalled()
+	fireEvent.change(screen.getByPlaceholderText('h:mm AM/PM'), {
+		target: { value: '3:30 AM' },
+	})
+	fireEvent.click(screen.getByRole('button', { name: 'Save date' }))
+	expect(onChange).toHaveBeenCalledWith('2027-03-14T10:30:00.000Z')
+})
+
+it('retains the second repeated hour and lets the user explicitly choose the first', () => {
+	const onChange = vi.fn()
+	render(
+		<FeatureDateTime
+			component="countdown"
+			label="Target"
+			onChange={onChange}
+			ready
+			timeZone="America/Los_Angeles"
+			value="2026-11-01T09:30:00Z"
+		/>
+	)
+	fireEvent.click(screen.getByRole('button', { name: 'Change date & time' }))
+	const occurrence = screen.getByRole<HTMLSelectElement>('combobox', {
+		name: 'Occurrence',
+	})
+	expect(occurrence.value).toContain('Second')
+	fireEvent.change(screen.getByPlaceholderText('h:mm AM/PM'), {
+		target: { value: '1:31 AM' },
+	})
+	fireEvent.click(screen.getByRole('button', { name: 'Save date' }))
+	expect(onChange).toHaveBeenLastCalledWith('2026-11-01T09:31:00.000Z')
+	fireEvent.click(screen.getByRole('button', { name: 'Change date & time' }))
+	const choice = screen.getByRole<HTMLSelectElement>('combobox', { name: 'Occurrence' })
+	fireEvent.change(choice, { target: { value: choice.options[0].value } })
+	fireEvent.click(screen.getByRole('button', { name: 'Save date' }))
+	expect(onChange).toHaveBeenLastCalledWith('2026-11-01T08:30:00.000Z')
+})
+
+it('preserves the exact stored instant when saved unchanged and discards cancelled drafts', () => {
+	const onChange = vi.fn()
+	const value = '2026-11-01T01:30:42-08:00'
+	render(
+		<FeatureDateTime
+			component="countdown"
+			label="Target"
+			onChange={onChange}
+			ready
+			timeZone="America/Los_Angeles"
+			value={value}
+		/>
+	)
+	fireEvent.click(screen.getByRole('button', { name: 'Change date & time' }))
+	fireEvent.click(screen.getByRole('button', { name: 'Save date' }))
+	expect(onChange).toHaveBeenCalledExactlyOnceWith(value)
+	onChange.mockClear()
+	fireEvent.click(screen.getByRole('button', { name: 'Change date & time' }))
+	fireEvent.change(screen.getByPlaceholderText('MM/DD/YYYY'), {
+		target: { value: '12/05/2026' },
+	})
+	fireEvent.click(screen.getByRole('button', { name: 'Cancel' }))
+	expect(onChange).not.toHaveBeenCalled()
+	expect(screen.queryByRole('combobox')).toBeNull()
+	expect(screen.queryByText(value)).toBeNull()
+})
+
+it.each([
+	['2027-01-31', '2027-02-28'],
+	['2028-01-31', '2028-02-29'],
+])('edits %s as a calendar date without timezone drift', (value, expected) => {
+	const onChange = vi.fn()
+	render(
+		<FeatureDate
+			component="trip"
+			label="Departure"
+			onChange={onChange}
+			ready
+			value={value}
+		/>
+	)
+	fireEvent.click(screen.getByRole('button', { name: 'Change date' }))
+	fireEvent.change(screen.getByPlaceholderText('MM/DD/YYYY'), {
+		target: {
+			value: `${expected.slice(5, 7)}/${expected.slice(8, 10)}/${expected.slice(0, 4)}`,
+		},
+	})
+	fireEvent.click(screen.getByRole('button', { name: 'Save date' }))
+	expect(onChange).toHaveBeenCalledWith(expected)
+})
+
+it('gates editing on store readiness and only removes explicitly clearable dates', () => {
+	const onChange = vi.fn()
+	const view = render(
+		<FeatureDate
+			component="trip"
+			label="Departure"
+			onChange={onChange}
+			ready={false}
+			value="2027-01-01"
+		/>
+	)
+	expect(
+		screen.getByRole<HTMLButtonElement>('button', { name: 'Change date' }).disabled
+	).toBe(true)
+	view.rerender(
+		<FeatureDate
+			clearable
+			component="trip"
+			label="Departure"
+			onChange={onChange}
+			ready
+			value="2027-01-01"
+		/>
+	)
+	fireEvent.click(screen.getByRole('button', { name: 'Change date' }))
+	fireEvent.click(screen.getByRole('button', { name: 'Remove date' }))
+	expect(onChange).toHaveBeenCalledWith(null)
+})
+
+it('keeps a rejected date draft open so related fields can be corrected', () => {
+	const onChange = vi.fn(() => false)
+	render(
+		<FeatureDate
+			component="trip"
+			label="Departure"
+			onChange={onChange}
+			ready
+			value="2027-01-01"
+		/>
+	)
+	fireEvent.click(screen.getByRole('button', { name: 'Change date' }))
+	fireEvent.change(screen.getByPlaceholderText('MM/DD/YYYY'), {
+		target: { value: '01/02/2027' },
+	})
+	fireEvent.click(screen.getByRole('button', { name: 'Save date' }))
+	expect(onChange).toHaveBeenCalledWith('2027-01-02')
+	expect(screen.getByPlaceholderText<HTMLInputElement>('MM/DD/YYYY').value).toBe(
+		'01/02/2027'
+	)
+})
+
+it('keeps precise seconds while changing a calendar date and reports staged editing', () => {
+	const onChange = vi.fn()
+	const onEditingChange = vi.fn()
+	const view = render(
+		<FeatureDateTime
+			component="event"
+			label="Starts"
+			ready
+			timeZone="America/Los_Angeles"
+			value="2026-11-05T18:30:42.125-08:00"
+			onChange={onChange}
+			onEditingChange={onEditingChange}
+			submitLabel="Apply date & time"
+		/>
+	)
+	expect(screen.getByText('6:30:42.125 PM PST')).toBeTruthy()
+	fireEvent.click(screen.getByRole('button', { name: 'Change date & time' }))
+	expect(onEditingChange).toHaveBeenLastCalledWith(true)
+	fireEvent.change(screen.getByPlaceholderText('MM/DD/YYYY'), {
+		target: { value: '12/05/2026' },
+	})
+	fireEvent.click(screen.getByRole('button', { name: 'Apply date & time' }))
+	expect(onChange).toHaveBeenCalledWith('2026-12-06T02:30:42.125Z')
+	expect(onEditingChange).toHaveBeenLastCalledWith(false)
+	fireEvent.click(screen.getByRole('button', { name: 'Change date & time' }))
+	view.unmount()
+	expect(onEditingChange).toHaveBeenLastCalledWith(false)
+})
+
+it('retains a live calendar draft across optimistic updates and rejection until acknowledgement', () => {
+	let settle: ((accepted: boolean) => void) | undefined
+	function LiveCalendar() {
+		const original = '2027-01-01T08:00:42.125Z'
+		const [value, setValue] = React.useState(original)
+		const [saving, setSaving] = React.useState(false)
+		return (
+			<FeatureDateTime
+				component="countdown"
+				label="Target"
+				ready
+				saving={saving}
+				timeZone="America/Los_Angeles"
+				value={value}
+				onChange={(next, onSaved) => {
+					if (!next) {
+						return false
+					}
+					setValue(next)
+					setSaving(true)
+					settle = accepted => {
+						setSaving(false)
+						if (accepted) {
+							onSaved?.()
+						} else {
+							setValue(original)
+						}
+					}
+					return true
+				}}
+			/>
+		)
+	}
+	render(<LiveCalendar />)
+	fireEvent.click(screen.getByRole('button', { name: 'Change date & time' }))
+	fireEvent.change(screen.getByPlaceholderText('MM/DD/YYYY'), {
+		target: { value: '02/01/2027' },
+	})
+	fireEvent.click(screen.getByRole('button', { name: 'Save date' }))
+	expect(screen.getByText('Saving date…')).toBeTruthy()
+	expect(screen.queryByRole('combobox')).toBeNull()
+	expect(screen.queryByRole('button', { name: 'Cancel' })).toBeNull()
+	act(() => settle?.(false))
+	expect(screen.getByPlaceholderText<HTMLInputElement>('MM/DD/YYYY').value).toBe(
+		'02/01/2027'
+	)
+	expect(screen.getByPlaceholderText<HTMLInputElement>('h:mm AM/PM').value).toBe(
+		'12:00:42.125 AM'
+	)
+	fireEvent.click(screen.getByRole('button', { name: 'Save date' }))
+	act(() => settle?.(true))
+	expect(screen.queryByRole('combobox')).toBeNull()
+	expect(screen.getByText('Mon, February 1, 2027')).toBeTruthy()
+})
+
+it('identifies the BC era for astronomical year zero', () => {
+	render(
+		<FeatureDate
+			component="trip"
+			label="Departure"
+			ready
+			value="0000-01-01"
+			onChange={() => {}}
+		/>
+	)
+	expect(screen.getByText('Sat, January 1, 1 BC')).toBeTruthy()
+})
+
+it('restores the parent calendar editing guard when an Activity becomes visible again', async () => {
+	function Form({ mode }: { mode: 'hidden' | 'visible' }) {
+		const [editing, setEditing] = React.useState(false)
+		return (
+			<>
+				<button disabled={editing}>Outer save</button>
+				<React.Activity mode={mode}>
+					<FeatureDate
+						component="trip"
+						label="Departure"
+						ready
+						value="2027-01-01"
+						onChange={() => {}}
+						onEditingChange={setEditing}
+					/>
+				</React.Activity>
+			</>
+		)
+	}
+	const view = render(<Form mode="visible" />)
+	fireEvent.click(screen.getByRole('button', { name: 'Change date' }))
+	expect(
+		screen.getByRole<HTMLButtonElement>('button', { name: 'Outer save' }).disabled
+	).toBe(true)
+	view.rerender(<Form mode="hidden" />)
+	view.rerender(<Form mode="visible" />)
+	expect(
+		screen.getByRole<HTMLButtonElement>('button', { name: 'Outer save' }).disabled
+	).toBe(true)
+})
+
+it('keeps invalid inline drafts out of the parent and uses one outer save', () => {
+	const onChange = vi.fn()
+	const onEditingChange = vi.fn()
+	render(
+		<FeatureDateTime
+			inline
+			component="event"
+			label="Starts"
+			ready
+			timeZone="America/Los_Angeles"
+			value="2026-11-05T18:30:00-08:00"
+			onChange={onChange}
+			onEditingChange={onEditingChange}
+		/>
+	)
+	expect(screen.queryByRole('button', { name: 'Save date' })).toBeNull()
+	fireEvent.change(screen.getByPlaceholderText('MM/DD/YYYY'), {
+		target: { value: '02/30/2027' },
+	})
+	expect(onChange).not.toHaveBeenCalled()
+	expect(onEditingChange).toHaveBeenLastCalledWith(true)
+	fireEvent.change(screen.getByPlaceholderText('MM/DD/YYYY'), {
+		target: { value: '02/28/2027' },
+	})
+	expect(onChange).toHaveBeenLastCalledWith('2027-03-01T02:30:00.000Z')
+	expect(onEditingChange).toHaveBeenLastCalledWith(false)
+})
+
+it('clears an inline date only when requested and can add it again', () => {
+	const onChange = vi.fn()
+	render(
+		<FeatureDate
+			inline
+			clearable
+			component="trip"
+			label="Departure"
+			ready
+			value="2027-01-01"
+			onChange={onChange}
+		/>
+	)
+	fireEvent.click(screen.getByRole('button', { name: 'Clear' }))
+	expect(onChange).toHaveBeenLastCalledWith(null)
+	expect(screen.queryByPlaceholderText('MM/DD/YYYY')).toBeNull()
+	fireEvent.click(screen.getByRole('button', { name: 'Add date' }))
+	expect(onChange).toHaveBeenLastCalledWith('2027-01-01')
+})
+
+it('accepts minute-only edits to an instant that originally included fractional seconds', () => {
+	const onChange = vi.fn()
+	render(
+		<FeatureDateTime
+			component="countdown"
+			label="Target"
+			ready
+			timeZone="America/Los_Angeles"
+			value="2026-11-05T18:30:42.125-08:00"
+			onChange={onChange}
+		/>
+	)
+	fireEvent.click(screen.getByRole('button', { name: 'Change date & time' }))
+	fireEvent.change(screen.getByPlaceholderText('h:mm AM/PM'), {
+		target: { value: '7:45 PM' },
+	})
+	fireEvent.click(screen.getByRole('button', { name: 'Save date' }))
+	expect(onChange).toHaveBeenCalledWith('2026-11-06T03:45:00.000Z')
+})