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

package/dist/temp/src/components/forms-and-input/image-file-input/__tests__/ImageFileInput.select.test.js

@@ -0,0 +1,292 @@
+// @vitest-environment jsdom
+//
+// React ImageFileInput 선택 · 삭제 · 검증 · 찾기 · 표시 — 위험 목록표 RIF-xx (PR-7d).
+// 저장 이미지(uploadedFiles) 미리보기 · 슬롯 합산 · disabled 는 ImageFileInput.test.ts 가 덮는다.
+// 하위 컴포넌트(Button · Tooltip · ImagePreview · useObjectUrl)는 실구현을 쓴다.
+import { createElement } from 'react';
+import { createRoot } from 'react-dom/client';
+import { act } from 'react-dom/test-utils';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { browseButton, createFileFactory, fileInputOf, indexesIn, lastFilesOf, mockObjectUrls, selectFiles as selectFilesIn, } from '../../../../__tests__/helpers/fileInput';
+import { ImageFileInput, ImageFileInputErrorType } from '../ImageFileInput';
+globalThis.IS_REACT_ACT_ENVIRONMENT = true;
+const MAX_FILE_SIZE = 8;
+const OVER_SIZE = 16;
+const MAX_COUNT = 3;
+const LAST_MODIFIED = 1700000000000;
+mockObjectUrls();
+const mounted = [];
+afterEach(() => {
+    for (const { root, container } of mounted.splice(0)) {
+        act(() => {
+            root.unmount();
+        });
+        container.remove();
+    }
+    document.getElementById('tooltip-global-layer')?.remove();
+    vi.restoreAllMocks();
+});
+/* ========== 공통 헬퍼 ========== */
+const mount = (props) => {
+    const container = document.createElement('div');
+    document.body.appendChild(container);
+    const root = createRoot(container);
+    const render = (nextProps) => {
+        act(() => {
+            root.render(createElement(ImageFileInput, nextProps));
+        });
+    };
+    render(props);
+    mounted.push({ root, container });
+    return { container, rerender: render };
+};
+const makeFile = createFileFactory({ type: 'image/png', lastModified: LAST_MODIFIED });
+const selectFiles = (container, filesToSelect) => selectFilesIn(container, filesToSelect, act);
+const previewImages = (container) => Array.from(container.querySelectorAll('.ncua-image-file-input__preview-image'));
+const removeButtons = (container) => Array.from(container.querySelectorAll('.ncua-image-file-input__preview-remove-button'));
+const emptySlotWrapper = (container) => container.querySelector('.ncua-image-file-input__empty-slot-wrapper');
+/** 요소가 없으면 throw 한다 — 선택적 체이닝은 요소 부재에도 이후 단언이 통과해 버린다 */
+const clickElement = (element) => {
+    if (!element)
+        throw new Error('클릭할 요소를 찾지 못했습니다');
+    act(() => {
+        element.click();
+    });
+};
+/* ========== P0 — uncontrolled · 삭제 · 크기 검증 · 찾기 ========== */
+describe('RIF-01 uncontrolled(value 없음)', () => {
+    it('RIF-01 선택하면 내부 목록으로 onFileSelect 를 부르고 미리보기를 표시한다', () => {
+        const onFileSelect = vi.fn();
+        const { container } = mount({ onFileSelect, maxFileCount: MAX_COUNT });
+        const picked = makeFile('a.png');
+        selectFiles(container, [picked]);
+        expect(indexesIn([picked], lastFilesOf(onFileSelect))).toEqual([0]);
+        expect(previewImages(container).map((img) => img.getAttribute('src'))).toEqual(['blob:mock/1']);
+    });
+    it('RIF-01 다시 고르면 내부 목록에 누적한다', () => {
+        const onFileSelect = vi.fn();
+        const { container } = mount({ onFileSelect, maxFileCount: MAX_COUNT });
+        const first = makeFile('first.png');
+        const second = makeFile('second.png');
+        selectFiles(container, [first]);
+        selectFiles(container, [second]);
+        expect(indexesIn([first, second], lastFilesOf(onFileSelect))).toEqual([0, 1]);
+        expect(previewImages(container)).toHaveLength(2);
+    });
+    it('RIF-01 새 파일을 삭제하면 나머지로 onFileSelect 를 부르고 미리보기가 줄어든다', () => {
+        const onFileSelect = vi.fn();
+        const { container } = mount({ onFileSelect, multiple: true, maxFileCount: MAX_COUNT });
+        const first = makeFile('first.png');
+        const second = makeFile('second.png');
+        selectFiles(container, [first, second]);
+        clickElement(removeButtons(container)[0]);
+        expect(indexesIn([second], lastFilesOf(onFileSelect))).toEqual([0]);
+        expect(previewImages(container).map((img) => img.alt)).toEqual(['second.png']);
+    });
+});
+describe('RIF-02 controlled 새 파일 삭제', () => {
+    it('RIF-02 미리보기 삭제는 그 index 를 뺀 목록으로 onChange 를 부른다', () => {
+        const onChange = vi.fn();
+        const first = makeFile('first.png');
+        const second = makeFile('second.png');
+        const { container } = mount({ value: [first, second], onChange, maxFileCount: MAX_COUNT });
+        clickElement(removeButtons(container)[1]);
+        expect(indexesIn([first], lastFilesOf(onChange))).toEqual([0]);
+    });
+});
+describe('RIF-03 maxFileSize 초과', () => {
+    it('RIF-03 EXCEED_MAX_FILE_SIZE 로 onFail 을 부르고 항목이 파일 정보를 보존한다', () => {
+        const onFail = vi.fn();
+        const onFileSelect = vi.fn();
+        const { container } = mount({ onFail, onFileSelect, maxFileSize: MAX_FILE_SIZE });
+        selectFiles(container, [makeFile('big.png', OVER_SIZE)]);
+        const [item] = onFail.mock.calls[0][0];
+        expect(item.errorType).toBe(ImageFileInputErrorType.EXCEED_MAX_FILE_SIZE);
+        expect(item.name).toBe('big.png');
+        expect(item.size).toBe(OVER_SIZE);
+        expect(item.type).toBe('image/png');
+        expect(item.lastModified).toBe(LAST_MODIFIED);
+        expect(onFileSelect).not.toHaveBeenCalled();
+    });
+    it('RIF-03 항목의 arrayBuffer · stream · text · slice 는 원본 File 로 위임한다', () => {
+        const onFail = vi.fn();
+        const { container } = mount({ onFail, maxFileSize: MAX_FILE_SIZE });
+        const big = makeFile('big.png', OVER_SIZE);
+        const delegates = {
+            arrayBuffer: vi.fn(),
+            stream: vi.fn(),
+            text: vi.fn(),
+            slice: vi.fn(),
+        };
+        for (const [key, fn] of Object.entries(delegates)) {
+            Object.defineProperty(big, key, { configurable: true, value: fn });
+        }
+        selectFiles(container, [big]);
+        const [item] = onFail.mock.calls[0][0];
+        item.arrayBuffer();
+        item.stream();
+        item.text();
+        item.slice(0, 1);
+        expect(delegates.arrayBuffer).toHaveBeenCalled();
+        expect(delegates.stream).toHaveBeenCalled();
+        expect(delegates.text).toHaveBeenCalled();
+        expect(delegates.slice).toHaveBeenCalledWith(0, 1);
+    });
+});
+describe('RIF-04 찾기 버튼 · 빈 슬롯 click', () => {
+    it('RIF-04 찾기 버튼 click 은 숨은 input.click() 을 부른다', () => {
+        const { container } = mount({});
+        const clickSpy = vi.spyOn(fileInputOf(container), 'click');
+        clickElement(browseButton(container));
+        expect(clickSpy).toHaveBeenCalled();
+    });
+    it('RIF-04 빈 슬롯 wrapper click 도 input.click() 을 부른다', () => {
+        const { container } = mount({});
+        const clickSpy = vi.spyOn(fileInputOf(container), 'click');
+        clickElement(emptySlotWrapper(container));
+        expect(clickSpy).toHaveBeenCalled();
+    });
+    it('RIF-04 disabled 면 빈 슬롯 wrapper click 을 무시한다', () => {
+        const { container } = mount({ disabled: true });
+        const clickSpy = vi.spyOn(fileInputOf(container), 'click');
+        clickElement(emptySlotWrapper(container));
+        expect(clickSpy).not.toHaveBeenCalled();
+    });
+});
+/* ========== 나머지 분기 — hover · 표시 옵션 · 방어 분기 · 결함 후보 ========== */
+const slotTooltipPanel = () => document.querySelector('.ncua-image-file-input__slot-tooltip');
+const isSlotTooltipVisible = () => slotTooltipPanel()?.classList.contains('ncua-tooltip__bg--visible') ?? false;
+/** React 의 onMouseEnter/onMouseLeave 는 relatedTarget 이 있는 mouseover/mouseout 으로 구동된다 */
+const hover = (element, type) => {
+    if (!element)
+        throw new Error('hover 할 요소를 찾지 못했습니다');
+    act(() => {
+        element.dispatchEvent(new MouseEvent(type, { bubbles: true, relatedTarget: document.body }));
+    });
+};
+describe('RIF-05 빈 슬롯 hover 툴팁', () => {
+    it('RIF-05 hover 하면 툴팁을 보이고 mouseleave 로 숨긴다', () => {
+        const { container } = mount({});
+        expect(isSlotTooltipVisible()).toBe(false);
+        hover(emptySlotWrapper(container), 'mouseover');
+        expect(isSlotTooltipVisible()).toBe(true);
+        hover(emptySlotWrapper(container), 'mouseout');
+        expect(isSlotTooltipVisible()).toBe(false);
+    });
+    it('RIF-05 disabled 면 hover 해도 툴팁을 보이지 않는다', () => {
+        const { container } = mount({ disabled: true });
+        hover(emptySlotWrapper(container), 'mouseover');
+        expect(isSlotTooltipVisible()).toBe(false);
+    });
+    it('RIF-05 hover 중 disabled 로 바뀌면 툴팁을 숨긴다', () => {
+        const { container, rerender } = mount({});
+        hover(emptySlotWrapper(container), 'mouseover');
+        expect(isSlotTooltipVisible()).toBe(true);
+        rerender({ disabled: true });
+        expect(isSlotTooltipVisible()).toBe(false);
+    });
+});
+describe('RIF-06 표시 옵션', () => {
+    it('RIF-06 hintItems 를 ul/li 목록으로 렌더한다', () => {
+        const { container } = mount({ hintItems: ['첫째 안내', '둘째 안내'] });
+        expect(Array.from(container.querySelectorAll('.ncua-file-input__hint-item')).map((li) => li.textContent)).toEqual([
+            '첫째 안내',
+            '둘째 안내',
+        ]);
+    });
+    it('RIF-06 hintItems 가 빈 배열이면 목록을 렌더하지 않는다', () => {
+        const { container } = mount({ hintItems: [] });
+        expect(container.querySelector('.ncua-file-input__hint-list')).toBeNull();
+    });
+    it('RIF-06 hintText 를 렌더하고 destructive 면 destructive 클래스를 붙인다', () => {
+        const { container } = mount({ hintText: '5MB 이하', destructive: true });
+        const hint = container.querySelector('.ncua-hint-text');
+        expect(hint?.textContent).toBe('5MB 이하');
+        expect(hint?.classList.contains('destructive')).toBe(true);
+    });
+    it('RIF-06 showHintText false 면 hintText 와 hintItems 를 모두 숨긴다', () => {
+        const { container } = mount({ hintText: '5MB 이하', hintItems: ['안내'], showHintText: false });
+        expect(container.querySelector('.ncua-hint-text')).toBeNull();
+        expect(container.querySelector('.ncua-file-input__hint-list')).toBeNull();
+    });
+    it('RIF-06 showHelpIcon 이면 label 옆에 help icon 을 렌더한다', () => {
+        const { container } = mount({ label: '대표 이미지', showHelpIcon: true });
+        expect(container.querySelector('.ncua-file-input__label .ncua-input__help-icon')).not.toBeNull();
+    });
+    it('RIF-06 showFileInput false 면 찾기 버튼 영역을 렌더하지 않는다', () => {
+        const { container } = mount({ showFileInput: false });
+        expect(container.querySelector('.ncua-file-input')).toBeNull();
+        expect(emptySlotWrapper(container)).not.toBeNull();
+    });
+});
+describe('RIF-07 방어 분기', () => {
+    it.each([
+        ['files 가 null', null],
+        ['빈 목록', []],
+    ])('RIF-07 %s 인 change 는 무시한다', (_label, files) => {
+        const onFileSelect = vi.fn();
+        const onFail = vi.fn();
+        const { container } = mount({ onFileSelect, onFail });
+        selectFiles(container, files);
+        expect(onFileSelect).not.toHaveBeenCalled();
+        expect(onFail).not.toHaveBeenCalled();
+    });
+    it('RIF-07 fileName 이 없는 저장 항목(타입 밖 사용)은 alt 를 빈 문자열로 둔다', () => {
+        const { container } = mount({
+            uploadedFiles: [
+                { fileImageUrl: 'https://cdn.example/no-name.jpg' },
+            ],
+        });
+        expect(previewImages(container)[0].getAttribute('alt')).toBe('');
+    });
+});
+describe('RIF-08 maxFileCount 1 + multiple', () => {
+    it('RIF-08 두 장을 한 번에 고르면 개수 검사 없이 두 장 모두 onChange 로 전달한다', () => {
+        // 현재 동작 고정 — 결함 후보: 후속 이슈 (교체 분기가 개수 검사를 건너뛰어 한 장 제한을 넘김 — vanilla IFM-09 와 같은 뿌리)
+        const onChange = vi.fn();
+        const { container } = mount({ value: [], onChange, multiple: true, maxFileCount: 1 });
+        const first = makeFile('first.png');
+        const second = makeFile('second.png');
+        selectFiles(container, [first, second]);
+        expect(indexesIn([first, second], lastFilesOf(onChange))).toEqual([0, 1]);
+    });
+    it.todo('RIF-08 maxFileCount 1 이면 한 번에 여러 장을 골라도 한 장만 수용하고 나머지는 반려한다 (기대 동작)');
+});
+describe('RIF-09 빈 슬롯 버튼 click', () => {
+    it('RIF-09 빈 슬롯 버튼 click 한 번에 input.click() 이 두 번 불린다', () => {
+        // 현재 동작 고정 — 결함 후보: 후속 이슈 (Button onClick + wrapper onClick 버블링으로 중복 호출 — vanilla IFE-12 와 같은 뿌리)
+        const { container } = mount({});
+        const clickSpy = vi.spyOn(fileInputOf(container), 'click');
+        clickElement(emptySlotWrapper(container)?.querySelector('button'));
+        expect(clickSpy).toHaveBeenCalledTimes(2);
+    });
+    it.todo('RIF-09 빈 슬롯 버튼 click 한 번에 input.click() 은 한 번만 불린다 (기대 동작)');
+});
+describe('RIF-10 문서화된 validation · showFileTagList', () => {
+    it('RIF-10 validation · showFileTagList 를 바꿔도 렌더 결과가 달라지지 않는다', () => {
+        // 현재 동작 고정 — 결함 후보: 후속 이슈 (문서화된 prop 을 받기만 하고 쓰지 않음 — vanilla IFV-06 과 한 행으로 묶음)
+        const first = mount({ validation: true, showFileTagList: true, hintText: '안내' });
+        const second = mount({ validation: false, showFileTagList: false, hintText: '안내' });
+        expect(first.container.innerHTML).toBe(second.container.innerHTML);
+    });
+    it.todo('RIF-10 validation · showFileTagList 가 화면에 반영되거나, 쓰지 않는 prop 이면 타입·문서에서 빠진다 (기대 동작)');
+});
+describe('RIF-11 나머지 props 전달 위치', () => {
+    it('RIF-11 className · name 이 루트가 아닌 숨은 input 에 붙는다', () => {
+        // 현재 동작 고정 — 결함 후보: 후속 이슈 (나머지 props 를 숨은 input 에 펼쳐 className 이 루트 스타일링에 쓰이지 않음)
+        const { container } = mount({ className: 'custom-host', name: 'images' });
+        const root = container.querySelector('.ncua-image-file-input');
+        const input = fileInputOf(container);
+        expect(input.classList.contains('custom-host')).toBe(true);
+        expect(input.name).toBe('images');
+        expect(root?.classList.contains('custom-host')).toBe(false);
+    });
+    it('RIF-11 타입이 허용하는 InputBase 전용 prop(fullWidth)은 DOM 미인식 prop 경고를 낸다', () => {
+        // 현재 동작 고정 — 결함 후보: 후속 이슈 (InputBaseProps 를 그대로 받아 input 에 펼쳐 React 미인식 prop 경고)
+        // 경고는 prop 이름별로 모듈 수명 동안 한 번만 나고 boolean 값은 DOM 에 남지 않는다 — 이 파일에서 fullWidth 를 처음 렌더하는 테스트여야 한다
+        const consoleError = vi.spyOn(console, 'error').mockImplementation(() => undefined);
+        mount({ fullWidth: true });
+        expect(consoleError.mock.calls.flat().some((arg) => String(arg).includes('fullWidth'))).toBe(true);
+    });
+    it.todo('RIF-11 className 은 루트에 붙고, 숨은 input 에는 input 속성만 전달된다 (기대 동작)');
+});

package/dist/temp/src/components/forms-and-input/input-base/__tests__/InputBase.slots.test.d.ts

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,177 @@
+// @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) => createElement(InputBase, props);
+/** 폼 안에 렌더하고 submit 발생을 기록한다 (preventDefault 로 jsdom 의 폼 전송을 막는다) */
+const mountInForm = (node) => {
+    const submits = [];
+    const view = mount(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: 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 = createRef();
+        const view = mount(createElement(InputBase, { ref }));
+        expect(ref.current).toBe(mustQuery(view.container, 'input'));
+    });
+    it('INB-08 함수 ref 는 input 요소로 호출된다', () => {
+        const received = [];
+        const view = mount(createElement(InputBase, { ref: (node) => received.push(node) }));
+        expect(received[0]).toBe(mustQuery(view.container, 'input'));
+    });
+});

package/dist/temp/src/components/forms-and-input/number-input/__tests__/NumberInput.test.d.ts

@@ -0,0 +1 @@
+export {};