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

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

@@ -0,0 +1,434 @@
+// @vitest-environment jsdom
+//
+// NumberInput (React) 위험 경로 — 위험 목록표 NI-xx.
+// 스테퍼·화살표 증감은 input.value 를 직접 대입한 뒤 bubbling input 이벤트를 보낸다.
+// React onChange 로는 전달되지 않으므로(NI-02) 결과는 DOM 값과 네이티브 리스너로 관찰한다.
+import { createElement, createRef, useState } from 'react';
+import { createRoot } from 'react-dom/client';
+import { act } from 'react-dom/test-utils';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { NumberInput } from '../NumberInput';
+globalThis.IS_REACT_ACT_ENVIRONMENT = true;
+const STEP_TWO = 2;
+/** up·down 한 쌍 */
+const STEPPER_COUNT = 2;
+const MIN = 0;
+const MAX = 10;
+/** min·max 범위 밖 현재값 */
+const ABOVE_MAX = 20;
+const BELOW_MIN = -10;
+/** min·max 미지정 시 증가 확인용 큰 값 */
+const UNBOUNDED_VALUE = 100;
+let root = null;
+let container = null;
+const renderElement = (element) => {
+    if (!container) {
+        container = document.createElement('div');
+        document.body.appendChild(container);
+        root = createRoot(container);
+    }
+    act(() => {
+        root?.render(element);
+    });
+    return container;
+};
+/** 같은 root 에 다시 render 하면 props 변경(재렌더)이 된다 */
+const render = (props = {}) => renderElement(createElement(NumberInput, { stepperPosition: 'trailing', ...props }));
+afterEach(() => {
+    if (root) {
+        act(() => {
+            root?.unmount();
+        });
+    }
+    root = null;
+    container = null;
+    document.body.innerHTML = '';
+    vi.restoreAllMocks();
+    vi.unstubAllGlobals();
+});
+const requireElement = (scope, selector) => {
+    const element = scope.querySelector(selector);
+    if (!element)
+        throw new Error(`요소를 찾을 수 없습니다: ${selector}`);
+    return element;
+};
+const inputOf = (view) => requireElement(view, 'input');
+const upOf = (view) => requireElement(view, '.ncua-button-stepper--up');
+const downOf = (view) => requireElement(view, '.ncua-button-stepper--down');
+const steppersOf = (view) => view.querySelectorAll('.ncua-button-stepper');
+const click = (element) => {
+    act(() => {
+        element.click();
+    });
+};
+const keyDown = (element, key) => {
+    const event = new KeyboardEvent('keydown', { key, bubbles: true, cancelable: true });
+    act(() => {
+        element.dispatchEvent(event);
+    });
+    return event;
+};
+// ── P0 ─────────────────────────────────────────────────
+describe('NumberInput — 스테퍼 증감 (NI-01)', () => {
+    it('NI-01 up·down click 은 DOM 값을 step(기본 1) 만큼 올리고 내린다', () => {
+        const view = render({ defaultValue: '5' });
+        click(upOf(view));
+        expect(inputOf(view).value).toBe('6');
+        click(downOf(view));
+        click(downOf(view));
+        expect(inputOf(view).value).toBe('4');
+    });
+    it('NI-01 step 을 지정하면 그만큼 증감한다', () => {
+        const view = render({ defaultValue: '5', step: STEP_TWO });
+        click(upOf(view));
+        expect(inputOf(view).value).toBe('7');
+        click(downOf(view));
+        click(downOf(view));
+        expect(inputOf(view).value).toBe('3');
+    });
+    it('NI-01 빈 값은 0 기준으로 증감한다', () => {
+        const view = render();
+        click(upOf(view));
+        expect(inputOf(view).value).toBe('1');
+        act(() => {
+            inputOf(view).value = '';
+        });
+        click(downOf(view));
+        expect(inputOf(view).value).toBe('-1');
+    });
+    it('NI-01 증감마다 bubbling input 이벤트를 보내 네이티브 리스너가 새 값을 받는다', () => {
+        const view = render({ defaultValue: '1' });
+        const received = [];
+        view.addEventListener('input', (event) => {
+            received.push(event.target.value);
+        });
+        click(upOf(view));
+        click(downOf(view));
+        expect(received).toEqual(['2', '1']);
+    });
+});
+describe('NumberInput — React onChange 미전달 (NI-02)', () => {
+    it('NI-02 controlled: 스테퍼·화살표로 바뀐 값이 onChange 로 가지 않아 부모 state 는 그대로, DOM 만 바뀐다', () => {
+        // 현재 동작 고정 — 결함 후보: #592 (value 직접 대입으로 React 값 추적기가 갱신돼 input 이벤트를 변경 없음으로 판정)
+        const onChange = vi.fn();
+        const Parent = () => {
+            const [value, setValue] = useState('1');
+            return createElement('div', null, createElement(NumberInput, {
+                stepperPosition: 'trailing',
+                value,
+                onChange: (event) => {
+                    onChange(event.target.value);
+                    setValue(event.target.value);
+                },
+            }), createElement('output', null, value));
+        };
+        const view = renderElement(createElement(Parent));
+        click(upOf(view));
+        keyDown(inputOf(view), 'ArrowUp');
+        expect(onChange).not.toHaveBeenCalled();
+        expect(requireElement(view, 'output').textContent).toBe('1');
+        expect(inputOf(view).value).toBe('3');
+    });
+    it('NI-02 uncontrolled·register 형태(onChange·name·ref)여도 onChange 는 호출되지 않는다', () => {
+        // 현재 동작 고정 — 결함 후보: #592 (react-hook-form register 가 스테퍼 값을 받지 못함)
+        const registerOnChange = vi.fn();
+        const registerRef = vi.fn();
+        const view = render({ name: 'quantity', onChange: registerOnChange, onBlur: vi.fn(), ref: registerRef });
+        click(upOf(view));
+        keyDown(inputOf(view), 'ArrowDown');
+        click(upOf(view));
+        expect(registerOnChange).not.toHaveBeenCalled();
+        expect(inputOf(view).value).toBe('1');
+        expect(registerRef).toHaveBeenCalledWith(inputOf(view));
+    });
+    it('NI-02 직접 타이핑(네이티브 value setter + input) 은 onChange 로 전달된다 — 대조군', () => {
+        const onChange = vi.fn();
+        const view = render({ onChange });
+        const input = inputOf(view);
+        const nativeSetter = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value')?.set;
+        act(() => {
+            nativeSetter?.call(input, '7');
+            input.dispatchEvent(new Event('input', { bubbles: true }));
+        });
+        expect(onChange).toHaveBeenCalledTimes(1);
+    });
+    it.todo('NI-02 controlled 에서 스테퍼 click 은 onChange 로 새 값을 전달해 부모 state 가 갱신된다 (#592)');
+    it.todo('NI-02 화살표 키 증감도 onChange(register.onChange 포함) 로 새 값을 전달한다 (#592)');
+});
+describe('NumberInput — min/max (NI-03)', () => {
+    it('NI-03 max 를 넘는 증가는 무시되고 input 이벤트도 보내지 않는다', () => {
+        const view = render({ defaultValue: String(MAX), minValue: MIN, maxValue: MAX });
+        const onInput = vi.fn();
+        view.addEventListener('input', onInput);
+        click(upOf(view));
+        expect(inputOf(view).value).toBe(String(MAX));
+        expect(onInput).not.toHaveBeenCalled();
+    });
+    it('NI-03 결과가 max 와 같으면 허용한다', () => {
+        const view = render({ defaultValue: String(MAX - 1), maxValue: MAX });
+        click(upOf(view));
+        expect(inputOf(view).value).toBe(String(MAX));
+    });
+    it('NI-03 min 아래로 가는 감소는 무시되고, 결과가 min 과 같으면 허용한다', () => {
+        const view = render({ defaultValue: String(MIN + 1), minValue: MIN, maxValue: MAX });
+        click(downOf(view));
+        expect(inputOf(view).value).toBe(String(MIN));
+        click(downOf(view));
+        expect(inputOf(view).value).toBe(String(MIN));
+    });
+    it('NI-03 max 보다 큰 현재값에서 감소하면 max 로 클램프된다', () => {
+        const view = render({ defaultValue: String(ABOVE_MAX), minValue: MIN, maxValue: MAX });
+        click(downOf(view));
+        expect(inputOf(view).value).toBe(String(MAX));
+    });
+    it('NI-03 min 보다 작은 현재값에서 증가하면 min 으로 클램프된다', () => {
+        const view = render({ defaultValue: String(BELOW_MIN), minValue: MIN, maxValue: MAX });
+        click(upOf(view));
+        expect(inputOf(view).value).toBe(String(MIN));
+    });
+    it('NI-03 min·max 미지정이면 무제한으로 증감한다', () => {
+        const view = render({ defaultValue: String(MIN) });
+        click(downOf(view));
+        expect(inputOf(view).value).toBe('-1');
+        act(() => {
+            inputOf(view).value = String(UNBOUNDED_VALUE);
+        });
+        click(upOf(view));
+        expect(inputOf(view).value).toBe(String(UNBOUNDED_VALUE + 1));
+    });
+});
+describe('NumberInput — disabled (NI-04)', () => {
+    it('NI-04 disabled 면 스테퍼 button·input 이 disabled 이고 루트에 is-disabled 가 붙는다', () => {
+        const view = render({ defaultValue: '1', disabled: true });
+        expect(steppersOf(view)).toHaveLength(STEPPER_COUNT);
+        expect(upOf(view).disabled).toBe(true);
+        expect(downOf(view).disabled).toBe(true);
+        expect(inputOf(view).disabled).toBe(true);
+        expect(requireElement(view, '.ncua-input').classList.contains('is-disabled')).toBe(true);
+    });
+    it('NI-04 disabled 면 스테퍼 click·화살표 키가 값을 바꾸지 않고 키 기본 동작도 막지 않는다', () => {
+        const view = render({ defaultValue: '1', disabled: true });
+        click(upOf(view));
+        expect(inputOf(view).value).toBe('1');
+        click(downOf(view));
+        expect(inputOf(view).value).toBe('1');
+        const event = keyDown(inputOf(view), 'ArrowUp');
+        expect(inputOf(view).value).toBe('1');
+        expect(event.defaultPrevented).toBe(false);
+    });
+});
+// ── P1~P3 ──────────────────────────────────────────────
+/** 남은 거리보다 큰 step — 9 + 5 > max 10 */
+const LARGE_STEP = 5;
+/** min > max 로 뒤집힌 범위 */
+const INVERTED_MIN = MAX;
+const INVERTED_MAX = MIN;
+const DECIMAL_STEP = 0.1;
+const NEGATIVE_STEP = -1;
+const fieldOf = (view) => requireElement(view, '.ncua-input__field');
+const rootOf = (view) => requireElement(view, '.ncua-input');
+describe('NumberInput — 키보드 (NI-05)', () => {
+    it('NI-05 ArrowUp·ArrowDown 은 증감하고 기본 동작을 막는다', () => {
+        const view = render({ defaultValue: '3' });
+        const up = keyDown(inputOf(view), 'ArrowUp');
+        expect(inputOf(view).value).toBe('4');
+        expect(up.defaultPrevented).toBe(true);
+        const down = keyDown(inputOf(view), 'ArrowDown');
+        expect(inputOf(view).value).toBe('3');
+        expect(down.defaultPrevented).toBe(true);
+    });
+    it.each(['Enter', 'a', 'ArrowLeft'])('NI-05 "%s" 는 값을 바꾸지 않고 기본 동작을 유지한다', (key) => {
+        const view = render({ defaultValue: '3' });
+        const event = keyDown(inputOf(view), key);
+        expect(inputOf(view).value).toBe('3');
+        expect(event.defaultPrevented).toBe(false);
+    });
+    it('NI-05 화살표 증감도 min/max 를 지킨다', () => {
+        const view = render({ defaultValue: String(MAX), minValue: MIN, maxValue: MAX });
+        keyDown(inputOf(view), 'ArrowUp');
+        expect(inputOf(view).value).toBe(String(MAX));
+    });
+});
+describe('NumberInput — ref (NI-06)', () => {
+    it('NI-06 객체 ref 는 input 요소를 가리킨다', () => {
+        const ref = createRef();
+        const view = render({ ref });
+        expect(ref.current).toBe(inputOf(view));
+    });
+    it('NI-06 함수 ref 는 input 요소로 호출되고 언마운트 시 null 로 호출된다', () => {
+        const ref = vi.fn();
+        const view = render({ ref });
+        const input = inputOf(view);
+        expect(ref).toHaveBeenCalledWith(input);
+        act(() => {
+            root?.unmount();
+        });
+        root = null;
+        expect(ref).toHaveBeenLastCalledWith(null);
+    });
+    it('NI-06 ref 를 넘기지 않아도 스테퍼가 내부 ref 로 동작한다', () => {
+        const view = render({ defaultValue: '1' });
+        click(upOf(view));
+        expect(inputOf(view).value).toBe('2');
+    });
+});
+describe('NumberInput — 배치·속성 (NI-07)', () => {
+    it('NI-07 trailing 은 field 안 input 뒤에, leading 은 input 앞에 스테퍼 그룹을 둔다', () => {
+        const trailing = render({ stepperPosition: 'trailing' });
+        expect(inputOf(trailing).nextElementSibling?.classList.contains('ncua-input__stepper-button-group')).toBe(true);
+        expect(fieldOf(trailing).firstElementChild).toBe(inputOf(trailing));
+        const leading = render({ stepperPosition: 'leading' });
+        expect(fieldOf(leading).firstElementChild?.classList.contains('ncua-input__stepper-button-group')).toBe(true);
+        expect(fieldOf(leading).lastElementChild).toBe(inputOf(leading));
+        expect(steppersOf(leading)).toHaveLength(STEPPER_COUNT);
+    });
+    it('NI-07 기본 size 는 xs 로 스테퍼·InputBase 에 전달된다', () => {
+        const view = render();
+        expect(upOf(view).classList.contains('ncua-button-stepper--xs')).toBe(true);
+        expect(downOf(view).classList.contains('ncua-button-stepper--xs')).toBe(true);
+        expect(rootOf(view).classList.contains('ncua-input--xs')).toBe(true);
+    });
+    it('NI-07 size sm 은 스테퍼·InputBase 모두 sm 이다', () => {
+        const view = render({ size: 'sm' });
+        expect(upOf(view).classList.contains('ncua-button-stepper--sm')).toBe(true);
+        expect(rootOf(view).classList.contains('ncua-input--sm')).toBe(true);
+    });
+    it('NI-07 input 은 type=number 와 min·max·step 속성, 루트는 ncua-input__number 를 갖는다', () => {
+        const view = render({ minValue: MIN, maxValue: MAX, step: STEP_TWO });
+        const input = inputOf(view);
+        expect(input.type).toBe('number');
+        expect(input.getAttribute('min')).toBe(String(MIN));
+        expect(input.getAttribute('max')).toBe(String(MAX));
+        expect(input.getAttribute('step')).toBe(String(STEP_TWO));
+        expect(rootOf(view).classList.contains('ncua-input__number')).toBe(true);
+    });
+    it('NI-07 min·max 미지정이면 속성이 없고 step 은 기본 1 이다', () => {
+        const input = inputOf(render());
+        expect(input.hasAttribute('min')).toBe(false);
+        expect(input.hasAttribute('max')).toBe(false);
+        expect(input.getAttribute('step')).toBe('1');
+    });
+});
+describe('NumberInput — 소비자 props 덮어쓰기 (NI-08)', () => {
+    it('NI-08 같은 위치의 trailingElement 를 주면 스테퍼가 사라진다', () => {
+        // 현재 동작 고정 — 결함 후보: #593 ({...props} 가 내부 trailingElement 를 덮음)
+        const view = render({ stepperPosition: 'trailing', trailingElement: { type: 'text', text: '개' } });
+        expect(steppersOf(view)).toHaveLength(0);
+        expect(requireElement(view, '.ncua-input__trailing-text').textContent).toBe('개');
+    });
+    it('NI-08 같은 위치의 leadingElement 를 주면 스테퍼가 사라진다', () => {
+        // 현재 동작 고정 — 결함 후보: #593 ({...props} 가 내부 leadingElement 를 덮음)
+        const view = render({ stepperPosition: 'leading', leadingElement: { type: 'text', text: '수량' } });
+        expect(steppersOf(view)).toHaveLength(0);
+    });
+    it('NI-08 onKeyDown 을 주면 화살표 증감이 우회되고 소비자 핸들러만 호출된다', () => {
+        // 현재 동작 고정 — 결함 후보: #593 ({...props} 가 내부 handleKeyDown 을 덮음)
+        const onKeyDown = vi.fn();
+        const view = render({ defaultValue: '1', onKeyDown });
+        const event = keyDown(inputOf(view), 'ArrowUp');
+        expect(onKeyDown).toHaveBeenCalledTimes(1);
+        expect(inputOf(view).value).toBe('1');
+        expect(event.defaultPrevented).toBe(false);
+    });
+    it('NI-08 className 을 주면 ncua-input__number 가 사라진다', () => {
+        // 현재 동작 고정 — 결함 후보: #593 ({...props} 가 내부 className 을 덮음)
+        const view = render({ className: 'custom' });
+        expect(rootOf(view).classList.contains('custom')).toBe(true);
+        expect(rootOf(view).classList.contains('ncua-input__number')).toBe(false);
+    });
+    it.todo('NI-08 같은 위치 slot 을 줘도 스테퍼가 유지된다 (내부 값 우선) (#593)');
+    it.todo('NI-08 onKeyDown 을 줘도 화살표 증감 후 소비자 onKeyDown 을 호출한다 (핸들러 합성) (#593)');
+    it.todo('NI-08 className 은 ncua-input__number 와 병합된다 (#593)');
+});
+describe('NumberInput — 반대 위치 slot·has-value (NI-09)', () => {
+    it('NI-09 leading 스테퍼와 trailing text 를 함께 렌더한다', () => {
+        const view = render({ stepperPosition: 'leading', trailingElement: { type: 'text', text: '개' } });
+        expect(steppersOf(view)).toHaveLength(STEPPER_COUNT);
+        expect(requireElement(view, '.ncua-input__trailing-text').textContent).toBe('개');
+    });
+    it('NI-09 trailing 스테퍼와 leading text 를 함께 렌더한다', () => {
+        const view = render({ stepperPosition: 'trailing', leadingElement: { type: 'text', text: '수량' } });
+        expect(steppersOf(view)).toHaveLength(STEPPER_COUNT);
+        expect(requireElement(view, '.ncua-input__leading-text').textContent).toBe('수량');
+    });
+    it('NI-09 uncontrolled 는 스테퍼로 값이 생기면 has-value 가 붙는다', () => {
+        const view = render();
+        expect(rootOf(view).classList.contains('has-value')).toBe(false);
+        click(upOf(view));
+        expect(rootOf(view).classList.contains('has-value')).toBe(true);
+    });
+});
+describe('NumberInput — readOnly (NI-10)', () => {
+    it('NI-10 readOnly 여도 스테퍼·화살표가 DOM 값을 바꾼다', () => {
+        // 현재 동작 고정 — 결함 후보: #593 (readOnly 를 보지 않음)
+        const view = render({ defaultValue: '1', readOnly: true });
+        click(upOf(view));
+        keyDown(inputOf(view), 'ArrowUp');
+        expect(inputOf(view).readOnly).toBe(true);
+        expect(inputOf(view).value).toBe('3');
+        expect(upOf(view).disabled).toBe(false);
+    });
+    it.todo('NI-10 readOnly 면 스테퍼 click·화살표 증감을 무시한다 (#593)');
+});
+describe('NumberInput — step 경계·소수 (NI-11)', () => {
+    it('NI-11 step 이 max 까지 남은 거리보다 크면 증가를 무시해 max 에 도달할 수 없다', () => {
+        // 현재 동작 고정 — 결함 후보: #593 (경계 초과 시 클램프하지 않고 무시)
+        const view = render({ defaultValue: String(MAX - 1), maxValue: MAX, step: LARGE_STEP });
+        click(upOf(view));
+        expect(inputOf(view).value).toBe(String(MAX - 1));
+    });
+    it('NI-11 step 이 min 까지 남은 거리보다 크면 감소를 무시한다', () => {
+        // 현재 동작 고정 — 결함 후보: #593 (경계 초과 시 클램프하지 않고 무시)
+        const view = render({ defaultValue: String(MIN + 1), minValue: MIN, step: LARGE_STEP });
+        click(downOf(view));
+        expect(inputOf(view).value).toBe(String(MIN + 1));
+    });
+    it('NI-11 소수 step 은 부동소수 오차가 그대로 값에 남는다 (0.2 + 0.1)', () => {
+        // 현재 동작 고정 — 결함 후보: #593 (step 소수 자릿수로 반올림하지 않음)
+        const view = render({ defaultValue: '0.2', step: DECIMAL_STEP });
+        click(upOf(view));
+        expect(inputOf(view).value).toBe('0.30000000000000004');
+    });
+    it.todo('NI-11 step 이 남은 거리보다 크면 경계값으로 클램프한다 (#593)');
+    it.todo('NI-11 소수 step 증감 결과는 step 의 소수 자릿수로 반올림된다 (0.2 + 0.1 → 0.3) (#593)');
+});
+describe('NumberInput — 코너 (NI-12)', () => {
+    it('NI-12 지수 표기 값은 parseFloat 로 해석해 증감한다 (1e2 → 101)', () => {
+        const view = render({ defaultValue: '1e2' });
+        click(upOf(view));
+        expect(inputOf(view).value).toBe('101');
+    });
+    it('NI-12 숫자가 아닌 값은 type=number 가 비워 0 기준으로 증감한다', () => {
+        const view = render({ defaultValue: 'abc' });
+        expect(inputOf(view).value).toBe('');
+        click(upOf(view));
+        expect(inputOf(view).value).toBe('1');
+    });
+    it('NI-12 step 0 은 값을 바꾸지 않지만 input 이벤트는 보낸다', () => {
+        const view = render({ defaultValue: '4', step: 0 });
+        const onInput = vi.fn();
+        view.addEventListener('input', onInput);
+        click(upOf(view));
+        expect(inputOf(view).value).toBe('4');
+        expect(onInput).toHaveBeenCalledTimes(1);
+    });
+    it('NI-12 음수 step 은 up 이 감소, down 이 증가가 된다', () => {
+        const view = render({ defaultValue: '4', step: NEGATIVE_STEP });
+        click(upOf(view));
+        expect(inputOf(view).value).toBe('3');
+        click(downOf(view));
+        click(downOf(view));
+        expect(inputOf(view).value).toBe('5');
+    });
+    it('NI-12 min > max 이면 범위 안 값에서 증감이 모두 무시되고, 범위 위 값의 감소는 max 로 클램프된다', () => {
+        const view = render({ defaultValue: String(LARGE_STEP), minValue: INVERTED_MIN, maxValue: INVERTED_MAX });
+        click(upOf(view));
+        click(downOf(view));
+        expect(inputOf(view).value).toBe(String(LARGE_STEP));
+        act(() => {
+            inputOf(view).value = String(ABOVE_MAX);
+        });
+        click(downOf(view));
+        expect(inputOf(view).value).toBe(String(INVERTED_MAX));
+    });
+});

package/dist/temp/src/components/forms-and-input/password-input/__tests__/PasswordInput.toggle.test.d.ts

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

package/dist/temp/src/components/forms-and-input/password-input/__tests__/PasswordInput.toggle.test.js

@@ -0,0 +1,88 @@
+// @vitest-environment jsdom
+import { Eye, EyeOff } from '@ncds/ui-admin-icon';
+import { createElement } from 'react';
+import { createRoot } from 'react-dom/client';
+import { renderToStaticMarkup } from 'react-dom/server';
+import { act } from 'react-dom/test-utils';
+import { afterEach, describe, expect, it } from 'vitest';
+import { PasswordInput } from '../PasswordInput';
+// React 18에서 act() 사용 시 필요한 플래그 (미설정 시 console.error 경고 발생)
+globalThis.IS_REACT_ACT_ENVIRONMENT = true;
+/** 합성 더미 값 — 실제 비밀번호 형식을 쓰지 않는다 */
+const DUMMY_VALUE = 'dummy';
+/** xs 기본 아이콘 크기 */
+const ICON_SIZE_XS = 14;
+const mounted = [];
+afterEach(() => {
+    for (const { root, container } of mounted.splice(0)) {
+        act(() => root.unmount());
+        container.remove();
+    }
+});
+const mountInForm = (node) => {
+    const container = document.createElement('div');
+    document.body.appendChild(container);
+    const root = createRoot(container);
+    mounted.push({ root, container });
+    const submits = [];
+    act(() => root.render(createElement('form', {
+        onSubmit: (event) => {
+            event.preventDefault();
+            submits.push(event.nativeEvent);
+        },
+    }, node)));
+    return { container, submits };
+};
+const mustQuery = (root, selector) => {
+    const found = root.querySelector(selector);
+    if (!found)
+        throw new Error(`요소를 찾을 수 없습니다: ${selector}`);
+    return found;
+};
+/** 아이콘 컴포넌트의 기대 마크업 — 토글 버튼 안 SVG 가 어느 아이콘인지 구분한다 */
+const iconMarkup = (icon) => renderToStaticMarkup(createElement(icon, { width: ICON_SIZE_XS, height: ICON_SIZE_XS }));
+describe('PasswordInput — 보기 토글 (PWI-01)', () => {
+    it('PWI-01 처음에는 password 타입과 EyeOff 아이콘이고, 토글 버튼은 type button 이다', () => {
+        // Given/When: 폼 안에 렌더하면
+        const view = mountInForm(createElement(PasswordInput, { defaultValue: DUMMY_VALUE }));
+        // Then: 가린 상태다
+        const input = mustQuery(view.container, 'input');
+        const toggle = mustQuery(view.container, '.ncua-input__password-icon');
+        expect(input.type).toBe('password');
+        expect(toggle.innerHTML).toBe(iconMarkup(EyeOff));
+        expect(toggle.getAttribute('type')).toBe('button');
+    });
+    it('PWI-01 토글을 클릭하면 text 타입과 Eye 아이콘이 되고, 폼은 제출되지 않는다', () => {
+        // Given: 폼 안의 가린 상태
+        const view = mountInForm(createElement(PasswordInput, { defaultValue: DUMMY_VALUE }));
+        const toggle = mustQuery(view.container, '.ncua-input__password-icon');
+        // When: 토글을 클릭한다
+        act(() => toggle.click());
+        // Then: 보이는 상태이고 submit 이 없다
+        expect(mustQuery(view.container, 'input').type).toBe('text');
+        expect(toggle.innerHTML).toBe(iconMarkup(Eye));
+        expect(view.submits).toEqual([]);
+    });
+    it('PWI-01 (대조) 같은 폼의 type="submit" 버튼을 클릭하면 제출이 기록된다 — "제출 안 됨" 단언이 공허하지 않음', () => {
+        // Given: 토글과 submit 버튼이 함께 있는 폼
+        const view = mountInForm(createElement('div', null, createElement(PasswordInput, { defaultValue: DUMMY_VALUE }), createElement('button', { type: 'submit', className: 'submit-control' }, '제출')));
+        // When: submit 버튼을 클릭한다
+        act(() => mustQuery(view.container, '.submit-control').click());
+        // Then: 제출이 한 번 기록된다
+        expect(view.submits).toHaveLength(1);
+    });
+    it('PWI-01 다시 클릭하면 password 타입과 EyeOff 아이콘으로 돌아간다', () => {
+        // Given: 한 번 토글한 상태
+        const view = mountInForm(createElement(PasswordInput, { defaultValue: DUMMY_VALUE }));
+        const toggle = mustQuery(view.container, '.ncua-input__password-icon');
+        act(() => toggle.click());
+        // When: 다시 클릭한다
+        act(() => toggle.click());
+        // Then: 가린 상태로 돌아간다
+        expect(mustQuery(view.container, 'input').type).toBe('password');
+        expect(toggle.innerHTML).toBe(iconMarkup(EyeOff));
+    });
+    it('PWI-01 (대조) Eye 와 EyeOff 마크업은 서로 달라 아이콘 단언이 공허하지 않다', () => {
+        expect(iconMarkup(Eye)).not.toBe(iconMarkup(EyeOff));
+    });
+});

package/dist/temp/src/components/forms-and-input/radio/__tests__/Radio.test.d.ts

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

package/dist/temp/src/components/forms-and-input/radio/__tests__/Radio.test.js

@@ -0,0 +1,42 @@
+// @vitest-environment jsdom
+import { createElement } from 'react';
+import { createRoot } from 'react-dom/client';
+import { act } from 'react-dom/test-utils';
+import { afterEach, describe, expect, it } from 'vitest';
+import { Radio } from '../Radio';
+// React 18에서 act() 사용 시 필요한 플래그 (미설정 시 console.error 경고 발생)
+globalThis.IS_REACT_ACT_ENVIRONMENT = true;
+const TEXT = '도로명 주소';
+const SUPPORT_TEXT = '건물번호까지 입력';
+const mounted = [];
+afterEach(() => {
+    for (const { root, container } of mounted.splice(0)) {
+        act(() => root.unmount());
+        container.remove();
+    }
+});
+const mountRadio = (props = {}) => {
+    const container = document.createElement('div');
+    document.body.appendChild(container);
+    const root = createRoot(container);
+    mounted.push({ root, container });
+    act(() => root.render(createElement(Radio, { readOnly: true, ...props })));
+    const field = container.querySelector('.ncua-radio-field');
+    if (!field)
+        throw new Error('Radio 를 찾을 수 없습니다');
+    return field;
+};
+describe('Radio — 보조 문구 (RSD-06)', () => {
+    it('RSD-06 supportText 가 있으면 보조 문구를 text 뒤에 그린다', () => {
+        const field = mountRadio({ text: TEXT, supportText: SUPPORT_TEXT });
+        expect(field.querySelector('.ncua-radio-field__support-text')?.textContent).toBe(SUPPORT_TEXT);
+        expect(field.querySelector('.ncua-radio-field__text')?.textContent).toBe(TEXT);
+        expect(field.classList.contains('has-text')).toBe(true);
+    });
+    it('RSD-06 (대조) supportText 와 text 를 생략하면 보조 문구 · 텍스트 · has-text 가 없다', () => {
+        const field = mountRadio();
+        expect(field.querySelector('.ncua-radio-field__support-text')).toBeNull();
+        expect(field.querySelector('.ncua-radio-field__text')).toBeNull();
+        expect(field.classList.contains('has-text')).toBe(false);
+    });
+});