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

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

@@ -0,0 +1,249 @@
+// @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(/*#__PURE__*/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: /*#__PURE__*/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');
+  });
+});