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

package/dist/cjs/src/components/tab/__tests__/TabButton.test.js

@@ -0,0 +1,252 @@
+"use strict";
+
+var _react = require("react");
+var _client = require("react-dom/client");
+var _testUtils = require("react-dom/test-utils");
+var _vitest = require("vitest");
+var _TabButton = require("../TabButton");
+// @vitest-environment jsdom
+//
+// TabButton (src/components/tab/TabButton.tsx) 위험 경로 — 위험 목록표 TBN-xx.
+// href 유무로 <button>(+닫기 버튼) / <a> 두 갈래로 렌더한다. Badge 는 실구현.
+
+globalThis.IS_REACT_ACT_ENVIRONMENT = true;
+const TAB_ID = 'order';
+const TAB_LABEL = '주문';
+const TAB_HREF = '/orders';
+let root = null;
+let container = null;
+(0, _vitest.afterEach)(() => {
+  if (root) {
+    (0, _testUtils.act)(() => {
+      root?.unmount();
+    });
+  }
+  root = null;
+  container?.remove();
+  container = null;
+  _vitest.vi.restoreAllMocks();
+});
+const render = props => {
+  if (!container) {
+    container = document.createElement('div');
+    document.body.appendChild(container);
+    root = (0, _client.createRoot)(container);
+  }
+  (0, _testUtils.act)(() => {
+    root?.render(/*#__PURE__*/(0, _react.createElement)(_TabButton.TabButton, props));
+  });
+  return container;
+};
+const click = element => {
+  (0, _testUtils.act)(() => {
+    element.click();
+  });
+};
+const tabOf = view => view.querySelector('.ncua-tab-button');
+const closeOf = view => view.querySelector('.ncua-tab-close');
+(0, _vitest.describe)('TabButton — 버튼 탭 click (TBN-01)', () => {
+  (0, _vitest.it)('TBN-01 <button type="button"> 으로 렌더하고 click 하면 onClick(id) 를 호출한다', () => {
+    const onClick = _vitest.vi.fn();
+    const view = render({
+      id: TAB_ID,
+      label: TAB_LABEL,
+      onClick
+    });
+    const tab = tabOf(view);
+    click(tab);
+    (0, _vitest.expect)(tab?.tagName).toBe('BUTTON');
+    (0, _vitest.expect)(tab?.getAttribute('type')).toBe('button');
+    (0, _vitest.expect)(tab?.textContent).toBe(TAB_LABEL);
+    (0, _vitest.expect)(onClick).toHaveBeenCalledWith(TAB_ID);
+  });
+  (0, _vitest.it)('TBN-01 id 가 없으면 onClick 에 빈 문자열을 넘긴다', () => {
+    const onClick = _vitest.vi.fn();
+    const view = render({
+      label: TAB_LABEL,
+      onClick
+    });
+    click(tabOf(view));
+    (0, _vitest.expect)(onClick).toHaveBeenCalledWith('');
+  });
+  (0, _vitest.it)('TBN-01 onClick 이 없어도 click 에 예외가 나지 않는다', () => {
+    const view = render({
+      id: TAB_ID,
+      label: TAB_LABEL
+    });
+    (0, _vitest.expect)(() => click(tabOf(view))).not.toThrow();
+  });
+});
+(0, _vitest.describe)('TabButton — 닫기 버튼 (TBN-02)', () => {
+  (0, _vitest.it)('TBN-02 onClose 가 있으면 탭 뒤에 XClose 아이콘 닫기 버튼을 두고 click 하면 onClose(id) 만 호출한다', () => {
+    const onClick = _vitest.vi.fn();
+    const onClose = _vitest.vi.fn();
+    const view = render({
+      id: TAB_ID,
+      label: TAB_LABEL,
+      onClick,
+      onClose
+    });
+    const close = closeOf(view);
+    click(close);
+    (0, _vitest.expect)(tabOf(view)?.nextElementSibling).toBe(close);
+    (0, _vitest.expect)(close?.getAttribute('type')).toBe('button');
+    (0, _vitest.expect)(close?.querySelector('svg')).not.toBeNull();
+    (0, _vitest.expect)(onClose).toHaveBeenCalledWith(TAB_ID);
+    (0, _vitest.expect)(onClick).not.toHaveBeenCalled();
+  });
+  (0, _vitest.it)('TBN-02 탭 click 은 onClose 를 호출하지 않는다', () => {
+    const onClick = _vitest.vi.fn();
+    const onClose = _vitest.vi.fn();
+    const view = render({
+      id: TAB_ID,
+      label: TAB_LABEL,
+      onClick,
+      onClose
+    });
+    click(tabOf(view));
+    (0, _vitest.expect)(onClick).toHaveBeenCalledWith(TAB_ID);
+    (0, _vitest.expect)(onClose).not.toHaveBeenCalled();
+  });
+  (0, _vitest.it)('TBN-02 id 가 없으면 onClose 에 빈 문자열을 넘긴다', () => {
+    const onClose = _vitest.vi.fn();
+    const view = render({
+      label: TAB_LABEL,
+      onClose
+    });
+    click(closeOf(view));
+    (0, _vitest.expect)(onClose).toHaveBeenCalledWith('');
+  });
+  (0, _vitest.it)('TBN-02 onClose 가 없으면 닫기 버튼을 렌더하지 않는다', () => {
+    const view = render({
+      id: TAB_ID,
+      label: TAB_LABEL
+    });
+    (0, _vitest.expect)(closeOf(view)).toBeNull();
+  });
+});
+(0, _vitest.describe)('TabButton — 링크 탭 (TBN-03)', () => {
+  (0, _vitest.it)('TBN-03 href 가 있으면 <a href target="_self"> 로 렌더하고 닫기 버튼은 없다', () => {
+    const view = render({
+      id: TAB_ID,
+      label: TAB_LABEL,
+      href: TAB_HREF
+    });
+    const tab = tabOf(view);
+    (0, _vitest.expect)(tab?.tagName).toBe('A');
+    (0, _vitest.expect)(tab?.getAttribute('href')).toBe(TAB_HREF);
+    (0, _vitest.expect)(tab?.getAttribute('target')).toBe('_self');
+    (0, _vitest.expect)(tab?.textContent).toBe(TAB_LABEL);
+    (0, _vitest.expect)(view.querySelector('button')).toBeNull();
+  });
+  (0, _vitest.it)('TBN-03 target 을 넘기면 그 값을 쓴다', () => {
+    const view = render({
+      label: TAB_LABEL,
+      href: TAB_HREF,
+      target: '_blank'
+    });
+    (0, _vitest.expect)(tabOf(view)?.getAttribute('target')).toBe('_blank');
+  });
+  (0, _vitest.it)('TBN-03 href 가 빈 문자열이면 링크가 아니라 버튼으로 렌더한다', () => {
+    const view = render({
+      label: TAB_LABEL,
+      href: ''
+    });
+    (0, _vitest.expect)(tabOf(view)?.tagName).toBe('BUTTON');
+  });
+});
+(0, _vitest.describe)('TabButton — 링크 탭의 onClick (TBN-04)', () => {
+  (0, _vitest.it)('TBN-04 href 가 있는 탭에 넘긴 onClick 은 버려져 click 해도 호출되지 않는다', () => {
+    // 현재 동작 고정 — 결함 후보: #597 (링크 탭 타입이 onClick 을 받지만 anchorProps 에서 제거돼 무시됨)
+    const onClick = _vitest.vi.fn();
+    const view = render({
+      id: TAB_ID,
+      label: TAB_LABEL,
+      href: '#claims',
+      onClick
+    });
+    click(tabOf(view));
+    (0, _vitest.expect)(tabOf(view)?.tagName).toBe('A');
+    (0, _vitest.expect)(onClick).not.toHaveBeenCalled();
+  });
+  _vitest.it.todo('TBN-04 링크 탭을 click 하면 넘긴 onClick 도 호출한다 (기대, #597)');
+});
+(0, _vitest.describe)('TabButton — 활성·배지·내용·클래스 (TBN-05)', () => {
+  _vitest.it.each([['버튼', {}], ['링크', {
+    href: TAB_HREF
+  }]])('TBN-05 %s 탭: isActive 면 is-active, 아니면 없음, className 을 덧붙인다', (_kind, extra) => {
+    const view = render({
+      label: TAB_LABEL,
+      isActive: true,
+      className: 'my-tab',
+      ...extra
+    });
+    (0, _vitest.expect)(tabOf(view)?.classList.contains('is-active')).toBe(true);
+    (0, _vitest.expect)(tabOf(view)?.classList.contains('my-tab')).toBe(true);
+    render({
+      label: TAB_LABEL,
+      ...extra
+    });
+    (0, _vitest.expect)(tabOf(view)?.classList.contains('is-active')).toBe(false);
+  });
+  _vitest.it.each([['버튼', {}], ['링크', {
+    href: TAB_HREF
+  }]])('TBN-05 %s 탭: badgeInfo 가 있으면 xs Badge 를 label 다음, children 앞에 렌더한다', (_kind, extra) => {
+    const view = render({
+      label: TAB_LABEL,
+      badgeInfo: {
+        label: '3',
+        size: 'sm',
+        color: 'error'
+      },
+      children: /*#__PURE__*/(0, _react.createElement)('i', {
+        className: 'tab-extra'
+      }),
+      ...extra
+    });
+    const tab = tabOf(view);
+    const badge = tab?.querySelector('.ncua-badge');
+    (0, _vitest.expect)(badge?.classList.contains('ncua-badge--xs')).toBe(true);
+    (0, _vitest.expect)(badge?.classList.contains('ncua-badge--error')).toBe(true);
+    (0, _vitest.expect)(badge?.textContent).toBe('3');
+    (0, _vitest.expect)(Array.from(tab?.childNodes ?? []).map(node => node.nodeName)).toEqual(['#text', 'SPAN', 'I']);
+  });
+  (0, _vitest.it)('TBN-05 badgeInfo 가 없으면 Badge 를 렌더하지 않는다', () => {
+    const view = render({
+      label: TAB_LABEL
+    });
+    (0, _vitest.expect)(view.querySelector('.ncua-badge')).toBeNull();
+  });
+});
+(0, _vitest.describe)('TabButton — 버튼 속성 전달 (TBN-06)', () => {
+  (0, _vitest.it)('TBN-06 aria-* 등 나머지 속성을 탭 버튼에 전달한다', () => {
+    const view = render({
+      label: TAB_LABEL,
+      'aria-controls': 'panel-order',
+      role: 'tab'
+    });
+    (0, _vitest.expect)(tabOf(view)?.getAttribute('aria-controls')).toBe('panel-order');
+    (0, _vitest.expect)(tabOf(view)?.getAttribute('role')).toBe('tab');
+  });
+  (0, _vitest.it)('TBN-06 disabled 면 탭 버튼이 disabled 이고 click 해도 onClick 을 호출하지 않는다', () => {
+    const onClick = _vitest.vi.fn();
+    const view = render({
+      id: TAB_ID,
+      label: TAB_LABEL,
+      disabled: true,
+      onClick
+    });
+    click(tabOf(view));
+    (0, _vitest.expect)(tabOf(view).disabled).toBe(true);
+    (0, _vitest.expect)(onClick).not.toHaveBeenCalled();
+  });
+});
+(0, _vitest.describe)('TabButton — type 고정 (TBN-07)', () => {
+  (0, _vitest.it)('TBN-07 type="submit" 을 넘겨도 탭 버튼은 type="button" 이다', () => {
+    const view = render({
+      label: TAB_LABEL,
+      type: 'submit'
+    });
+    (0, _vitest.expect)(tabOf(view)?.getAttribute('type')).toBe('button');
+  });
+});

package/dist/cjs/src/hooks/__tests__/useCallbackRef.test.js

@@ -0,0 +1,152 @@
+"use strict";
+
+var _react = require("react");
+var _client = require("react-dom/client");
+var _testUtils = require("react-dom/test-utils");
+var _vitest = require("vitest");
+var _useCallbackRef = require("../useCallbackRef");
+// @vitest-environment jsdom
+//
+// useCallbackRef (src/hooks/useCallbackRef.ts) 위험 경로 — 위험 목록표 CR-xx.
+// 훅을 ref 로 쓰는 최소 컴포넌트를 렌더하고, callback·cleanup 호출 순서를 로그로 비교한다.
+
+globalThis.IS_REACT_ACT_ENVIRONMENT = true;
+const Probe = _ref => {
+  let {
+    tag,
+    callback
+  } = _ref;
+  return /*#__PURE__*/(0, _react.createElement)(tag, {
+    ref: (0, _useCallbackRef.useCallbackRef)(callback)
+  });
+};
+let root = null;
+let container = null;
+(0, _vitest.afterEach)(() => {
+  if (root) {
+    (0, _testUtils.act)(() => {
+      root?.unmount();
+    });
+  }
+  root = null;
+  container?.remove();
+  container = null;
+  _vitest.vi.restoreAllMocks();
+});
+const render = props => {
+  if (!container) {
+    container = document.createElement('div');
+    document.body.appendChild(container);
+    root = (0, _client.createRoot)(container);
+  }
+  (0, _testUtils.act)(() => {
+    root?.render(/*#__PURE__*/(0, _react.createElement)(Probe, props));
+  });
+};
+/** callback·cleanup 호출을 'callback:DIV' · 'cleanup:DIV' · 'callback:null' 형태로 기록한다 */
+const recorder = withCleanup => {
+  const log = [];
+  const callback = node => {
+    log.push(`callback:${node ? node.tagName : 'null'}`);
+    if (node && withCleanup) {
+      return () => {
+        log.push(`cleanup:${node.tagName}`);
+      };
+    }
+  };
+  return {
+    log,
+    callback
+  };
+};
+(0, _vitest.describe)('useCallbackRef — 부착과 교체 (CR-01)', () => {
+  (0, _vitest.it)('CR-01 노드가 붙으면 callback(node) 를 호출하고 그때는 cleanup 을 실행하지 않는다', () => {
+    const {
+      log,
+      callback
+    } = recorder(true);
+    render({
+      tag: 'div',
+      callback
+    });
+    (0, _vitest.expect)(log).toEqual(['callback:DIV']);
+  });
+  (0, _vitest.it)('CR-01 노드가 바뀌면 이전 노드의 cleanup 을 먼저 실행하고 새 노드로 callback 한다', () => {
+    const {
+      log,
+      callback
+    } = recorder(true);
+    render({
+      tag: 'div',
+      callback
+    });
+    render({
+      tag: 'span',
+      callback
+    });
+    (0, _vitest.expect)(log).toEqual(['callback:DIV', 'cleanup:DIV', 'callback:null', 'callback:SPAN']);
+  });
+});
+(0, _vitest.describe)('useCallbackRef — 언마운트 (CR-02)', () => {
+  (0, _vitest.it)('CR-02 언마운트하면 cleanup 을 실행한 뒤 callback(null) 을 호출한다', () => {
+    const {
+      log,
+      callback
+    } = recorder(true);
+    render({
+      tag: 'div',
+      callback
+    });
+    (0, _testUtils.act)(() => {
+      root?.unmount();
+    });
+    root = null;
+    (0, _vitest.expect)(log).toEqual(['callback:DIV', 'cleanup:DIV', 'callback:null']);
+  });
+});
+(0, _vitest.describe)('useCallbackRef — cleanup 미반환 (CR-03)', () => {
+  (0, _vitest.it)('CR-03 callback 이 cleanup 을 돌려주지 않으면 노드 교체 때 callback 만 이어서 호출한다', () => {
+    const {
+      log,
+      callback
+    } = recorder(false);
+    render({
+      tag: 'div',
+      callback
+    });
+    render({
+      tag: 'span',
+      callback
+    });
+    (0, _vitest.expect)(log).toEqual(['callback:DIV', 'callback:null', 'callback:SPAN']);
+  });
+});
+(0, _vitest.describe)('useCallbackRef — callback 교체 (CR-04)', () => {
+  (0, _vitest.it)('CR-04 같은 노드라도 callback 참조가 바뀌면 이전 cleanup·이전 callback(null) 뒤 새 callback(node) 를 호출한다', () => {
+    const log = [];
+    const named = name => node => {
+      log.push(`${name}:${node ? node.tagName : 'null'}`);
+      if (node) {
+        return () => {
+          log.push(`${name}-cleanup:${node.tagName}`);
+        };
+      }
+      return undefined;
+    };
+    const first = named('first');
+    const second = named('second');
+    render({
+      tag: 'div',
+      callback: first
+    });
+    render({
+      tag: 'div',
+      callback: first
+    });
+    render({
+      tag: 'div',
+      callback: second
+    });
+    (0, _vitest.expect)(log).toEqual(['first:DIV', 'first-cleanup:DIV', 'first:null', 'second:DIV']);
+  });
+});

package/dist/cjs/src/hooks/__tests__/useMediaQuery.test.js

@@ -0,0 +1,119 @@
+"use strict";
+
+var _react = require("react");
+var _client = require("react-dom/client");
+var _testUtils = require("react-dom/test-utils");
+var _vitest = require("vitest");
+var _useMediaQuery = require("../useMediaQuery");
+// @vitest-environment jsdom
+
+// React 18에서 act() 사용 시 필요한 플래그 (미설정 시 console.error 경고 발생)
+globalThis.IS_REACT_ACT_ENVIRONMENT = true;
+const QUERY = '(max-width: 768px)';
+/** change 리스너를 보관해 직접 호출할 수 있는 matchMedia 가짜 */
+const installMatchMedia = initialMatches => {
+  const listeners = new Set();
+  const queries = [];
+  _vitest.vi.stubGlobal('matchMedia', query => {
+    queries.push(query);
+    return {
+      matches: initialMatches,
+      media: query,
+      addEventListener: (_type, listener) => listeners.add(listener),
+      removeEventListener: (_type, listener) => listeners.delete(listener)
+    };
+  });
+  const emit = matches => (0, _testUtils.act)(() => {
+    for (const listener of Array.from(listeners)) {
+      listener({
+        matches
+      });
+    }
+  });
+  return {
+    listeners,
+    queries,
+    emit
+  };
+};
+const mounted = [];
+(0, _vitest.afterEach)(() => {
+  for (const {
+    root,
+    container
+  } of mounted.splice(0)) {
+    (0, _testUtils.act)(() => root.unmount());
+    container.remove();
+  }
+  _vitest.vi.unstubAllGlobals();
+});
+/** 훅 결과를 data 속성으로 노출하는 프로브 컴포넌트 */
+const Probe = _ref => {
+  let {
+    onMatched
+  } = _ref;
+  const matches = (0, _useMediaQuery.useMediaQuery)(QUERY, {
+    onMatched
+  });
+  return /*#__PURE__*/(0, _react.createElement)('output', {
+    'data-matches': String(matches)
+  });
+};
+const mountProbe = onMatched => {
+  const container = document.createElement('div');
+  document.body.appendChild(container);
+  const root = (0, _client.createRoot)(container);
+  const entry = {
+    root,
+    container
+  };
+  mounted.push(entry);
+  (0, _testUtils.act)(() => root.render(/*#__PURE__*/(0, _react.createElement)(Probe, {
+    onMatched
+  })));
+  const read = () => container.querySelector('output')?.getAttribute('data-matches');
+  return {
+    read,
+    entry
+  };
+};
+(0, _vitest.describe)('useMediaQuery (RSD-04)', () => {
+  _vitest.it.each([[true, 'true'], [false, 'false']])('RSD-04 마운트 직후 matchMedia(query).matches %s 를 반영한다', (initial, expected) => {
+    const media = installMatchMedia(initial);
+    const probe = mountProbe();
+    (0, _vitest.expect)(media.queries).toContain(QUERY);
+    (0, _vitest.expect)(probe.read()).toBe(expected);
+  });
+  (0, _vitest.it)('RSD-04 change(matches true) 는 값을 갱신하고 onMatched 를 부른다', () => {
+    const media = installMatchMedia(false);
+    const onMatched = _vitest.vi.fn();
+    const probe = mountProbe(onMatched);
+    media.emit(true);
+    (0, _vitest.expect)(probe.read()).toBe('true');
+    (0, _vitest.expect)(onMatched).toHaveBeenCalled();
+  });
+  (0, _vitest.it)('RSD-04 change(matches false) 는 값만 갱신하고 onMatched 를 부르지 않는다', () => {
+    const media = installMatchMedia(true);
+    const onMatched = _vitest.vi.fn();
+    const probe = mountProbe(onMatched);
+    media.emit(false);
+    (0, _vitest.expect)(probe.read()).toBe('false');
+    (0, _vitest.expect)(onMatched).not.toHaveBeenCalled();
+  });
+  (0, _vitest.it)('RSD-04 onMatched 없이도 change(true) 를 받는다', () => {
+    const media = installMatchMedia(false);
+    const probe = mountProbe();
+    media.emit(true);
+    (0, _vitest.expect)(probe.read()).toBe('true');
+  });
+  (0, _vitest.it)('RSD-04 unmount 하면 change 리스너를 해제한다', () => {
+    const media = installMatchMedia(false);
+    const probe = mountProbe();
+    const subscribedBefore = media.listeners.size;
+    mounted.splice(mounted.indexOf(probe.entry), 1);
+    (0, _testUtils.act)(() => probe.entry.root.unmount());
+    probe.entry.container.remove();
+    (0, _vitest.expect)(subscribedBefore).toBeGreaterThan(0);
+    (0, _vitest.expect)(media.listeners.size).toBe(0);
+  });
+});

package/dist/cjs/src/hooks/__tests__/usePortalState.ssr.test.js

@@ -0,0 +1,25 @@
+"use strict";
+
+var _react = require("react");
+var _server = require("react-dom/server");
+var _vitest = require("vitest");
+var _usePortalState = require("../usePortalState");
+// @vitest-environment node
+//
+// usePortalState 의 SSR 경로 — 위험 목록표 UPS-01 (PR-7c). useFloatingPosition.ssr.test.ts 선례처럼
+// document 가 없는 node 환경에서 renderToString 으로 훅을 부른다.
+
+(0, _vitest.describe)('UPS-01 usePortalState — SSR', () => {
+  (0, _vitest.it)('UPS-01 document 가 없으면 portalContainer 는 null 이고 Portal 을 쓰지 않는다', () => {
+    const results = [];
+    const PortalProbe = () => {
+      results.push((0, _usePortalState.usePortalState)());
+      return null;
+    };
+    (0, _server.renderToString)(/*#__PURE__*/(0, _react.createElement)(PortalProbe));
+    (0, _vitest.expect)(results).toEqual([{
+      shouldPortal: false,
+      portalContainer: null
+    }]);
+  });
+});