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

package/dist/esm/src/components/forms-and-input/slider/__tests__/Slider.test.js

@@ -0,0 +1,387 @@
+// @vitest-environment jsdom
+//
+// Slider (React) 위험 경로 — 위험 목록표 RSL-xx.
+// vanilla NcuaSlider(assets/scripts/slider.ts) 실구현을 그대로 쓴다(vi.mock 없음).
+// jsdom 은 레이아웃이 없으므로 컨테이너의 getBoundingClientRect 를 { left: 0, width: TRACK_WIDTH } 로 고정하고
+// clientX 로 위치를 만든다. 기본 0~100 · step 1 이라 "트랙 비율(%) = 값" 이다.
+// vanilla 결함(SL-05a·SL-19a·SL-22)이 React 에 보이면 새 ID 대신 SL ID 를 참조한다.
+import { createElement, useCallback, useState } from 'react';
+import { createRoot } from 'react-dom/client';
+import { act } from 'react-dom/test-utils';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { Slider } from '../Slider';
+globalThis.IS_REACT_ACT_ENVIRONMENT = true;
+const TRACK_WIDTH = 200;
+const PERCENT_SCALE = 100;
+const INITIAL_VALUE = 40;
+const NEXT_VALUE = 50;
+const CLICK_VALUE = 30;
+const DRAG_VALUE = 70;
+const RANGE_LOW = 20;
+const RANGE_HIGH = 60;
+const ABOVE_HIGH = 90;
+const RANGE = [RANGE_LOW, RANGE_HIGH];
+/** 재생성 확인용 옵션 변경값 */
+const WIDE_MAX = 200;
+const STEP_TEN = 10;
+/** step 10 에서 33% 클릭은 30 으로 스냅된다 */
+const OFF_STEP_CLICK = 33;
+/** value 생략 + min > 0 — (0 − 20) / (100 − 20) = −25% */
+const CUSTOM_MIN = 20;
+const OUT_OF_TRACK_LEFT = '-25%';
+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(Slider, props));
+};
+beforeEach(() => {
+  vi.spyOn(HTMLElement.prototype, 'getBoundingClientRect').mockReturnValue({
+    top: 0,
+    bottom: 0,
+    left: 0,
+    right: TRACK_WIDTH,
+    width: TRACK_WIDTH,
+    height: 0,
+    x: 0,
+    y: 0,
+    toJSON: () => ({})
+  });
+});
+afterEach(() => {
+  if (root) {
+    act(() => {
+      root?.unmount();
+    });
+  }
+  container?.remove();
+  root = null;
+  container = null;
+  vi.restoreAllMocks();
+  document.body.style.userSelect = '';
+});
+const requireElement = (scope, selector) => {
+  const element = scope.querySelector(selector);
+  if (!element) throw new Error(`요소를 찾을 수 없습니다: ${selector}`);
+  return element;
+};
+const sliderOf = view => requireElement(view, '.ncua-slider');
+const trackOf = view => requireElement(view, '.ncua-slider__track');
+const handlesOf = view => Array.from(view.querySelectorAll('.ncua-slider__handle'));
+const valueNowOf = view => handlesOf(view).map(handle => handle.getAttribute('aria-valuenow'));
+/** 트랙 비율(%)을 clientX 로 바꾼다 (트랙 left 0). */
+const clientXAt = percent => TRACK_WIDTH * percent / PERCENT_SCALE;
+const mouseDown = (target, clientX) => {
+  act(() => {
+    target.dispatchEvent(new MouseEvent('mousedown', {
+      bubbles: true,
+      cancelable: true,
+      clientX
+    }));
+  });
+};
+const mouseMove = clientX => {
+  act(() => {
+    document.dispatchEvent(new MouseEvent('mousemove', {
+      bubbles: true,
+      clientX
+    }));
+  });
+};
+const mouseUp = () => {
+  act(() => {
+    document.dispatchEvent(new MouseEvent('mouseup', {
+      bubbles: true
+    }));
+  });
+};
+/** 받은 값으로 value 를 갱신하는 일반 controlled 사용 — onChange 를 인라인(매 렌더 새 참조) 또는 useCallback 으로 만든다 */
+const ControlledSlider = _ref => {
+  let {
+    stable,
+    onValue
+  } = _ref;
+  const [value, setValue] = useState(0);
+  const stableOnChange = useCallback(next => {
+    onValue(next);
+    setValue(next);
+  }, [onValue]);
+  const inlineOnChange = next => {
+    onValue(next);
+    setValue(next);
+  };
+  return /*#__PURE__*/createElement(Slider, {
+    value,
+    onChange: stable ? stableOnChange : inlineOnChange
+  });
+};
+// ── P0 ─────────────────────────────────────────────────
+describe('Slider — 마운트 (RSL-01)', () => {
+  it('RSL-01 컨테이너에 트랙·진행 바·핸들을 만들고 value·min·max 를 핸들 aria 에 반영한다', () => {
+    const view = render({
+      min: 0,
+      max: PERCENT_SCALE,
+      value: INITIAL_VALUE
+    });
+    const [handle] = handlesOf(view);
+    expect(view.querySelector('.ncua-slider__track')).not.toBeNull();
+    expect(handlesOf(view)).toHaveLength(1);
+    expect([handle.getAttribute('aria-valuenow'), handle.getAttribute('aria-valuemin'), handle.getAttribute('aria-valuemax'), handle.style.left]).toEqual([String(INITIAL_VALUE), '0', String(PERCENT_SCALE), `${INITIAL_VALUE}%`]);
+  });
+  it('RSL-01 labelPosition bottom 이면 핸들 안에 값 라벨을 만든다', () => {
+    const view = render({
+      value: INITIAL_VALUE,
+      labelPosition: 'bottom'
+    });
+    expect(requireElement(view, '.ncua-slider__label').textContent).toBe(`${INITIAL_VALUE}%`);
+  });
+  it('RSL-01 disabled 로 마운트하면 핸들이 aria-disabled true 이고 트랙을 눌러도 onChange 가 없다', () => {
+    const onChange = vi.fn();
+    const view = render({
+      value: INITIAL_VALUE,
+      disabled: true,
+      onChange
+    });
+    mouseDown(trackOf(view), clientXAt(CLICK_VALUE));
+    expect(handlesOf(view)[0].getAttribute('aria-disabled')).toBe('true');
+    expect(onChange).not.toHaveBeenCalled();
+  });
+  it('RSL-01 range value 는 핸들 2개로 만든다', () => {
+    const view = render({
+      value: RANGE
+    });
+    expect(valueNowOf(view)).toEqual([String(RANGE_LOW), String(RANGE_HIGH)]);
+  });
+});
+describe('Slider — 트랙 조작 (RSL-02)', () => {
+  it('RSL-02 단일: 트랙 mousedown·mousemove 마다 onChange(값) 를 부르고 핸들 aria 를 갱신한다', () => {
+    const onChange = vi.fn();
+    const view = render({
+      value: 0,
+      onChange
+    });
+    mouseDown(trackOf(view), clientXAt(CLICK_VALUE));
+    mouseMove(clientXAt(DRAG_VALUE));
+    mouseUp();
+    expect(onChange.mock.calls).toEqual([[CLICK_VALUE], [DRAG_VALUE]]);
+    expect(valueNowOf(view)).toEqual([String(DRAG_VALUE)]);
+  });
+  it('RSL-02 range: 오른쪽 핸들 바깥 트랙을 누르면 onChange([low, 누른 값])', () => {
+    const onChange = vi.fn();
+    const view = render({
+      value: RANGE,
+      onChange
+    });
+    mouseDown(trackOf(view), clientXAt(ABOVE_HIGH));
+    expect(onChange).toHaveBeenCalledWith([RANGE_LOW, ABOVE_HIGH]);
+  });
+});
+describe('Slider — controlled 드래그 (RSL-03)', () => {
+  it('RSL-03 useCallback 으로 안정된 onChange 면 부모 재렌더 뒤에도 드래그가 이어진다', () => {
+    const onValue = vi.fn();
+    const view = renderElement(/*#__PURE__*/createElement(ControlledSlider, {
+      stable: true,
+      onValue
+    }));
+    mouseDown(trackOf(view), clientXAt(CLICK_VALUE));
+    mouseMove(clientXAt(DRAG_VALUE));
+    mouseUp();
+    expect(onValue.mock.calls).toEqual([[CLICK_VALUE], [DRAG_VALUE]]);
+    expect(valueNowOf(view)).toEqual([String(DRAG_VALUE)]);
+  });
+  it('RSL-03 인라인 onChange 면 첫 onChange 뒤 인스턴스가 재생성되어 이어지는 mousemove 가 무시된다', () => {
+    // 현재 동작 고정 — 결함 후보: #596 (onChange 가 생성 effect deps 라 재렌더마다 destroy·재생성, 드래그 상태 유실 — 조작 불능)
+    const onValue = vi.fn();
+    const view = renderElement(/*#__PURE__*/createElement(ControlledSlider, {
+      stable: false,
+      onValue
+    }));
+    const handleBefore = handlesOf(view)[0];
+    mouseDown(trackOf(view), clientXAt(CLICK_VALUE));
+    mouseMove(clientXAt(DRAG_VALUE));
+    mouseUp();
+    expect(onValue.mock.calls).toEqual([[CLICK_VALUE]]);
+    expect(valueNowOf(view)).toEqual([String(CLICK_VALUE)]);
+    expect(handlesOf(view)[0]).not.toBe(handleBefore);
+  });
+  it.todo('RSL-03 인라인 onChange 로 controlled 사용해도 드래그 중 인스턴스를 유지해 mousemove 마다 onChange 가 이어진다 (기대)');
+});
+describe('Slider — value prop 변경 (RSL-04)', () => {
+  it('RSL-04 value 가 바뀌면 같은 핸들의 위치·aria 를 setValue 로 갱신하고 onChange 는 부르지 않는다', () => {
+    const onChange = vi.fn();
+    const view = render({
+      value: INITIAL_VALUE,
+      onChange
+    });
+    const handleBefore = handlesOf(view)[0];
+    render({
+      value: NEXT_VALUE,
+      onChange
+    });
+    expect(handlesOf(view)[0]).toBe(handleBefore);
+    expect([handleBefore.getAttribute('aria-valuenow'), handleBefore.style.left]).toEqual([String(NEXT_VALUE), `${NEXT_VALUE}%`]);
+    expect(onChange).not.toHaveBeenCalled();
+  });
+});
+describe('Slider — disabled 토글 (RSL-05)', () => {
+  it('RSL-05 false → true 면 disable() 로 조작을 막고 aria-disabled true·opacity 0.5', () => {
+    const onChange = vi.fn();
+    const view = render({
+      value: 0,
+      onChange
+    });
+    render({
+      value: 0,
+      onChange,
+      disabled: true
+    });
+    mouseDown(trackOf(view), clientXAt(CLICK_VALUE));
+    expect(onChange).not.toHaveBeenCalled();
+    expect([handlesOf(view)[0].getAttribute('aria-disabled'), sliderOf(view).style.opacity]).toEqual(['true', '0.5']);
+  });
+  it('RSL-05 true → false 면 enable() 로 조작이 복구되고 aria-disabled false', () => {
+    const onChange = vi.fn();
+    const view = render({
+      value: 0,
+      onChange,
+      disabled: true
+    });
+    render({
+      value: 0,
+      onChange,
+      disabled: false
+    });
+    mouseDown(trackOf(view), clientXAt(CLICK_VALUE));
+    expect(onChange).toHaveBeenCalledWith(CLICK_VALUE);
+    expect([handlesOf(view)[0].getAttribute('aria-disabled'), sliderOf(view).style.opacity]).toEqual(['false', '1']);
+  });
+});
+// ── P1 ~ P3 ────────────────────────────────────────────
+describe('Slider — 재생성 (RSL-06)', () => {
+  it('RSL-06 단일 → range 로 value 타입이 바뀌면 인스턴스를 다시 만들어 핸들이 2개가 된다', () => {
+    const view = render({
+      value: INITIAL_VALUE
+    });
+    render({
+      value: RANGE
+    });
+    expect(valueNowOf(view)).toEqual([String(RANGE_LOW), String(RANGE_HIGH)]);
+  });
+  it('RSL-06 range → 단일로 바뀌면 핸들이 1개가 된다', () => {
+    const view = render({
+      value: RANGE
+    });
+    render({
+      value: INITIAL_VALUE
+    });
+    expect(valueNowOf(view)).toEqual([String(INITIAL_VALUE)]);
+  });
+  it.each([['max', {
+    max: WIDE_MAX
+  }, 'aria-valuemax', String(WIDE_MAX)], ['min', {
+    min: CUSTOM_MIN
+  }, 'aria-valuemin', String(CUSTOM_MIN)]])('RSL-06 %s 가 바뀌면 핸들 %s 에 반영한다', (_name, changed, attribute, expected) => {
+    const view = render({
+      value: INITIAL_VALUE
+    });
+    render({
+      value: INITIAL_VALUE,
+      ...changed
+    });
+    expect(handlesOf(view)).toHaveLength(1);
+    expect(handlesOf(view)[0].getAttribute(attribute)).toBe(expected);
+  });
+  it('RSL-06 step 이 바뀌면 트랙 클릭 값을 새 step 으로 스냅한다', () => {
+    const onChange = vi.fn();
+    const view = render({
+      value: INITIAL_VALUE,
+      onChange
+    });
+    render({
+      value: INITIAL_VALUE,
+      onChange,
+      step: STEP_TEN
+    });
+    mouseDown(trackOf(view), clientXAt(OFF_STEP_CLICK));
+    expect(onChange.mock.calls).toEqual([[CLICK_VALUE]]);
+  });
+  it('RSL-06 labelPosition 이 바뀌면 그 위치의 라벨로 바꾼다', () => {
+    const view = render({
+      value: INITIAL_VALUE,
+      labelPosition: 'bottom'
+    });
+    render({
+      value: INITIAL_VALUE,
+      labelPosition: 'top-floating'
+    });
+    expect(view.querySelectorAll('.ncua-slider__label')).toHaveLength(1);
+    expect(requireElement(view, '.ncua-slider__label--tooltip').textContent).toBe(`${INITIAL_VALUE}%`);
+  });
+  it('RSL-06 재생성된 인스턴스는 바뀐 max 와 tooltip 라벨을 반영한다', () => {
+    const view = render({
+      value: INITIAL_VALUE
+    });
+    render({
+      value: INITIAL_VALUE,
+      max: WIDE_MAX,
+      labelPosition: 'top-floating'
+    });
+    expect(handlesOf(view)[0].getAttribute('aria-valuemax')).toBe(String(WIDE_MAX));
+    expect(requireElement(view, '.ncua-slider__label--tooltip').textContent).toBe(`${INITIAL_VALUE}%`);
+  });
+});
+describe('Slider — 언마운트 (RSL-07)', () => {
+  it('RSL-07 언마운트하면 destroy 로 컨테이너를 비우고 document 리스너를 해제한다', () => {
+    const onChange = vi.fn();
+    const view = render({
+      value: 0,
+      onChange
+    });
+    const slider = sliderOf(view);
+    mouseDown(trackOf(view), clientXAt(CLICK_VALUE));
+    act(() => {
+      root?.unmount();
+    });
+    root = null;
+    mouseMove(clientXAt(DRAG_VALUE));
+    expect(slider.childElementCount).toBe(0);
+    expect(onChange.mock.calls).toEqual([[CLICK_VALUE]]);
+  });
+});
+describe('Slider — className (RSL-08)', () => {
+  it('RSL-08 className 은 ncua-slider 뒤에 붙는다', () => {
+    const view = render({
+      className: 'my-slider'
+    });
+    expect([sliderOf(view).classList.contains('ncua-slider'), sliderOf(view).classList.contains('my-slider')]).toEqual([true, true]);
+  });
+  it('RSL-08 className 을 생략하면 class 속성이 "ncua-slider " (뒤 공백)이다', () => {
+    // 현재 동작 고정 — 결함 후보: #597 (className 생략 시 템플릿 문자열로 뒤 공백이 남음 — classnames 미사용)
+    const view = render();
+    expect(sliderOf(view).getAttribute('class')).toBe('ncua-slider ');
+  });
+  it.todo('RSL-08 className 을 생략하면 class 속성이 뒤 공백 없이 "ncua-slider" 이다 (기대, #597)');
+});
+describe('Slider — value 생략 (RSL-09)', () => {
+  it('RSL-09 value 를 생략하고 min 이 0 보다 크면 0 으로 시작해 핸들이 트랙 밖에 놓인다', () => {
+    // 현재 동작 고정 — 결함 후보: #597 (React 기본값 value = 0 — SL-19a 와 같은 뿌리, min 으로 시작해야 함)
+    const view = render({
+      min: CUSTOM_MIN
+    });
+    const [handle] = handlesOf(view);
+    expect([handle.getAttribute('aria-valuenow'), handle.style.left]).toEqual(['0', OUT_OF_TRACK_LEFT]);
+  });
+  it.todo('RSL-09 value 를 생략하면 min 으로 시작한다 — min 20 이면 aria-valuenow 20·left 0% (기대, #597)');
+});

package/dist/esm/src/components/forms-and-input/switch/__tests__/Switch.test.js

@@ -0,0 +1,314 @@
+// @vitest-environment jsdom
+//
+// Switch (React) 위험 경로 — 위험 목록표 SW-xx.
+// 두 radio 중 하나를 고르는 컴포넌트다. controlled radio 는 click 직후 React 가 checked 를 되돌리므로
+// "내부 상태가 바뀌었는가"는 click 뒤의 checked·active 클래스로 관찰한다.
+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 { Switch } from '../Switch';
+globalThis.IS_REACT_ACT_ENVIRONMENT = true;
+const TEXT_OPTIONS = {
+  left: {
+    label: '일',
+    value: 'day'
+  },
+  right: {
+    label: '주',
+    value: 'week'
+  }
+};
+/** 왼쪽이 true 인 boolean 구성 — 문서 예시와 같은 정상 구성 */
+const ON_OFF = {
+  left: {
+    label: '켜기',
+    value: true
+  },
+  right: {
+    label: '끄기',
+    value: false
+  }
+};
+/** 왼쪽이 false 인 boolean 구성 — value 와 화면이 뒤집히는 구성 (SW-03) */
+const OFF_ON = {
+  left: {
+    label: '끄기',
+    value: false
+  },
+  right: {
+    label: '켜기',
+    value: true
+  }
+};
+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(Switch, {
+    name: 'period',
+    ...TEXT_OPTIONS,
+    ...props
+  }));
+};
+afterEach(() => {
+  if (root) {
+    act(() => {
+      root?.unmount();
+    });
+  }
+  container?.remove();
+  root = null;
+  container = null;
+  vi.restoreAllMocks();
+});
+const requireElement = (scope, selector) => {
+  const element = scope.querySelector(selector);
+  if (!element) throw new Error(`요소를 찾을 수 없습니다: ${selector}`);
+  return element;
+};
+const switchOf = view => requireElement(view, '.ncua-switch');
+const leftOf = view => requireElement(view, '.ncua-switch__radio--left');
+const rightOf = view => requireElement(view, '.ncua-switch__radio--right');
+const optionOf = (view, side) => requireElement(view, `.ncua-switch__option--${side}`);
+const isActive = (view, side) => optionOf(view, side).classList.contains('ncua-switch__option--active');
+/** [왼쪽 checked, 오른쪽 checked] — 선택 상태를 한 번에 단언한다 */
+const checkedOf = view => [leftOf(view).checked, rightOf(view).checked];
+const click = element => {
+  act(() => {
+    element.click();
+  });
+};
+// ── P0 ─────────────────────────────────────────────────
+describe('Switch — uncontrolled 선택 (SW-01)', () => {
+  it('SW-01 defaultValue 를 생략하면 왼쪽이 선택되고 active 클래스가 붙는다', () => {
+    const view = render();
+    expect(checkedOf(view)).toEqual([true, false]);
+    expect(isActive(view, 'left')).toBe(true);
+    expect(optionOf(view, 'right').classList.contains('ncua-switch__option--inactive')).toBe(true);
+  });
+  it('SW-01 오른쪽 radio click → onChange(오른쪽 값) 이고 선택·active 가 오른쪽으로 옮겨간다', () => {
+    const onChange = vi.fn();
+    const view = render({
+      onChange
+    });
+    click(rightOf(view));
+    expect(onChange).toHaveBeenCalledWith('week');
+    expect(checkedOf(view)).toEqual([false, true]);
+    expect([isActive(view, 'left'), isActive(view, 'right')]).toEqual([false, true]);
+  });
+  it('SW-01 defaultValue 로 오른쪽에서 시작해 왼쪽 click 시 onChange(왼쪽 값)', () => {
+    const onChange = vi.fn();
+    const view = render({
+      defaultValue: 'week',
+      onChange
+    });
+    expect(checkedOf(view)).toEqual([false, true]);
+    click(leftOf(view));
+    expect(onChange).toHaveBeenCalledWith('day');
+    expect(checkedOf(view)).toEqual([true, false]);
+  });
+});
+describe('Switch — controlled 문자열 (SW-02)', () => {
+  it('SW-02 value 로 선택을 표시하고 click 은 onChange 만 부를 뿐 선택을 옮기지 않는다', () => {
+    const onChange = vi.fn();
+    const view = render({
+      value: 'day',
+      onChange
+    });
+    click(rightOf(view));
+    expect(onChange).toHaveBeenCalledWith('week');
+    expect(checkedOf(view)).toEqual([true, false]);
+    expect(isActive(view, 'left')).toBe(true);
+  });
+  it('SW-02 부모가 value 를 바꿔야 선택이 옮겨간다', () => {
+    const view = render({
+      value: 'day',
+      onChange: vi.fn()
+    });
+    render({
+      value: 'week',
+      onChange: vi.fn()
+    });
+    expect(checkedOf(view)).toEqual([false, true]);
+    expect(isActive(view, 'right')).toBe(true);
+  });
+});
+describe('Switch — boolean 옵션 (SW-03)', () => {
+  it('SW-03 왼쪽이 true 인 구성: value true 면 왼쪽, false 면 오른쪽을 선택 표시한다', () => {
+    const view = render({
+      ...ON_OFF,
+      value: true,
+      onChange: vi.fn()
+    });
+    expect(checkedOf(view)).toEqual([true, false]);
+    render({
+      ...ON_OFF,
+      value: false,
+      onChange: vi.fn()
+    });
+    expect(checkedOf(view)).toEqual([false, true]);
+  });
+  it('SW-03 왼쪽이 true 인 구성: controlled 오른쪽 click → onChange(false), 왼쪽 click → onChange(true)', () => {
+    const onChange = vi.fn();
+    const view = render({
+      ...ON_OFF,
+      value: true,
+      onChange
+    });
+    click(rightOf(view));
+    expect(onChange).toHaveBeenLastCalledWith(false);
+    render({
+      ...ON_OFF,
+      value: false,
+      onChange
+    });
+    click(leftOf(view));
+    expect(onChange).toHaveBeenLastCalledWith(true);
+  });
+  it('SW-03 uncontrolled boolean 은 옵션 값을 그대로 넘긴다', () => {
+    const onChange = vi.fn();
+    const view = render({
+      ...OFF_ON,
+      onChange
+    });
+    click(rightOf(view));
+    expect(onChange).toHaveBeenCalledWith(true);
+    expect(checkedOf(view)).toEqual([false, true]);
+  });
+  it('SW-03 왼쪽이 false 인 구성에서 value true 를 주면 false 옵션(왼쪽)이 선택 표시된다', () => {
+    // 현재 동작 고정 — 결함 후보: #596 (value 를 옵션 값이 아니라 "왼쪽 여부"로 해석해 화면이 뒤집힘)
+    const view = render({
+      ...OFF_ON,
+      value: true,
+      onChange: vi.fn()
+    });
+    expect(checkedOf(view)).toEqual([true, false]);
+    expect(leftOf(view).value).toBe('false');
+  });
+  it('SW-03 왼쪽이 false 인 구성에서 true 옵션(오른쪽) click 이 onChange(false) 를 넘긴다', () => {
+    // 현재 동작 고정 — 결함 후보: #596 (controlled 는 옵션 값이 아니라 "왼쪽이 선택됐는가"를 넘김 — 입력값 오전달)
+    const onChange = vi.fn();
+    const view = render({
+      ...OFF_ON,
+      value: true,
+      onChange
+    });
+    click(rightOf(view));
+    expect(rightOf(view).value).toBe('true');
+    expect(onChange).toHaveBeenCalledWith(false);
+  });
+  it.todo('SW-03 boolean value 는 옵션 값과 비교해 선택을 표시한다 — {left:false,right:true} 에서 value true 면 오른쪽 (기대)');
+  it.todo('SW-03 controlled 여부와 무관하게 onChange 는 선택된 옵션의 value 를 넘긴다 (기대, #596)');
+});
+describe('Switch — disabled (SW-04)', () => {
+  it('SW-04 두 radio 가 disabled 이고 ncua-switch--disabled 가 붙으며 click 해도 onChange·선택 변화가 없다', () => {
+    const onChange = vi.fn();
+    const view = render({
+      disabled: true,
+      onChange
+    });
+    click(rightOf(view));
+    expect([leftOf(view).disabled, rightOf(view).disabled]).toEqual([true, true]);
+    expect(switchOf(view).classList.contains('ncua-switch--disabled')).toBe(true);
+    expect(onChange).not.toHaveBeenCalled();
+    expect(checkedOf(view)).toEqual([true, false]);
+  });
+});
+// ── P1 ~ P3 ────────────────────────────────────────────
+describe('Switch — ref (SW-05)', () => {
+  it('SW-05 forwarded ref 는 왼쪽 input 을 가리킨다', () => {
+    const ref = /*#__PURE__*/createRef();
+    const view = render({
+      ref
+    });
+    expect(ref.current).toBe(leftOf(view));
+  });
+  it('SW-05 refs 를 주면 refs[0]·refs[1] 이 각 input 을 받는다', () => {
+    const leftRef = /*#__PURE__*/createRef();
+    const rightRef = /*#__PURE__*/createRef();
+    const view = render({
+      refs: [leftRef, rightRef]
+    });
+    expect([leftRef.current, rightRef.current]).toEqual([leftOf(view), rightOf(view)]);
+  });
+  it('SW-05 refs 와 forwarded ref 를 함께 주면 forwarded ref 는 null 이다', () => {
+    // 현재 동작 고정 — 결함 후보: #597 (refs[0] 가 leftInputRef 자리를 차지해 useImperativeHandle 이 null 을 노출)
+    const ref = /*#__PURE__*/createRef();
+    const leftRef = /*#__PURE__*/createRef();
+    const view = render({
+      ref,
+      refs: [leftRef, /*#__PURE__*/createRef()]
+    });
+    expect(leftRef.current).toBe(leftOf(view));
+    expect(ref.current).toBeNull();
+  });
+  it.todo('SW-05 refs 를 함께 줘도 forwarded ref 는 왼쪽 input 을 가리킨다 (기대, #597)');
+});
+describe('Switch — 속성·라벨 (SW-06)', () => {
+  it('SW-06 두 radio 가 같은 name 을 갖고 value 는 문자열 그대로', () => {
+    const view = render();
+    expect([leftOf(view).name, rightOf(view).name, leftOf(view).value, rightOf(view).value]).toEqual(['period', 'period', 'day', 'week']);
+  });
+  it("SW-06 boolean 옵션 값은 'true'/'false' 문자열로 정규화된다", () => {
+    const view = render({
+      ...ON_OFF
+    });
+    expect([leftOf(view).value, rightOf(view).value]).toEqual(['true', 'false']);
+  });
+  it('SW-06 label 은 ReactNode 그대로 렌더한다', () => {
+    const view = render({
+      left: {
+        label: /*#__PURE__*/createElement('strong', {
+          className: 'custom-label'
+        }, '굵게'),
+        value: 'bold'
+      },
+      right: {
+        label: '보통',
+        value: 'normal'
+      }
+    });
+    expect(requireElement(optionOf(view, 'left'), '.custom-label').textContent).toBe('굵게');
+    expect(requireElement(optionOf(view, 'right'), '.ncua-switch__label').textContent).toBe('보통');
+  });
+});
+describe('Switch — size·className (SW-07)', () => {
+  it.each(['xxs', 'xs', 'sm', 'md'])('SW-07 size %s → ncua-switch--%s', size => {
+    const view = render({
+      size
+    });
+    expect(switchOf(view).classList.contains(`ncua-switch--${size}`)).toBe(true);
+  });
+  it('SW-07 목록 밖 size(타입 우회)는 xs 로 fallback 한다', () => {
+    const view = render({
+      size: 'lg'
+    });
+    expect([switchOf(view).classList.contains('ncua-switch--xs'), switchOf(view).classList.contains('ncua-switch--lg')]).toEqual([true, false]);
+  });
+  it('SW-07 size 를 생략하면 xs, className 은 루트에 붙는다', () => {
+    const view = render({
+      className: 'my-switch'
+    });
+    expect([switchOf(view).classList.contains('ncua-switch--xs'), switchOf(view).classList.contains('my-switch')]).toEqual([true, true]);
+  });
+});
+describe('Switch — onChange 없음 (SW-08)', () => {
+  it('SW-08 onChange 없이 click 해도 예외 없이 uncontrolled 선택이 옮겨간다', () => {
+    const view = render();
+    click(rightOf(view));
+    expect(checkedOf(view)).toEqual([false, true]);
+  });
+});