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

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

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

package/dist/temp/src/constant/date-picker.d.ts

@@ -1,4 +1,4 @@
-export type PeriodItem = {
+type PeriodItem = {
     text: string;
     period: number;
     unit: string | null;
@@ -61,3 +61,4 @@ export declare const PERIOD_ITEM: {
         unit: null;
     };
 };
+export {};