@ncds/ui-admin 1.8.28-alpha.0 → 1.8.28-alpha.2

package/dist/temp/src/components/overlays/dropdown/__tests__/Dropdown.dnd.test.js

@@ -0,0 +1,423 @@
+import { autoScrollForElements } from '@atlaskit/pragmatic-drag-and-drop-auto-scroll/element';
+import { extractClosestEdge } from '@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge';
+import { createElement } from 'react';
+import { createRoot } from 'react-dom/client';
+import { act } from 'react-dom/test-utils';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { Dropdown } from '../Dropdown';
+import { applyButtonOf, configItem, configTexts } from './dropdownTestUtils';
+/** 현재 구독 중인 registration. cleanup 이 불리면 빠진다. */
+const dnd = vi.hoisted(() => ({
+    draggables: [],
+    dropTargets: [],
+    monitors: [],
+    previews: [],
+}));
+vi.mock('@atlaskit/pragmatic-drag-and-drop/element/adapter', () => {
+    const register = (list) => (args) => {
+        list.push(args);
+        return () => {
+            const index = list.indexOf(args);
+            if (index !== -1)
+                list.splice(index, 1);
+        };
+    };
+    return {
+        draggable: vi.fn(register(dnd.draggables)),
+        dropTargetForElements: vi.fn(register(dnd.dropTargets)),
+        monitorForElements: vi.fn(register(dnd.monitors)),
+    };
+});
+vi.mock('@atlaskit/pragmatic-drag-and-drop/element/set-custom-native-drag-preview', () => ({
+    setCustomNativeDragPreview: vi.fn((args) => {
+        dnd.previews.push(args);
+    }),
+}));
+vi.mock('@atlaskit/pragmatic-drag-and-drop-auto-scroll/element', () => ({
+    autoScrollForElements: vi.fn(() => vi.fn()),
+}));
+const draggables = () => dnd.draggables;
+const dropTargets = () => dnd.dropTargets;
+const monitors = () => dnd.monitors;
+const previews = () => dnd.previews;
+const stubRect = (element, rect) => {
+    const resolved = { top: 0, bottom: 0, left: 0, right: 0, width: 0, height: 0, x: 0, y: 0, ...rect };
+    element.getBoundingClientRect = () => ({ ...resolved, toJSON: () => resolved });
+};
+const ITEM_HEIGHT = 40;
+const ITEM_WIDTH = 240;
+/** Dropdown 이 pointerOutsideOfPreview 에 넘기는 포인터-미리보기 간격 */
+const PREVIEW_POINTER_GAP = '8px';
+const UPPER_HALF_Y = 10;
+const LOWER_HALF_Y = 30;
+const textOf = (element) => element.closest('.ncua-dropdown__item--config')?.querySelector('.ncua-dropdown__item-text')?.textContent;
+const draggableOf = (text, scope = document.body) => {
+    const args = draggables().find((entry) => scope.contains(entry.element) && textOf(entry.element) === text);
+    if (!args)
+        throw new Error(`draggable not registered: ${text}`);
+    return args;
+};
+const dropTargetOf = (text, scope = document.body) => {
+    const args = dropTargets().find((entry) => scope.contains(entry.element) && textOf(entry.element) === text);
+    if (!args)
+        throw new Error(`drop target not registered: ${text}`);
+    return args;
+};
+const sourceDataOf = (text, scope) => {
+    const args = draggableOf(text, scope);
+    if (!args.getInitialData)
+        throw new Error(`getInitialData 없음: ${text}`);
+    return args.getInitialData({});
+};
+/** 항목 dropTarget 의 getData 를 실제 closest-edge 로 실행해 target data 를 만든다. */
+const targetDataOf = (text, clientY, source, scope) => {
+    const args = dropTargetOf(text, scope);
+    if (!args.getData)
+        throw new Error(`getData 없음: ${text}`);
+    stubRect(args.element, { top: 0, bottom: ITEM_HEIGHT, height: ITEM_HEIGHT });
+    return args.getData({
+        input: { clientX: 0, clientY },
+        element: args.element,
+        source: { element: args.element, dragHandle: null, data: source },
+    });
+};
+const sourcePayloadOf = (source) => ({ element: document.body, dragHandle: null, data: source });
+const dropPayloadOf = (source, targets) => ({
+    source: sourcePayloadOf(source),
+    location: { current: { dropTargets: targets.map((data) => ({ data })) } },
+});
+/** 등록된 모든 monitor 에 drop 을 흘린다 (canMonitor 통과한 것만). */
+const dropOnMonitors = (source, targets) => {
+    act(() => {
+        for (const monitor of [...monitors()]) {
+            if (monitor.canMonitor &&
+                !monitor.canMonitor({ source: sourcePayloadOf(source) })) {
+                continue;
+            }
+            monitor.onDrop?.(dropPayloadOf(source, targets));
+        }
+    });
+};
+const canMonitor = (data) => {
+    const [monitor] = monitors();
+    if (!monitor?.canMonitor)
+        throw new Error('monitor 가 없습니다');
+    return monitor.canMonitor({ source: sourcePayloadOf(data) });
+};
+// ── 렌더 ────────────────────────────────────────────────────
+let root = null;
+let container = null;
+const render = (element) => {
+    if (!container) {
+        container = document.createElement('div');
+        document.body.appendChild(container);
+        root = createRoot(container);
+    }
+    act(() => {
+        root?.render(element);
+    });
+    return container;
+};
+afterEach(() => {
+    if (root) {
+        act(() => {
+            root?.unmount();
+        });
+    }
+    // 언마운트 뒤에도 남은 registration 은 cleanup 누락이라 비우기 전에 실패로 드러낸다
+    expect(dnd.draggables).toHaveLength(0);
+    expect(dnd.dropTargets).toHaveLength(0);
+    expect(dnd.monitors).toHaveLength(0);
+    container?.remove();
+    root = null;
+    container = null;
+    // 미리보기는 cleanup 을 돌려주지 않는 API 라 언마운트와 무관하게 쌓인다
+    dnd.previews.length = 0;
+    vi.clearAllMocks();
+});
+const createGroups = (sortable = true) => [
+    {
+        sortable,
+        items: [
+            { id: 'a', text: '주문번호', visible: true },
+            { id: 'b', text: '상품명', visible: true },
+            { id: 'c', text: '수량', visible: true },
+        ],
+    },
+];
+const configProps = (overrides = {}) => ({
+    variant: 'config',
+    trigger: { type: 'button', text: '컬럼 설정' },
+    groups: createGroups(),
+    onApply: vi.fn(),
+    opened: true,
+    ...overrides,
+});
+const ORIGINAL_ORDER = ['주문번호', '상품명', '수량'];
+describe('Dropdown config 드롭 → draft 순서 (DD-04)', () => {
+    it('DD-04 다른 항목의 아래쪽 절반에 놓으면 그 항목 바로 뒤로 이동하고 적용 버튼이 활성화된다', () => {
+        const view = render(createElement(Dropdown, configProps()));
+        const source = sourceDataOf('주문번호');
+        dropOnMonitors(source, [targetDataOf('수량', LOWER_HALF_Y, source)]);
+        expect(configTexts(view)).toEqual(['상품명', '수량', '주문번호']);
+        expect(applyButtonOf(view).disabled).toBe(false);
+    });
+    it('DD-04 다른 항목의 위쪽 절반에 놓으면 그 항목 바로 앞으로 이동한다', () => {
+        const view = render(createElement(Dropdown, configProps()));
+        const source = sourceDataOf('수량');
+        dropOnMonitors(source, [targetDataOf('주문번호', UPPER_HALF_Y, source)]);
+        expect(configTexts(view)).toEqual(['수량', '주문번호', '상품명']);
+    });
+    it('DD-04 드롭 결과는 적용 시 onApply 순서에 반영된다', () => {
+        const onApply = vi.fn();
+        const groups = createGroups();
+        const view = render(createElement(Dropdown, configProps({ groups, onApply })));
+        const source = sourceDataOf('주문번호');
+        dropOnMonitors(source, [targetDataOf('상품명', LOWER_HALF_Y, source)]);
+        act(() => {
+            applyButtonOf(view).click();
+        });
+        const [a, b, c] = groups[0].items;
+        expect(onApply).toHaveBeenCalledWith([b, a, c]);
+    });
+    it('DD-04 target 에 closest edge 정보가 없으면 "top" 으로 처리한다', () => {
+        const view = render(createElement(Dropdown, configProps()));
+        const source = sourceDataOf('주문번호');
+        const { id, dropdownId } = targetDataOf('수량', LOWER_HALF_Y, source);
+        dropOnMonitors(source, [{ id, dropdownId }]);
+        expect(configTexts(view)).toEqual(['상품명', '주문번호', '수량']);
+    });
+    it('DD-04 drop target 이 없으면 순서를 바꾸지 않는다', () => {
+        const view = render(createElement(Dropdown, configProps()));
+        dropOnMonitors(sourceDataOf('주문번호'), []);
+        expect(configTexts(view)).toEqual(ORIGINAL_ORDER);
+        expect(applyButtonOf(view).disabled).toBe(true);
+    });
+    it('DD-04 자기 자신 위에 놓으면 순서를 바꾸지 않는다', () => {
+        const view = render(createElement(Dropdown, configProps()));
+        const source = sourceDataOf('상품명');
+        dropOnMonitors(source, [targetDataOf('상품명', LOWER_HALF_Y, source)]);
+        expect(configTexts(view)).toEqual(ORIGINAL_ORDER);
+    });
+    it('DD-04 source·target id 가 문자열이 아니면 순서를 바꾸지 않는다', () => {
+        const view = render(createElement(Dropdown, configProps()));
+        const [monitor] = monitors();
+        const source = sourceDataOf('주문번호');
+        act(() => {
+            monitor.onDrop?.(dropPayloadOf(source, [{ id: 1 }]));
+            monitor.onDrop?.(dropPayloadOf({ ...source, id: 1 }, [targetDataOf('수량', LOWER_HALF_Y, source)]));
+        });
+        expect(configTexts(view)).toEqual(ORIGINAL_ORDER);
+    });
+    it('DD-04 canMonitor 는 같은 dropdownId 의 문자열 id source 만 통과시킨다', () => {
+        render(createElement(Dropdown, configProps()));
+        const source = sourceDataOf('주문번호');
+        expect(canMonitor(source)).toBe(true);
+        expect(canMonitor({ ...source, dropdownId: 'ncua-dropdown-other' })).toBe(false);
+        expect(canMonitor({ ...source, id: 1 })).toBe(false);
+    });
+    it('DD-04 두 Dropdown 이 함께 열려 있어도 한쪽의 드롭은 다른 쪽 draft 를 바꾸지 않는다', () => {
+        const view = render(createElement('div', null, createElement('section', { key: 'first', className: 'first' }, createElement(Dropdown, configProps())), createElement('section', { key: 'second', className: 'second' }, createElement(Dropdown, configProps()))));
+        const first = view.querySelector('.first');
+        const second = view.querySelector('.second');
+        const source = sourceDataOf('주문번호', first);
+        expect(monitors()).toHaveLength(2);
+        dropOnMonitors(source, [targetDataOf('수량', LOWER_HALF_Y, source, first)]);
+        expect(configTexts(first)).toEqual(['상품명', '수량', '주문번호']);
+        expect(configTexts(second)).toEqual(ORIGINAL_ORDER);
+    });
+    it('DD-04 monitor 는 config 가 열려 있는 동안만 등록되고 닫히면 해제된다', () => {
+        render(createElement(Dropdown, configProps({ opened: false })));
+        expect(monitors()).toHaveLength(0);
+        render(createElement(Dropdown, configProps({ opened: true })));
+        expect(monitors()).toHaveLength(1);
+        render(createElement(Dropdown, configProps({ opened: false })));
+        expect(monitors()).toHaveLength(0);
+    });
+    it('DD-04 action variant 는 monitor 를 등록하지 않는다', () => {
+        render(createElement(Dropdown, {
+            trigger: { type: 'button', text: '더보기' },
+            groups: [{ items: [{ id: 'edit', text: '수정' }] }],
+            opened: true,
+        }));
+        expect(monitors()).toHaveLength(0);
+    });
+    it('DD-04 닫힌 뒤(draft 없음) 늦게 도착한 drop 은 에러 없이 무시되고 다시 열면 원래 순서다', () => {
+        const view = render(createElement(Dropdown, configProps()));
+        const [monitor] = monitors();
+        const source = sourceDataOf('주문번호');
+        const target = targetDataOf('수량', LOWER_HALF_Y, source);
+        render(createElement(Dropdown, configProps({ opened: false })));
+        expect(() => act(() => {
+            monitor.onDrop?.(dropPayloadOf(source, [target]));
+        })).not.toThrow();
+        render(createElement(Dropdown, configProps({ opened: true })));
+        expect(configTexts(view)).toEqual(ORIGINAL_ORDER);
+    });
+});
+describe('Dropdown config 항목 drop indicator · 드래그 상태 (DD-05)', () => {
+    const dragEvent = (self, source) => ({ self: { data: self }, source: { data: source } });
+    const indicatorOf = (text, scope) => configItem(scope, text).querySelector('.ncua-dropdown__item-drop-indicator');
+    it('DD-05 다른 항목이 위쪽 절반으로 들어오면 --top indicator 를 그린다', () => {
+        const view = render(createElement(Dropdown, configProps()));
+        const source = sourceDataOf('주문번호');
+        const self = targetDataOf('수량', UPPER_HALF_Y, source);
+        act(() => {
+            dropTargetOf('수량').onDragEnter?.(dragEvent(self, source));
+        });
+        expect(indicatorOf('수량', view)?.classList.contains('ncua-dropdown__item-drop-indicator--top')).toBe(true);
+    });
+    it('DD-05 드래그 중 아래쪽 절반으로 옮기면 --bottom 으로 바뀐다', () => {
+        const view = render(createElement(Dropdown, configProps()));
+        const source = sourceDataOf('주문번호');
+        const target = dropTargetOf('수량');
+        act(() => {
+            target.onDragEnter?.(dragEvent(targetDataOf('수량', UPPER_HALF_Y, source), source));
+        });
+        act(() => {
+            target.onDrag?.(dragEvent(targetDataOf('수량', LOWER_HALF_Y, source), source));
+        });
+        expect(indicatorOf('수량', view)?.classList.contains('ncua-dropdown__item-drop-indicator--bottom')).toBe(true);
+    });
+    it('DD-05 자기 자신 위에서는 indicator 를 그리지 않는다 (enter·drag 모두)', () => {
+        const view = render(createElement(Dropdown, configProps()));
+        const source = sourceDataOf('상품명');
+        const target = dropTargetOf('상품명');
+        const self = targetDataOf('상품명', LOWER_HALF_Y, source);
+        act(() => {
+            target.onDragEnter?.(dragEvent(self, source));
+            target.onDrag?.(dragEvent(self, source));
+        });
+        expect(indicatorOf('상품명', view)).toBeNull();
+    });
+    it('DD-05 leave 하면 indicator 가 사라진다', () => {
+        const view = render(createElement(Dropdown, configProps()));
+        const source = sourceDataOf('주문번호');
+        const target = dropTargetOf('수량');
+        act(() => {
+            target.onDragEnter?.(dragEvent(targetDataOf('수량', UPPER_HALF_Y, source), source));
+        });
+        act(() => {
+            target.onDragLeave?.(dragEvent({}, source));
+        });
+        expect(indicatorOf('수량', view)).toBeNull();
+    });
+    it('DD-05 drop 하면 indicator 가 사라진다', () => {
+        const view = render(createElement(Dropdown, configProps()));
+        const source = sourceDataOf('주문번호');
+        const target = dropTargetOf('수량');
+        act(() => {
+            target.onDragEnter?.(dragEvent(targetDataOf('수량', LOWER_HALF_Y, source), source));
+        });
+        act(() => {
+            target.onDrop?.(dragEvent({}, source));
+        });
+        expect(indicatorOf('수량', view)).toBeNull();
+    });
+    it('DD-05 getData 는 top/bottom 만 허용한 closest edge 와 항목 id·dropdownId 를 담는다', () => {
+        render(createElement(Dropdown, configProps()));
+        const source = sourceDataOf('주문번호');
+        const lower = targetDataOf('수량', LOWER_HALF_Y, source);
+        const upper = targetDataOf('수량', UPPER_HALF_Y, source);
+        expect(extractClosestEdge(lower)).toBe('bottom');
+        expect(extractClosestEdge(upper)).toBe('top');
+        expect(lower.id).toBe('c');
+        expect(lower.dropdownId).toBe(source.dropdownId);
+        expect(String(source.dropdownId)).toMatch(/^ncua-dropdown-/);
+    });
+    it('DD-05 드래그 시작 시 항목에 is-dragging 을 붙이고 drop 시 뗀다', () => {
+        const view = render(createElement(Dropdown, configProps()));
+        const handle = draggableOf('주문번호');
+        const payload = {};
+        act(() => {
+            handle.onDragStart?.(payload);
+        });
+        expect(configItem(view, '주문번호').classList.contains('is-dragging')).toBe(true);
+        act(() => {
+            handle.onDrop?.(payload);
+        });
+        expect(configItem(view, '주문번호').classList.contains('is-dragging')).toBe(false);
+    });
+    it('DD-05 draggable 은 드래그 핸들에, drop target 은 항목에 등록된다', () => {
+        const view = render(createElement(Dropdown, configProps()));
+        expect(draggableOf('주문번호').element).toBe(configItem(view, '주문번호').querySelector('.ncua-dropdown__item-drag-handle'));
+        expect(dropTargetOf('주문번호').element).toBe(configItem(view, '주문번호'));
+        expect(draggables()).toHaveLength(ORIGINAL_ORDER.length);
+        expect(dropTargets()).toHaveLength(ORIGINAL_ORDER.length);
+    });
+    it('DD-05 sortable 이 아닌 그룹은 draggable·drop target 을 등록하지 않는다', () => {
+        render(createElement(Dropdown, configProps({ groups: createGroups(false) })));
+        expect(draggables()).toHaveLength(0);
+        expect(dropTargets()).toHaveLength(0);
+    });
+    it('DD-05 메뉴가 닫히면 등록을 해제한다', () => {
+        render(createElement(Dropdown, configProps()));
+        render(createElement(Dropdown, configProps({ opened: false })));
+        expect(draggables()).toHaveLength(0);
+        expect(dropTargets()).toHaveLength(0);
+    });
+});
+describe('Dropdown config 드래그 미리보기 (DD-06)', () => {
+    const generatePreview = (text) => {
+        const nativeSetDragImage = vi.fn();
+        act(() => {
+            draggableOf(text).onGenerateDragPreview?.({ nativeSetDragImage });
+        });
+        const [args] = previews();
+        if (!args)
+            throw new Error('setCustomNativeDragPreview 가 호출되지 않았습니다');
+        return { args, nativeSetDragImage };
+    };
+    it('DD-06 미리보기는 항목을 복제해 --drag-preview 클래스와 항목 너비를 주고 container 에 붙인다', () => {
+        const view = render(createElement(Dropdown, configProps()));
+        const item = configItem(view, '주문번호');
+        stubRect(item, { width: ITEM_WIDTH });
+        const previewContainer = document.createElement('div');
+        const { args, nativeSetDragImage } = generatePreview('주문번호');
+        const cleanup = args.render({ container: previewContainer });
+        const clone = previewContainer.firstElementChild;
+        expect(args.nativeSetDragImage).toBe(nativeSetDragImage);
+        expect(previewContainer.children).toHaveLength(1);
+        expect(clone).not.toBe(item);
+        expect(clone.classList.contains('ncua-dropdown__item--drag-preview')).toBe(true);
+        expect(clone.classList.contains('ncua-dropdown__item--config')).toBe(true);
+        expect(clone.style.width).toBe(`${ITEM_WIDTH}px`);
+        expect(clone.querySelector('.ncua-dropdown__item-text')?.textContent).toBe('주문번호');
+        expect(item.classList.contains('ncua-dropdown__item--drag-preview')).toBe(false);
+        cleanup?.();
+        expect(previewContainer.children).toHaveLength(0);
+    });
+    it('DD-06 미리보기는 포인터에서 8px 떨어지도록 container 에 투명 테두리를 주고 좌상단을 offset 으로 쓴다', () => {
+        render(createElement(Dropdown, configProps()));
+        const { args } = generatePreview('상품명');
+        const previewContainer = document.createElement('div');
+        const offset = args.getOffset?.({ container: previewContainer });
+        expect(offset).toEqual({ x: 0, y: 0 });
+        expect(previewContainer.style.borderInlineStart).toBe(`${PREVIEW_POINTER_GAP} solid transparent`);
+        expect(previewContainer.style.borderTop).toBe(`${PREVIEW_POINTER_GAP} solid transparent`);
+    });
+});
+describe('Dropdown config auto-scroll (DD-14)', () => {
+    it('DD-14 config 가 열려 있으면 menu-items 영역에 autoScrollForElements 를 건다', () => {
+        const view = render(createElement(Dropdown, configProps()));
+        expect(autoScrollForElements).toHaveBeenCalledTimes(1);
+        expect(autoScrollForElements).toHaveBeenCalledWith({
+            element: view.querySelector('.ncua-dropdown__menu-items'),
+        });
+    });
+    it('DD-14 닫히면 auto-scroll 을 해제한다', () => {
+        render(createElement(Dropdown, configProps()));
+        const cleanup = vi.mocked(autoScrollForElements).mock.results[0].value;
+        render(createElement(Dropdown, configProps({ opened: false })));
+        expect(cleanup).toHaveBeenCalledTimes(1);
+    });
+    it('DD-14 닫힌 config 와 action variant 에는 걸지 않는다', () => {
+        render(createElement(Dropdown, configProps({ opened: false })));
+        render(createElement(Dropdown, {
+            trigger: { type: 'button', text: '더보기' },
+            groups: [{ items: [{ id: 'edit', text: '수정' }] }],
+            opened: true,
+        }));
+        expect(autoScrollForElements).not.toHaveBeenCalled();
+    });
+});

package/dist/temp/src/components/overlays/dropdown/__tests__/Dropdown.test.d.ts

@@ -0,0 +1 @@
+export {};