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

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

@@ -0,0 +1,544 @@
+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(/*#__PURE__*/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 로 보고한다', _ref => {
+    let {
+      date,
+      violations
+    } = _ref;
+    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 /*#__PURE__*/createElement(DatePicker, {
+        currentDate: date,
+        onChangeDate: setDate,
+        onValidationError: () => setDate(LOADED_DATE),
+        datePickerOptions: RANGE_OPTIONS
+      });
+    };
+    const container = mountElement(/*#__PURE__*/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 로 정리한다', _ref2 => {
+    let {
+      field,
+      typed,
+      expected
+    } = _ref2;
+    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 는 정리하지 않고 원문을 유지한다', _ref3 => {
+    let {
+      field,
+      typed
+    } = _ref3;
+    // 현재 동작 고정 — 결함 후보: 후속 이슈 (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 로 바뀐다', _ref4 => {
+    let {
+      hour,
+      minute,
+      expected
+    } = _ref4;
+    // 현재 동작 고정 — 결함 후보: 후속 이슈 (사용자가 친 값과 다른 시각이 조용히 선택됨 — 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 로 채운다', _ref5 => {
+    let {
+      options,
+      isEndDate,
+      expected
+    } = _ref5;
+    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 로 채운다', _ref6 => {
+    let {
+      isEndDate,
+      options,
+      expected
+    } = _ref6;
+    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);
+  });
+});