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

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

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