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

package/dist/esm/src/components/navigation/vertical-tab/__tests__/VerticalTab.test.js

@@ -0,0 +1,252 @@
+// @vitest-environment jsdom
+//
+// VerticalTab (src/components/navigation/vertical-tab/VerticalTab.tsx) 위험 경로 — 위험 목록표 VT-xx.
+// breakPoint pc 는 TabButton 세로 목록, mobile 은 Select 로 렌더한다. TabButton·Select 는 실구현.
+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 { VerticalTab } from '../VerticalTab';
+globalThis.IS_REACT_ACT_ENVIRONMENT = true;
+let root = null;
+let container = null;
+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(VerticalTab, props));
+  });
+  return container;
+};
+const click = element => {
+  act(() => {
+    element.click();
+  });
+};
+/** 사용자가 option 을 고른 것처럼 value 를 바꾸고 change 를 보낸다 */
+const choose = (select, value) => {
+  act(() => {
+    if (select) {
+      select.value = value;
+      select.dispatchEvent(new Event('change', {
+        bubbles: true
+      }));
+    }
+  });
+};
+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 selectOf = view => view.querySelector('select');
+const optionsOf = view => Array.from(view.querySelectorAll('option')).map(option => ({
+  value: option.value,
+  label: option.textContent
+}));
+const buttonMenus = onClick => [{
+  id: 'order',
+  label: '주문',
+  onClick
+}, {
+  id: 'claim',
+  label: '클레임',
+  onClick
+}, {
+  id: 'settle',
+  label: '정산',
+  onClick
+}];
+describe('VerticalTab — pc 세로 목록 (VT-01)', () => {
+  it('VT-01 기본(pc)은 TabButton 세로 목록이고 activeTab 과 id 가 같은 탭만 is-active, Select 는 없다', () => {
+    const view = render({
+      menus: buttonMenus(),
+      activeTab: 'claim'
+    });
+    expect(view.querySelector('.ncua-vertical-tab')).not.toBeNull();
+    expect(tabs(view).map(tab => tab.textContent)).toEqual(['주문', '클레임', '정산']);
+    expect(activeLabels(view)).toEqual(['클레임']);
+    expect(selectOf(view)).toBeNull();
+  });
+  it('VT-01 링크 메뉴는 href 를 activeTab 과 비교한다', () => {
+    const menus = [{
+      id: 'order',
+      label: '주문',
+      href: '/orders'
+    }, {
+      id: 'claim',
+      label: '클레임',
+      href: '/claims'
+    }];
+    const view = render({
+      menus,
+      activeTab: '/claims'
+    });
+    expect(activeLabels(view)).toEqual(['클레임']);
+  });
+  it('VT-01 탭을 click 하면 그 메뉴의 onClick(id) 를 호출한다', () => {
+    const onClick = vi.fn();
+    const onSelect = vi.fn();
+    const view = render({
+      menus: buttonMenus(onClick),
+      activeTab: 'order',
+      onSelect
+    });
+    click(tabs(view)[1]);
+    expect(onClick).toHaveBeenCalledWith('claim');
+    expect(onSelect).not.toHaveBeenCalled();
+  });
+});
+describe('VerticalTab — mobile Select (VT-02)', () => {
+  it('VT-02 mobile 은 md Select 로 바뀌고 옵션은 menus 의 id·label, 값은 activeTab 이다', () => {
+    const view = render({
+      breakPoint: 'mobile',
+      menus: buttonMenus(),
+      activeTab: 'claim'
+    });
+    expect(view.querySelector('.ncua-vertical-tab')).toBeNull();
+    expect(tabs(view)).toHaveLength(0);
+    expect(view.querySelector('.ncua-select')?.classList.contains('ncua-select--md')).toBe(true);
+    expect(optionsOf(view)).toEqual([{
+      value: 'order',
+      label: '주문'
+    }, {
+      value: 'claim',
+      label: '클레임'
+    }, {
+      value: 'settle',
+      label: '정산'
+    }]);
+    expect(selectOf(view)?.value).toBe('claim');
+  });
+  it('VT-02 옵션을 고르면 onSelect 를 고른 id 로 호출한다', () => {
+    const onSelect = vi.fn();
+    const view = render({
+      breakPoint: 'mobile',
+      menus: buttonMenus(),
+      activeTab: 'order',
+      onSelect
+    });
+    choose(selectOf(view), 'settle');
+    expect(onSelect).toHaveBeenCalledWith('settle');
+  });
+  it('VT-02 onSelect 가 없어도 옵션 선택에 예외가 나지 않는다', () => {
+    const view = render({
+      breakPoint: 'mobile',
+      menus: buttonMenus(),
+      activeTab: 'order'
+    });
+    expect(() => choose(selectOf(view), 'claim')).not.toThrow();
+  });
+});
+const linkMenus = () => [{
+  id: 'order',
+  label: '주문',
+  href: '/orders'
+}, {
+  id: 'claim',
+  label: '클레임',
+  href: '/claims'
+}];
+describe('VerticalTab — mobile 링크 메뉴 (VT-03)', () => {
+  it('VT-03 mobile 에서 activeTab(href) 이 옵션 id 와 맞지 않아 활성 메뉴가 아닌 첫 옵션이 선택돼 보인다', () => {
+    // 현재 동작 고정 — 결함 후보: #597 (pc 는 href 로 활성 판정, mobile Select 는 id 로만 매칭해 선택 표시 불일치)
+    const view = render({
+      breakPoint: 'mobile',
+      menus: linkMenus(),
+      activeTab: '/claims'
+    });
+    expect(optionsOf(view).map(option => option.value)).toEqual(['order', 'claim']);
+    expect(selectOf(view)?.value).toBe('order');
+  });
+  it('VT-03 mobile 에서 링크 메뉴를 골라도 이동 없이 onSelect 에 href 가 아닌 id 만 넘긴다', () => {
+    // 현재 동작 고정 — 결함 후보: #597 (링크 메뉴의 href 를 쓰지 않아 pc 링크 탭과 계약이 다름)
+    const onSelect = vi.fn();
+    const view = render({
+      breakPoint: 'mobile',
+      menus: linkMenus(),
+      activeTab: '/orders',
+      onSelect
+    });
+    choose(selectOf(view), 'claim');
+    expect(onSelect).toHaveBeenCalledWith('claim');
+    expect(view.querySelector('a')).toBeNull();
+  });
+  it.todo('VT-03 mobile 에서도 링크 메뉴는 activeTab(href) 과 맞는 옵션이 선택돼 보인다 (기대, #597)');
+  it.todo('VT-03 mobile 에서 링크 메뉴를 고르면 그 href 로 이동하거나 href 를 넘긴다 (기대, #597)');
+});
+describe('VerticalTab — mobile 에서 무시되는 메뉴 옵션 (VT-04)', () => {
+  it('VT-04 mobile 에서 옵션을 골라도 menu.onClick 은 호출되지 않고 badgeInfo·onClose 도 렌더되지 않는다', () => {
+    // 현재 동작 고정 — 결함 후보: #597 (pc 와 달리 menu.onClick·badgeInfo·onClose 를 조용히 무시)
+    const onClick = vi.fn();
+    const onClose = vi.fn();
+    const menus = [{
+      id: 'order',
+      label: '주문',
+      onClick,
+      onClose,
+      badgeInfo: {
+        label: 'N'
+      }
+    }, {
+      id: 'claim',
+      label: '클레임',
+      onClick,
+      onClose
+    }];
+    const onSelect = vi.fn();
+    const view = render({
+      breakPoint: 'mobile',
+      menus,
+      activeTab: 'order',
+      onSelect
+    });
+    choose(selectOf(view), 'claim');
+    expect(onSelect).toHaveBeenCalledWith('claim');
+    expect(onClick).not.toHaveBeenCalled();
+    expect(view.querySelector('.ncua-badge')).toBeNull();
+    expect(view.querySelector('.ncua-tab-close')).toBeNull();
+  });
+  it.todo('VT-04 mobile 에서 옵션을 고르면 그 메뉴의 onClick 도 호출한다 (기대, #597)');
+});
+describe('VerticalTab — 타입·빈 메뉴·누락 값 (VT-05)', () => {
+  it.each([['미지정(기본 button-primary)', undefined, 'button-primary'], ['button-white', 'button-white', 'button-white'], ['line-vertical', 'line-vertical', 'line-vertical']])('VT-05 type 이 %s 면 그 타입 modifier 클래스를 붙인다', (_label, type, expected) => {
+    const view = render({
+      type,
+      menus: buttonMenus()
+    });
+    expect(view.querySelector('.ncua-vertical-tab')?.classList.contains(`ncua-vertical-tab--${expected}`)).toBe(true);
+  });
+  it('VT-05 menus 미지정이면 pc 는 빈 컨테이너를 렌더한다', () => {
+    const view = render({});
+    expect(view.querySelector('.ncua-vertical-tab')?.childElementCount).toBe(0);
+  });
+  it('VT-05 menus 미지정이면 mobile 은 옵션 없는 Select 를 렌더한다', () => {
+    const view = render({
+      breakPoint: 'mobile'
+    });
+    expect(selectOf(view)).not.toBeNull();
+    expect(optionsOf(view)).toEqual([]);
+  });
+  it('VT-05 mobile 옵션은 id·label 이 없는 메뉴를 빈 문자열로 채운다', () => {
+    const view = render({
+      breakPoint: 'mobile',
+      menus: [{}]
+    });
+    expect(optionsOf(view)).toEqual([{
+      value: '',
+      label: ''
+    }]);
+  });
+});