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

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

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

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

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