@ncds/ui-admin 1.8.27 → 1.8.28-alpha.1

package/dist/esm/src/components/navigation/horizontal-tab/__tests__/HorizontalTab.test.js

@@ -0,0 +1,209 @@
+// @vitest-environment jsdom
+//
+// HorizontalTab (src/components/navigation/horizontal-tab/HorizontalTab.tsx) 위험 경로 — 위험 목록표 HT-xx.
+// swiper/react 는 mock — Swiper 는 받은 props 를 기록하고 children 을 div 로, SwiperSlide 는
+// className 을 가진 div 로 렌더한다 (슬라이드 계산은 swiper 소관). TabButton 은 실구현.
+import { createElement } from 'react';
+import { createRoot } from 'react-dom/client';
+import { act } from 'react-dom/test-utils';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+const mocks = vi.hoisted(() => ({
+  swiperProps: vi.fn()
+}));
+vi.mock('swiper/react', async () => {
+  const {
+    createElement: h
+  } = await import('react');
+  return {
+    Swiper: _ref => {
+      let {
+        children,
+        ...props
+      } = _ref;
+      mocks.swiperProps(props);
+      return h('div', {
+        className: 'swiper-mock'
+      }, children);
+    },
+    SwiperSlide: _ref2 => {
+      let {
+        children,
+        className
+      } = _ref2;
+      return h('div', {
+        className
+      }, children);
+    }
+  };
+});
+import { HorizontalTab } from '../HorizontalTab';
+globalThis.IS_REACT_ACT_ENVIRONMENT = true;
+const UNDERLINE_GAP = 16;
+const DEFAULT_GAP = 8;
+let root = null;
+let container = null;
+beforeEach(() => {
+  mocks.swiperProps.mockReset();
+});
+afterEach(() => {
+  if (root) {
+    act(() => {
+      root?.unmount();
+    });
+  }
+  root = null;
+  container?.remove();
+  container = null;
+  vi.restoreAllMocks();
+});
+const render = props => {
+  if (!container) {
+    container = document.createElement('div');
+    document.body.appendChild(container);
+    root = createRoot(container);
+  }
+  act(() => {
+    root?.render(/*#__PURE__*/createElement(HorizontalTab, props));
+  });
+  return container;
+};
+const click = element => {
+  act(() => {
+    element.click();
+  });
+};
+const tabs = view => Array.from(view.querySelectorAll('.ncua-tab-button'));
+const activeLabels = view => tabs(view).filter(tab => tab.classList.contains('is-active')).map(tab => tab.textContent);
+const buttonMenus = onClick => [{
+  id: 'order',
+  label: '주문',
+  onClick
+}, {
+  id: 'claim',
+  label: '클레임',
+  onClick
+}, {
+  id: 'settle',
+  label: '정산',
+  onClick
+}];
+describe('HorizontalTab — 탭 목록과 활성 탭 (HT-01)', () => {
+  it('HT-01 menus 를 슬라이드마다 TabButton 으로 렌더하고 activeTab 과 id 가 같은 탭만 is-active', () => {
+    const view = render({
+      menus: buttonMenus(),
+      activeTab: 'claim'
+    });
+    expect(view.querySelectorAll('.ncua-horizontal-tab__item')).toHaveLength(buttonMenus().length);
+    expect(tabs(view).map(tab => tab.textContent)).toEqual(['주문', '클레임', '정산']);
+    expect(activeLabels(view)).toEqual(['클레임']);
+  });
+  it('HT-01 링크 메뉴는 id 가 아니라 href 를 activeTab 과 비교한다', () => {
+    const menus = [{
+      id: 'order',
+      label: '주문',
+      href: '/orders'
+    }, {
+      id: '/claims',
+      label: '클레임',
+      href: '/claims-list'
+    }];
+    const view = render({
+      menus,
+      activeTab: '/orders'
+    });
+    expect(activeLabels(view)).toEqual(['주문']);
+  });
+  it('HT-01 activeTab 이 어떤 탭과도 맞지 않으면 활성 탭이 없다', () => {
+    const view = render({
+      menus: buttonMenus(),
+      activeTab: 'none'
+    });
+    expect(activeLabels(view)).toEqual([]);
+  });
+});
+describe('HorizontalTab — 탭 click (HT-02)', () => {
+  it('HT-02 탭을 click 하면 그 메뉴의 onClick 을 그 메뉴 id 로 호출한다', () => {
+    const onClick = vi.fn();
+    const view = render({
+      menus: buttonMenus(onClick),
+      activeTab: 'order'
+    });
+    click(tabs(view)[2]);
+    expect(onClick).toHaveBeenCalledWith('settle');
+  });
+});
+describe('HorizontalTab — 빈 메뉴 (HT-03)', () => {
+  it.each([['빈 배열', {
+    menus: []
+  }], ['미지정', {}]])('HT-03 menus 가 %s 이면 아무것도 렌더하지 않는다', (_label, props) => {
+    const view = render(props);
+    expect(view.innerHTML).toBe('');
+    expect(mocks.swiperProps).not.toHaveBeenCalled();
+  });
+});
+describe('HorizontalTab — 슬라이드 간격 (HT-04)', () => {
+  it.each([['underline', UNDERLINE_GAP], ['button-primary', DEFAULT_GAP], ['button-white', DEFAULT_GAP], ['underline-fill', DEFAULT_GAP]])('HT-04 type %s 면 Swiper 를 slidesPerView auto · spaceBetween %i 로 만든다', (type, gap) => {
+    render({
+      type,
+      menus: buttonMenus()
+    });
+    expect(mocks.swiperProps.mock.lastCall?.[0]).toEqual({
+      slidesPerView: 'auto',
+      spaceBetween: gap
+    });
+  });
+});
+describe('HorizontalTab — 재렌더 시 탭 재마운트 (HT-05)', () => {
+  it('HT-05 activeTab 이 바뀌어 다시 렌더하면 모든 탭 버튼이 새 노드로 바뀌어 포커스를 잃는다', () => {
+    // 현재 동작 고정 — 결함 후보: #597 (슬라이드 key 가 렌더마다 새 uniqueId 라 재렌더마다 재마운트, 키보드 포커스 유실)
+    const view = render({
+      menus: buttonMenus(),
+      activeTab: 'order'
+    });
+    const before = tabs(view)[1];
+    before.focus();
+    expect(document.activeElement).toBe(before);
+    render({
+      menus: buttonMenus(),
+      activeTab: 'claim'
+    });
+    expect(before.isConnected).toBe(false);
+    expect(tabs(view)[1]).not.toBe(before);
+    expect(document.activeElement).toBe(document.body);
+  });
+  it.todo('HT-05 activeTab 이 바뀌어도 탭 버튼 노드와 포커스가 유지된다 (기대, #597)');
+});
+describe('HorizontalTab — 클래스와 TabButton 전달 (HT-06)', () => {
+  it('HT-06 기본은 button-primary · sm 클래스이고 full-width 는 없다', () => {
+    const view = render({
+      menus: buttonMenus()
+    });
+    const rootElement = view.querySelector('.ncua-horizontal-tab');
+    expect(rootElement?.classList.contains('ncua-horizontal-tab--button-primary')).toBe(true);
+    expect(rootElement?.classList.contains('ncua-horizontal-tab--sm')).toBe(true);
+    expect(rootElement?.classList.contains('full-width')).toBe(false);
+  });
+  it('HT-06 type·size·fullWidth·className 을 루트 클래스로 반영한다', () => {
+    const view = render({
+      menus: buttonMenus(),
+      type: 'underline',
+      size: 'lg',
+      fullWidth: true,
+      className: 'my-tabs'
+    });
+    const rootElement = view.querySelector('.ncua-horizontal-tab');
+    expect(rootElement?.classList.contains('ncua-horizontal-tab--underline')).toBe(true);
+    expect(rootElement?.classList.contains('ncua-horizontal-tab--lg')).toBe(true);
+    expect(rootElement?.classList.contains('full-width')).toBe(true);
+    expect(rootElement?.classList.contains('my-tabs')).toBe(true);
+  });
+  it('HT-06 TabButton 에 넘기는 size·tabButtonType 은 DOM 속성으로 새지 않는다', () => {
+    const view = render({
+      menus: buttonMenus(),
+      type: 'underline',
+      size: 'lg'
+    });
+    expect(tabs(view)[0].hasAttribute('size')).toBe(false);
+    expect(tabs(view)[0].hasAttribute('tabbuttontype')).toBe(false);
+  });
+});

package/dist/esm/src/components/navigation/pagination/__tests__/Pagination.navigation.test.js

@@ -0,0 +1,282 @@
+// @vitest-environment jsdom
+import { ArrowLeft, ArrowRight, ChevronLeft, ChevronRight } from '@ncds/ui-admin-icon';
+import { createElement } from 'react';
+import { createRoot } from 'react-dom/client';
+import { renderToStaticMarkup } from 'react-dom/server';
+import { act } from 'react-dom/test-utils';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { COLOR } from '../../../../../constant/color';
+import { Pagination } from '../Pagination';
+// React 18에서 act() 사용 시 필요한 플래그 (미설정 시 console.error 경고 발생)
+globalThis.IS_REACT_ACT_ENVIRONMENT = true;
+const ITEM_COUNT_PER_PAGE = 10;
+const TOTAL_COUNT = 250;
+const TOTAL_PAGE = TOTAL_COUNT / ITEM_COUNT_PER_PAGE;
+/** 그룹 크기 — 기본값 10 과 다르게 골라 그룹 계산이 기본값에 기대지 않게 한다 */
+const PAGE_GROUP_SIZE = 5;
+const FIRST_PAGE = 1;
+/** 첫 그룹(1~5) 안의 페이지 */
+const PAGE_IN_FIRST_GROUP = 3;
+const SECOND_GROUP_START = FIRST_PAGE + PAGE_GROUP_SIZE;
+const THIRD_GROUP_START = SECOND_GROUP_START + PAGE_GROUP_SIZE;
+/** 앞뒤 그룹이 있어 이전 · 다음이 모두 활성인 페이지 */
+const PAGE_IN_THIRD_GROUP = THIRD_GROUP_START + 1;
+const LAST_PAGE_OF_SECOND_GROUP = THIRD_GROUP_START - 1;
+const groupPages = start => Array.from({
+  length: PAGE_GROUP_SIZE
+}, (_, i) => start + i);
+const SECOND_GROUP_PAGES = groupPages(SECOND_GROUP_START);
+const THIRD_GROUP_PAGES = groupPages(THIRD_GROUP_START);
+let root = null;
+let container = null;
+const render = function () {
+  let props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  if (!container) {
+    container = document.createElement('div');
+    document.body.appendChild(container);
+    root = createRoot(container);
+  }
+  act(() => {
+    root?.render(/*#__PURE__*/createElement(Pagination, {
+      totalCount: TOTAL_COUNT,
+      itemCountPerPage: ITEM_COUNT_PER_PAGE,
+      pageCount: PAGE_GROUP_SIZE,
+      currentPage: PAGE_IN_FIRST_GROUP,
+      ...props
+    }));
+  });
+  return container;
+};
+/** React 이벤트 핸들러 예외는 click() 밖으로 던져지지 않고 window error 로만 보고된다 */
+let windowErrors = [];
+const collectWindowError = event => {
+  windowErrors.push(event.error);
+  event.preventDefault();
+};
+beforeEach(() => {
+  windowErrors = [];
+  window.addEventListener('error', collectWindowError);
+});
+afterEach(() => {
+  window.removeEventListener('error', collectWindowError);
+  if (root && container) {
+    act(() => root?.unmount());
+    container.remove();
+  }
+  root = null;
+  container = null;
+});
+const mustQuery = (rootEl, selector) => {
+  const found = rootEl.querySelector(selector);
+  if (!found) throw new Error(`요소를 찾을 수 없습니다: ${selector}`);
+  return found;
+};
+const pageButton = (el, page) => {
+  const found = Array.from(el.querySelectorAll('.ncua-pagination__page-num')).find(button => button.textContent === String(page));
+  if (!found) throw new Error(`페이지 버튼을 찾을 수 없습니다: ${page}`);
+  return found;
+};
+const pageNums = el => Array.from(el.querySelectorAll('.ncua-pagination__page-num')).map(button => Number(button.textContent));
+const click = element => act(() => element.click());
+describe('Pagination — 페이지 번호 클릭 (PGN-01)', () => {
+  it('PGN-01 페이지 번호를 클릭하면 onPageChange 로 그 번호를 알린다', () => {
+    // Given: 첫 그룹을 보는 페이지네이션
+    const onPageChange = vi.fn();
+    const el = render({
+      onPageChange
+    });
+    // When: 4 페이지 버튼을 클릭한다
+    const target = PAGE_IN_FIRST_GROUP + 1;
+    click(pageButton(el, target));
+    // Then: 그 번호로 알린다
+    expect(onPageChange).toHaveBeenCalledWith(target);
+  });
+  it('PGN-01 onPageChange 가 없으면 페이지 번호를 클릭해도 예외가 나지 않는다', () => {
+    // Given: onPageChange 없이 렌더
+    const el = render();
+    // When: 페이지 버튼을 클릭한다
+    click(pageButton(el, PAGE_IN_FIRST_GROUP + 1));
+    // Then: window error 가 없다
+    expect(windowErrors).toEqual([]);
+  });
+  it('PGN-01 (대조) onPageChange 가 던지면 window error 로 수집된다 — 위 단언이 공허하지 않음', () => {
+    // Given: 던지는 onPageChange
+    const el = render({
+      onPageChange: () => {
+        throw new Error('의도한 예외');
+      }
+    });
+    // When: 페이지 버튼을 클릭한다
+    click(pageButton(el, PAGE_IN_FIRST_GROUP + 1));
+    // Then: 수집 배열에 예외가 남는다
+    expect(windowErrors.length).toBeGreaterThan(0);
+  });
+});
+describe('Pagination — pc 그룹 이동 (PGN-02)', () => {
+  it.each([['처음', '.ncua-pagination__first', FIRST_PAGE], ['이전 그룹', '.ncua-pagination__before', SECOND_GROUP_START], ['다음 그룹', '.ncua-pagination__next', THIRD_GROUP_START + PAGE_GROUP_SIZE], ['마지막', '.ncua-pagination__last', TOTAL_PAGE]])('PGN-02 세 번째 그룹에서 %s 버튼(%s)은 onPageChange 로 %s 번호를 알린다', (_name, selector, expected) => {
+    // Given: 세 번째 그룹 첫 페이지로 렌더한 페이지네이션
+    const onPageChange = vi.fn();
+    const el = render({
+      onPageChange,
+      currentPage: THIRD_GROUP_START
+    });
+    // When: 내비 버튼을 클릭한다
+    click(mustQuery(el, selector));
+    // Then: 그 번호로 알린다
+    expect(onPageChange).toHaveBeenCalledWith(expected);
+  });
+  it('PGN-02 currentPage 가 start + 그룹 크기가 되면 다음 그룹 번호로 목록을 바꾼다', () => {
+    // Given: 첫 그룹을 보던 페이지네이션
+    render();
+    // When: 다음 그룹 첫 페이지로 이동한다
+    const el = render({
+      currentPage: SECOND_GROUP_START
+    });
+    // Then: 두 번째 그룹 번호가 보인다
+    expect(pageNums(el)).toEqual(SECOND_GROUP_PAGES);
+  });
+  it('PGN-02 이전 그룹의 페이지로 가면 한 그룹 앞으로 목록을 바꾼다', () => {
+    // Given: 세 번째 그룹을 보던 페이지네이션
+    const before = pageNums(render({
+      currentPage: THIRD_GROUP_START
+    }));
+    // When: 두 번째 그룹의 마지막 페이지로 이동한다
+    const el = render({
+      currentPage: LAST_PAGE_OF_SECOND_GROUP
+    });
+    // Then: 세 번째 그룹에서 두 번째 그룹으로 바뀐다
+    expect(before).toEqual(THIRD_GROUP_PAGES);
+    expect(pageNums(el)).toEqual(SECOND_GROUP_PAGES);
+  });
+});
+/** 폼 안에 렌더하고 submit 발생을 기록한다 (preventDefault 로 jsdom 의 폼 전송을 막는다) */
+const renderInForm = function () {
+  let props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  if (container) throw new Error('renderInForm 은 render 와 같은 테스트에서 쓰지 않는다 — 앞선 root 가 정리되지 않는다');
+  const submits = [];
+  container = document.createElement('div');
+  document.body.appendChild(container);
+  const formRoot = createRoot(container);
+  root = formRoot;
+  act(() => {
+    formRoot.render(/*#__PURE__*/createElement('form', {
+      onSubmit: event => {
+        event.preventDefault();
+        submits.push(event.nativeEvent);
+      }
+    }, /*#__PURE__*/createElement(Pagination, {
+      totalCount: TOTAL_COUNT,
+      itemCountPerPage: ITEM_COUNT_PER_PAGE,
+      pageCount: PAGE_GROUP_SIZE,
+      currentPage: PAGE_IN_FIRST_GROUP,
+      onPageChange: vi.fn(),
+      ...props
+    })));
+  });
+  return {
+    el: container,
+    submits
+  };
+};
+describe('Pagination — 폼 안 버튼 (PGN-04)', () => {
+  it('PGN-04 폼 안에서 페이지 번호를 클릭하면 type 이 없어 폼을 제출한다', () => {
+    // 현재 동작 고정 — 결함 후보: #627 PGN-04 (페이지 번호 button 에 type 이 없어 의도 없는 폼 제출)
+    // Given: 폼 안의 페이지네이션
+    const {
+      el,
+      submits
+    } = renderInForm();
+    const target = pageButton(el, PAGE_IN_FIRST_GROUP + 1);
+    // When: 페이지 번호를 클릭한다
+    click(target);
+    // Then: type 속성이 없고 폼이 제출된다
+    expect(target.getAttribute('type')).toBeNull();
+    expect(submits).toHaveLength(1);
+  });
+  it.each([['이전', '.ncua-pagination__before'], ['다음', '.ncua-pagination__next']])('PGN-04 폼 안에서 %s 버튼(공용 Button)을 클릭하면 폼을 제출한다', (_name, selector) => {
+    // 현재 동작 고정 — 결함 후보: #627 PGN-04 (#620 VNT-12 같은 뿌리 — NavButton 은 type 기본값 없는 공용 Button)
+    // Given: 세 번째 그룹(11~15)을 보는 폼 안 페이지네이션 (이전 · 다음 모두 활성)
+    const {
+      el,
+      submits
+    } = renderInForm({
+      currentPage: PAGE_IN_THIRD_GROUP
+    });
+    const nav = mustQuery(el, selector);
+    // When: 내비 버튼을 클릭한다
+    click(nav);
+    // Then: 비활성이 아닌 버튼이고 폼이 제출된다
+    expect(nav.disabled).toBe(false);
+    expect(submits).toHaveLength(1);
+  });
+  it('PGN-04 (대조) restProps 로 type="button" 을 넘기면 페이지 번호 클릭이 폼을 제출하지 않는다', () => {
+    // Given: type="button" 을 넘긴 폼 안 페이지네이션 (restProps 는 페이지 번호 button 에만 전달된다)
+    const {
+      el,
+      submits
+    } = renderInForm({
+      type: 'button'
+    });
+    // When: 페이지 번호를 클릭한다
+    click(pageButton(el, PAGE_IN_FIRST_GROUP + 1));
+    // Then: submit 이 없다 — 위 케이스의 submit 기록이 배선 착시가 아님을 보인다
+    expect(submits).toEqual([]);
+  });
+  it.todo('PGN-04 기대 동작 (#627): 페이지 번호 · 처음 · 이전 · 다음 · 마지막 버튼은 type="button" 이라 폼을 제출하지 않는다');
+});
+/** NavButton 아이콘 크기 — pc 16 · mo 20 */
+const NAV_ICON_SIZE_PC = 16;
+const NAV_ICON_SIZE_MO = 20;
+const navIcon = (el, selector) => mustQuery(el, `${selector} svg`);
+/** 아이콘 컴포넌트의 svg 내부 도형 마크업 — 버튼 안 아이콘이 어느 아이콘인지 구분한다 */
+const iconPaths = (icon, size) => {
+  const host = document.createElement('div');
+  host.innerHTML = renderToStaticMarkup(/*#__PURE__*/createElement(icon, {
+    width: size,
+    height: size
+  }));
+  return mustQuery(host, 'svg').innerHTML;
+};
+describe('Pagination — mo 이전 · 다음 (PGN-03)', () => {
+  it.each([['이전', '.ncua-pagination__before', PAGE_IN_FIRST_GROUP - 1], ['다음', '.ncua-pagination__next', PAGE_IN_FIRST_GROUP + 1]])('PGN-03 mo 에서 %s 버튼은 currentPage 기준 한 칸 이동한 번호를 알린다', (_name, selector, expected) => {
+    // Given: mo 페이지네이션 (그룹 크기와 무관하게 한 칸씩 이동)
+    const onPageChange = vi.fn();
+    const el = render({
+      onPageChange,
+      breakPoint: 'mo'
+    });
+    // When: 내비 버튼을 클릭한다
+    click(mustQuery(el, selector));
+    // Then: 한 칸 이동한 번호를 알린다
+    expect(onPageChange).toHaveBeenCalledWith(expected);
+  });
+  // 비활성 · 이동 버튼 노출(pc 대조 포함)은 Pagination.test.ts 'mo 모드 이전/다음 버튼 노출' 이 고정한다
+});
+describe('NavButton — 아이콘 색 · 크기 (PGN-05)', () => {
+  it('PGN-05 비활성 버튼 아이콘은 gray200, 활성 버튼 아이콘은 gray700 이다', () => {
+    // Given/When: 첫 그룹 — 처음 · 이전은 비활성, 다음 · 마지막은 활성
+    const el = render();
+    // Then: 색이 상태를 따른다
+    expect([navIcon(el, '.ncua-pagination__first').getAttribute('color'), navIcon(el, '.ncua-pagination__next').getAttribute('color')]).toEqual([COLOR.gray200, COLOR.gray700]);
+  });
+  it.each([['pc', NAV_ICON_SIZE_PC, 'ncua-btn--xs'], ['mo', NAV_ICON_SIZE_MO, 'ncua-btn--sm']])('PGN-05 %s 는 아이콘 %s px · 버튼 크기 클래스 %s', (breakPoint, iconSize, sizeClass) => {
+    const el = render({
+      breakPoint
+    });
+    const next = mustQuery(el, '.ncua-pagination__next');
+    expect(navIcon(el, '.ncua-pagination__next').getAttribute('width')).toBe(String(iconSize));
+    expect(Array.from(next.classList)).toContain(sizeClass);
+  });
+  it.each([['pc', '이전', '.ncua-pagination__before', 'ChevronLeft', ChevronLeft, NAV_ICON_SIZE_PC], ['pc', '다음', '.ncua-pagination__next', 'ChevronRight', ChevronRight, NAV_ICON_SIZE_PC], ['mo', '이전', '.ncua-pagination__before', 'ArrowLeft', ArrowLeft, NAV_ICON_SIZE_MO], ['mo', '다음', '.ncua-pagination__next', 'ArrowRight', ArrowRight, NAV_ICON_SIZE_MO]])('PGN-05 %s 의 %s 버튼(%s)은 %s 아이콘을 그린다', (breakPoint, _name, selector, _iconName, icon, size) => {
+    // Given/When: 이전 · 다음이 모두 활성인 세 번째 그룹
+    const el = render({
+      breakPoint,
+      currentPage: PAGE_IN_THIRD_GROUP
+    });
+    // Then: 버튼 안 svg 의 내부 도형이 기대 아이콘과 같다
+    expect(navIcon(el, selector).innerHTML).toBe(iconPaths(icon, size));
+  });
+  it('PGN-05 (대조) Chevron 과 Arrow 아이콘 도형은 서로 달라 위 단언이 공허하지 않다', () => {
+    expect(iconPaths(ChevronRight, NAV_ICON_SIZE_PC)).not.toBe(iconPaths(ArrowRight, NAV_ICON_SIZE_PC));
+  });
+});