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

package/dist/cjs/src/components/forms-and-input/slider/__tests__/Slider.test.js

@@ -0,0 +1,390 @@
+"use strict";
+
+var _react = require("react");
+var _client = require("react-dom/client");
+var _testUtils = require("react-dom/test-utils");
+var _vitest = require("vitest");
+var _Slider = require("../Slider");
+// @vitest-environment jsdom
+//
+// Slider (React) 위험 경로 — 위험 목록표 RSL-xx.
+// vanilla NcuaSlider(assets/scripts/slider.ts) 실구현을 그대로 쓴다(vi.mock 없음).
+// jsdom 은 레이아웃이 없으므로 컨테이너의 getBoundingClientRect 를 { left: 0, width: TRACK_WIDTH } 로 고정하고
+// clientX 로 위치를 만든다. 기본 0~100 · step 1 이라 "트랙 비율(%) = 값" 이다.
+// vanilla 결함(SL-05a·SL-19a·SL-22)이 React 에 보이면 새 ID 대신 SL ID 를 참조한다.
+
+globalThis.IS_REACT_ACT_ENVIRONMENT = true;
+const TRACK_WIDTH = 200;
+const PERCENT_SCALE = 100;
+const INITIAL_VALUE = 40;
+const NEXT_VALUE = 50;
+const CLICK_VALUE = 30;
+const DRAG_VALUE = 70;
+const RANGE_LOW = 20;
+const RANGE_HIGH = 60;
+const ABOVE_HIGH = 90;
+const RANGE = [RANGE_LOW, RANGE_HIGH];
+/** 재생성 확인용 옵션 변경값 */
+const WIDE_MAX = 200;
+const STEP_TEN = 10;
+/** step 10 에서 33% 클릭은 30 으로 스냅된다 */
+const OFF_STEP_CLICK = 33;
+/** value 생략 + min > 0 — (0 − 20) / (100 − 20) = −25% */
+const CUSTOM_MIN = 20;
+const OUT_OF_TRACK_LEFT = '-25%';
+let root = null;
+let container = null;
+const renderElement = element => {
+  if (!container) {
+    container = document.createElement('div');
+    document.body.appendChild(container);
+    root = (0, _client.createRoot)(container);
+  }
+  (0, _testUtils.act)(() => {
+    root?.render(element);
+  });
+  return container;
+};
+/** 같은 root 에 다시 render 하면 props 변경(재렌더)이 된다 */
+const render = function () {
+  let props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return renderElement(/*#__PURE__*/(0, _react.createElement)(_Slider.Slider, props));
+};
+(0, _vitest.beforeEach)(() => {
+  _vitest.vi.spyOn(HTMLElement.prototype, 'getBoundingClientRect').mockReturnValue({
+    top: 0,
+    bottom: 0,
+    left: 0,
+    right: TRACK_WIDTH,
+    width: TRACK_WIDTH,
+    height: 0,
+    x: 0,
+    y: 0,
+    toJSON: () => ({})
+  });
+});
+(0, _vitest.afterEach)(() => {
+  if (root) {
+    (0, _testUtils.act)(() => {
+      root?.unmount();
+    });
+  }
+  container?.remove();
+  root = null;
+  container = null;
+  _vitest.vi.restoreAllMocks();
+  document.body.style.userSelect = '';
+});
+const requireElement = (scope, selector) => {
+  const element = scope.querySelector(selector);
+  if (!element) throw new Error(`요소를 찾을 수 없습니다: ${selector}`);
+  return element;
+};
+const sliderOf = view => requireElement(view, '.ncua-slider');
+const trackOf = view => requireElement(view, '.ncua-slider__track');
+const handlesOf = view => Array.from(view.querySelectorAll('.ncua-slider__handle'));
+const valueNowOf = view => handlesOf(view).map(handle => handle.getAttribute('aria-valuenow'));
+/** 트랙 비율(%)을 clientX 로 바꾼다 (트랙 left 0). */
+const clientXAt = percent => TRACK_WIDTH * percent / PERCENT_SCALE;
+const mouseDown = (target, clientX) => {
+  (0, _testUtils.act)(() => {
+    target.dispatchEvent(new MouseEvent('mousedown', {
+      bubbles: true,
+      cancelable: true,
+      clientX
+    }));
+  });
+};
+const mouseMove = clientX => {
+  (0, _testUtils.act)(() => {
+    document.dispatchEvent(new MouseEvent('mousemove', {
+      bubbles: true,
+      clientX
+    }));
+  });
+};
+const mouseUp = () => {
+  (0, _testUtils.act)(() => {
+    document.dispatchEvent(new MouseEvent('mouseup', {
+      bubbles: true
+    }));
+  });
+};
+/** 받은 값으로 value 를 갱신하는 일반 controlled 사용 — onChange 를 인라인(매 렌더 새 참조) 또는 useCallback 으로 만든다 */
+const ControlledSlider = _ref => {
+  let {
+    stable,
+    onValue
+  } = _ref;
+  const [value, setValue] = (0, _react.useState)(0);
+  const stableOnChange = (0, _react.useCallback)(next => {
+    onValue(next);
+    setValue(next);
+  }, [onValue]);
+  const inlineOnChange = next => {
+    onValue(next);
+    setValue(next);
+  };
+  return /*#__PURE__*/(0, _react.createElement)(_Slider.Slider, {
+    value,
+    onChange: stable ? stableOnChange : inlineOnChange
+  });
+};
+// ── P0 ─────────────────────────────────────────────────
+(0, _vitest.describe)('Slider — 마운트 (RSL-01)', () => {
+  (0, _vitest.it)('RSL-01 컨테이너에 트랙·진행 바·핸들을 만들고 value·min·max 를 핸들 aria 에 반영한다', () => {
+    const view = render({
+      min: 0,
+      max: PERCENT_SCALE,
+      value: INITIAL_VALUE
+    });
+    const [handle] = handlesOf(view);
+    (0, _vitest.expect)(view.querySelector('.ncua-slider__track')).not.toBeNull();
+    (0, _vitest.expect)(handlesOf(view)).toHaveLength(1);
+    (0, _vitest.expect)([handle.getAttribute('aria-valuenow'), handle.getAttribute('aria-valuemin'), handle.getAttribute('aria-valuemax'), handle.style.left]).toEqual([String(INITIAL_VALUE), '0', String(PERCENT_SCALE), `${INITIAL_VALUE}%`]);
+  });
+  (0, _vitest.it)('RSL-01 labelPosition bottom 이면 핸들 안에 값 라벨을 만든다', () => {
+    const view = render({
+      value: INITIAL_VALUE,
+      labelPosition: 'bottom'
+    });
+    (0, _vitest.expect)(requireElement(view, '.ncua-slider__label').textContent).toBe(`${INITIAL_VALUE}%`);
+  });
+  (0, _vitest.it)('RSL-01 disabled 로 마운트하면 핸들이 aria-disabled true 이고 트랙을 눌러도 onChange 가 없다', () => {
+    const onChange = _vitest.vi.fn();
+    const view = render({
+      value: INITIAL_VALUE,
+      disabled: true,
+      onChange
+    });
+    mouseDown(trackOf(view), clientXAt(CLICK_VALUE));
+    (0, _vitest.expect)(handlesOf(view)[0].getAttribute('aria-disabled')).toBe('true');
+    (0, _vitest.expect)(onChange).not.toHaveBeenCalled();
+  });
+  (0, _vitest.it)('RSL-01 range value 는 핸들 2개로 만든다', () => {
+    const view = render({
+      value: RANGE
+    });
+    (0, _vitest.expect)(valueNowOf(view)).toEqual([String(RANGE_LOW), String(RANGE_HIGH)]);
+  });
+});
+(0, _vitest.describe)('Slider — 트랙 조작 (RSL-02)', () => {
+  (0, _vitest.it)('RSL-02 단일: 트랙 mousedown·mousemove 마다 onChange(값) 를 부르고 핸들 aria 를 갱신한다', () => {
+    const onChange = _vitest.vi.fn();
+    const view = render({
+      value: 0,
+      onChange
+    });
+    mouseDown(trackOf(view), clientXAt(CLICK_VALUE));
+    mouseMove(clientXAt(DRAG_VALUE));
+    mouseUp();
+    (0, _vitest.expect)(onChange.mock.calls).toEqual([[CLICK_VALUE], [DRAG_VALUE]]);
+    (0, _vitest.expect)(valueNowOf(view)).toEqual([String(DRAG_VALUE)]);
+  });
+  (0, _vitest.it)('RSL-02 range: 오른쪽 핸들 바깥 트랙을 누르면 onChange([low, 누른 값])', () => {
+    const onChange = _vitest.vi.fn();
+    const view = render({
+      value: RANGE,
+      onChange
+    });
+    mouseDown(trackOf(view), clientXAt(ABOVE_HIGH));
+    (0, _vitest.expect)(onChange).toHaveBeenCalledWith([RANGE_LOW, ABOVE_HIGH]);
+  });
+});
+(0, _vitest.describe)('Slider — controlled 드래그 (RSL-03)', () => {
+  (0, _vitest.it)('RSL-03 useCallback 으로 안정된 onChange 면 부모 재렌더 뒤에도 드래그가 이어진다', () => {
+    const onValue = _vitest.vi.fn();
+    const view = renderElement(/*#__PURE__*/(0, _react.createElement)(ControlledSlider, {
+      stable: true,
+      onValue
+    }));
+    mouseDown(trackOf(view), clientXAt(CLICK_VALUE));
+    mouseMove(clientXAt(DRAG_VALUE));
+    mouseUp();
+    (0, _vitest.expect)(onValue.mock.calls).toEqual([[CLICK_VALUE], [DRAG_VALUE]]);
+    (0, _vitest.expect)(valueNowOf(view)).toEqual([String(DRAG_VALUE)]);
+  });
+  (0, _vitest.it)('RSL-03 인라인 onChange 면 첫 onChange 뒤 인스턴스가 재생성되어 이어지는 mousemove 가 무시된다', () => {
+    // 현재 동작 고정 — 결함 후보: #596 (onChange 가 생성 effect deps 라 재렌더마다 destroy·재생성, 드래그 상태 유실 — 조작 불능)
+    const onValue = _vitest.vi.fn();
+    const view = renderElement(/*#__PURE__*/(0, _react.createElement)(ControlledSlider, {
+      stable: false,
+      onValue
+    }));
+    const handleBefore = handlesOf(view)[0];
+    mouseDown(trackOf(view), clientXAt(CLICK_VALUE));
+    mouseMove(clientXAt(DRAG_VALUE));
+    mouseUp();
+    (0, _vitest.expect)(onValue.mock.calls).toEqual([[CLICK_VALUE]]);
+    (0, _vitest.expect)(valueNowOf(view)).toEqual([String(CLICK_VALUE)]);
+    (0, _vitest.expect)(handlesOf(view)[0]).not.toBe(handleBefore);
+  });
+  _vitest.it.todo('RSL-03 인라인 onChange 로 controlled 사용해도 드래그 중 인스턴스를 유지해 mousemove 마다 onChange 가 이어진다 (기대)');
+});
+(0, _vitest.describe)('Slider — value prop 변경 (RSL-04)', () => {
+  (0, _vitest.it)('RSL-04 value 가 바뀌면 같은 핸들의 위치·aria 를 setValue 로 갱신하고 onChange 는 부르지 않는다', () => {
+    const onChange = _vitest.vi.fn();
+    const view = render({
+      value: INITIAL_VALUE,
+      onChange
+    });
+    const handleBefore = handlesOf(view)[0];
+    render({
+      value: NEXT_VALUE,
+      onChange
+    });
+    (0, _vitest.expect)(handlesOf(view)[0]).toBe(handleBefore);
+    (0, _vitest.expect)([handleBefore.getAttribute('aria-valuenow'), handleBefore.style.left]).toEqual([String(NEXT_VALUE), `${NEXT_VALUE}%`]);
+    (0, _vitest.expect)(onChange).not.toHaveBeenCalled();
+  });
+});
+(0, _vitest.describe)('Slider — disabled 토글 (RSL-05)', () => {
+  (0, _vitest.it)('RSL-05 false → true 면 disable() 로 조작을 막고 aria-disabled true·opacity 0.5', () => {
+    const onChange = _vitest.vi.fn();
+    const view = render({
+      value: 0,
+      onChange
+    });
+    render({
+      value: 0,
+      onChange,
+      disabled: true
+    });
+    mouseDown(trackOf(view), clientXAt(CLICK_VALUE));
+    (0, _vitest.expect)(onChange).not.toHaveBeenCalled();
+    (0, _vitest.expect)([handlesOf(view)[0].getAttribute('aria-disabled'), sliderOf(view).style.opacity]).toEqual(['true', '0.5']);
+  });
+  (0, _vitest.it)('RSL-05 true → false 면 enable() 로 조작이 복구되고 aria-disabled false', () => {
+    const onChange = _vitest.vi.fn();
+    const view = render({
+      value: 0,
+      onChange,
+      disabled: true
+    });
+    render({
+      value: 0,
+      onChange,
+      disabled: false
+    });
+    mouseDown(trackOf(view), clientXAt(CLICK_VALUE));
+    (0, _vitest.expect)(onChange).toHaveBeenCalledWith(CLICK_VALUE);
+    (0, _vitest.expect)([handlesOf(view)[0].getAttribute('aria-disabled'), sliderOf(view).style.opacity]).toEqual(['false', '1']);
+  });
+});
+// ── P1 ~ P3 ────────────────────────────────────────────
+(0, _vitest.describe)('Slider — 재생성 (RSL-06)', () => {
+  (0, _vitest.it)('RSL-06 단일 → range 로 value 타입이 바뀌면 인스턴스를 다시 만들어 핸들이 2개가 된다', () => {
+    const view = render({
+      value: INITIAL_VALUE
+    });
+    render({
+      value: RANGE
+    });
+    (0, _vitest.expect)(valueNowOf(view)).toEqual([String(RANGE_LOW), String(RANGE_HIGH)]);
+  });
+  (0, _vitest.it)('RSL-06 range → 단일로 바뀌면 핸들이 1개가 된다', () => {
+    const view = render({
+      value: RANGE
+    });
+    render({
+      value: INITIAL_VALUE
+    });
+    (0, _vitest.expect)(valueNowOf(view)).toEqual([String(INITIAL_VALUE)]);
+  });
+  _vitest.it.each([['max', {
+    max: WIDE_MAX
+  }, 'aria-valuemax', String(WIDE_MAX)], ['min', {
+    min: CUSTOM_MIN
+  }, 'aria-valuemin', String(CUSTOM_MIN)]])('RSL-06 %s 가 바뀌면 핸들 %s 에 반영한다', (_name, changed, attribute, expected) => {
+    const view = render({
+      value: INITIAL_VALUE
+    });
+    render({
+      value: INITIAL_VALUE,
+      ...changed
+    });
+    (0, _vitest.expect)(handlesOf(view)).toHaveLength(1);
+    (0, _vitest.expect)(handlesOf(view)[0].getAttribute(attribute)).toBe(expected);
+  });
+  (0, _vitest.it)('RSL-06 step 이 바뀌면 트랙 클릭 값을 새 step 으로 스냅한다', () => {
+    const onChange = _vitest.vi.fn();
+    const view = render({
+      value: INITIAL_VALUE,
+      onChange
+    });
+    render({
+      value: INITIAL_VALUE,
+      onChange,
+      step: STEP_TEN
+    });
+    mouseDown(trackOf(view), clientXAt(OFF_STEP_CLICK));
+    (0, _vitest.expect)(onChange.mock.calls).toEqual([[CLICK_VALUE]]);
+  });
+  (0, _vitest.it)('RSL-06 labelPosition 이 바뀌면 그 위치의 라벨로 바꾼다', () => {
+    const view = render({
+      value: INITIAL_VALUE,
+      labelPosition: 'bottom'
+    });
+    render({
+      value: INITIAL_VALUE,
+      labelPosition: 'top-floating'
+    });
+    (0, _vitest.expect)(view.querySelectorAll('.ncua-slider__label')).toHaveLength(1);
+    (0, _vitest.expect)(requireElement(view, '.ncua-slider__label--tooltip').textContent).toBe(`${INITIAL_VALUE}%`);
+  });
+  (0, _vitest.it)('RSL-06 재생성된 인스턴스는 바뀐 max 와 tooltip 라벨을 반영한다', () => {
+    const view = render({
+      value: INITIAL_VALUE
+    });
+    render({
+      value: INITIAL_VALUE,
+      max: WIDE_MAX,
+      labelPosition: 'top-floating'
+    });
+    (0, _vitest.expect)(handlesOf(view)[0].getAttribute('aria-valuemax')).toBe(String(WIDE_MAX));
+    (0, _vitest.expect)(requireElement(view, '.ncua-slider__label--tooltip').textContent).toBe(`${INITIAL_VALUE}%`);
+  });
+});
+(0, _vitest.describe)('Slider — 언마운트 (RSL-07)', () => {
+  (0, _vitest.it)('RSL-07 언마운트하면 destroy 로 컨테이너를 비우고 document 리스너를 해제한다', () => {
+    const onChange = _vitest.vi.fn();
+    const view = render({
+      value: 0,
+      onChange
+    });
+    const slider = sliderOf(view);
+    mouseDown(trackOf(view), clientXAt(CLICK_VALUE));
+    (0, _testUtils.act)(() => {
+      root?.unmount();
+    });
+    root = null;
+    mouseMove(clientXAt(DRAG_VALUE));
+    (0, _vitest.expect)(slider.childElementCount).toBe(0);
+    (0, _vitest.expect)(onChange.mock.calls).toEqual([[CLICK_VALUE]]);
+  });
+});
+(0, _vitest.describe)('Slider — className (RSL-08)', () => {
+  (0, _vitest.it)('RSL-08 className 은 ncua-slider 뒤에 붙는다', () => {
+    const view = render({
+      className: 'my-slider'
+    });
+    (0, _vitest.expect)([sliderOf(view).classList.contains('ncua-slider'), sliderOf(view).classList.contains('my-slider')]).toEqual([true, true]);
+  });
+  (0, _vitest.it)('RSL-08 className 을 생략하면 class 속성이 "ncua-slider " (뒤 공백)이다', () => {
+    // 현재 동작 고정 — 결함 후보: #597 (className 생략 시 템플릿 문자열로 뒤 공백이 남음 — classnames 미사용)
+    const view = render();
+    (0, _vitest.expect)(sliderOf(view).getAttribute('class')).toBe('ncua-slider ');
+  });
+  _vitest.it.todo('RSL-08 className 을 생략하면 class 속성이 뒤 공백 없이 "ncua-slider" 이다 (기대, #597)');
+});
+(0, _vitest.describe)('Slider — value 생략 (RSL-09)', () => {
+  (0, _vitest.it)('RSL-09 value 를 생략하고 min 이 0 보다 크면 0 으로 시작해 핸들이 트랙 밖에 놓인다', () => {
+    // 현재 동작 고정 — 결함 후보: #597 (React 기본값 value = 0 — SL-19a 와 같은 뿌리, min 으로 시작해야 함)
+    const view = render({
+      min: CUSTOM_MIN
+    });
+    const [handle] = handlesOf(view);
+    (0, _vitest.expect)([handle.getAttribute('aria-valuenow'), handle.style.left]).toEqual(['0', OUT_OF_TRACK_LEFT]);
+  });
+  _vitest.it.todo('RSL-09 value 를 생략하면 min 으로 시작한다 — min 20 이면 aria-valuenow 20·left 0% (기대, #597)');
+});