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

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

@@ -0,0 +1,556 @@
+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 = function (text) {
+  let scope = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 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 = function (text) {
+  let scope = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 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 = function () {
+  let sortable = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
+  return [{
+    sortable,
+    items: [{
+      id: 'a',
+      text: '주문번호',
+      visible: true
+    }, {
+      id: 'b',
+      text: '상품명',
+      visible: true
+    }, {
+      id: 'c',
+      text: '수량',
+      visible: true
+    }]
+  }];
+};
+const configProps = function () {
+  let overrides = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return {
+    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(/*#__PURE__*/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(/*#__PURE__*/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(/*#__PURE__*/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(/*#__PURE__*/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(/*#__PURE__*/createElement(Dropdown, configProps()));
+    dropOnMonitors(sourceDataOf('주문번호'), []);
+    expect(configTexts(view)).toEqual(ORIGINAL_ORDER);
+    expect(applyButtonOf(view).disabled).toBe(true);
+  });
+  it('DD-04 자기 자신 위에 놓으면 순서를 바꾸지 않는다', () => {
+    const view = render(/*#__PURE__*/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(/*#__PURE__*/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(/*#__PURE__*/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(/*#__PURE__*/createElement('div', null, /*#__PURE__*/createElement('section', {
+      key: 'first',
+      className: 'first'
+    }, /*#__PURE__*/createElement(Dropdown, configProps())), /*#__PURE__*/createElement('section', {
+      key: 'second',
+      className: 'second'
+    }, /*#__PURE__*/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(/*#__PURE__*/createElement(Dropdown, configProps({
+      opened: false
+    })));
+    expect(monitors()).toHaveLength(0);
+    render(/*#__PURE__*/createElement(Dropdown, configProps({
+      opened: true
+    })));
+    expect(monitors()).toHaveLength(1);
+    render(/*#__PURE__*/createElement(Dropdown, configProps({
+      opened: false
+    })));
+    expect(monitors()).toHaveLength(0);
+  });
+  it('DD-04 action variant 는 monitor 를 등록하지 않는다', () => {
+    render(/*#__PURE__*/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(/*#__PURE__*/createElement(Dropdown, configProps()));
+    const [monitor] = monitors();
+    const source = sourceDataOf('주문번호');
+    const target = targetDataOf('수량', LOWER_HALF_Y, source);
+    render(/*#__PURE__*/createElement(Dropdown, configProps({
+      opened: false
+    })));
+    expect(() => act(() => {
+      monitor.onDrop?.(dropPayloadOf(source, [target]));
+    })).not.toThrow();
+    render(/*#__PURE__*/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(/*#__PURE__*/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(/*#__PURE__*/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(/*#__PURE__*/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(/*#__PURE__*/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(/*#__PURE__*/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(/*#__PURE__*/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(/*#__PURE__*/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(/*#__PURE__*/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(/*#__PURE__*/createElement(Dropdown, configProps({
+      groups: createGroups(false)
+    })));
+    expect(draggables()).toHaveLength(0);
+    expect(dropTargets()).toHaveLength(0);
+  });
+  it('DD-05 메뉴가 닫히면 등록을 해제한다', () => {
+    render(/*#__PURE__*/createElement(Dropdown, configProps()));
+    render(/*#__PURE__*/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(/*#__PURE__*/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(/*#__PURE__*/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(/*#__PURE__*/createElement(Dropdown, configProps()));
+    expect(autoScrollForElements).toHaveBeenCalledTimes(1);
+    expect(autoScrollForElements).toHaveBeenCalledWith({
+      element: view.querySelector('.ncua-dropdown__menu-items')
+    });
+  });
+  it('DD-14 닫히면 auto-scroll 을 해제한다', () => {
+    render(/*#__PURE__*/createElement(Dropdown, configProps()));
+    const cleanup = vi.mocked(autoScrollForElements).mock.results[0].value;
+    render(/*#__PURE__*/createElement(Dropdown, configProps({
+      opened: false
+    })));
+    expect(cleanup).toHaveBeenCalledTimes(1);
+  });
+  it('DD-14 닫힌 config 와 action variant 에는 걸지 않는다', () => {
+    render(/*#__PURE__*/createElement(Dropdown, configProps({
+      opened: false
+    })));
+    render(/*#__PURE__*/createElement(Dropdown, {
+      trigger: {
+        type: 'button',
+        text: '더보기'
+      },
+      groups: [{
+        items: [{
+          id: 'edit',
+          text: '수정'
+        }]
+      }],
+      opened: true
+    }));
+    expect(autoScrollForElements).not.toHaveBeenCalled();
+  });
+});