@ncds/ui-admin 1.8.28-alpha.0 → 1.8.28-alpha.1

package/dist/temp/src/components/forms-and-input/date-picker/__tests__/DatePicker.input.test.js

@@ -0,0 +1,358 @@
+import { createElement, useState } from 'react';
+import { createRoot } from 'react-dom/client';
+import { act } from 'react-dom/test-utils';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { DatePicker } from '../DatePicker';
+globalThis.IS_REACT_ACT_ENVIRONMENT = true;
+const LOADED_DATE = '2024-03-15';
+const SELECTED_DATE = '2024-03-18';
+const MIN_DATE = '2024-03-10';
+const MAX_DATE = '2024-03-25';
+const OUT_OF_RANGE_DATE = '2024-04-30';
+const RANGE_OPTIONS = { minDate: MIN_DATE, maxDate: MAX_DATE };
+const mounted = [];
+const mountElement = (element) => {
+    const container = document.createElement('div');
+    document.body.appendChild(container);
+    const root = createRoot(container);
+    act(() => {
+        root.render(element);
+    });
+    mounted.push({ root, container });
+    return container;
+};
+const mount = (props) => mountElement(createElement(DatePicker, { currentDate: '', onChangeDate: () => undefined, ...props }));
+afterEach(() => {
+    for (const { root, container } of mounted.splice(0)) {
+        act(() => {
+            root.unmount();
+        });
+        container.remove();
+    }
+    document.body.innerHTML = '';
+    vi.restoreAllMocks();
+});
+const inputOf = (container) => {
+    const input = container.querySelector('input.flatpickr-input');
+    if (!input)
+        throw new Error('flatpickr 입력 칸을 찾을 수 없습니다');
+    return input;
+};
+const typeInto = (input, value) => {
+    act(() => {
+        input.value = value;
+        input.dispatchEvent(new Event('input', { bubbles: true }));
+    });
+};
+const pick = (input, date, triggerChange) => {
+    act(() => {
+        input._flatpickr.setDate(date, triggerChange);
+    });
+};
+/** blur 동기화는 한 틱 뒤에 실행되므로 매크로태스크를 한 번 흘려보낸다 */
+const blurAndFlush = async (input) => {
+    act(() => {
+        input.dispatchEvent(new Event('blur'));
+    });
+    await act(async () => {
+        await new Promise((resolve) => setTimeout(resolve, 0));
+    });
+};
+describe('RDP-01 onValidationError 없이 min/max 를 줄 때', () => {
+    it('RDP-01 범위 밖 날짜를 캘린더(onChange) 경로로 고르면 onChangeDate 로 그대로 통지한다', () => {
+        // 현재 동작 고정 — 결함 후보: 후속 이슈 (문서상 허용 계약이나 vanilla 는 같은 옵션에서 그 칸을 비움 — React/vanilla 계약 불일치)
+        const onChangeDate = vi.fn();
+        const container = mount({ currentDate: LOADED_DATE, onChangeDate, datePickerOptions: RANGE_OPTIONS });
+        pick(inputOf(container), OUT_OF_RANGE_DATE, true);
+        expect(onChangeDate).toHaveBeenCalledWith(OUT_OF_RANGE_DATE);
+    });
+    it('RDP-01 범위 밖 날짜가 통지 없이 반영된 채 blur 되면 blur 동기화로 그대로 통지한다', async () => {
+        // 현재 동작 고정 — 결함 후보: 후속 이슈 (blur 동기화 경로도 핸들러가 없으면 위반 검사를 건너뛰어 범위 밖 날짜를 통지함)
+        const onChangeDate = vi.fn();
+        const container = mount({ currentDate: LOADED_DATE, onChangeDate, datePickerOptions: RANGE_OPTIONS });
+        const input = inputOf(container);
+        pick(input, OUT_OF_RANGE_DATE, false);
+        await blurAndFlush(input);
+        expect(onChangeDate).toHaveBeenCalledWith(OUT_OF_RANGE_DATE);
+    });
+    it('RDP-01 범위 안 날짜는 그대로 통지한다', () => {
+        const onChangeDate = vi.fn();
+        const container = mount({ currentDate: LOADED_DATE, onChangeDate, datePickerOptions: RANGE_OPTIONS });
+        pick(inputOf(container), SELECTED_DATE, true);
+        expect(onChangeDate).toHaveBeenCalledWith(SELECTED_DATE);
+    });
+    it.todo('RDP-01 onValidationError 가 없을 때 min/max 밖 날짜 처리가 vanilla 와 같은 계약으로 통일된다 (차단 또는 허용 — 후속 이슈에서 결정)');
+});
+describe('RDP-03 입력 칸 비우기 · 숫자 없는 입력', () => {
+    it.each(['', '   '])('RDP-03 입력 칸을 비우면(%j) onChangeDate("") 로 통지한다', (typed) => {
+        const onChangeDate = vi.fn();
+        const container = mount({ currentDate: LOADED_DATE, onChangeDate });
+        typeInto(inputOf(container), typed);
+        expect(inputOf(container).value).toBe('');
+        expect(onChangeDate).toHaveBeenCalledWith('');
+    });
+    it('RDP-03 이미 빈 값을 로드한 상태에서 비우면 다시 통지하지 않는다', () => {
+        const onChangeDate = vi.fn();
+        const container = mount({ currentDate: '', onChangeDate });
+        typeInto(inputOf(container), '');
+        expect(onChangeDate).not.toHaveBeenCalled();
+    });
+    it('RDP-03 숫자 없는 입력은 직전 날짜로 복원하고 통지하지 않는다', () => {
+        const onChangeDate = vi.fn();
+        const container = mount({ currentDate: LOADED_DATE, onChangeDate });
+        typeInto(inputOf(container), 'abc');
+        expect(inputOf(container).value).toBe(LOADED_DATE);
+        expect(onChangeDate).not.toHaveBeenCalled();
+    });
+    it('RDP-03 숫자 없는 입력인데 직전 날짜가 없으면 비우고 통지하지 않는다', () => {
+        const onChangeDate = vi.fn();
+        const container = mount({ currentDate: '', onChangeDate });
+        typeInto(inputOf(container), 'abc');
+        expect(inputOf(container).value).toBe('');
+        expect(onChangeDate).not.toHaveBeenCalled();
+    });
+});
+describe('RDP-04 flatpickr onChange 의 빈·무효 선택', () => {
+    it('RDP-04 빈 선택(clear)은 입력을 비우고 flatpickr 가 뒤이어 보내는 input 이벤트로 "" 를 통지한다', () => {
+        const onChangeDate = vi.fn();
+        const container = mount({ currentDate: LOADED_DATE, onChangeDate });
+        pick(inputOf(container), '', true);
+        expect(inputOf(container).value).toBe('');
+        expect(onChangeDate).toHaveBeenCalledWith('');
+    });
+    it('RDP-04 무효 Date 는 직전 선택 날짜(_previousDateBeforeInput)로 복원하고 통지하지 않는다', () => {
+        const onChangeDate = vi.fn();
+        const container = mount({ currentDate: LOADED_DATE, onChangeDate });
+        const input = inputOf(container);
+        pick(input, SELECTED_DATE, true);
+        onChangeDate.mockClear();
+        pick(input, new Date(Number.NaN), true);
+        expect(input.value).toBe(SELECTED_DATE);
+        expect(onChangeDate).not.toHaveBeenCalled();
+    });
+    it('RDP-04 무효 Date 인데 직전 선택이 없으면 비우고, 로드값도 비어 있으면 통지하지 않는다', () => {
+        const onChangeDate = vi.fn();
+        const container = mount({ currentDate: '', onChangeDate });
+        pick(inputOf(container), new Date(Number.NaN), true);
+        expect(inputOf(container).value).toBe('');
+        expect(onChangeDate).not.toHaveBeenCalled();
+    });
+});
+describe('RDP-02 onValidationError 가 있을 때 위반 날짜', () => {
+    it.each([
+        { label: 'maxDate', date: OUT_OF_RANGE_DATE, violations: ['maxDate'] },
+        { label: 'minDate', date: '2024-03-01', violations: ['minDate'] },
+    ])('RDP-02 $label 위반은 통지하지 않고 onValidationError 로 보고한다', ({ date, violations }) => {
+        const onChangeDate = vi.fn();
+        const onValidationError = vi.fn();
+        const container = mount({
+            currentDate: LOADED_DATE,
+            onChangeDate,
+            onValidationError,
+            datePickerOptions: RANGE_OPTIONS,
+        });
+        pick(inputOf(container), date, true);
+        expect(onChangeDate).not.toHaveBeenCalled();
+        expect(onValidationError).toHaveBeenCalledWith(expect.objectContaining({
+            date: expect.any(Date),
+            minDate: expect.any(Date),
+            maxDate: expect.any(Date),
+            violations,
+        }));
+    });
+    it('RDP-02 통지는 막지만 입력 칸에는 범위 밖 날짜가 그대로 남는다', () => {
+        // 현재 동작 고정 — 결함 후보: 후속 이슈 (부모 값은 그대로인데 화면은 위반 날짜 — previousDate 는 "복원 시 사용"으로 문서화됐지만 컴포넌트가 되돌리지 않음)
+        const container = mount({
+            currentDate: LOADED_DATE,
+            onChangeDate: vi.fn(),
+            onValidationError: vi.fn(),
+            datePickerOptions: RANGE_OPTIONS,
+        });
+        pick(inputOf(container), OUT_OF_RANGE_DATE, true);
+        expect(inputOf(container).value).toBe(OUT_OF_RANGE_DATE);
+    });
+    it('RDP-02 소비자가 같은 값으로 state 를 되돌려도 currentDate 가 그대로라 입력 칸이 복원되지 않는다', () => {
+        // 현재 동작 고정 — 결함 후보: 후속 이슈 (props 로는 되돌릴 수 없어 소비자 되돌림 계약이 React 에서는 ref 없이 성립하지 않음)
+        const Harness = () => {
+            const [date, setDate] = useState(LOADED_DATE);
+            return createElement(DatePicker, {
+                currentDate: date,
+                onChangeDate: setDate,
+                onValidationError: () => setDate(LOADED_DATE),
+                datePickerOptions: RANGE_OPTIONS,
+            });
+        };
+        const container = mountElement(createElement(Harness));
+        pick(inputOf(container), OUT_OF_RANGE_DATE, true);
+        expect(inputOf(container).value).toBe(OUT_OF_RANGE_DATE);
+    });
+    it.todo('RDP-02 min/max 위반 날짜는 입력 칸을 직전 유효 날짜로 되돌린다 (기대 동작)');
+    it('RDP-02 currentDate 로 로드만 하고 선택 이력이 없으면 위반 보고의 previousDate 가 undefined 다', () => {
+        // 현재 동작 고정 — 결함 후보: 후속 이슈 (onReady 시점에 값이 아직 없어 _previousDateBeforeInput 이 비어 있음 — 되돌릴 기준 날짜를 받지 못함)
+        const onValidationError = vi.fn();
+        const container = mount({ currentDate: LOADED_DATE, onValidationError, datePickerOptions: RANGE_OPTIONS });
+        pick(inputOf(container), OUT_OF_RANGE_DATE, true);
+        expect(onValidationError).toHaveBeenCalledWith(expect.objectContaining({ previousDate: undefined }));
+    });
+    it('RDP-02 flatpickr 표기(minDate "today")도 config 에서 Date 로 해석된 값으로 판정해 보고한다', () => {
+        const onChangeDate = vi.fn();
+        const onValidationError = vi.fn();
+        const container = mount({
+            currentDate: '',
+            onChangeDate,
+            onValidationError,
+            datePickerOptions: { minDate: 'today' },
+        });
+        pick(inputOf(container), '2000-01-01', true);
+        expect(onChangeDate).not.toHaveBeenCalled();
+        expect(onValidationError).toHaveBeenCalledWith(expect.objectContaining({ minDate: expect.any(Date), violations: ['minDate'] }));
+    });
+});
+describe('RDP-05 · RDP-11 시·분 입력 칸', () => {
+    const mountTime = () => {
+        const container = mount({
+            currentDate: `${LOADED_DATE} 10:00`,
+            datePickerOptions: { enableTime: true, dateFormat: 'Y-m-d H:i' },
+        });
+        const hour = container.querySelector('.flatpickr-hour');
+        const minute = container.querySelector('.flatpickr-minute');
+        if (!hour || !minute)
+            throw new Error('시간 입력 칸이 없습니다');
+        return { container, hour, minute };
+    };
+    it.each([
+        { field: 'hour', typed: '123', expected: '12' },
+        { field: 'hour', typed: '07', expected: '07' },
+        { field: 'minute', typed: '599', expected: '59' },
+        { field: 'minute', typed: '05', expected: '05' },
+    ])('RDP-05 $field 칸에 $typed 를 치면 $expected 로 정리한다', ({ field, typed, expected }) => {
+        const inputs = mountTime();
+        typeInto(inputs[field], typed);
+        expect(inputs[field].value).toBe(expected);
+    });
+    it.each([
+        { field: 'hour', typed: '24' },
+        { field: 'hour', typed: '99' },
+        { field: 'minute', typed: '60' },
+    ])('RDP-11 $field 칸의 범위 밖 값 $typed 는 정리하지 않고 원문을 유지한다', ({ field, typed }) => {
+        // 현재 동작 고정 — 결함 후보: 후속 이슈 (formatHourInput·formatMinuteInput 이 범위 밖을 원문 반환 — DU-02 와 같은 뿌리)
+        const inputs = mountTime();
+        typeInto(inputs[field], typed);
+        expect(inputs[field].value).toBe(typed);
+    });
+    it.each([
+        { hour: '99', minute: '30', expected: `${LOADED_DATE} 03:30` },
+        { hour: '24', minute: '75', expected: `${LOADED_DATE} 00:15` },
+    ])('RDP-11 범위 밖 시·분($hour:$minute)은 blur 때 flatpickr 가 나머지 연산으로 감아 $expected 로 바뀐다', ({ hour, minute, expected }) => {
+        // 현재 동작 고정 — 결함 후보: 후속 이슈 (사용자가 친 값과 다른 시각이 조용히 선택됨 — 23·59 로 제한하거나 거부해야 함)
+        const inputs = mountTime();
+        act(() => {
+            typeInto(inputs.hour, hour);
+            inputs.hour.dispatchEvent(new Event('blur'));
+            typeInto(inputs.minute, minute);
+            inputs.minute.dispatchEvent(new Event('blur'));
+        });
+        expect(inputOf(inputs.container).value).toBe(expected);
+    });
+    it.todo('RDP-11 시 24 이상 · 분 60 이상은 23 · 59 로 제한하거나 입력을 거부한다 (기대 동작)');
+});
+describe('RDP-05 시간 옵션의 currentDate 기본값', () => {
+    it.each([
+        { label: '시간 전용 시작', options: { enableTime: true, noCalendar: true }, isEndDate: false, expected: '00:00' },
+        { label: '시간 전용 종료', options: { enableTime: true, noCalendar: true }, isEndDate: true, expected: '23:59' },
+        {
+            label: '시간 전용 초 포함 종료',
+            options: { enableTime: true, noCalendar: true, enableSeconds: true, dateFormat: 'H:i:S' },
+            isEndDate: true,
+            expected: '23:59:59',
+        },
+        {
+            label: '시간 전용 초 포함 시작',
+            options: { enableTime: true, noCalendar: true, enableSeconds: true, dateFormat: 'H:i:S' },
+            isEndDate: false,
+            expected: '00:00:00',
+        },
+    ])('RDP-05 $label 이고 currentDate 가 비어 있으면 $expected 로 채운다', ({ options, isEndDate, expected }) => {
+        const container = mount({ currentDate: '', isEndDate, datePickerOptions: { dateFormat: 'H:i', ...options } });
+        expect(inputOf(container).value).toBe(expected);
+    });
+    it.each([
+        { label: '시작', isEndDate: false, options: {}, expected: `${LOADED_DATE} 00:00` },
+        { label: '종료', isEndDate: true, options: {}, expected: `${LOADED_DATE} 23:59` },
+        {
+            label: '초 포함 종료',
+            isEndDate: true,
+            options: { enableSeconds: true, dateFormat: 'Y-m-d H:i:S' },
+            expected: `${LOADED_DATE} 23:59:59`,
+        },
+    ])('RDP-05 날짜+시간 $label 칸에 시간 없는 날짜를 주면 $expected 로 채운다', ({ isEndDate, options, expected }) => {
+        const container = mount({
+            currentDate: LOADED_DATE,
+            isEndDate,
+            datePickerOptions: { enableTime: true, dateFormat: 'Y-m-d H:i', ...options },
+        });
+        expect(inputOf(container).value).toBe(expected);
+    });
+    it('RDP-05 날짜+시간인데 currentDate 가 비어 있으면 빈 값으로 둔다', () => {
+        const container = mount({ currentDate: '', datePickerOptions: { enableTime: true, dateFormat: 'Y-m-d H:i' } });
+        expect(inputOf(container).value).toBe('');
+    });
+});
+describe('RDP-05 시간 전용 값 통지', () => {
+    it('RDP-05 시간 전용 값은 날짜로 해석되지 않으므로 dateStr 원문(14:30)으로 통지한다', () => {
+        const onChangeDate = vi.fn();
+        const container = mount({
+            currentDate: '',
+            onChangeDate,
+            datePickerOptions: { enableTime: true, noCalendar: true, dateFormat: 'H:i' },
+        });
+        pick(inputOf(container), '14:30', true);
+        expect(onChangeDate).toHaveBeenCalledWith('14:30');
+    });
+});
+describe('RDP-04 blur 동기화 · 복원 보조 분기', () => {
+    it('RDP-04 무효 값이 통지 없이 반영된 채 blur 되면 통지하지 않는다', async () => {
+        vi.spyOn(console, 'warn').mockImplementation(() => undefined);
+        const onChangeDate = vi.fn();
+        const container = mount({ currentDate: LOADED_DATE, onChangeDate });
+        const input = inputOf(container);
+        pick(input, new Date(Number.NaN), false);
+        onChangeDate.mockClear();
+        await blurAndFlush(input);
+        expect(onChangeDate).not.toHaveBeenCalled();
+    });
+    it('RDP-04 선택된 값이 무효면 숫자 없는 입력에 복원 대신 비운다', () => {
+        vi.spyOn(console, 'warn').mockImplementation(() => undefined);
+        const container = mount({ currentDate: '' });
+        const input = inputOf(container);
+        pick(input, new Date(Number.NaN), false);
+        typeInto(input, 'abc');
+        expect(input.value).toBe('');
+    });
+    it('RDP-04 선택이 없는 칸의 blur 는 통지하지 않는다', async () => {
+        const onChangeDate = vi.fn();
+        const container = mount({ currentDate: '', onChangeDate });
+        await blurAndFlush(inputOf(container));
+        expect(onChangeDate).not.toHaveBeenCalled();
+    });
+    it('RDP-04 한 틱 안에 blur 가 두 번 오면 앞 타이머를 취소하고 한 번만 동기화한다', async () => {
+        const onChangeDate = vi.fn();
+        const container = mount({ currentDate: LOADED_DATE, onChangeDate });
+        const input = inputOf(container);
+        pick(input, SELECTED_DATE, false);
+        act(() => {
+            input.dispatchEvent(new Event('blur'));
+        });
+        await blurAndFlush(input);
+        // 의도적 횟수 확인 — 앞 타이머 취소(중복 통지 없음)가 이 경로의 관찰 대상이다
+        expect(onChangeDate.mock.calls).toEqual([[SELECTED_DATE]]);
+    });
+});
+describe('RDP-15 dateFormat 이 빈 문자열일 때', () => {
+    it('RDP-15 dateFormat: "" 이면 Y-m-d 기준으로 완성 판정해 타이핑한 날짜를 통지한다', () => {
+        const onChangeDate = vi.fn();
+        const container = mount({ currentDate: LOADED_DATE, onChangeDate, datePickerOptions: { dateFormat: '' } });
+        typeInto(inputOf(container), SELECTED_DATE);
+        expect(onChangeDate).toHaveBeenCalledWith(SELECTED_DATE);
+    });
+});

package/dist/temp/src/components/forms-and-input/date-picker/__tests__/DatePicker.position.test.d.ts

@@ -0,0 +1 @@
+export {};