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

package/dist/cjs/src/components/data-display/data-grid/__tests__/DataGrid.test.js

@@ -0,0 +1,350 @@
+"use strict";
+
+var _react = require("react");
+var _client = require("react-dom/client");
+var _testUtils = require("react-dom/test-utils");
+var _vitest = require("vitest");
+var _table = require("../../table");
+var _useTableScrollbars = require("../../table/useTableScrollbars");
+var _DataGrid = require("../DataGrid");
+// @vitest-environment jsdom
+//
+// DataGrid (React) 위험 경로 — 위험 목록표 DG-xx.
+// Table·하위 컴포넌트는 실제 구현을 쓴다 — DataGrid.Table 로 넘긴 프롭이 Table 결과 DOM 에 반영되는지가 검증 대상.
+// fixedHeader·horizontalScroll 은 Table 의 스크롤바 훅이 ResizeObserver 를 쓰므로 stub 을 설치한다.
+
+globalThis.IS_REACT_ACT_ENVIRONMENT = true;
+const MAX_HEIGHT = 240;
+const MIN_WIDTH = 1600;
+class ResizeObserverStub {
+  observe() {
+    // 스크롤바 수치는 useTableScrollbars 테스트가 검증한다.
+  }
+  unobserve() {
+    // 사용하지 않는다.
+  }
+  disconnect() {
+    // 사용하지 않는다.
+  }
+}
+let root = null;
+let container = null;
+(0, _vitest.beforeEach)(() => {
+  _vitest.vi.stubGlobal('ResizeObserver', ResizeObserverStub);
+});
+(0, _vitest.afterEach)(() => {
+  if (root) {
+    (0, _testUtils.act)(() => {
+      root?.unmount();
+    });
+  }
+  root = null;
+  container = null;
+  document.body.innerHTML = '';
+  _vitest.vi.restoreAllMocks();
+  _vitest.vi.unstubAllGlobals();
+});
+const render = function (props) {
+  for (var _len = arguments.length, children = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
+    children[_key - 1] = arguments[_key];
+  }
+  if (!container) {
+    container = document.createElement('div');
+    document.body.appendChild(container);
+    root = (0, _client.createRoot)(container);
+  }
+  (0, _testUtils.act)(() => {
+    root?.render(/*#__PURE__*/(0, _react.createElement)(_DataGrid.DataGrid, props, ...children));
+  });
+  return container.firstElementChild;
+};
+const tableBody = () => /*#__PURE__*/(0, _react.createElement)(_table.Table.Body, null, /*#__PURE__*/(0, _react.createElement)(_table.Table.Row, null, /*#__PURE__*/(0, _react.createElement)(_table.Table.Cell, null, '주문번호'), /*#__PURE__*/(0, _react.createElement)(_table.Table.Cell, null, '상태')));
+const dataTable = function () {
+  let props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return /*#__PURE__*/(0, _react.createElement)(_DataGrid.DataGrid.Table, props, tableBody());
+};
+const actionBar = (props, label) => /*#__PURE__*/(0, _react.createElement)(_DataGrid.DataGrid.ActionBar, props, label);
+/** 요소의 클래스 중 data-grid 슬롯을 나타내는 첫 클래스 */
+const slotOf = element => Array.from(element.classList).find(name => name.startsWith('ncua-data-grid__')) ?? element.className;
+const childSlots = element => Array.from(element?.children ?? []).map(slotOf);
+const tableWrapperOf = grid => grid.querySelector('.ncua-data-grid__table-wrapper');
+const ncuaTableOf = grid => grid.querySelector('.ncua-table');
+const hasClass = (element, className) => element?.classList.contains(className) ?? false;
+const actionBars = grid => Array.from(grid.querySelectorAll('.ncua-data-grid__action-bar'));
+(0, _vitest.describe)('DataGrid — 자식 분류·배치 (DG-01)', () => {
+  (0, _vitest.it)('DG-01 입력 순서와 무관하게 SearchFilter → Summary → table-wrapper → Pagination 순으로 배치한다', () => {
+    const grid = render({}, /*#__PURE__*/(0, _react.createElement)(_DataGrid.DataGrid.Pagination, null, '페이지'), actionBar({
+      position: 'bottom'
+    }, '하단'), dataTable(), actionBar({}, '상단'), /*#__PURE__*/(0, _react.createElement)(_DataGrid.DataGrid.FilterBar, null, '필터'), /*#__PURE__*/(0, _react.createElement)(_DataGrid.DataGrid.Summary, null, '요약'), /*#__PURE__*/(0, _react.createElement)(_DataGrid.DataGrid.SearchFilter, null, '검색'));
+    (0, _vitest.expect)(childSlots(grid)).toEqual(['ncua-data-grid__search-filter', 'ncua-data-grid__summary', 'ncua-data-grid__table-wrapper', 'ncua-data-grid__pagination']);
+  });
+  (0, _vitest.it)('DG-01 table-wrapper 안은 FilterBar → 상단 ActionBar → Table → 하단 ActionBar 순이다', () => {
+    const grid = render({}, actionBar({
+      position: 'bottom'
+    }, '하단'), dataTable(), actionBar({
+      position: 'top'
+    }, '상단'), /*#__PURE__*/(0, _react.createElement)(_DataGrid.DataGrid.FilterBar, null, '필터'));
+    const wrapperChildren = Array.from(tableWrapperOf(grid)?.children ?? []);
+    (0, _vitest.expect)(wrapperChildren.map(slotOf)).toEqual(['ncua-data-grid__filter-bar', 'ncua-data-grid__action-bar', 'ncua-data-grid__table', 'ncua-data-grid__action-bar']);
+    (0, _vitest.expect)(wrapperChildren[1].textContent).toBe('상단');
+    (0, _vitest.expect)(wrapperChildren[3].textContent).toBe('하단');
+  });
+  (0, _vitest.it)('DG-01 같은 슬롯이 여러 개면 입력 순서를 유지한다', () => {
+    const grid = render({}, /*#__PURE__*/(0, _react.createElement)(_DataGrid.DataGrid.Summary, null, '요약 1'), /*#__PURE__*/(0, _react.createElement)(_DataGrid.DataGrid.SearchFilter, null, '검색'), /*#__PURE__*/(0, _react.createElement)(_DataGrid.DataGrid.Summary, null, '요약 2'));
+    const summaries = Array.from(grid.querySelectorAll('.ncua-data-grid__summary'));
+    (0, _vitest.expect)(summaries.map(summary => summary.textContent)).toEqual(['요약 1', '요약 2']);
+    (0, _vitest.expect)(grid.firstElementChild?.textContent).toBe('검색');
+  });
+  (0, _vitest.it)('DG-01 정적 인자로 넘긴 자식을 재배치해도 React key 경고가 나지 않는다', () => {
+    const consoleError = _vitest.vi.spyOn(console, 'error').mockImplementation(() => undefined);
+    render({}, /*#__PURE__*/(0, _react.createElement)(_DataGrid.DataGrid.Pagination, null, '페이지'), dataTable(), /*#__PURE__*/(0, _react.createElement)(_DataGrid.DataGrid.Summary, null, '요약 1'), /*#__PURE__*/(0, _react.createElement)(_DataGrid.DataGrid.Summary, null, '요약 2'));
+    (0, _vitest.expect)(consoleError).not.toHaveBeenCalled();
+  });
+});
+(0, _vitest.describe)('DataGrid.Table — Table 로 프롭 전달 (DG-02)', () => {
+  (0, _vitest.it)('DG-02 기본은 horizontal·hoverable 이고 Table 에 ncua-table--in-data-grid 를 붙인다', () => {
+    const table = ncuaTableOf(render({}, dataTable()));
+    (0, _vitest.expect)(hasClass(table, 'ncua-table--in-data-grid')).toBe(true);
+    (0, _vitest.expect)(hasClass(table, 'ncua-table--horizontal')).toBe(true);
+    (0, _vitest.expect)(hasClass(table, 'ncua-table--hoverable')).toBe(true);
+    (0, _vitest.expect)(hasClass(table, 'ncua-table--fixed-header')).toBe(false);
+    (0, _vitest.expect)(hasClass(table, 'ncua-table--selectable')).toBe(false);
+    (0, _vitest.expect)(hasClass(table, 'ncua-table--draggable')).toBe(false);
+    (0, _vitest.expect)(table.querySelector('td')?.textContent).toBe('주문번호');
+  });
+  (0, _vitest.it)('DG-02 type vertical 을 전달한다', () => {
+    const table = ncuaTableOf(render({}, dataTable({
+      type: 'vertical'
+    })));
+    (0, _vitest.expect)(hasClass(table, 'ncua-table--vertical')).toBe(true);
+    (0, _vitest.expect)(hasClass(table, 'ncua-table--horizontal')).toBe(false);
+  });
+  (0, _vitest.it)('DG-02 fixedHeader 와 maxHeight 를 전달해 스크롤 영역 최대 높이에 헤더 높이를 더한다', () => {
+    const grid = render({}, dataTable({
+      fixedHeader: true,
+      maxHeight: MAX_HEIGHT
+    }));
+    const scrollContainer = grid.querySelector('.ncua-table__scroll-container');
+    (0, _vitest.expect)(hasClass(ncuaTableOf(grid), 'ncua-table--fixed-header')).toBe(true);
+    (0, _vitest.expect)(scrollContainer?.style.maxHeight).toBe(`${MAX_HEIGHT + _useTableScrollbars.TABLE_HEADER_HEIGHT}px`);
+  });
+  (0, _vitest.it)('DG-02 hoverable false 를 전달한다', () => {
+    const table = ncuaTableOf(render({}, dataTable({
+      hoverable: false
+    })));
+    (0, _vitest.expect)(hasClass(table, 'ncua-table--hoverable')).toBe(false);
+  });
+  (0, _vitest.it)('DG-02 selectable 을 전달한다', () => {
+    const table = ncuaTableOf(render({}, dataTable({
+      selectable: true
+    })));
+    (0, _vitest.expect)(hasClass(table, 'ncua-table--selectable')).toBe(true);
+  });
+  (0, _vitest.it)('DG-02 horizontalScroll 과 minWidth 를 전달해 가로 스크롤 컨테이너와 최소 폭 변수를 만든다', () => {
+    const grid = render({}, dataTable({
+      horizontalScroll: true,
+      minWidth: MIN_WIDTH
+    }));
+    const inner = grid.querySelector('.ncua-table__h-scroll-inner');
+    (0, _vitest.expect)(grid.querySelector('.ncua-table__h-scroll-container')).not.toBeNull();
+    (0, _vitest.expect)(inner?.style.getPropertyValue('--ncua-table-min-width')).toBe(`${MIN_WIDTH}px`);
+  });
+  (0, _vitest.it)('DG-02 draggable 을 전달한다', () => {
+    const table = ncuaTableOf(render({}, dataTable({
+      draggable: true
+    })));
+    (0, _vitest.expect)(hasClass(table, 'ncua-table--draggable')).toBe(true);
+  });
+  (0, _vitest.it)('DG-02 className 은 wrapper div 에 붙고 ref 는 그 wrapper div 를 가리킨다', () => {
+    const ref = /*#__PURE__*/(0, _react.createRef)();
+    const grid = render({}, /*#__PURE__*/(0, _react.createElement)(_DataGrid.DataGrid.Table, {
+      className: 'order-table',
+      ref
+    }, tableBody()));
+    const wrapper = grid.querySelector('.ncua-data-grid__table');
+    (0, _vitest.expect)(hasClass(wrapper, 'order-table')).toBe(true);
+    (0, _vitest.expect)(hasClass(ncuaTableOf(grid), 'order-table')).toBe(false);
+    (0, _vitest.expect)(ref.current).toBe(wrapper);
+  });
+});
+(0, _vitest.describe)('DataGrid — ActionBar 위치·표시 (DG-03)', () => {
+  (0, _vitest.it)('DG-03 position 을 생략한 ActionBar 는 상단 슬롯(Table 앞)에 --top 으로 놓인다', () => {
+    const grid = render({}, dataTable(), actionBar({}, '상단'));
+    const [bar] = actionBars(grid);
+    (0, _vitest.expect)(hasClass(bar, 'ncua-data-grid__action-bar--top')).toBe(true);
+    (0, _vitest.expect)(bar.nextElementSibling).toBe(grid.querySelector('.ncua-data-grid__table'));
+  });
+  (0, _vitest.it)('DG-03 position bottom 인 ActionBar 는 Table 뒤에 --bottom 으로 놓인다', () => {
+    const grid = render({}, actionBar({
+      position: 'bottom'
+    }, '하단'), dataTable());
+    const [bar] = actionBars(grid);
+    (0, _vitest.expect)(hasClass(bar, 'ncua-data-grid__action-bar--bottom')).toBe(true);
+    (0, _vitest.expect)(bar.previousElementSibling).toBe(grid.querySelector('.ncua-data-grid__table'));
+  });
+  (0, _vitest.it)('DG-03 showActionBar false 면 상단·하단 ActionBar 를 모두 숨긴다', () => {
+    const grid = render({
+      showActionBar: false
+    }, actionBar({}, '상단'), dataTable(), actionBar({
+      position: 'bottom'
+    }, '하단'));
+    (0, _vitest.expect)(actionBars(grid)).toHaveLength(0);
+    (0, _vitest.expect)(grid.querySelector('.ncua-data-grid__table')).not.toBeNull();
+  });
+  (0, _vitest.it)('DG-03 showActionBar true 면 생략과 같이 ActionBar 를 표시한다', () => {
+    const grid = render({
+      showActionBar: true
+    }, actionBar({}, '상단'), dataTable(), actionBar({
+      position: 'bottom'
+    }, '하단'));
+    (0, _vitest.expect)(actionBars(grid).map(bar => bar.textContent)).toEqual(['상단', '하단']);
+  });
+});
+(0, _vitest.describe)('DataGrid — 빈 하단 바 (DG-04)', () => {
+  const emptyBottomBar = grid => {
+    const last = tableWrapperOf(grid)?.lastElementChild ?? null;
+    return hasClass(last, 'ncua-data-grid__action-bar--bottom') && last?.childNodes.length === 0 ? last : null;
+  };
+  (0, _vitest.it)('DG-04 하단 ActionBar 없이 selectable Table 이면 빈 --bottom 바를 wrapper 끝에 둔다', () => {
+    const grid = render({}, dataTable({
+      selectable: true
+    }));
+    (0, _vitest.expect)(emptyBottomBar(grid)).not.toBeNull();
+    (0, _vitest.expect)(hasClass(emptyBottomBar(grid), 'ncua-data-grid__action-bar')).toBe(true);
+  });
+  (0, _vitest.it)('DG-04 하단 ActionBar 가 있으면 빈 바를 추가하지 않는다', () => {
+    const grid = render({}, dataTable({
+      selectable: true
+    }), actionBar({
+      position: 'bottom'
+    }, '하단'));
+    (0, _vitest.expect)(grid.querySelectorAll('.ncua-data-grid__action-bar--bottom')).toHaveLength(1);
+    (0, _vitest.expect)(emptyBottomBar(grid)).toBeNull();
+  });
+  (0, _vitest.it)('DG-04 showActionBar false 면 selectable 이어도 빈 바를 두지 않는다', () => {
+    const grid = render({
+      showActionBar: false
+    }, dataTable({
+      selectable: true
+    }));
+    (0, _vitest.expect)(grid.querySelector('.ncua-data-grid__action-bar--bottom')).toBeNull();
+  });
+  _vitest.it.each([['생략', {}], ['false', {
+    selectable: false
+  }]])('DG-04 selectable 이 %s 면 빈 바를 두지 않는다', (_label, tableProps) => {
+    const grid = render({}, dataTable(tableProps));
+    (0, _vitest.expect)(grid.querySelector('.ncua-data-grid__action-bar--bottom')).toBeNull();
+  });
+});
+(0, _vitest.describe)('DataGrid — 루트 (DG-05)', () => {
+  (0, _vitest.it)('DG-05 variant 기본값은 search-result 이고 className 을 함께 붙인다', () => {
+    const grid = render({
+      className: 'order-grid'
+    }, dataTable());
+    (0, _vitest.expect)(hasClass(grid, 'ncua-data-grid')).toBe(true);
+    (0, _vitest.expect)(hasClass(grid, 'ncua-data-grid--search-result')).toBe(true);
+    (0, _vitest.expect)(hasClass(grid, 'order-grid')).toBe(true);
+  });
+  (0, _vitest.it)('DG-05 variant horizontal 이면 --horizontal modifier 를 붙인다', () => {
+    const grid = render({
+      variant: 'horizontal'
+    }, dataTable());
+    (0, _vitest.expect)(hasClass(grid, 'ncua-data-grid--horizontal')).toBe(true);
+    (0, _vitest.expect)(hasClass(grid, 'ncua-data-grid--search-result')).toBe(false);
+  });
+  (0, _vitest.it)('DG-05 나머지 속성(aria·data)을 루트에 전달하고 ref 는 루트 div 를 가리킨다', () => {
+    const ref = /*#__PURE__*/(0, _react.createRef)();
+    const grid = render({
+      'aria-label': '주문 목록',
+      'data-testid': 'grid',
+      ref
+    }, dataTable());
+    (0, _vitest.expect)(grid.getAttribute('aria-label')).toBe('주문 목록');
+    (0, _vitest.expect)(grid.dataset.testid).toBe('grid');
+    (0, _vitest.expect)(ref.current).toBe(grid);
+  });
+});
+(0, _vitest.describe)('DataGrid — table-wrapper 유무 (DG-06)', () => {
+  (0, _vitest.it)('DG-06 SearchFilter·Summary·Pagination 만 있으면 table-wrapper 를 만들지 않는다', () => {
+    const grid = render({}, /*#__PURE__*/(0, _react.createElement)(_DataGrid.DataGrid.SearchFilter, null, '검색'), /*#__PURE__*/(0, _react.createElement)(_DataGrid.DataGrid.Summary, null, '요약'), /*#__PURE__*/(0, _react.createElement)(_DataGrid.DataGrid.Pagination, null, '페이지'));
+    (0, _vitest.expect)(tableWrapperOf(grid)).toBeNull();
+  });
+  (0, _vitest.it)('DG-06 showActionBar false 에 ActionBar 만 있으면 table-wrapper 를 만들지 않는다', () => {
+    const grid = render({
+      showActionBar: false
+    }, actionBar({}, '상단'), actionBar({
+      position: 'bottom'
+    }, '하단'));
+    (0, _vitest.expect)(tableWrapperOf(grid)).toBeNull();
+  });
+  (0, _vitest.it)('DG-06 하단 ActionBar 만 있어도 표시 중이면 table-wrapper 를 만든다', () => {
+    const grid = render({}, actionBar({
+      position: 'bottom'
+    }, '하단'));
+    (0, _vitest.expect)(childSlots(tableWrapperOf(grid))).toEqual(['ncua-data-grid__action-bar']);
+  });
+  (0, _vitest.it)('DG-06 FilterBar 만 있어도 table-wrapper 를 만든다', () => {
+    const grid = render({}, /*#__PURE__*/(0, _react.createElement)(_DataGrid.DataGrid.FilterBar, null, '필터'));
+    (0, _vitest.expect)(childSlots(tableWrapperOf(grid))).toEqual(['ncua-data-grid__filter-bar']);
+  });
+});
+(0, _vitest.describe)('DataGrid — 하위 컴포넌트 (DG-07)', () => {
+  _vitest.it.each([['SearchFilter', _DataGrid.DataGrid.SearchFilter, 'ncua-data-grid__search-filter'], ['Summary', _DataGrid.DataGrid.Summary, 'ncua-data-grid__summary'], ['FilterBar', _DataGrid.DataGrid.FilterBar, 'ncua-data-grid__filter-bar'], ['Pagination', _DataGrid.DataGrid.Pagination, 'ncua-data-grid__pagination']])('DG-07 %s 는 기본 클래스·className·나머지 속성을 렌더한다', (_name, Component, baseClass) => {
+    const slotProps = {
+      className: 'custom',
+      'data-slot': 'x',
+      children: '내용'
+    };
+    const grid = render({}, /*#__PURE__*/(0, _react.createElement)(Component, slotProps));
+    const element = grid.querySelector(`.${baseClass}`);
+    (0, _vitest.expect)(hasClass(element, 'custom')).toBe(true);
+    (0, _vitest.expect)(element?.dataset.slot).toBe('x');
+    (0, _vitest.expect)(element?.textContent).toBe('내용');
+  });
+  (0, _vitest.it)('DG-07 ActionBar 는 className·나머지 속성을 렌더한다', () => {
+    const slotProps = {
+      className: 'custom',
+      'data-slot': 'x',
+      children: '상단'
+    };
+    const [bar] = actionBars(render({}, /*#__PURE__*/(0, _react.createElement)(_DataGrid.DataGrid.ActionBar, slotProps)));
+    (0, _vitest.expect)(hasClass(bar, 'custom')).toBe(true);
+    (0, _vitest.expect)(bar.dataset.slot).toBe('x');
+  });
+  (0, _vitest.it)('DG-07 ActionBar align 기본값은 space-between 이다', () => {
+    const [bar] = actionBars(render({}, actionBar({}, '상단')));
+    (0, _vitest.expect)(hasClass(bar, 'ncua-data-grid__action-bar--space-between')).toBe(true);
+    (0, _vitest.expect)(hasClass(bar, 'ncua-data-grid__action-bar--left')).toBe(false);
+  });
+  _vitest.it.each([['left', 'ncua-data-grid__action-bar--left'], ['right', 'ncua-data-grid__action-bar--right']])('DG-07 ActionBar align %s 면 해당 modifier 만 붙인다', (align, modifier) => {
+    const [bar] = actionBars(render({}, actionBar({
+      align
+    }, '상단')));
+    (0, _vitest.expect)(hasClass(bar, modifier)).toBe(true);
+    (0, _vitest.expect)(hasClass(bar, 'ncua-data-grid__action-bar--space-between')).toBe(false);
+  });
+});
+(0, _vitest.describe)('DataGrid — 슬롯이 아닌 자식 (DG-08)', () => {
+  const SummaryWrapper = () => /*#__PURE__*/(0, _react.createElement)(_DataGrid.DataGrid.Summary, null, '래퍼 요약');
+  (0, _vitest.it)('DG-08 Fragment·사용자 래퍼·슬롯 아닌 요소·텍스트는 경고 없이 버려진다', () => {
+    // 현재 동작 고정 — 결함 후보: #593 (Children.forEach 가 Fragment 를 펼치지 않고 맵에 없는 타입은 무시)
+    const consoleError = _vitest.vi.spyOn(console, 'error').mockImplementation(() => undefined);
+    const consoleWarn = _vitest.vi.spyOn(console, 'warn').mockImplementation(() => undefined);
+    const grid = render({}, /*#__PURE__*/(0, _react.createElement)(_react.Fragment, null, /*#__PURE__*/(0, _react.createElement)(_DataGrid.DataGrid.Summary, null, 'Fragment 요약')), /*#__PURE__*/(0, _react.createElement)(SummaryWrapper), /*#__PURE__*/(0, _react.createElement)('div', {
+      className: 'custom-slot'
+    }, '임의 div'), '텍스트', dataTable());
+    (0, _vitest.expect)(grid.querySelector('.ncua-data-grid__summary')).toBeNull();
+    (0, _vitest.expect)(grid.querySelector('.custom-slot')).toBeNull();
+    (0, _vitest.expect)(grid.textContent).not.toContain('텍스트');
+    (0, _vitest.expect)(childSlots(grid)).toEqual(['ncua-data-grid__table-wrapper']);
+    (0, _vitest.expect)(consoleError).not.toHaveBeenCalled();
+    (0, _vitest.expect)(consoleWarn).not.toHaveBeenCalled();
+  });
+  _vitest.it.todo('DG-08 Fragment 로 감싼 슬롯은 펼쳐 배치하고, 비슬롯 자식은 dev 경고하거나 Table 처럼 유지한다 (정책은 #593 에서 결정)');
+});
+(0, _vitest.describe)('DataGrid — 조건부 렌더 자식 (DG-09)', () => {
+  (0, _vitest.it)('DG-09 null·false·undefined 자식은 무시하고 예외 없이 나머지를 배치한다', () => {
+    const grid = render({}, null, false, undefined, /*#__PURE__*/(0, _react.createElement)(_DataGrid.DataGrid.Summary, null, '요약'), dataTable());
+    (0, _vitest.expect)(childSlots(grid)).toEqual(['ncua-data-grid__summary', 'ncua-data-grid__table-wrapper']);
+  });
+});