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

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

@@ -0,0 +1,546 @@
+// @vitest-environment jsdom
+//
+// React DatePicker 위치·리스너·portal 컨테이너·정리·표현 위험 경로 — 위험 목록표 RDP-06~10 · CI-01 (PR-7a).
+// jsdom 은 레이아웃을 계산하지 않으므로 getBoundingClientRect·innerHeight·offsetHeight 를 stub 하고
+// afterEach 에서 원복한다. flatpickr 는 실구현을 쓴다.
+import { Calendar, Clock } from '@ncds/ui-admin-icon';
+import flatpickr from 'flatpickr';
+import { createElement } 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 VIEWPORT_HEIGHT = 800;
+const CALENDAR_HEIGHT = 300;
+/** DatePicker.tsx 의 CALENDAR_GAP 과 같은 값 — 캘린더와 입력 사이 간격 */
+const CALENDAR_GAP = 6;
+/** 아래 공간 100px — 캘린더(300 + 6)가 들어가지 않는다 */
+const BOTTOM_NEAR_EDGE = 700;
+/** 아래 공간 700px — 캘린더가 들어간다 */
+const BOTTOM_WITH_ROOM = 100;
+const FLIPPED_TOP = `${-(CALENDAR_HEIGHT + CALENDAR_GAP)}px`;
+const ICON_SIZE_XS = '14';
+const ICON_SIZE_SM = '16';
+const PORTAL_SELECTOR = ':scope > .ncua-date-picker--portal';
+const mounted = [];
+/** overflow 부모(기본 auto) 안에 마운트한다 — auto 면 collectScrollParents 가 이 부모를 스크롤 대상으로 잡는다 */
+const mount = function (props) {
+  let overflow = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'auto';
+  const scrollParent = document.createElement('div');
+  scrollParent.style.overflow = overflow;
+  const container = document.createElement('div');
+  scrollParent.appendChild(container);
+  document.body.appendChild(scrollParent);
+  const root = createRoot(container);
+  const render = next => {
+    act(() => {
+      root.render(/*#__PURE__*/createElement(DatePicker, {
+        currentDate: LOADED_DATE,
+        onChangeDate: () => undefined,
+        ...next
+      }));
+    });
+  };
+  render(props);
+  const entry = {
+    root,
+    container,
+    scrollParent
+  };
+  mounted.push(entry);
+  const unmount = () => {
+    act(() => {
+      root.unmount();
+    });
+    mounted.splice(mounted.indexOf(entry), 1);
+  };
+  return {
+    container,
+    scrollParent,
+    render,
+    unmount
+  };
+};
+afterEach(() => {
+  for (const {
+    root,
+    scrollParent
+  } of mounted.splice(0)) {
+    act(() => {
+      root.unmount();
+    });
+    scrollParent.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 calendarOf = input => input._flatpickr.calendarContainer;
+const open = input => {
+  act(() => {
+    input._flatpickr.open();
+  });
+};
+const close = input => {
+  act(() => {
+    input._flatpickr.close();
+  });
+};
+/** 입력 wrapper 의 아래 끝(bottom)·뷰포트 높이·캘린더 높이를 고정한다 */
+const stubLayout = bottom => {
+  const rect = vi.spyOn(Element.prototype, 'getBoundingClientRect').mockReturnValue({
+    bottom
+  });
+  vi.spyOn(window, 'innerHeight', 'get').mockReturnValue(VIEWPORT_HEIGHT);
+  vi.spyOn(HTMLElement.prototype, 'offsetHeight', 'get').mockReturnValue(CALENDAR_HEIGHT);
+  return {
+    setBottom: next => rect.mockReturnValue({
+      bottom: next
+    })
+  };
+};
+describe('RDP-06 열린 캘린더 밖 mousedown 시 시간 입력 blur', () => {
+  const TIME_OPTIONS = {
+    enableTime: true,
+    dateFormat: 'Y-m-d H:i'
+  };
+  const hourOf = input => {
+    const hour = calendarOf(input).querySelector('.flatpickr-hour');
+    if (!hour) throw new Error('시 입력 칸이 없습니다');
+    return hour;
+  };
+  it.each([{
+    mode: 'static',
+    portal: false
+  }, {
+    mode: 'portal',
+    portal: true
+  }])('RDP-06 $mode: 바깥 mousedown 은 포커스된 시 입력을 blur 한다', _ref => {
+    let {
+      portal
+    } = _ref;
+    const {
+      container
+    } = mount({
+      portal,
+      currentDate: `${LOADED_DATE} 10:00`,
+      datePickerOptions: TIME_OPTIONS
+    });
+    const input = inputOf(container);
+    open(input);
+    const hour = hourOf(input);
+    hour.focus();
+    document.body.dispatchEvent(new MouseEvent('mousedown', {
+      bubbles: true
+    }));
+    expect(document.activeElement).not.toBe(hour);
+  });
+  it.each([{
+    mode: 'static',
+    portal: false
+  }, {
+    mode: 'portal',
+    portal: true
+  }])('RDP-06 $mode: 캘린더 안 mousedown 은 시 입력 포커스를 유지한다', _ref2 => {
+    let {
+      portal
+    } = _ref2;
+    const {
+      container
+    } = mount({
+      portal,
+      currentDate: `${LOADED_DATE} 10:00`,
+      datePickerOptions: TIME_OPTIONS
+    });
+    const input = inputOf(container);
+    open(input);
+    const hour = hourOf(input);
+    hour.focus();
+    hour.dispatchEvent(new MouseEvent('mousedown', {
+      bubbles: true
+    }));
+    expect(document.activeElement).toBe(hour);
+  });
+  it.each([{
+    mode: 'static',
+    portal: false
+  }, {
+    mode: 'portal',
+    portal: true
+  }])('RDP-06 $mode: 캘린더가 닫혀 있으면 바깥 mousedown 이 포커스를 건드리지 않는다', _ref3 => {
+    let {
+      portal
+    } = _ref3;
+    const {
+      container
+    } = mount({
+      portal,
+      currentDate: `${LOADED_DATE} 10:00`,
+      datePickerOptions: TIME_OPTIONS
+    });
+    const hour = hourOf(inputOf(container));
+    hour.focus();
+    document.body.dispatchEvent(new MouseEvent('mousedown', {
+      bubbles: true
+    }));
+    expect(document.activeElement).toBe(hour);
+  });
+});
+describe('RDP-07 static 위치 조정', () => {
+  it.each([{
+    label: '아래 공간이 부족하면 위로 뒤집는다',
+    bottom: BOTTOM_NEAR_EDGE,
+    expected: FLIPPED_TOP
+  }, {
+    label: '아래 공간이 충분하면 top 을 비운다',
+    bottom: BOTTOM_WITH_ROOM,
+    expected: ''
+  }])('RDP-07 open 시 $label', _ref4 => {
+    let {
+      bottom,
+      expected
+    } = _ref4;
+    stubLayout(bottom);
+    const {
+      container
+    } = mount({});
+    const input = inputOf(container);
+    open(input);
+    expect(calendarOf(input).style.top).toBe(expected);
+  });
+  it.each([{
+    label: 'scroll 부모 scroll',
+    fire: scrollParent => scrollParent.dispatchEvent(new Event('scroll'))
+  }, {
+    label: 'window scroll',
+    fire: () => window.dispatchEvent(new Event('scroll'))
+  }, {
+    label: 'window resize',
+    fire: () => window.dispatchEvent(new Event('resize'))
+  }])('RDP-07 열린 동안 $label 이 오면 위치를 다시 계산한다', _ref5 => {
+    let {
+      fire
+    } = _ref5;
+    const layout = stubLayout(BOTTOM_WITH_ROOM);
+    const {
+      container,
+      scrollParent
+    } = mount({});
+    const input = inputOf(container);
+    open(input);
+    layout.setBottom(BOTTOM_NEAR_EDGE);
+    fire(scrollParent);
+    expect(calendarOf(input).style.top).toBe(FLIPPED_TOP);
+  });
+  it('RDP-07 overflow 가 visible 인 부모는 scroll 대상으로 잡지 않는다', () => {
+    // jsdom 은 overflow 단축 속성을 overflowY 로 펼치지 않으므로 inline overflow:visible 부모만 두 값을 visible 로 돌려준다
+    const originalGetComputedStyle = window.getComputedStyle.bind(window);
+    vi.spyOn(window, 'getComputedStyle').mockImplementation((element, pseudo) => element instanceof HTMLElement && element.style.overflow === 'visible' ? {
+      overflow: 'visible',
+      overflowY: 'visible'
+    } : originalGetComputedStyle(element, pseudo));
+    const layout = stubLayout(BOTTOM_WITH_ROOM);
+    const {
+      container,
+      scrollParent
+    } = mount({}, 'visible');
+    const input = inputOf(container);
+    open(input);
+    layout.setBottom(BOTTOM_NEAR_EDGE);
+    scrollParent.dispatchEvent(new Event('scroll'));
+    expect(calendarOf(input).style.top).toBe('');
+  });
+  it('RDP-13 static: close 뒤에도 scroll·resize 리스너가 남아 닫힌 캘린더 위치를 계속 고친다', () => {
+    // 현재 동작 고정 — 결함 후보: 후속 이슈 (react-flatpickr 4.0.11 이 렌더 effect 에서 set('onClose', [blur]) 로 덮어써 onReady 에서 push 한 해제 훅이 사라짐)
+    const layout = stubLayout(BOTTOM_WITH_ROOM);
+    const {
+      container,
+      scrollParent
+    } = mount({});
+    const input = inputOf(container);
+    open(input);
+    close(input);
+    layout.setBottom(BOTTOM_NEAR_EDGE);
+    scrollParent.dispatchEvent(new Event('scroll'));
+    window.dispatchEvent(new Event('scroll'));
+    window.dispatchEvent(new Event('resize'));
+    expect(calendarOf(input).style.top).toBe(FLIPPED_TOP);
+  });
+  it.todo('RDP-13 static: close 하면 scroll 부모·window 의 위치 조정 리스너를 해제한다 (기대 동작)');
+});
+describe('RDP-08 portal 컨테이너', () => {
+  const portalContainers = () => Array.from(document.body.querySelectorAll(PORTAL_SELECTOR));
+  it('RDP-08 body 직속에 컨테이너 1개를 만들고 캘린더를 그 안에 둔다', () => {
+    const {
+      container
+    } = mount({
+      portal: true
+    });
+    const containers = portalContainers();
+    expect(containers).toHaveLength(1);
+    expect(containers[0].contains(calendarOf(inputOf(container)))).toBe(true);
+    expect(containers[0].classList.contains('ncua-date-picker--xs')).toBe(true);
+  });
+  it('RDP-08 재렌더 시 컨테이너를 재사용하며 size·has-time 변경을 className 에 반영한다', () => {
+    const {
+      render
+    } = mount({
+      portal: true
+    });
+    const [first] = portalContainers();
+    render({
+      portal: true,
+      size: 'sm',
+      datePickerOptions: {
+        enableTime: true,
+        dateFormat: 'Y-m-d H:i'
+      }
+    });
+    expect(portalContainers()).toEqual([first]);
+    expect(first.classList.contains('ncua-date-picker--sm')).toBe(true);
+    expect(first.classList.contains('ncua-date-picker--xs')).toBe(false);
+    expect(first.classList.contains('ncua-date-picker--has-time')).toBe(true);
+  });
+  it.each([{
+    label: 'window scroll',
+    fire: () => window.dispatchEvent(new Event('scroll'))
+  }, {
+    label: 'scroll 부모 scroll',
+    fire: scrollParent => scrollParent.dispatchEvent(new Event('scroll'))
+  }])('RDP-08 열린 동안 $label 이 오면 캘린더 위치를 다시 잡는다', _ref6 => {
+    let {
+      fire
+    } = _ref6;
+    const {
+      container,
+      scrollParent
+    } = mount({
+      portal: true
+    });
+    const input = inputOf(container);
+    open(input);
+    const position = vi.spyOn(input._flatpickr, '_positionCalendar');
+    fire(scrollParent);
+    expect(position).toHaveBeenCalled();
+  });
+  it('RDP-13 portal: close 뒤에도 scroll 리스너가 남아 닫힌 캘린더 위치를 계속 계산한다', () => {
+    // 현재 동작 고정 — 결함 후보: 후속 이슈 (static 과 같은 원인 — onClose 해제 훅이 react-flatpickr 에 덮어써짐)
+    const {
+      container,
+      scrollParent
+    } = mount({
+      portal: true
+    });
+    const input = inputOf(container);
+    open(input);
+    close(input);
+    const position = vi.spyOn(input._flatpickr, '_positionCalendar');
+    window.dispatchEvent(new Event('scroll'));
+    scrollParent.dispatchEvent(new Event('scroll'));
+    expect(position).toHaveBeenCalled();
+  });
+  it.todo('RDP-13 portal: close 하면 scroll 부모·window 의 재배치 리스너를 해제한다 (기대 동작)');
+  it('RDP-08 언마운트하면 portal 컨테이너를 body 에서 제거한다', () => {
+    const {
+      unmount
+    } = mount({
+      portal: true
+    });
+    unmount();
+    expect(portalContainers()).toEqual([]);
+  });
+  it('RDP-08 언마운트하면 대기 중인 blur 동기화를 취소해 통지하지 않는다', async () => {
+    const onChangeDate = vi.fn();
+    const {
+      container,
+      unmount
+    } = mount({
+      portal: true,
+      onChangeDate
+    });
+    const input = inputOf(container);
+    act(() => {
+      input._flatpickr.setDate(SELECTED_DATE, false);
+      input.dispatchEvent(new Event('blur'));
+    });
+    unmount();
+    await new Promise(resolve => setTimeout(resolve, 0));
+    expect(onChangeDate).not.toHaveBeenCalled();
+  });
+});
+describe('RDP-09 파괴 시 리스너 정리', () => {
+  it('RDP-09 static: 열린 채 언마운트해도 scroll 부모·window 의 위치 조정 리스너를 제거한다', () => {
+    stubLayout(BOTTOM_WITH_ROOM);
+    const {
+      container,
+      scrollParent,
+      unmount
+    } = mount({});
+    const input = inputOf(container);
+    open(input);
+    const adjust = input._flatpickr._adjustPosition;
+    const windowRemove = vi.spyOn(window, 'removeEventListener');
+    const parentRemove = vi.spyOn(scrollParent, 'removeEventListener');
+    unmount();
+    expect(adjust).toEqual(expect.any(Function));
+    expect(windowRemove).toHaveBeenCalledWith('resize', adjust);
+    expect(windowRemove).toHaveBeenCalledWith('scroll', adjust);
+    expect(parentRemove).toHaveBeenCalledWith('scroll', adjust);
+  });
+  it('RDP-09 portal: 열린 채 언마운트해도 scroll 부모·window 의 재배치 리스너를 제거한다', () => {
+    const {
+      container,
+      scrollParent,
+      unmount
+    } = mount({
+      portal: true
+    });
+    const input = inputOf(container);
+    open(input);
+    const reposition = input._flatpickr._reposition;
+    const windowRemove = vi.spyOn(window, 'removeEventListener');
+    const parentRemove = vi.spyOn(scrollParent, 'removeEventListener');
+    unmount();
+    expect(reposition).toEqual(expect.any(Function));
+    expect(windowRemove).toHaveBeenCalledWith('scroll', reposition);
+    expect(parentRemove).toHaveBeenCalledWith('scroll', reposition);
+  });
+});
+describe('RDP-14 · RDP-16 파기·재생성 경계', () => {
+  it('RDP-14 static: 파기된 인스턴스에 늦게 도착한 위치 조정은 아무것도 하지 않는다', () => {
+    const {
+      container,
+      unmount
+    } = mount({});
+    const adjustPosition = inputOf(container)._flatpickr._adjustPosition;
+    unmount();
+    expect(adjustPosition).toEqual(expect.any(Function));
+    expect(() => adjustPosition?.()).not.toThrow();
+  });
+  it('RDP-14 portal: 파기된 인스턴스에 늦게 도착한 재배치는 _positionCalendar 를 부르지 않는다', () => {
+    const {
+      container,
+      unmount
+    } = mount({
+      portal: true
+    });
+    const instance = inputOf(container)._flatpickr;
+    const reposition = instance._reposition;
+    const positionCalendar = vi.spyOn(instance, '_positionCalendar');
+    unmount();
+    expect(reposition).toEqual(expect.any(Function));
+    reposition?.();
+    expect(positionCalendar).not.toHaveBeenCalled();
+  });
+  it('RDP-16 portal: 재생성 뒤에도 입력이 포커스를 쥐고 있으면 focus 를 다시 걸지 않는다', () => {
+    const {
+      container,
+      render
+    } = mount({
+      portal: true
+    });
+    const input = inputOf(container);
+    act(() => {
+      input.focus();
+    });
+    const focus = vi.spyOn(HTMLElement.prototype, 'focus');
+    render({
+      portal: true,
+      size: 'sm'
+    });
+    expect(document.activeElement).toBe(inputOf(container));
+    expect(focus).not.toHaveBeenCalled();
+  });
+});
+describe('RDP-10 · CI-01 표현', () => {
+  const iconOf = container => {
+    const icon = container.querySelector('.ncua-date-picker__ico svg');
+    if (!icon) throw new Error('아이콘이 없습니다');
+    return icon;
+  };
+  /** 같은 크기(xs)로 아이콘 컴포넌트를 단독 렌더한 svg 내부 마크업 — 어떤 아이콘이 그려졌는지 판별용 */
+  const iconMarkupOf = Icon => {
+    const host = document.createElement('div');
+    const root = createRoot(host);
+    act(() => {
+      root.render(/*#__PURE__*/createElement(Icon, {
+        width: Number(ICON_SIZE_XS),
+        height: Number(ICON_SIZE_XS)
+      }));
+    });
+    const markup = host.querySelector('svg')?.innerHTML ?? '';
+    act(() => {
+      root.unmount();
+    });
+    return markup;
+  };
+  it('RDP-10 formatDate 는 무효 Date 에 "" 를, 포맷 변환 예외에도 "" 를 돌려준다', () => {
+    const {
+      container
+    } = mount({});
+    const {
+      formatDate
+    } = inputOf(container)._flatpickr.config;
+    const locale = flatpickr.l10ns.default;
+    expect(formatDate?.(new Date(Number.NaN), 'Y-m-d', locale)).toBe('');
+    expect(formatDate?.(new Date(), undefined, locale)).toBe('');
+  });
+  it('RDP-10 noCalendar 시간 전용이면 달력 아이콘 대신 시계 아이콘을 그린다', () => {
+    const calendar = mount({});
+    const clock = mount({
+      currentDate: '10:00',
+      datePickerOptions: {
+        enableTime: true,
+        noCalendar: true,
+        dateFormat: 'H:i'
+      }
+    });
+    expect(iconOf(clock.container).innerHTML).toBe(iconMarkupOf(Clock));
+    expect(iconOf(calendar.container).innerHTML).toBe(iconMarkupOf(Calendar));
+  });
+  it.each([{
+    size: 'xs',
+    expected: ICON_SIZE_XS
+  }, {
+    size: 'sm',
+    expected: ICON_SIZE_SM
+  }])('CI-01 size $size 면 아이콘 크기는 $expected 다', _ref7 => {
+    let {
+      size,
+      expected
+    } = _ref7;
+    const {
+      container
+    } = mount({
+      size
+    });
+    expect(iconOf(container).getAttribute('width')).toBe(expected);
+  });
+  it('RDP-10 destructive 메시지를 표시하고 루트에 destructive 클래스를 붙인다', () => {
+    const MESSAGE = '날짜를 확인해 주세요';
+    const {
+      container
+    } = mount({
+      destructive: MESSAGE
+    });
+    const root = container.querySelector('.ncua-date-picker');
+    expect(root?.classList.contains('ncua-date-picker--destructive')).toBe(true);
+    expect(container.querySelector('.ncua-date-picker__destructive')?.textContent).toBe(MESSAGE);
+  });
+  it('RDP-10 disabled 면 루트에 disabled 클래스를 붙이고 입력을 비활성화한다', () => {
+    const {
+      container
+    } = mount({
+      disabled: true
+    });
+    expect(container.querySelector('.ncua-date-picker')?.classList.contains('ncua-date-picker--disabled')).toBe(true);
+    expect(inputOf(container).disabled).toBe(true);
+  });
+});

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

@@ -0,0 +1,31 @@
+// date-picker utils 위험 경로 — 위험 목록표 DU-xx. 오늘 날짜는 fake timers 로 고정한다.
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { getDateFormat, getToday } from '../utils';
+/** 로컬 시각(오프셋 없는 ISO 는 로컬로 해석) — 월·일 한 자리 0 채움 확인용 */
+const NOW = new Date('2026-03-05T10:00:00');
+const NOW_TEXT = '2026-03-05';
+/** 연말 늦은 시각 — 로컬 기준으로 날짜가 넘어가지 않는다 */
+const OTHER_DATE = new Date('2025-12-31T23:00:00');
+const OTHER_TEXT = '2025-12-31';
+beforeEach(() => {
+  vi.useFakeTimers();
+  vi.setSystemTime(NOW);
+});
+afterEach(() => {
+  vi.useRealTimers();
+});
+describe('date-picker utils — getDateFormat (DU-01)', () => {
+  it.each([['Date', OTHER_DATE, OTHER_TEXT], ['ISO 날짜 문자열', '2024-07-09', '2024-07-09']])('DU-01 %s 를 YYYY-MM-DD 로 만든다', (_label, input, expected) => {
+    expect(getDateFormat(input)).toBe(expected);
+  });
+  it('DU-01 인자를 생략하면 오늘 날짜를 쓴다', () => {
+    expect(getDateFormat()).toBe(NOW_TEXT);
+  });
+});
+describe('date-picker utils — getToday (DU-02)', () => {
+  it('DU-02 호출 시점의 Date 를 돌려준다', () => {
+    const today = getToday();
+    expect(today).toBeInstanceOf(Date);
+    expect(today.getTime()).toBe(NOW.getTime());
+  });
+});