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

package/dist/cjs/src/components/forms-and-input/combo-box/__tests__/ComboBox.register.test.js

@@ -0,0 +1,153 @@
+"use strict";
+
+var _vitest = require("vitest");
+var _comboBoxTestUtils = require("./comboBoxTestUtils");
+// @ncds/ui-admin-icon 은 react@19 를 해석해 react-dom@18 이 거부하는 엘리먼트를 만든다 (ComboBox.portal.test.ts 와 같은 스텁)
+_vitest.vi.mock('@ncds/ui-admin-icon', () => {
+  const IconStub = () => null;
+  return {
+    CheckCircle: IconStub,
+    ChevronSelectorVertical: IconStub,
+    HelpCircle: IconStub,
+    InfoCircle: IconStub,
+    SearchLg: IconStub,
+    X: IconStub,
+    XClose: IconStub
+  };
+});
+const FIELD_NAME = 'fruit';
+const APPLE_ID = 1;
+const BANANA_ID = 2;
+const OPTIONS = [{
+  id: APPLE_ID,
+  label: '사과'
+}, {
+  id: BANANA_ID,
+  label: '바나나'
+}];
+(0, _vitest.afterEach)(_comboBoxTestUtils.runCleanups);
+const createRegister = () => {
+  const onChange = _vitest.vi.fn(async () => true);
+  const register = {
+    name: FIELD_NAME,
+    onChange,
+    onBlur: _vitest.vi.fn(async () => true),
+    ref: _vitest.vi.fn()
+  };
+  return {
+    register,
+    onChange
+  };
+};
+const openAll = container => {
+  (0, _comboBoxTestUtils.click)((0, _comboBoxTestUtils.allButton)(container));
+};
+const clickOption = (container, label) => {
+  (0, _comboBoxTestUtils.click)((0, _comboBoxTestUtils.findByText)(container, '.ncua-select-dropdown__option', label));
+};
+const hiddenInputValue = container => (0, _comboBoxTestUtils.requireElement)(container, 'input[type="hidden"]').value;
+(0, _vitest.describe)('RCB-01 register 통지', () => {
+  (0, _vitest.it)('RCB-01 단일 옵션 click 이 register.onChange 에 숫자 id 를 그대로 넘기고 hidden input 은 문자열이 된다', () => {
+    const {
+      register,
+      onChange
+    } = createRegister();
+    const container = (0, _comboBoxTestUtils.mountControlled)({
+      optionItems: OPTIONS,
+      register,
+      onChangeSpy: _vitest.vi.fn()
+    });
+    openAll(container);
+    clickOption(container, '바나나');
+    (0, _vitest.expect)(onChange).toHaveBeenCalledWith({
+      target: {
+        value: BANANA_ID,
+        name: FIELD_NAME
+      }
+    });
+    (0, _vitest.expect)(hiddenInputValue(container)).toBe(String(BANANA_ID));
+  });
+  (0, _vitest.it)('RCB-01 다중 옵션 click 이 register.onChange 에 JSON 문자열을 넘기고 hidden input 도 JSON 이 된다', () => {
+    const {
+      register,
+      onChange
+    } = createRegister();
+    const container = (0, _comboBoxTestUtils.mountControlled)({
+      optionItems: OPTIONS,
+      register,
+      multiple: true,
+      initialValue: [],
+      onChangeSpy: _vitest.vi.fn()
+    });
+    const expected = JSON.stringify([APPLE_ID, BANANA_ID]);
+    openAll(container);
+    clickOption(container, '사과');
+    clickOption(container, '바나나');
+    (0, _vitest.expect)(onChange).toHaveBeenLastCalledWith({
+      target: {
+        value: expected,
+        name: FIELD_NAME
+      }
+    });
+    (0, _vitest.expect)(hiddenInputValue(container)).toBe(expected);
+  });
+});
+(0, _vitest.describe)('RCB-02 register 미통지 경로', () => {
+  (0, _vitest.it)('RCB-02 단일 태그 X 는 onChange 만 부르고 register.onChange 를 부르지 않는다', () => {
+    // 현재 동작 고정 — 결함 후보: 후속 이슈 (#592 SB-07 같은 뿌리 — handleRemoveTag 가 notifyFormChange 를 거치지 않아 폼 값이 이전 상태로 남음)
+    const {
+      register,
+      onChange
+    } = createRegister();
+    const onChangeSpy = _vitest.vi.fn();
+    const container = (0, _comboBoxTestUtils.mountControlled)({
+      optionItems: OPTIONS,
+      register,
+      initialValue: APPLE_ID,
+      onChangeSpy
+    });
+    (0, _comboBoxTestUtils.click)((0, _comboBoxTestUtils.requireElement)(container, '.ncua-tag__close'));
+    (0, _vitest.expect)(onChangeSpy).toHaveBeenCalledWith('');
+    (0, _vitest.expect)(onChange).not.toHaveBeenCalled();
+  });
+  (0, _vitest.it)('RCB-02 다중 「전체 선택」은 onChange 만 부르고 register.onChange 를 부르지 않는다', () => {
+    // 현재 동작 고정 — 결함 후보: 후속 이슈 (#592 SB-07 같은 뿌리 — handleSelectAll 이 notifyFormChange 를 거치지 않아 폼 값이 이전 상태로 남음)
+    const {
+      register,
+      onChange
+    } = createRegister();
+    const onChangeSpy = _vitest.vi.fn();
+    const container = (0, _comboBoxTestUtils.mountControlled)({
+      optionItems: OPTIONS,
+      register,
+      multiple: true,
+      initialValue: [],
+      onChangeSpy
+    });
+    openAll(container);
+    (0, _comboBoxTestUtils.click)((0, _comboBoxTestUtils.findByText)(container, 'button', '전체 선택'));
+    (0, _vitest.expect)(onChangeSpy).toHaveBeenCalledWith([APPLE_ID, BANANA_ID]);
+    (0, _vitest.expect)(onChange).not.toHaveBeenCalled();
+  });
+  (0, _vitest.it)('RCB-02 다중 태그 X 는 onChange 만 부르고 register.onChange 를 부르지 않는다', () => {
+    // 현재 동작 고정 — 결함 후보: 후속 이슈 (#592 SB-07 같은 뿌리 — handleRemoveTag 가 notifyFormChange 를 거치지 않아 폼 값이 이전 상태로 남음)
+    const {
+      register,
+      onChange
+    } = createRegister();
+    const onChangeSpy = _vitest.vi.fn();
+    const container = (0, _comboBoxTestUtils.mountControlled)({
+      optionItems: OPTIONS,
+      register,
+      multiple: true,
+      initialValue: [APPLE_ID, BANANA_ID],
+      onChangeSpy
+    });
+    (0, _comboBoxTestUtils.click)((0, _comboBoxTestUtils.requireElement)(container, '.ncua-tag__close'));
+    (0, _vitest.expect)(onChangeSpy).toHaveBeenCalledWith([BANANA_ID]);
+    (0, _vitest.expect)(onChange).not.toHaveBeenCalled();
+  });
+  _vitest.it.todo('RCB-02 단일 태그 X 는 register.onChange 에 빈 값을 통지해야 한다 (#592)');
+  _vitest.it.todo('RCB-02 다중 「전체 선택」은 register.onChange 에 선택 결과 JSON 을 통지해야 한다 (#592)');
+  _vitest.it.todo('RCB-02 다중 태그 X 는 register.onChange 에 남은 값 JSON 을 통지해야 한다 (#592)');
+});

package/dist/cjs/src/components/forms-and-input/combo-box/__tests__/comboBoxTestUtils.js

@@ -0,0 +1,92 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.runCleanups = exports.requireElement = exports.onCleanup = exports.mountRoot = exports.mountControlled = exports.findByText = exports.click = exports.allButton = void 0;
+var _react = require("react");
+var _client = require("react-dom/client");
+var _testUtils = require("react-dom/test-utils");
+var _ComboBox = require("../ComboBox");
+// React ComboBox 테스트(interaction·register) 공용 마운트·조회 헬퍼.
+// vitest include 가 *.test.ts 만 수집하므로 이 파일은 테스트로 실행되지 않는다.
+// @ncds/ui-admin-icon 스텁은 vi.mock 이 테스트 파일 단위로 호이스팅되므로 각 테스트 파일에 둔다.
+
+globalThis.IS_REACT_ACT_ENVIRONMENT = true;
+const cleanups = [];
+/** onChange 로 받은 값을 value 로 되돌려주는 사용처 흉내 (controlled) */
+const Harness = _ref => {
+  let {
+    initialValue,
+    onChangeSpy,
+    ...rest
+  } = _ref;
+  const [value, setValue] = (0, _react.useState)(initialValue);
+  return /*#__PURE__*/(0, _react.createElement)(_ComboBox.ComboBox, {
+    ...rest,
+    value,
+    onChange: next => {
+      onChangeSpy(next);
+      setValue(next);
+    }
+  });
+};
+/** 각 테스트 파일의 afterEach 에서 부른다 */
+const runCleanups = () => {
+  for (const cleanup of cleanups.splice(0)) cleanup();
+};
+exports.runCleanups = runCleanups;
+const onCleanup = cleanup => {
+  cleanups.push(cleanup);
+};
+/** 같은 root 에 다시 render 하면 props 변경(rerender)이 된다 */
+exports.onCleanup = onCleanup;
+const mountRoot = () => {
+  const container = document.createElement('div');
+  document.body.appendChild(container);
+  const root = (0, _client.createRoot)(container);
+  onCleanup(() => {
+    (0, _testUtils.act)(() => root.unmount());
+    container.remove();
+  });
+  const render = element => {
+    (0, _testUtils.act)(() => {
+      root.render(element);
+    });
+  };
+  return {
+    container,
+    render
+  };
+};
+exports.mountRoot = mountRoot;
+const mountControlled = props => {
+  const {
+    container,
+    render
+  } = mountRoot();
+  render(/*#__PURE__*/(0, _react.createElement)(Harness, props));
+  return container;
+};
+exports.mountControlled = mountControlled;
+const requireElement = (scope, selector) => {
+  const element = scope.querySelector(selector);
+  if (element === null) throw new Error(`요소를 찾을 수 없습니다: ${selector}`);
+  return element;
+};
+exports.requireElement = requireElement;
+const findByText = (scope, selector, text) => {
+  const found = Array.from(scope.querySelectorAll(selector)).find(element => element.textContent === text);
+  if (found === undefined) throw new Error(`요소를 찾을 수 없습니다: ${selector} "${text}"`);
+  return found;
+};
+exports.findByText = findByText;
+const click = element => {
+  (0, _testUtils.act)(() => {
+    element.click();
+  });
+};
+/** 「전체」 버튼 — 검색어 없이 전체 목록을 연다 */
+exports.click = click;
+const allButton = container => requireElement(container, '.ncua-input__right-icon:not(.ncua-input__clear)');
+exports.allButton = allButton;