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

package/dist/esm/src/components/feedback-and-status/badge/__tests__/Badge.test.js

@@ -0,0 +1,186 @@
+// @vitest-environment jsdom
+import { createElement } from 'react';
+import { createRoot } from 'react-dom/client';
+import { act } from 'react-dom/test-utils';
+import { afterEach, describe, expect, it } from 'vitest';
+import { COLOR } from '../../../../../constant/color';
+import { Badge } from '../Badge';
+import { sideSlotRender } from '../utils';
+// React 18에서 act() 사용 시 필요한 플래그 (미설정 시 console.error 경고 발생)
+globalThis.IS_REACT_ACT_ENVIRONMENT = true;
+const LABEL = '진행중';
+/** 뱃지 아이콘 기본 크기 */
+const BADGE_ICON_SIZE = 12;
+/** 기본 크기(12)와 겹치지 않는 지정 크기 */
+const CUSTOM_ICON_SIZE = 18;
+/** new-badge 'N' 아이콘 크기 — sm 12 · md 14 */
+const NEW_BADGE_ICON_SM = 12;
+const NEW_BADGE_ICON_MD = 14;
+/** leading · label · trailing */
+const EXPECTED_SLOT_CHILDREN = 3;
+/** afterEach 에서 unmount 할 루트 */
+const mounted = [];
+afterEach(() => {
+  for (const {
+    root,
+    container
+  } of mounted.splice(0)) {
+    act(() => root.unmount());
+    container.remove();
+  }
+});
+const mountBadge = function () {
+  let props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  const container = document.createElement('div');
+  document.body.appendChild(container);
+  const root = createRoot(container);
+  mounted.push({
+    root,
+    container
+  });
+  act(() => root.render(/*#__PURE__*/createElement(Badge, {
+    label: LABEL,
+    ...props
+  })));
+  const badge = container.querySelector('.ncua-badge');
+  if (!badge) throw new Error('뱃지를 찾을 수 없습니다');
+  return badge;
+};
+const mustQuery = (root, selector) => {
+  const found = root.querySelector(selector);
+  if (!found) throw new Error(`요소를 찾을 수 없습니다: ${selector}`);
+  return found;
+};
+const hasClasses = (element, names) => names.map(name => element.classList.contains(name));
+/** 받은 width · height · color 를 속성으로 남기는 합성 아이콘 */
+const makeIcon = name => {
+  const Icon = _ref => {
+    let {
+      width,
+      height,
+      color
+    } = _ref;
+    return /*#__PURE__*/createElement('svg', {
+      'data-icon': name,
+      width,
+      height,
+      color
+    });
+  };
+  return Icon;
+};
+const SyntheticIcon = makeIcon('slot');
+describe('Badge — 기본 렌더와 new-badge (BDG-01)', () => {
+  it('BDG-01 기본값: pill-outline · neutral · xs 와 label', () => {
+    const badge = mountBadge();
+    expect(hasClasses(badge, ['ncua-badge--pill-outline', 'ncua-badge--neutral', 'ncua-badge--xs'])).toEqual([true, true, true]);
+    expect(mustQuery(badge, '.ncua-badge__label').textContent).toBe(LABEL);
+  });
+  it('BDG-01 type · color · size · className 을 클래스로 반영한다', () => {
+    const badge = mountBadge({
+      type: 'pill-dark-color',
+      color: 'error',
+      size: 'md',
+      className: 'custom-badge'
+    });
+    expect(hasClasses(badge, ['ncua-badge--pill-dark-color', 'ncua-badge--error', 'ncua-badge--md', 'custom-badge'])).toEqual([true, true, true, true]);
+  });
+  it.each([['md', 'md', 'ncua-badge--new-badge-md', NEW_BADGE_ICON_MD], ['sm', 'sm', 'ncua-badge--new-badge-sm', NEW_BADGE_ICON_SM], ['xs(→ sm)', 'xs', 'ncua-badge--new-badge-sm', NEW_BADGE_ICON_SM]])('BDG-01 new-badge size %s 는 %s 클래스와 아이콘 %s px', (_name, size, expectedClass, iconSize) => {
+    const badge = mountBadge({
+      type: 'new-badge',
+      size
+    });
+    expect(badge.classList.contains(expectedClass)).toBe(true);
+    expect(mustQuery(badge, 'svg').getAttribute('width')).toBe(String(iconSize));
+  });
+  it('BDG-01 new-badge 는 label · color · 아이콘 슬롯을 무시한다', () => {
+    const badge = mountBadge({
+      type: 'new-badge',
+      color: 'error',
+      leadingIcon: {
+        type: 'icon',
+        icon: SyntheticIcon
+      },
+      className: 'custom-badge'
+    });
+    expect(badge.querySelector('.ncua-badge__label')).toBeNull();
+    expect(badge.querySelector('[data-icon]')).toBeNull();
+    expect(hasClasses(badge, ['ncua-badge--error', 'custom-badge'])).toEqual([false, true]);
+  });
+});
+describe('Badge — 슬롯 렌더 sideSlotRender (BDG-02)', () => {
+  it.each([['지정 size 가 우선', {
+    size: CUSTOM_ICON_SIZE
+  }, CUSTOM_ICON_SIZE], ['생략 시 뱃지 기본 크기', {}, BADGE_ICON_SIZE]])('BDG-02 icon 슬롯 크기: %s', (_name, slotExtra, expected) => {
+    const badge = mountBadge({
+      leadingIcon: {
+        type: 'icon',
+        icon: SyntheticIcon,
+        ...slotExtra
+      }
+    });
+    const icon = mustQuery(badge, '[data-icon]');
+    expect([icon.getAttribute('width'), icon.getAttribute('height')]).toEqual([String(expected), String(expected)]);
+  });
+  it.each([['color 지정 시 COLOR 값', 'gray700', COLOR.gray700], ['color 생략 시 없음', undefined, null]])('BDG-02 icon 슬롯 색: %s', (_name, color, expected) => {
+    const badge = mountBadge({
+      leadingIcon: {
+        type: 'icon',
+        icon: SyntheticIcon,
+        color
+      }
+    });
+    expect(mustQuery(badge, '[data-icon]').getAttribute('color')).toBe(expected);
+  });
+  it.each([['지정 color · size', {
+    type: 'dot',
+    color: 'error',
+    size: 'lg'
+  }, ['ncua-dot--error', 'ncua-dot--lg']], ['생략 시 neutral · sm', {
+    type: 'dot'
+  }, ['ncua-dot--neutral', 'ncua-dot--sm']]])('BDG-02 dot 슬롯: %s', (_name, slot, expectedClasses) => {
+    // 생략은 타입 밖이라 캐스팅한다 — color · size 폴백 경로
+    const badge = mountBadge({
+      leadingIcon: slot
+    });
+    expect(hasClasses(mustQuery(badge, '.ncua-dot'), [...expectedClasses])).toEqual([true, true]);
+  });
+  it('BDG-02 custom 슬롯은 children 을 그리고, leading 은 label 앞 · trailing 은 label 뒤에 놓인다', () => {
+    const badge = mountBadge({
+      leadingIcon: {
+        type: 'custom',
+        children: /*#__PURE__*/createElement('i', {
+          className: 'lead'
+        })
+      },
+      trailingIcon: {
+        type: 'custom',
+        children: /*#__PURE__*/createElement('i', {
+          className: 'trail'
+        })
+      }
+    });
+    const children = Array.from(badge.children);
+    expect([children[0].classList.contains('lead'), children[1].classList.contains('ncua-badge__label'), children[2].classList.contains('trail'), children.length]).toEqual([true, true, true, EXPECTED_SLOT_CHILDREN]);
+  });
+  it('BDG-02 sideSlotRender 는 호출자가 준 defaultIconSize 를 기본 크기로 쓴다', () => {
+    // Given: 뱃지 기본(12)과 다른 기본 크기로 직접 렌더
+    const container = document.createElement('div');
+    document.body.appendChild(container);
+    const root = createRoot(container);
+    mounted.push({
+      root,
+      container
+    });
+    // When
+    act(() => root.render(sideSlotRender({
+      slot: {
+        type: 'icon',
+        icon: SyntheticIcon
+      },
+      defaultIconSize: CUSTOM_ICON_SIZE
+    })));
+    // Then
+    expect(mustQuery(container, '[data-icon]').getAttribute('width')).toBe(String(CUSTOM_ICON_SIZE));
+  });
+});

package/dist/esm/src/components/feedback-and-status/badge-group/__tests__/BadgeGroup.test.js

@@ -0,0 +1,116 @@
+// @vitest-environment jsdom
+//
+// BadgeGroup (src/components/feedback-and-status/badge-group/BadgeGroup.tsx) 위험 경로 — 위험 목록표 BG-xx.
+// Badge·sideSlotRender 는 실구현으로 렌더한다.
+import { ArrowRight } from '@ncds/ui-admin-icon';
+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 { BadgeGroup } from '../BadgeGroup';
+globalThis.IS_REACT_ACT_ENVIRONMENT = true;
+const GROUP_LABEL = '새 기능이 추가되었습니다';
+const GROUP_HREF = 'https://example.com/notice';
+const DEFAULT_GROUP_ICON_SIZE = '14';
+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(BadgeGroup, props));
+  });
+  return container;
+};
+const linkOf = view => view.querySelector('a.ncua-badge-group');
+describe('BadgeGroup — 링크·배지·라벨·아이콘 (BG-01)', () => {
+  it('BG-01 <a href target="_blank"> 안에 pill-dark-color Badge · groupLabel 을 렌더하고 기본은 neutral · sm 이다', () => {
+    const view = render({
+      label: 'NEW',
+      groupLabel: GROUP_LABEL,
+      href: GROUP_HREF
+    });
+    const link = linkOf(view);
+    const badge = link?.querySelector('.ncua-badge');
+    expect(link?.getAttribute('href')).toBe(GROUP_HREF);
+    expect(link?.getAttribute('target')).toBe('_blank');
+    expect(link?.classList.contains('ncua-badge-group--neutral')).toBe(true);
+    expect(link?.classList.contains('ncua-badge-group--sm')).toBe(true);
+    expect(['ncua-badge--pill-dark-color', 'ncua-badge--neutral', 'ncua-badge--sm'].map(name => badge?.classList.contains(name))).toEqual([true, true, true]);
+    expect(badge?.textContent).toBe('NEW');
+    expect(link?.querySelector('.ncua-badge-group__label')?.textContent).toBe(GROUP_LABEL);
+    expect(link?.querySelector(':scope > svg')).toBeNull();
+    link?.focus();
+    expect(document.activeElement).toBe(link);
+  });
+  it('BG-01 color·size·target·groupClassName 을 링크와 Badge 에 반영한다', () => {
+    const view = render({
+      label: '오류',
+      groupLabel: GROUP_LABEL,
+      href: GROUP_HREF,
+      color: 'error',
+      size: 'xs',
+      target: '_self',
+      groupClassName: 'my-group'
+    });
+    const link = linkOf(view);
+    const badge = link?.querySelector('.ncua-badge');
+    expect(link?.getAttribute('target')).toBe('_self');
+    expect(link?.classList.contains('ncua-badge-group--error')).toBe(true);
+    expect(link?.classList.contains('ncua-badge-group--xs')).toBe(true);
+    expect(link?.classList.contains('my-group')).toBe(true);
+    expect(badge?.classList.contains('ncua-badge--error')).toBe(true);
+    expect(badge?.classList.contains('ncua-badge--xs')).toBe(true);
+  });
+  it('BG-01 groupIcon 이 있으면 라벨 뒤에 기본 14px 아이콘을 렌더한다', () => {
+    const view = render({
+      groupLabel: GROUP_LABEL,
+      href: GROUP_HREF,
+      groupIcon: {
+        type: 'icon',
+        icon: ArrowRight
+      }
+    });
+    const icon = linkOf(view)?.lastElementChild;
+    expect(icon?.tagName.toLowerCase()).toBe('svg');
+    expect(icon?.previousElementSibling?.classList.contains('ncua-badge-group__label')).toBe(true);
+    expect([icon?.getAttribute('width'), icon?.getAttribute('height')]).toEqual([DEFAULT_GROUP_ICON_SIZE, DEFAULT_GROUP_ICON_SIZE]);
+  });
+});
+describe('BadgeGroup — rel·href 누락 (BG-02)', () => {
+  it('BG-02 기본 target _blank 인데 rel 을 붙이지 않는다', () => {
+    // 현재 동작 고정 — 결함 후보: #597 (새 창 링크에 rel="noopener noreferrer" 미지정, 구형 브라우저 reverse tabnabbing·referrer 노출)
+    const view = render({
+      groupLabel: GROUP_LABEL,
+      href: GROUP_HREF
+    });
+    expect(linkOf(view)?.getAttribute('target')).toBe('_blank');
+    expect(linkOf(view)?.hasAttribute('rel')).toBe(false);
+  });
+  it('BG-02 href 가 없으면 href 없는 <a> 라 링크·키보드 포커스 대상이 아니다', () => {
+    // 현재 동작 고정 — 결함 후보: #597 (href 없는 <a> 는 tab 순서에서 빠지고 링크 역할도 없음)
+    const view = render({
+      groupLabel: GROUP_LABEL
+    });
+    const link = linkOf(view);
+    link?.focus();
+    expect(link?.hasAttribute('href')).toBe(false);
+    expect(document.activeElement).not.toBe(link);
+  });
+  it.todo('BG-02 target 이 _blank 면 rel="noopener noreferrer" 를 붙인다 (기대, #597)');
+  it.todo('BG-02 href 가 없으면 링크가 아닌 요소로 렌더하거나 href 를 필수로 한다 (기대, #597)');
+});

package/dist/esm/src/components/feedback-and-status/carousel-arrow/__tests__/CarouselArrow.test.js

@@ -0,0 +1,91 @@
+// @vitest-environment jsdom
+//
+// CarouselArrow (src/components/feedback-and-status/carousel-arrow/CarouselArrow.tsx) 위험 경로 — 위험 목록표 CA-xx.
+// 좌우 아이콘은 아이콘 컴포넌트가 그리는 path 로 구분한다.
+import { 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, describe, expect, it, vi } from 'vitest';
+import { CarouselArrow } from '../CarouselArrow';
+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(CarouselArrow, props));
+  });
+  return container;
+};
+/** 아이콘 컴포넌트가 그리는 path 의 d — DOM 의 svg 와 비교해 어떤 아이콘인지 판별한다 */
+const iconPathOf = Icon => {
+  const holder = document.createElement('div');
+  holder.innerHTML = renderToStaticMarkup(/*#__PURE__*/createElement(Icon));
+  return holder.querySelector('path')?.getAttribute('d') ?? null;
+};
+const buttonOf = view => view.querySelector('button.ncua-carousel-arrow');
+describe('CarouselArrow — click·방향·클래스 (CA-01)', () => {
+  it('CA-01 click 하면 onClick 을 호출한다', () => {
+    const onClick = vi.fn();
+    const view = render({
+      chevron: 'right',
+      onClick
+    });
+    act(() => {
+      buttonOf(view)?.click();
+    });
+    expect(buttonOf(view)?.getAttribute('type')).toBe('button');
+    expect(onClick).toHaveBeenCalled();
+  });
+  it.each([['left', ChevronLeft], ['right', ChevronRight]])('CA-01 chevron %s 면 그 방향 아이콘과 방향 클래스를 쓴다', (chevron, Icon) => {
+    const view = render({
+      chevron
+    });
+    const button = buttonOf(view);
+    expect(button?.querySelector('svg.ncua-carousel-arrow__icon path')?.getAttribute('d')).toBe(iconPathOf(Icon));
+    expect(button?.classList.contains(`ncua-carousel-arrow--${chevron}`)).toBe(true);
+  });
+  it('CA-01 기본은 default · md 클래스이고 type·className 을 넘기면 반영한다', () => {
+    const view = render({
+      chevron: 'left'
+    });
+    expect(buttonOf(view)?.classList.contains('ncua-carousel-arrow--default')).toBe(true);
+    expect(buttonOf(view)?.classList.contains('ncua-carousel-arrow--md')).toBe(true);
+    render({
+      chevron: 'left',
+      type: 'line',
+      className: 'my-arrow'
+    });
+    expect(buttonOf(view)?.classList.contains('ncua-carousel-arrow--line')).toBe(true);
+    expect(buttonOf(view)?.classList.contains('my-arrow')).toBe(true);
+  });
+});
+describe('CarouselArrow — 접근 가능한 이름 (CA-02)', () => {
+  it('CA-02 아이콘만 있는 버튼에 aria-label·텍스트가 없어 접근 가능한 이름이 비어 있다', () => {
+    // 현재 동작 고정 — 결함 후보: #597 (아이콘 전용 버튼에 aria-label 이 없어 스크린리더가 용도를 읽지 못함)
+    const view = render({
+      chevron: 'left'
+    });
+    const button = buttonOf(view);
+    expect(button?.hasAttribute('aria-label')).toBe(false);
+    expect(button?.textContent).toBe('');
+  });
+  it.todo('CA-02 좌우 방향에 맞는 aria-label(예: 이전·다음)을 가진다 (기대, #597)');
+});

package/dist/esm/src/components/feedback-and-status/carousel-number-group/__tests__/CarouselNumberGroup.test.js

@@ -0,0 +1,61 @@
+// @vitest-environment jsdom
+//
+// CarouselNumberGroup (src/components/feedback-and-status/carousel-number-group/CarouselNumberGroup.tsx)
+// 위험 경로 — 위험 목록표 CN-xx.
+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 { CarouselNumberGroup } from '../CarouselNumberGroup';
+globalThis.IS_REACT_ACT_ENVIRONMENT = true;
+const CURRENT_PAGE = 3;
+const TOTAL_PAGE = 10;
+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(CarouselNumberGroup, props));
+  });
+  return container;
+};
+const groupOf = view => view.querySelector('.ncua-carousel-number-group');
+describe('CarouselNumberGroup — 표시와 클래스 (CN-01)', () => {
+  it('CN-01 현재 페이지와 "/전체" 를 표시하고 기본은 framed · light · sm 이다', () => {
+    const view = render({
+      currentPage: CURRENT_PAGE,
+      totalPage: TOTAL_PAGE
+    });
+    const group = groupOf(view);
+    expect(view.querySelector('.ncua-carousel-number-group__number')?.textContent).toBe(String(CURRENT_PAGE));
+    expect(view.querySelector('.ncua-carousel-number-group__total')?.textContent).toBe(`/${TOTAL_PAGE}`);
+    expect(['framed', 'ncua-carousel-number-group--light', 'ncua-carousel-number-group--sm'].map(name => group?.classList.contains(name))).toEqual([true, true, true]);
+  });
+  it('CN-01 framed false · dark 면 framed 를 빼고 dark 클래스를 붙인다', () => {
+    const view = render({
+      currentPage: CURRENT_PAGE,
+      totalPage: TOTAL_PAGE,
+      framed: false,
+      color: 'dark'
+    });
+    const group = groupOf(view);
+    expect(group?.classList.contains('framed')).toBe(false);
+    expect(group?.classList.contains('ncua-carousel-number-group--dark')).toBe(true);
+    expect(group?.classList.contains('ncua-carousel-number-group--light')).toBe(false);
+  });
+});

package/dist/esm/src/components/feedback-and-status/empty-state/__tests__/EmptyState.test.js

@@ -0,0 +1,123 @@
+// @vitest-environment jsdom
+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 { EmptyState } from '../EmptyState';
+// React 18에서 act() 사용 시 필요한 플래그 (미설정 시 console.error 경고 발생)
+globalThis.IS_REACT_ACT_ENVIRONMENT = true;
+const TITLE = '결과가 없습니다';
+const DESCRIPTION = '조건을 바꿔 보세요';
+/** afterEach 에서 unmount 할 루트 */
+const mounted = [];
+afterEach(() => {
+  for (const {
+    root,
+    container
+  } of mounted.splice(0)) {
+    act(() => root.unmount());
+    container.remove();
+  }
+});
+const mount = node => {
+  const container = document.createElement('div');
+  document.body.appendChild(container);
+  const root = createRoot(container);
+  mounted.push({
+    root,
+    container
+  });
+  act(() => root.render(node));
+  return {
+    container
+  };
+};
+const emptyState = function () {
+  let props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return /*#__PURE__*/createElement(EmptyState, {
+    title: TITLE,
+    description: DESCRIPTION,
+    ...props
+  });
+};
+const mustQuery = (root, selector) => {
+  const found = root.querySelector(selector);
+  if (!found) throw new Error(`요소를 찾을 수 없습니다: ${selector}`);
+  return found;
+};
+const buttons = root => Array.from(root.querySelectorAll('.ncua-empty-state__button-group button'));
+describe('EmptyState — 버튼 영역 (EMS-01)', () => {
+  it('EMS-01 buttons 가 없으면 title · description 만 그리고 버튼 영역이 없다', () => {
+    const view = mount(emptyState());
+    expect(mustQuery(view.container, '.ncua-empty-state__title').textContent).toBe(TITLE);
+    expect(mustQuery(view.container, '.ncua-empty-state__description').textContent).toBe(DESCRIPTION);
+    expect(view.container.querySelector('.ncua-empty-state__button-group')).toBeNull();
+  });
+  it('EMS-01 빈 배열이면 버튼 영역이 없다', () => {
+    const view = mount(emptyState({
+      buttons: []
+    }));
+    expect(view.container.querySelector('.ncua-empty-state__button-group')).toBeNull();
+  });
+  it('EMS-01 단일 객체면 버튼 1개를 그리고 size 기본값 xs 를 쓴다', () => {
+    const view = mount(emptyState({
+      buttons: {
+        label: '등록'
+      }
+    }));
+    const rendered = buttons(view.container);
+    expect(rendered.map(button => button.textContent)).toEqual(['등록']);
+    expect(rendered[0].classList.contains('ncua-btn--xs')).toBe(true);
+  });
+  it('EMS-01 배열이면 순서대로 그리고 지정한 size · hierarchy · disabled 를 전달한다', () => {
+    const view = mount(emptyState({
+      buttons: [{
+        label: '취소',
+        size: 'sm',
+        hierarchy: 'secondary-gray'
+      }, {
+        label: '등록',
+        size: 'sm',
+        hierarchy: 'primary',
+        disabled: true
+      }]
+    }));
+    const rendered = buttons(view.container);
+    expect(rendered.map(button => button.textContent)).toEqual(['취소', '등록']);
+    expect(rendered.map(button => button.classList.contains('ncua-btn--sm'))).toEqual([true, true]);
+    expect(rendered.map(button => button.disabled)).toEqual([false, true]);
+    expect(rendered[1].classList.contains('ncua-btn--primary')).toBe(true);
+  });
+  it('EMS-01 버튼 클릭은 그 버튼의 onClick 을 부른다', () => {
+    const onRegister = vi.fn();
+    const view = mount(emptyState({
+      buttons: [{
+        label: '취소'
+      }, {
+        label: '등록',
+        onClick: onRegister
+      }]
+    }));
+    act(() => buttons(view.container)[1].click());
+    expect(onRegister).toHaveBeenCalled();
+  });
+});
+describe('EmptyState — 폼 안 버튼 (EMS-02)', () => {
+  it('EMS-02 폼 안의 EmptyState 버튼을 클릭하면 폼을 제출한다 (BTN-04 영향 사용처)', () => {
+    // 현재 동작 고정 — 결함 후보: 후속 이슈 (#620 VNT-12 · BTN-04 같은 뿌리 — 공용 Button 에 type 기본값 없음)
+    const submits = [];
+    const view = mount(/*#__PURE__*/createElement('form', {
+      onSubmit: event => {
+        event.preventDefault();
+        submits.push(event.nativeEvent);
+      }
+    }, emptyState({
+      buttons: {
+        label: '등록'
+      }
+    })));
+    act(() => buttons(view.container)[0].click());
+    expect(submits).toHaveLength(1);
+  });
+  it.todo('EMS-02 기대 동작: 폼 안의 EmptyState 버튼 클릭은 폼을 제출하지 않는다 (BTN-04 수정 시 함께 해소)');
+});