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

package/dist/esm/src/components/forms-and-input/checkbox/__tests__/Checkbox.test.js

@@ -0,0 +1,210 @@
+// @vitest-environment jsdom
+//
+// CheckboxInput · Checkbox (React) 위험 경로 — 위험 목록표 CB-xx.
+// indeterminate 는 HTML 속성이 아니라 DOM 프로퍼티라 layout effect 로 input.indeterminate 에 넣는다.
+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 { Checkbox } from '../Checkbox';
+import { CheckboxInput } from '../CheckboxInput';
+globalThis.IS_REACT_ACT_ENVIRONMENT = 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 renderInput = function () {
+  let props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return renderElement(/*#__PURE__*/createElement(CheckboxInput, props));
+};
+const renderCheckbox = function () {
+  let props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return renderElement(/*#__PURE__*/createElement(Checkbox, 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 inputOf = view => requireElement(view, 'input');
+const wrapperOf = view => requireElement(view, '.ncua-checkbox-input');
+const click = element => {
+  act(() => {
+    element.click();
+  });
+};
+// ── P0 ─────────────────────────────────────────────────
+describe('CheckboxInput — 체크 토글 (CB-01)', () => {
+  it('CB-01 uncontrolled: click 하면 onChange(event) 를 부르고 checked 가 토글된다', () => {
+    const onChange = vi.fn();
+    const view = renderInput({
+      onChange
+    });
+    click(inputOf(view));
+    expect(onChange.mock.calls[0][0].target.checked).toBe(true);
+    expect(inputOf(view).checked).toBe(true);
+    click(inputOf(view));
+    expect(inputOf(view).checked).toBe(false);
+  });
+  it('CB-01 controlled: checked prop 을 반영하고 부모가 바꾸기 전에는 click 해도 되돌아간다', () => {
+    const onChange = vi.fn();
+    const view = renderInput({
+      checked: true,
+      onChange
+    });
+    click(inputOf(view));
+    expect(onChange).toHaveBeenCalled();
+    expect(inputOf(view).checked).toBe(true);
+    renderInput({
+      checked: false,
+      onChange
+    });
+    expect(inputOf(view).checked).toBe(false);
+  });
+});
+describe('CheckboxInput — indeterminate (CB-02)', () => {
+  it.each([['ref 없음', undefined], ['객체 ref', /*#__PURE__*/createRef()], ['함수 ref', vi.fn()]])('CB-02 %s: true 면 input.indeterminate·has-indeterminate, false 로 바꾸면 해제된다', (_label, ref) => {
+    const view = renderInput({
+      indeterminate: true,
+      ref
+    });
+    expect([inputOf(view).indeterminate, wrapperOf(view).classList.contains('has-indeterminate')]).toEqual([true, true]);
+    renderInput({
+      indeterminate: false,
+      ref
+    });
+    expect([inputOf(view).indeterminate, wrapperOf(view).classList.contains('has-indeterminate')]).toEqual([false, false]);
+  });
+});
+describe('CheckboxInput — disabled (CB-03)', () => {
+  it('CB-03 disabled 면 click 해도 onChange 가 없고 checked 도 그대로다', () => {
+    const onChange = vi.fn();
+    const view = renderInput({
+      disabled: true,
+      onChange
+    });
+    click(inputOf(view));
+    expect(inputOf(view).disabled).toBe(true);
+    expect(onChange).not.toHaveBeenCalled();
+    expect(inputOf(view).checked).toBe(false);
+  });
+});
+// ── P1 ~ P3 ────────────────────────────────────────────
+describe('CheckboxInput — ref (CB-04)', () => {
+  it('CB-04 객체 ref 에 input 노드를 넣는다', () => {
+    const ref = /*#__PURE__*/createRef();
+    const view = renderInput({
+      ref
+    });
+    expect(ref.current).toBe(inputOf(view));
+  });
+  it('CB-04 함수 ref 를 input 노드로 호출한다', () => {
+    const ref = vi.fn();
+    const view = renderInput({
+      ref
+    });
+    expect(ref).toHaveBeenCalledWith(inputOf(view));
+  });
+  it('CB-04 Checkbox 는 ref 를 안쪽 input 으로 전달하고 indeterminate 도 넘긴다', () => {
+    const ref = /*#__PURE__*/createRef();
+    const view = renderCheckbox({
+      ref,
+      indeterminate: true
+    });
+    expect(ref.current).toBe(inputOf(view));
+    expect(inputOf(view).indeterminate).toBe(true);
+  });
+});
+describe('Checkbox — label 구조 (CB-05)', () => {
+  const fieldOf = view => requireElement(view, '.ncua-checkbox-field');
+  const textsOf = view => [view.querySelector('.ncua-checkbox-field__text')?.textContent ?? null, view.querySelector('.ncua-checkbox-field__support-text')?.textContent ?? null];
+  it('CB-05 text 를 click 하면 label 이 감싼 input 이 토글되고 onChange 가 호출된다', () => {
+    const onChange = vi.fn();
+    const view = renderCheckbox({
+      text: '동의',
+      onChange
+    });
+    click(requireElement(view, '.ncua-checkbox-field__text'));
+    expect(inputOf(view).checked).toBe(true);
+    expect(onChange).toHaveBeenCalled();
+  });
+  it.each([['text 만', {
+    text: '동의'
+  }, ['동의', null], true], ['text + supportText', {
+    text: '동의',
+    supportText: '필수'
+  }, ['동의', '필수'], true], ['supportText 만', {
+    supportText: '필수'
+  }, ['', '필수'], false], ['둘 다 없음', {}, [null, null], false]])('CB-05 %s → [text, supportText] 와 has-text', (_label, props, texts, hasText) => {
+    const view = renderCheckbox(props);
+    expect(textsOf(view)).toEqual(texts);
+    expect(fieldOf(view).classList.contains('has-text')).toBe(hasText);
+  });
+  it('CB-05 controlled checked·disabled 를 안쪽 input 에 전달한다', () => {
+    const view = renderCheckbox({
+      checked: true,
+      disabled: true,
+      onChange: vi.fn()
+    });
+    expect([inputOf(view).checked, inputOf(view).disabled]).toEqual([true, true]);
+  });
+});
+describe('CheckboxInput · Checkbox — 클래스·rest (CB-06)', () => {
+  it('CB-06 CheckboxInput 기본 size 는 xs, destructive 가 아니고 className 이 없다', () => {
+    const view = renderInput();
+    expect(['ncua-checkbox-input--xs', 'destructive', 'has-indeterminate'].map(name => wrapperOf(view).classList.contains(name))).toEqual([true, false, false]);
+  });
+  it('CB-06 CheckboxInput size sm·destructive·className 을 감싸는 span 에 반영한다', () => {
+    const view = renderInput({
+      size: 'sm',
+      destructive: true,
+      className: 'my-check'
+    });
+    expect(['ncua-checkbox-input--sm', 'destructive', 'my-check'].map(name => wrapperOf(view).classList.contains(name))).toEqual([true, true, true]);
+  });
+  it('CB-06 name·value·aria-label 등 나머지 props 를 input 에 전달한다', () => {
+    const view = renderInput({
+      name: 'agree',
+      value: 'yes',
+      'aria-label': '동의'
+    });
+    const input = inputOf(view);
+    expect([input.name, input.value, input.getAttribute('aria-label')]).toEqual(['agree', 'yes', '동의']);
+  });
+  it('CB-06 Checkbox size 는 label 과 안쪽 CheckboxInput 양쪽에 반영된다', () => {
+    const view = renderCheckbox({
+      size: 'sm',
+      name: 'agree'
+    });
+    expect([requireElement(view, '.ncua-checkbox-field').classList.contains('ncua-checkbox-field--sm'), wrapperOf(view).classList.contains('ncua-checkbox-input--sm'), inputOf(view).name]).toEqual([true, true, 'agree']);
+  });
+});
+describe('Checkbox — className 위치 (CB-07)', () => {
+  it('CB-07 소비자 className 은 label 에만 붙고 안쪽 CheckboxInput 은 ncua-checkbox-field__input 으로 고정된다', () => {
+    const view = renderCheckbox({
+      className: 'my-field'
+    });
+    expect([requireElement(view, '.ncua-checkbox-field').classList.contains('my-field'), wrapperOf(view).classList.contains('my-field'), wrapperOf(view).classList.contains('ncua-checkbox-field__input')]).toEqual([true, false, true]);
+  });
+});

package/dist/esm/src/components/forms-and-input/combo-box/ComboBox.js

@@ -434,4 +434,4 @@ const ComboBox = /*#__PURE__*/forwardRef((_ref, ref) => {
   });
 });
 ComboBox.displayName = 'ComboBox';
-export { defaultMaxHeight, ComboBox };
+export { ComboBox };

package/dist/esm/src/components/forms-and-input/combo-box/__tests__/ComboBox.interaction.test.js

@@ -0,0 +1,439 @@
+// @vitest-environment jsdom
+//
+// React ComboBox 상호작용 — 위험 목록표 RCB-03~14 (PR-7c).
+// 입력창 키보드·click·변경, 지우기·「전체」, 다중 경계, 편집, disabled 전환, 옵션 아이콘을 실구현으로 구동한다.
+import { createElement } from 'react';
+import { act } from 'react-dom/test-utils';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { ComboBox } from '../ComboBox';
+import { allButton, click, findByText, mountControlled, mountRoot, onCleanup, requireElement, runCleanups } from './comboBoxTestUtils';
+// @ncds/ui-admin-icon 은 react@19 를 해석해 react-dom@18 이 거부하는 엘리먼트를 만든다 (ComboBox.portal.test.ts 와 같은 스텁)
+vi.mock('@ncds/ui-admin-icon', () => {
+  const IconStub = () => null;
+  return {
+    CheckCircle: IconStub,
+    ChevronSelectorVertical: IconStub,
+    HelpCircle: IconStub,
+    InfoCircle: IconStub,
+    SearchLg: IconStub,
+    X: IconStub,
+    XClose: IconStub
+  };
+});
+const APPLE_ID = 1;
+const BANANA_ID = 2;
+const OPTIONS = [{
+  id: APPLE_ID,
+  label: '사과'
+}, {
+  id: BANANA_ID,
+  label: '바나나'
+}];
+const OPTION_CLASS = 'ncua-select-dropdown__option';
+const FOCUSED_CLASS = 'ncua-select-dropdown__option--focused';
+afterEach(runCleanups);
+const mount = props => {
+  const {
+    container,
+    render
+  } = mountRoot();
+  const rerender = next => render(/*#__PURE__*/createElement(ComboBox, next));
+  rerender(props);
+  return {
+    container,
+    rerender
+  };
+};
+const hasButton = (scope, text) => Array.from(scope.querySelectorAll('button')).some(button => button.textContent === text);
+const input = container => requireElement(container, 'input[role="combobox"]');
+const isPanelOpen = container => container.querySelector('.ncua-select-dropdown') !== null;
+const optionLabels = container => Array.from(container.querySelectorAll(`.${OPTION_CLASS}`)).map(option => option.textContent);
+const focusedLabels = container => Array.from(container.querySelectorAll(`.${FOCUSED_CLASS}`)).map(option => option.textContent);
+const clickOption = (container, label) => {
+  click(findByText(container, `.${OPTION_CLASS}`, label));
+};
+/** React 가 값 변경을 감지하도록 prototype setter 로 값을 넣고 input 이벤트를 보낸다 */
+const typeText = (container, text) => {
+  const field = input(container);
+  const setValue = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value')?.set;
+  if (setValue === undefined) throw new Error('HTMLInputElement value setter 가 없습니다');
+  act(() => {
+    setValue.call(field, text);
+    field.dispatchEvent(new Event('input', {
+      bubbles: true
+    }));
+  });
+};
+const pressKey = (container, key) => {
+  const event = new KeyboardEvent('keydown', {
+    key,
+    bubbles: true,
+    cancelable: true
+  });
+  act(() => {
+    input(container).dispatchEvent(event);
+  });
+  return event;
+};
+describe('RCB-08 다중 선택 경계', () => {
+  it('RCB-08 maxSelection 에 도달하면 새 옵션 click 이 onChange 를 부르지 않고 「전체 선택」도 숨긴다', () => {
+    const onChangeSpy = vi.fn();
+    const container = mountControlled({
+      optionItems: OPTIONS,
+      multiple: true,
+      maxSelection: 1,
+      initialValue: [APPLE_ID],
+      onChangeSpy
+    });
+    click(allButton(container));
+    clickOption(container, '바나나');
+    expect(onChangeSpy).not.toHaveBeenCalled();
+    expect(hasButton(container, '전체 선택')).toBe(false);
+  });
+  it('RCB-08 다중에서 value 를 넘기지 않으면 첫 옵션 click 이 [id] 로 시작한다', () => {
+    const onChange = vi.fn();
+    const {
+      container
+    } = mount({
+      optionItems: OPTIONS,
+      multiple: true,
+      onChange
+    });
+    click(allButton(container));
+    clickOption(container, '사과');
+    expect(onChange).toHaveBeenCalledWith([APPLE_ID]);
+  });
+});
+describe('RCB-03 입력창 키보드', () => {
+  it('RCB-03 열린 목록에서 ArrowDown·ArrowUp 이 포커스를 옮기고 Enter 가 포커스 옵션을 선택해 단일은 닫는다', () => {
+    const onChange = vi.fn();
+    const {
+      container
+    } = mount({
+      optionItems: OPTIONS,
+      onChange
+    });
+    typeText(container, '과');
+    pressKey(container, 'ArrowDown');
+    pressKey(container, 'ArrowDown');
+    const afterDown = focusedLabels(container);
+    pressKey(container, 'ArrowUp');
+    const afterUp = focusedLabels(container);
+    pressKey(container, 'Enter');
+    expect({
+      afterDown,
+      afterUp
+    }).toEqual({
+      afterDown: ['바나나'],
+      afterUp: ['사과']
+    });
+    expect(onChange).toHaveBeenCalledWith(APPLE_ID);
+    expect(isPanelOpen(container)).toBe(false);
+  });
+  it('RCB-03 닫힌 상태의 ArrowDown 은 목록을 연다', () => {
+    const {
+      container
+    } = mount({
+      optionItems: OPTIONS
+    });
+    pressKey(container, 'ArrowDown');
+    expect(isPanelOpen(container)).toBe(true);
+  });
+  it('RCB-03 열린 상태의 Escape 는 닫고, 닫힌 상태의 Escape 는 훅으로 넘어가 아무것도 하지 않는다', () => {
+    const {
+      container
+    } = mount({
+      optionItems: OPTIONS
+    });
+    typeText(container, '과');
+    const openEscape = pressKey(container, 'Escape');
+    const afterOpenEscape = isPanelOpen(container);
+    const closedEscape = pressKey(container, 'Escape');
+    expect({
+      afterOpenEscape,
+      openPrevented: openEscape.defaultPrevented,
+      closedPrevented: closedEscape.defaultPrevented,
+      afterClosedEscape: isPanelOpen(container)
+    }).toEqual({
+      afterOpenEscape: false,
+      openPrevented: true,
+      closedPrevented: false,
+      afterClosedEscape: false
+    });
+  });
+});
+describe('RCB-04 입력창 Space', () => {
+  it('RCB-04 Space keydown 은 기본 동작을 막아 닫혀 있으면 열고, 열림 + 포커스 옵션이면 그 옵션을 선택한다', () => {
+    // 현재 동작 고정 — 결함 후보: 후속 이슈 (useDropdownKeyboard 의 Enter/Space 처리를 input 에 그대로 연결해 검색어에 공백을 칠 수 없음)
+    const onChange = vi.fn();
+    const {
+      container
+    } = mount({
+      optionItems: OPTIONS,
+      onChange
+    });
+    const closedSpace = pressKey(container, ' ');
+    const openedBySpace = isPanelOpen(container);
+    typeText(container, '과');
+    pressKey(container, 'ArrowDown');
+    const openSpace = pressKey(container, ' ');
+    expect({
+      closedPrevented: closedSpace.defaultPrevented,
+      openedBySpace,
+      openPrevented: openSpace.defaultPrevented
+    }).toEqual({
+      closedPrevented: true,
+      openedBySpace: true,
+      openPrevented: true
+    });
+    expect(onChange).toHaveBeenCalledWith(APPLE_ID);
+  });
+  it.todo('RCB-04 입력창 Space 는 검색어에 공백을 입력하고 패널 열기·옵션 선택에 쓰지 않아야 한다');
+});
+describe('RCB-05 「전체」 버튼', () => {
+  it('RCB-05 disabled 면 「전체」 click 을 무시해 onSearch 를 부르지 않고 닫힌 채다', () => {
+    const onSearch = vi.fn();
+    const {
+      container
+    } = mount({
+      optionItems: OPTIONS,
+      onSearch,
+      disabled: true
+    });
+    click(allButton(container));
+    expect(onSearch).not.toHaveBeenCalled();
+    expect(isPanelOpen(container)).toBe(false);
+  });
+  it('RCB-05 이미 열려 있으면 「전체」가 입력·검색어만 비우고 전체 목록으로 열린 채 둔다', () => {
+    const onSearch = vi.fn();
+    const {
+      container
+    } = mount({
+      optionItems: OPTIONS,
+      onSearch
+    });
+    typeText(container, '과');
+    click(allButton(container));
+    expect({
+      value: input(container).value,
+      open: isPanelOpen(container),
+      labels: optionLabels(container)
+    }).toEqual({
+      value: '',
+      open: true,
+      labels: ['사과', '바나나']
+    });
+    expect(onSearch).toHaveBeenLastCalledWith('');
+  });
+});
+describe('RCB-06 지우기 버튼', () => {
+  it('RCB-06 지우기가 입력을 비우고 onSearch("") 를 부르며 패널은 결과 없음으로 열린 채다', () => {
+    const onSearch = vi.fn();
+    const {
+      container
+    } = mount({
+      optionItems: OPTIONS,
+      onSearch
+    });
+    typeText(container, '과');
+    click(requireElement(container, '.ncua-input__clear'));
+    expect({
+      value: input(container).value,
+      open: isPanelOpen(container),
+      noResults: container.querySelector('.ncua-select-dropdown__no-results') !== null
+    }).toEqual({
+      value: '',
+      open: true,
+      noResults: true
+    });
+    expect(onSearch).toHaveBeenLastCalledWith('');
+  });
+});
+describe('RCB-07 열린 상태의 입력 변경', () => {
+  it('RCB-07 열린 채 입력이 바뀌면 다시 토글하지 않고 열린 채 onSearch 에 새 값을 넘긴다', () => {
+    const onSearch = vi.fn();
+    const {
+      container
+    } = mount({
+      optionItems: OPTIONS,
+      onSearch
+    });
+    typeText(container, '사');
+    typeText(container, '사과');
+    expect(isPanelOpen(container)).toBe(true);
+    expect(onSearch).toHaveBeenLastCalledWith('사과');
+  });
+});
+describe('RCB-09 onChange 없는 다중', () => {
+  const errors = [];
+  const recordError = event => {
+    event.preventDefault();
+    errors.push(event.message);
+  };
+  // React 18 은 이벤트 핸들러 예외를 click() 밖으로 던지지 않고 window error 로 보고하므로 이쪽으로 받는다
+  const listenErrors = () => {
+    window.addEventListener('error', recordError);
+    onCleanup(() => {
+      window.removeEventListener('error', recordError);
+      errors.length = 0;
+    });
+  };
+  it('RCB-09 onChange 없이 「전체 선택」을 눌러도 예외 없이 아무것도 바꾸지 않는다', () => {
+    listenErrors();
+    const {
+      container
+    } = mount({
+      optionItems: OPTIONS,
+      multiple: true,
+      value: []
+    });
+    click(allButton(container));
+    click(findByText(container, 'button', '전체 선택'));
+    expect(errors).toEqual([]);
+    expect(container.querySelectorAll('.ncua-tag')).toHaveLength(0);
+  });
+  it('RCB-09 onChange 없이 태그 X 를 눌러도 예외 없이 태그가 남는다', () => {
+    listenErrors();
+    const {
+      container
+    } = mount({
+      optionItems: OPTIONS,
+      multiple: true,
+      value: [APPLE_ID]
+    });
+    click(requireElement(container, '.ncua-tag__close'));
+    expect(errors).toEqual([]);
+    expect(Array.from(container.querySelectorAll('.ncua-tag__text')).map(tag => tag.textContent)).toEqual(['사과']);
+  });
+});
+describe('RCB-10 편집 버튼', () => {
+  it('RCB-10 단일 + showFooterButtons 는 편집 버튼만 두고, 편집 click 이 onEdit 을 부르며 패널을 유지한다', () => {
+    const onEdit = vi.fn();
+    const {
+      container
+    } = mount({
+      optionItems: OPTIONS,
+      showFooterButtons: true,
+      onEdit
+    });
+    click(allButton(container));
+    click(findByText(container, 'button', '편집'));
+    expect({
+      complete: hasButton(container, '선택 완료'),
+      open: isPanelOpen(container)
+    }).toEqual({
+      complete: false,
+      open: true
+    });
+    expect(onEdit).toHaveBeenCalled();
+  });
+});
+describe('RCB-11 열린 채 disabled 전환', () => {
+  it('RCB-11 열린 채 disabled 로 바뀌면 패널이 열린 채 남고, 옵션 click 은 onChange 없이 닫기만 한다', () => {
+    // vanilla UBM-02 는 setDisabled 시 닫지만 React 는 열린 채 둔다 — 사용자 결정(Q3)으로 결함 후보가 아닌 현재 동작 고정
+    const onChange = vi.fn();
+    const {
+      container,
+      rerender
+    } = mount({
+      optionItems: OPTIONS,
+      onChange
+    });
+    typeText(container, '과');
+    rerender({
+      optionItems: OPTIONS,
+      onChange,
+      disabled: true
+    });
+    const openAfterDisable = isPanelOpen(container);
+    clickOption(container, '사과');
+    expect({
+      openAfterDisable,
+      openAfterClick: isPanelOpen(container)
+    }).toEqual({
+      openAfterDisable: true,
+      openAfterClick: false
+    });
+    expect(onChange).not.toHaveBeenCalled();
+  });
+});
+describe('RCB-12 입력 click', () => {
+  it('RCB-12 검색어가 없으면 입력 click 이 패널을 열지 않는다', () => {
+    const {
+      container
+    } = mount({
+      optionItems: OPTIONS
+    });
+    click(input(container));
+    expect(isPanelOpen(container)).toBe(false);
+  });
+  it('RCB-12 검색어가 있으면 입력 click 이 토글이라 열린 패널을 닫는다', () => {
+    // 현재 동작 고정 — 결함 후보: 후속 이슈 (커서를 옮기려 입력을 click 해도 패널이 닫힘 — vanilla UBM-14 는 열기만 함)
+    const {
+      container
+    } = mount({
+      optionItems: OPTIONS
+    });
+    typeText(container, '과');
+    click(input(container));
+    const afterFirstClick = isPanelOpen(container);
+    click(input(container));
+    expect([afterFirstClick, isPanelOpen(container)]).toEqual([false, true]);
+  });
+  it.todo('RCB-12 입력 click 은 패널을 열기만 하고 열린 패널을 닫지 않아야 한다');
+});
+describe('RCB-13 빈 검색어 패널의 키보드 선택', () => {
+  afterEach(() => {
+    vi.useRealTimers();
+  });
+  it('RCB-13 옵션이 보이지 않는 빈 검색어 패널에서 ArrowDown + Enter 가 화면에 없는 첫 옵션을 선택한다', () => {
+    // 현재 동작 고정 — 결함 후보: 후속 이슈 (키보드 탐색이 표시 목록이 아니라 optionItems.length 기준이라 보이지 않는 옵션이 선택됨)
+    vi.useFakeTimers({
+      toFake: ['setTimeout']
+    });
+    const onChange = vi.fn();
+    const {
+      container
+    } = mount({
+      optionItems: OPTIONS,
+      onChange
+    });
+    pressKey(container, 'ArrowDown');
+    const shownLabels = optionLabels(container);
+    pressKey(container, 'ArrowDown');
+    // 스크롤 보정은 옵션 요소가 없어 건너뛴다 (scrollToFocusedOption 의 focusedOption 부재 early return)
+    act(() => {
+      vi.runOnlyPendingTimers();
+    });
+    pressKey(container, 'Enter');
+    expect(shownLabels).toEqual([]);
+    expect(onChange).toHaveBeenCalledWith(APPLE_ID);
+  });
+  it.todo('RCB-13 옵션이 표시되지 않은 패널에서는 키보드로 옵션을 선택할 수 없어야 한다');
+});
+describe('RCB-14 옵션 아이콘', () => {
+  it('RCB-14 icon 이 있는 옵션만 __option-icon 안에 아이콘을 렌더한다', () => {
+    const ProbeIcon = _ref => {
+      let {
+        className
+      } = _ref;
+      return /*#__PURE__*/createElement('svg', {
+        className: `probe-icon ${className ?? ''}`
+      });
+    };
+    const {
+      container
+    } = mount({
+      optionItems: [{
+        id: APPLE_ID,
+        label: '사과',
+        icon: ProbeIcon
+      }, {
+        id: BANANA_ID,
+        label: '바나나'
+      }]
+    });
+    click(allButton(container));
+    expect(['사과', '바나나'].map(label => findByText(container, `.${OPTION_CLASS}`, label).querySelector('.ncua-select-dropdown__option-icon .probe-icon') !== null)).toEqual([true, false]);
+  });
+});