@ncds/ui-admin 1.8.25-alpha.3 → 1.8.25

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

@@ -0,0 +1,452 @@
+// @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(['체리']);
+  });
+});