@ncds/ui-admin 1.8.25 → 1.8.26-alpha.0

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

@@ -1,452 +0,0 @@
-// @vitest-environment jsdom
-import { createElement, 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 { ComboBox } from '../ComboBox';
-// React 18에서 act() 사용 시 필요한 플래그 (미설정 시 console.error 경고 발생)
-globalThis.IS_REACT_ACT_ENVIRONMENT = true;
-const OPTIONS = [{
-  id: 1,
-  label: '사과'
-}, {
-  id: 2,
-  label: '바나나'
-}, {
-  id: 3,
-  label: '체리'
-}];
-/** id 1·2가 빠진 목록 — 검색 필터로 optionItems가 줄어든 상황 */
-const FILTERED_OPTIONS = [{
-  id: 3,
-  label: '체리'
-}];
-/** optionItems에 없는 id */
-const MISSING_ID = 99;
-/** 바깥에서 reset 으로 넣는 값 — 기존 선택(1·2)과 겹치지 않는 id */
-const RESET_ID = 3;
-/** 「전체 선택」 결과 — OPTIONS 의 모든 id */
-const ALL_IDS = OPTIONS.map(option => option.id);
-let root = null;
-let container = null;
-/** 같은 root에 다시 render하면 props 변경(rerender)이 된다. */
-function render(props) {
-  if (!container) {
-    container = document.createElement('div');
-    document.body.appendChild(container);
-    root = createRoot(container);
-  }
-  act(() => {
-    root?.render(/*#__PURE__*/createElement(ComboBox, props));
-  });
-  return container;
-}
-/** onChange로 받은 값을 value로 되돌려주는 사용처 흉내 (controlled) */
-function Harness(_ref) {
-  let {
-    initialValue,
-    onChangeSpy,
-    transform,
-    ...rest
-  } = _ref;
-  const [value, setValue] = useState(initialValue);
-  return /*#__PURE__*/createElement(ComboBox, {
-    ...rest,
-    value,
-    onChange: next => {
-      onChangeSpy(next);
-      setValue(transform ? transform(next) : next);
-    }
-  });
-}
-function renderHarness(props) {
-  if (!container) {
-    container = document.createElement('div');
-    document.body.appendChild(container);
-    root = createRoot(container);
-  }
-  act(() => {
-    root?.render(/*#__PURE__*/createElement(Harness, props));
-  });
-  return container;
-}
-function getTagTexts(el) {
-  return Array.from(el.querySelectorAll('.ncua-combobox__tags .ncua-tag .ncua-tag__text')).map(node => node.textContent ?? '');
-}
-function getCloseButtons(el) {
-  return Array.from(el.querySelectorAll('.ncua-combobox__tags .ncua-tag__close'));
-}
-function click(target) {
-  if (!target) throw new Error('클릭 대상을 찾을 수 없습니다');
-  act(() => {
-    target.click();
-  });
-}
-/** 「전체」 버튼으로 드롭다운을 연다 (입력값이 없어도 전체 목록 표시). */
-function openDropdown(el) {
-  click(el.querySelector('.ncua-input__right-icon'));
-}
-function clickOption(el, label) {
-  const option = Array.from(el.querySelectorAll('.ncua-select-dropdown__option')).find(node => node.textContent === label);
-  click(option);
-}
-function clickButton(el, label) {
-  const button = Array.from(el.querySelectorAll('button')).find(node => node.textContent?.includes(label));
-  click(button);
-}
-afterEach(() => {
-  act(() => {
-    root?.unmount();
-  });
-  container?.remove();
-  root = null;
-  container = null;
-});
-describe('ComboBox — 단일 모드 외부 value Tag', () => {
-  it('S-01: value에 해당하는 옵션이 있으면 Tag 1개를 라벨로 표시한다', () => {
-    const el = render({
-      value: 1,
-      optionItems: OPTIONS
-    });
-    expect(getTagTexts(el)).toEqual(['사과']);
-  });
-  it('S-02: optionItems가 늦게 도착하면 도착 시 Tag를 표시한다', () => {
-    const el = render({
-      value: 1,
-      optionItems: []
-    });
-    expect(getTagTexts(el)).toEqual([]);
-    render({
-      value: 1,
-      optionItems: OPTIONS
-    });
-    expect(getTagTexts(el)).toEqual(['사과']);
-  });
-  it.each([['빈 문자열', ''], ['undefined', undefined], ['null', null]])('S-03: value가 %s이면 Tag를 표시하지 않는다', (_, value) => {
-    const el = render({
-      value: value,
-      optionItems: OPTIONS
-    });
-    expect(el.querySelector('.ncua-combobox__tags')).toBeNull();
-  });
-  it.each([['빈 문자열', ''], ['undefined', undefined]])('S-04: Tag 표시 중 value가 %s로 바뀌면 Tag가 사라진다', (_, value) => {
-    const el = render({
-      value: 1,
-      optionItems: OPTIONS
-    });
-    expect(getTagTexts(el)).toEqual(['사과']);
-    render({
-      value,
-      optionItems: OPTIONS
-    });
-    expect(el.querySelector('.ncua-combobox__tags')).toBeNull();
-  });
-  it('S-05: 검색 필터로 optionItems에서 선택 항목이 빠져도 같은 라벨로 Tag를 유지한다', () => {
-    const el = render({
-      value: 1,
-      optionItems: OPTIONS
-    });
-    expect(getTagTexts(el)).toEqual(['사과']);
-    render({
-      value: 1,
-      optionItems: FILTERED_OPTIONS
-    });
-    expect(getTagTexts(el)).toEqual(['사과']);
-  });
-  it('S-06: 목록에 없는 다른 id로 바뀌면 이전 라벨을 쓰지 않고 Tag를 표시하지 않는다', () => {
-    const el = render({
-      value: 1,
-      optionItems: OPTIONS
-    });
-    expect(getTagTexts(el)).toEqual(['사과']);
-    render({
-      value: MISSING_ID,
-      optionItems: OPTIONS
-    });
-    expect(el.querySelector('.ncua-combobox__tags')).toBeNull();
-  });
-  it('S-07: value가 다른 id로 바뀌면 그 id의 라벨로 Tag를 바꾼다', () => {
-    const el = render({
-      value: 1,
-      optionItems: OPTIONS
-    });
-    render({
-      value: 2,
-      optionItems: OPTIONS
-    });
-    expect(getTagTexts(el)).toEqual(['바나나']);
-  });
-  it('S-08: disabled면 Tag는 표시하고 X 버튼은 표시하지 않는다', () => {
-    const el = render({
-      value: 1,
-      optionItems: OPTIONS,
-      disabled: true
-    });
-    expect(getTagTexts(el)).toEqual(['사과']);
-    expect(getCloseButtons(el)).toHaveLength(0);
-  });
-  it('S-09: value가 0이어도 빈 값으로 보지 않고 Tag를 표시한다', () => {
-    const el = render({
-      value: 0,
-      optionItems: [{
-        id: 0,
-        label: '없음'
-      }, ...OPTIONS]
-    });
-    expect(getTagTexts(el)).toEqual(['없음']);
-  });
-  it.each([[0, '0'], [null, '']])('S-12: register 사용 시 value가 %s이면 hidden input 값은 %j이다 (Tag 표시 규칙과 같게 0은 값으로 본다)', (value, expected) => {
-    const register = {
-      name: 'item',
-      onChange: vi.fn(),
-      onBlur: vi.fn(),
-      ref: vi.fn()
-    };
-    const el = render({
-      value,
-      register,
-      optionItems: [{
-        id: 0,
-        label: '없음'
-      }, ...OPTIONS]
-    });
-    expect(el.querySelector('input[type="hidden"]')?.value).toBe(expected);
-  });
-  it('S-10 (회귀): 옵션을 클릭하면 onChange(id)를 호출하고 Tag를 표시한다', () => {
-    const onChangeSpy = vi.fn();
-    const el = renderHarness({
-      initialValue: '',
-      onChangeSpy,
-      optionItems: OPTIONS
-    });
-    openDropdown(el);
-    clickOption(el, '바나나');
-    expect(onChangeSpy).toHaveBeenCalledWith(2);
-    expect(getTagTexts(el)).toEqual(['바나나']);
-  });
-  it('S-11 (회귀): X를 클릭하면 onChange("")를 호출하고 Tag가 사라진다', () => {
-    const onChangeSpy = vi.fn();
-    const el = renderHarness({
-      initialValue: 1,
-      onChangeSpy,
-      optionItems: OPTIONS
-    });
-    click(getCloseButtons(el)[0]);
-    expect(onChangeSpy).toHaveBeenCalledWith('');
-    expect(el.querySelector('.ncua-combobox__tags')).toBeNull();
-  });
-});
-describe('ComboBox — multiple 모드 외부 value Tag', () => {
-  it('M-01: value 배열에 해당하는 Tag를 모두 표시한다', () => {
-    const el = render({
-      multiple: true,
-      value: [1, 2],
-      optionItems: OPTIONS
-    });
-    expect(getTagTexts(el)).toEqual(['사과', '바나나']);
-  });
-  it('M-02: optionItems가 늦게 도착하면 도착 시 Tag를 표시한다', () => {
-    const el = render({
-      multiple: true,
-      value: [1, 2],
-      optionItems: []
-    });
-    expect(getTagTexts(el)).toEqual([]);
-    render({
-      multiple: true,
-      value: [1, 2],
-      optionItems: OPTIONS
-    });
-    expect(getTagTexts(el)).toEqual(['사과', '바나나']);
-  });
-  it.each([['빈 배열', []], ['undefined', undefined], ['null', null]])('M-03: value가 %s이면 Tag를 표시하지 않는다', (_, value) => {
-    const el = render({
-      multiple: true,
-      value: value,
-      optionItems: OPTIONS
-    });
-    expect(el.querySelector('.ncua-combobox__tags')).toBeNull();
-  });
-  it.each([['빈 배열', []], ['undefined', undefined]])('M-04: Tag 표시 중 value가 %s로 바뀌면 Tag가 사라진다', (_, value) => {
-    const el = render({
-      multiple: true,
-      value: [1, 2],
-      optionItems: OPTIONS
-    });
-    expect(getTagTexts(el)).toEqual(['사과', '바나나']);
-    render({
-      multiple: true,
-      value,
-      optionItems: OPTIONS
-    });
-    expect(el.querySelector('.ncua-combobox__tags')).toBeNull();
-  });
-  it('M-05: 바깥에서 value를 바꾸면(reset) 새 value로 Tag를 다시 그린다', () => {
-    const el = render({
-      multiple: true,
-      value: [1, 2],
-      optionItems: OPTIONS
-    });
-    render({
-      multiple: true,
-      value: [RESET_ID],
-      optionItems: OPTIONS
-    });
-    expect(getTagTexts(el)).toEqual(['체리']);
-  });
-  it('M-06: 검색 필터로 optionItems에서 선택 항목이 빠져도 Tag를 유지한다', () => {
-    const el = render({
-      multiple: true,
-      value: [1, 2],
-      optionItems: OPTIONS
-    });
-    render({
-      multiple: true,
-      value: [1, 2],
-      optionItems: FILTERED_OPTIONS
-    });
-    expect(getTagTexts(el)).toEqual(['사과', '바나나']);
-  });
-  it('M-07: disabled면 Tag는 표시하고 X 버튼은 표시하지 않는다', () => {
-    const el = render({
-      multiple: true,
-      value: [1],
-      optionItems: OPTIONS,
-      disabled: true
-    });
-    expect(getTagTexts(el)).toEqual(['사과']);
-    expect(getCloseButtons(el)).toHaveLength(0);
-  });
-  it('M-08 (회귀): 옵션을 클릭하면 onChange만 호출하고 Tag는 「선택 완료」 전까지 그대로다', () => {
-    const onChangeSpy = vi.fn();
-    const el = renderHarness({
-      multiple: true,
-      initialValue: [1],
-      onChangeSpy,
-      optionItems: OPTIONS
-    });
-    expect(getTagTexts(el)).toEqual(['사과']);
-    openDropdown(el);
-    clickOption(el, '바나나');
-    expect(onChangeSpy).toHaveBeenCalledWith([1, 2]);
-    expect(getTagTexts(el)).toEqual(['사과']);
-  });
-  it('M-09 (회귀): 옵션 클릭 후 「선택 완료」를 누르면 Tag를 반영하고 onComplete를 호출한다', () => {
-    const onChangeSpy = vi.fn();
-    const onComplete = vi.fn();
-    const el = renderHarness({
-      multiple: true,
-      initialValue: [1],
-      onChangeSpy,
-      onComplete,
-      optionItems: OPTIONS
-    });
-    openDropdown(el);
-    clickOption(el, '바나나');
-    clickButton(el, '선택 완료');
-    expect(getTagTexts(el)).toEqual(['사과', '바나나']);
-    expect(onComplete).toHaveBeenCalledWith([1, 2]);
-  });
-  it('M-10 (회귀): X를 클릭하면 onChange(남은 배열)를 호출하고 해당 Tag만 제거한다', () => {
-    const onChangeSpy = vi.fn();
-    const el = renderHarness({
-      multiple: true,
-      initialValue: [1, 2],
-      onChangeSpy,
-      optionItems: OPTIONS
-    });
-    click(getCloseButtons(el)[0]);
-    expect(onChangeSpy).toHaveBeenCalledWith([2]);
-    expect(getTagTexts(el)).toEqual(['바나나']);
-  });
-  it('M-11 (회귀): 「전체 선택」을 누르면 onChange(전체 id)만 호출하고 Tag는 그대로다', () => {
-    const onChangeSpy = vi.fn();
-    const el = renderHarness({
-      multiple: true,
-      initialValue: [],
-      onChangeSpy,
-      optionItems: OPTIONS
-    });
-    openDropdown(el);
-    clickButton(el, '전체 선택');
-    expect(onChangeSpy).toHaveBeenCalledWith(ALL_IDS);
-    expect(el.querySelector('.ncua-combobox__tags')).toBeNull();
-  });
-  it('M-12: 클릭으로 고른 값과 같은 값을 바깥에서 비웠다가 다시 넣어도 Tag를 표시한다', () => {
-    const props = {
-      multiple: true,
-      optionItems: OPTIONS,
-      onChange: vi.fn()
-    };
-    const el = render({
-      ...props,
-      value: []
-    });
-    openDropdown(el);
-    clickOption(el, '사과');
-    render({
-      ...props,
-      value: [1]
-    });
-    clickButton(el, '선택 완료');
-    expect(getTagTexts(el)).toEqual(['사과']);
-    render({
-      ...props,
-      value: []
-    });
-    expect(getTagTexts(el)).toEqual([]);
-    render({
-      ...props,
-      value: [1]
-    });
-    expect(getTagTexts(el)).toEqual(['사과']);
-  });
-  it('M-13 (회귀): 클릭 후 「선택 완료」 전에 optionItems가 바뀌어도(검색) Tag는 그대로다', () => {
-    const onChangeSpy = vi.fn();
-    const el = renderHarness({
-      multiple: true,
-      initialValue: [1],
-      onChangeSpy,
-      optionItems: OPTIONS
-    });
-    openDropdown(el);
-    clickOption(el, '바나나');
-    renderHarness({
-      multiple: true,
-      initialValue: [1],
-      onChangeSpy,
-      optionItems: FILTERED_OPTIONS
-    });
-    expect(onChangeSpy).toHaveBeenCalledWith([1, 2]);
-    expect(getTagTexts(el)).toEqual(['사과']);
-  });
-  it('M-14 (회귀): 「선택 완료」 전에 클릭한 항목이 있을 때 X를 누르면 그 Tag만 빠지고 클릭한 항목은 확정되지 않는다', () => {
-    const onChangeSpy = vi.fn();
-    const el = renderHarness({
-      multiple: true,
-      initialValue: [1],
-      onChangeSpy,
-      optionItems: OPTIONS
-    });
-    openDropdown(el);
-    clickOption(el, '바나나');
-    click(getCloseButtons(el)[0]);
-    expect(onChangeSpy).toHaveBeenLastCalledWith([2]);
-    expect(el.querySelector('.ncua-combobox__tags')).toBeNull();
-  });
-  it('M-15 (회귀): 사용처가 onChange 값의 순서를 바꿔 돌려줘도 「선택 완료」 전에는 Tag가 그대로다', () => {
-    const onChangeSpy = vi.fn();
-    const sortIds = value => Array.isArray(value) ? [...value].sort() : value;
-    const el = renderHarness({
-      multiple: true,
-      initialValue: [RESET_ID],
-      onChangeSpy,
-      transform: sortIds,
-      optionItems: OPTIONS
-    });
-    openDropdown(el);
-    clickOption(el, '사과');
-    expect(onChangeSpy).toHaveBeenCalledWith([RESET_ID, 1]);
-    expect(getTagTexts(el)).toEqual(['체리']);
-  });
-});