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

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

@@ -0,0 +1,567 @@
+// @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 = function () {
+  let props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return renderElement(/*#__PURE__*/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 /*#__PURE__*/createElement('div', null, /*#__PURE__*/createElement(NumberInput, {
+        stepperPosition: 'trailing',
+        value,
+        onChange: event => {
+          onChange(event.target.value);
+          setValue(event.target.value);
+        }
+      }), /*#__PURE__*/createElement('output', null, value));
+    };
+    const view = renderElement(/*#__PURE__*/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 = /*#__PURE__*/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/esm/src/components/forms-and-input/password-input/__tests__/PasswordInput.toggle.test.js

@@ -0,0 +1,110 @@
+// @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(/*#__PURE__*/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(/*#__PURE__*/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(/*#__PURE__*/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(/*#__PURE__*/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(/*#__PURE__*/createElement('div', null, /*#__PURE__*/createElement(PasswordInput, {
+      defaultValue: DUMMY_VALUE
+    }), /*#__PURE__*/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(/*#__PURE__*/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));
+  });
+});