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

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

@@ -1,293 +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(createElement(ComboBox, props));
-    });
-    return container;
-}
-/** onChange로 받은 값을 value로 되돌려주는 사용처 흉내 (controlled) */
-function Harness({ initialValue, onChangeSpy, transform, ...rest }) {
-    const [value, setValue] = useState(initialValue);
-    return 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(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(['체리']);
-    });
-});