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

package/dist/cjs/src/components/forms-and-input/input-base/__tests__/InputBase.slots.test.js

@@ -0,0 +1,236 @@
+"use strict";
+
+var _react = require("react");
+var _client = require("react-dom/client");
+var _testUtils = require("react-dom/test-utils");
+var _vitest = require("vitest");
+var _InputBase = require("../InputBase");
+// @vitest-environment jsdom
+
+// React 18에서 act() 사용 시 필요한 플래그 (미설정 시 console.error 경고 발생)
+globalThis.IS_REACT_ACT_ENVIRONMENT = true;
+const BUTTON_LABEL = '조회';
+/** afterEach 에서 unmount 할 루트 */
+const mounted = [];
+(0, _vitest.afterEach)(() => {
+  _vitest.vi.restoreAllMocks();
+  for (const {
+    root,
+    container
+  } of mounted.splice(0)) {
+    (0, _testUtils.act)(() => root.unmount());
+    container.remove();
+  }
+});
+const mount = node => {
+  const container = document.createElement('div');
+  document.body.appendChild(container);
+  const root = (0, _client.createRoot)(container);
+  mounted.push({
+    root,
+    container
+  });
+  (0, _testUtils.act)(() => root.render(node));
+  return {
+    container,
+    rerender: next => (0, _testUtils.act)(() => root.render(next))
+  };
+};
+const inputBase = props => /*#__PURE__*/(0, _react.createElement)(_InputBase.InputBase, props);
+/** 폼 안에 렌더하고 submit 발생을 기록한다 (preventDefault 로 jsdom 의 폼 전송을 막는다) */
+const mountInForm = node => {
+  const submits = [];
+  const view = mount(/*#__PURE__*/(0, _react.createElement)('form', {
+    onSubmit: event => {
+      event.preventDefault();
+      submits.push(event.nativeEvent);
+    }
+  }, node));
+  return {
+    ...view,
+    submits
+  };
+};
+const mustQuery = (root, selector) => {
+  const found = root.querySelector(selector);
+  if (!found) throw new Error(`요소를 찾을 수 없습니다: ${selector}`);
+  return found;
+};
+const click = element => (0, _testUtils.act)(() => element.click());
+(0, _vitest.describe)('InputBase — 바깥 button 슬롯 (INB-01)', () => {
+  (0, _vitest.it)('INB-01 isSubmit 이 true 면 type submit 버튼이라 폼 안에서 클릭하면 폼을 제출한다', () => {
+    // Given: isSubmit 버튼 슬롯을 가진 인풋을 폼 안에 렌더
+    const view = mountInForm(inputBase({
+      trailingElement: {
+        type: 'button',
+        label: BUTTON_LABEL,
+        isSubmit: true,
+        onClick: _vitest.vi.fn()
+      }
+    }));
+    const button = mustQuery(view.container, '.ncua-input__button');
+    // When: 버튼을 클릭한다
+    click(button);
+    // Then: type 은 submit 이고 폼이 제출된다
+    (0, _vitest.expect)(button.getAttribute('type')).toBe('submit');
+    (0, _vitest.expect)(view.submits).toHaveLength(1);
+  });
+  (0, _vitest.it)('INB-01 isSubmit 을 생략하면 type button 이라 폼 안에서 클릭해도 제출하지 않는다', () => {
+    // Given: 기본 버튼 슬롯을 폼 안에 렌더
+    const view = mountInForm(inputBase({
+      trailingElement: {
+        type: 'button',
+        label: BUTTON_LABEL,
+        onClick: _vitest.vi.fn()
+      }
+    }));
+    const button = mustQuery(view.container, '.ncua-input__button');
+    // When: 버튼을 클릭한다
+    click(button);
+    // Then: type 은 button 이고 제출되지 않는다 (양성 대조: 위 isSubmit 케이스)
+    (0, _vitest.expect)(button.getAttribute('type')).toBe('button');
+    (0, _vitest.expect)(view.submits).toEqual([]);
+  });
+  (0, _vitest.it)('INB-01 버튼 클릭은 slot.onClick 을 부르고 label 을 표시하며 루트에 trailing-button modifier 를 붙인다', () => {
+    // Given: 버튼 슬롯을 가진 인풋
+    const onClick = _vitest.vi.fn();
+    const view = mount(inputBase({
+      trailingElement: {
+        type: 'button',
+        label: BUTTON_LABEL,
+        onClick
+      }
+    }));
+    const button = mustQuery(view.container, '.ncua-input__button');
+    // When: 버튼을 클릭한다
+    click(button);
+    // Then: onClick 이 불리고 label·modifier 가 보인다
+    (0, _vitest.expect)(onClick).toHaveBeenCalled();
+    (0, _vitest.expect)(button.textContent).toBe(BUTTON_LABEL);
+    (0, _vitest.expect)(mustQuery(view.container, '.ncua-input').classList.contains('ncua-input__trailing-button')).toBe(true);
+  });
+});
+const OUTSIDE_SLOT_CLASS = 'outside-slot';
+const INSIDE_SLOT_CLASS = 'inside-slot';
+const MAX_LENGTH = 10;
+const CONTROLLED_VALUE = 'abc';
+const UNCONTROLLED_DEFAULT = 'ab';
+const TYPED_VALUE = 'abcd';
+const customSlot = (className, placement) => ({
+  type: 'custom',
+  placement,
+  children: /*#__PURE__*/(0, _react.createElement)('i', {
+    className
+  })
+});
+const textCount = root => mustQuery(root, '.ncua-input__field-text-count').textContent ?? '';
+(0, _vitest.describe)('InputBase — custom 슬롯 placement (INB-02 · INB-07)', () => {
+  _vitest.it.each(['leadingElement', 'trailingElement'])('INB-02 %s 의 outside 는 필드 바깥(content 직계)에만 그린다', prop => {
+    const view = mount(inputBase({
+      [prop]: customSlot(OUTSIDE_SLOT_CLASS, 'outside')
+    }));
+    const slots = Array.from(view.container.querySelectorAll(`.${OUTSIDE_SLOT_CLASS}`));
+    (0, _vitest.expect)(slots.map(slot => Array.from(slot.parentElement?.classList ?? []))).toEqual([_vitest.expect.arrayContaining(['ncua-input__content'])]);
+  });
+  _vitest.it.each(['leadingElement', 'trailingElement'])('INB-02 %s 의 inside 는 필드 안쪽에만 그린다', prop => {
+    const view = mount(inputBase({
+      [prop]: customSlot(INSIDE_SLOT_CLASS, 'inside')
+    }));
+    const slots = Array.from(view.container.querySelectorAll(`.${INSIDE_SLOT_CLASS}`));
+    (0, _vitest.expect)(slots.map(slot => Array.from(slot.parentElement?.classList ?? []))).toEqual([_vitest.expect.arrayContaining(['ncua-input__field'])]);
+  });
+  (0, _vitest.it)('INB-07 placement 를 생략한 custom 슬롯은 안쪽 · 바깥 어디에도 그리지 않는다', () => {
+    // 현재 동작 고정 — 결함 후보: #627 INB-07 (placement 는 선택 prop 인데 기본값이 없어 생략하면 슬롯이 사라짐)
+    const view = mount(inputBase({
+      trailingElement: customSlot(INSIDE_SLOT_CLASS)
+    }));
+    (0, _vitest.expect)(view.container.querySelector(`.${INSIDE_SLOT_CLASS}`)).toBeNull();
+  });
+  _vitest.it.todo('INB-07 기대 동작 (#627): placement 를 생략한 custom 슬롯도 기본 위치(문서화된 기본값)에 그린다');
+});
+(0, _vitest.describe)('InputBase — 글자 수 (INB-03 · INB-05)', () => {
+  (0, _vitest.it)('INB-03 controlled 는 value 길이로 "현재/최대" 를 그린다', () => {
+    const view = mount(inputBase({
+      showTextCount: true,
+      maxLength: MAX_LENGTH,
+      value: CONTROLLED_VALUE,
+      onChange: _vitest.vi.fn()
+    }));
+    (0, _vitest.expect)(textCount(view.container)).toBe(`${CONTROLLED_VALUE.length}/${MAX_LENGTH}`);
+  });
+  (0, _vitest.it)('INB-03 uncontrolled 는 초기값 길이에서 시작해 input 이벤트로 갱신한다', () => {
+    const view = mount(inputBase({
+      showTextCount: true,
+      maxLength: MAX_LENGTH,
+      defaultValue: UNCONTROLLED_DEFAULT
+    }));
+    const before = textCount(view.container);
+    const input = mustQuery(view.container, 'input');
+    (0, _testUtils.act)(() => {
+      input.value = TYPED_VALUE;
+      input.dispatchEvent(new Event('input', {
+        bubbles: true
+      }));
+    });
+    (0, _vitest.expect)([before, textCount(view.container)]).toEqual([`${UNCONTROLLED_DEFAULT.length}/${MAX_LENGTH}`, `${TYPED_VALUE.length}/${MAX_LENGTH}`]);
+  });
+  (0, _vitest.it)('INB-03 maxLength 가 없으면 showTextCount 여도 글자 수 영역이 없다', () => {
+    const view = mount(inputBase({
+      showTextCount: true,
+      defaultValue: UNCONTROLLED_DEFAULT
+    }));
+    (0, _vitest.expect)(view.container.querySelector('.ncua-input__field-text-count')).toBeNull();
+  });
+  (0, _vitest.it)('INB-05 maxLength={0} 이면 글자 수 영역 대신 텍스트 "0" 이 content-wrap 끝에 그려진다', () => {
+    // 현재 동작 고정 — 결함 후보: #627 INB-05 (`showTextCount && maxLength && …` 가 0 을 그대로 렌더, #614 RTP-13 같은 유형)
+    const view = mount(inputBase({
+      showTextCount: true,
+      maxLength: 0
+    }));
+    const wrap = mustQuery(view.container, '.ncua-input__content-wrap');
+    (0, _vitest.expect)(view.container.querySelector('.ncua-input__field-text-count')).toBeNull();
+    (0, _vitest.expect)([wrap.lastChild?.nodeType, wrap.lastChild?.textContent]).toEqual([Node.TEXT_NODE, '0']);
+  });
+  _vitest.it.todo('INB-05 기대 동작 (#627): maxLength={0} 이어도 텍스트 "0" 이 새지 않는다 (영역 없음 · "현재/0" 중 표시는 이슈에서 결정)');
+});
+(0, _vitest.describe)('InputBase — help 아이콘 · null value (INB-04 · INB-06)', () => {
+  _vitest.it.each([['showHelpIcon', '있음', true, true], ['생략', '없음', undefined, false]])('INB-04 label 옆 help 아이콘: %s → %s', (_name, _expectedLabel, showHelpIcon, expected) => {
+    const view = mount(inputBase({
+      label: '이름',
+      showHelpIcon
+    }));
+    (0, _vitest.expect)(mustQuery(view.container, '.ncua-input__label').querySelector('.ncua-input__help-icon') !== null).toBe(expected);
+  });
+  (0, _vitest.it)('INB-06 controlled value 가 null(타입 밖)이면 길이 0 으로 계산해 has-value 가 없다', () => {
+    // React 는 value={null} 에 경고만 내고 받는다 — 경고 출력만 막는다 (afterEach 에서 복원)
+    _vitest.vi.spyOn(console, 'error').mockImplementation(() => undefined);
+    const nullValue = {
+      value: null
+    };
+    const view = mount(inputBase({
+      ...nullValue,
+      showTextCount: true,
+      maxLength: MAX_LENGTH,
+      onChange: _vitest.vi.fn()
+    }));
+    (0, _vitest.expect)(textCount(view.container)).toBe(`0/${MAX_LENGTH}`);
+    (0, _vitest.expect)(mustQuery(view.container, '.ncua-input').classList.contains('has-value')).toBe(false);
+  });
+});
+(0, _vitest.describe)('InputBase — ref 전달 (INB-08)', () => {
+  // 합본에서는 NumberInput 등 형제 PR 테스트가 부수로 덮는 경로 — base 단독 자립을 위해 직접 단언한다
+  (0, _vitest.it)('INB-08 객체 ref 는 input 요소를 가리킨다', () => {
+    const ref = /*#__PURE__*/(0, _react.createRef)();
+    const view = mount(/*#__PURE__*/(0, _react.createElement)(_InputBase.InputBase, {
+      ref
+    }));
+    (0, _vitest.expect)(ref.current).toBe(mustQuery(view.container, 'input'));
+  });
+  (0, _vitest.it)('INB-08 함수 ref 는 input 요소로 호출된다', () => {
+    const received = [];
+    const view = mount(/*#__PURE__*/(0, _react.createElement)(_InputBase.InputBase, {
+      ref: node => received.push(node)
+    }));
+    (0, _vitest.expect)(received[0]).toBe(mustQuery(view.container, 'input'));
+  });
+});