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

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 수정 시 함께 해소)');
+});

package/dist/esm/src/components/feedback-and-status/progress-bar/__tests__/ProgressBar.test.js

@@ -0,0 +1,274 @@
+// @vitest-environment jsdom
+//
+// ProgressBar (React) 위험 경로 — 위험 목록표 RPB-xx. SegmentBar·SegmentLabels 는 렌더 결과로 함께 덮는다.
+// vanilla ProgressBar.ts(PB-xx)와 같은 계약 — 같은 입력에 다른 결과면 결함 후보로 적는다.
+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 { ProgressBar } from '../ProgressBar';
+globalThis.IS_REACT_ACT_ENVIRONMENT = true;
+const VALUE = 40;
+const SEG_A = 30;
+const SEG_B = 10;
+/** 30 : 10 → 75 : 25 로 정규화 */
+const NORMALIZED_A = 75;
+const NORMALIZED_B = 25;
+/** 라벨 위치 — 앞 폭 합 + 자기 폭 / 2 : 75 / 2 = 37.5, 75 + 25 / 2 = 87.5 */
+const CENTER_DIVISOR = 2;
+const FIRST_LABEL_LEFT = NORMALIZED_A / CENTER_DIVISOR;
+const SECOND_LABEL_LEFT = NORMALIZED_A + NORMALIZED_B / CENTER_DIVISOR;
+/** 세그먼트 1개 float 라벨 값 */
+const FLOAT_VALUE = 15;
+/** 0 세그먼트 라벨 시작점 — 앞 폭 합 − 1 (최소 0) */
+const ZERO_LABEL_OFFSET = 1;
+let root = null;
+let container = null;
+const renderElement = element => {
+  if (!container) {
+    container = document.createElement('div');
+    document.body.appendChild(container);
+    root = createRoot(container);
+  }
+  act(() => {
+    root?.render(element);
+  });
+  return container;
+};
+const render = function () {
+  let props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return renderElement(/*#__PURE__*/createElement(ProgressBar, props));
+};
+afterEach(() => {
+  if (root) {
+    act(() => {
+      root?.unmount();
+    });
+  }
+  container?.remove();
+  root = null;
+  container = null;
+});
+const requireElement = (scope, selector) => {
+  const element = scope.querySelector(selector);
+  if (!element) throw new Error(`요소를 찾을 수 없습니다: ${selector}`);
+  return element;
+};
+const fillsOf = view => Array.from(view.querySelectorAll('.ncua-progress-bar__fill'));
+const segmentLabelsOf = view => Array.from(view.querySelectorAll('.ncua-progress-bar__label--segment'));
+// ── P0 ─────────────────────────────────────────────────
+describe('ProgressBar — 단일 value (RPB-01)', () => {
+  it('RPB-01 fill 하나의 width 와 aria-valuenow 가 같은 값이고 aria 범위는 0~100', () => {
+    const view = render({
+      value: VALUE
+    });
+    const [fill] = fillsOf(view);
+    expect(fillsOf(view)).toHaveLength(1);
+    expect([fill.style.width, fill.getAttribute('aria-valuenow'), fill.getAttribute('aria-valuemin'), fill.getAttribute('aria-valuemax')]).toEqual([`${VALUE}%`, String(VALUE), '0', '100']);
+  });
+});
+describe('ProgressBar — 다중 세그먼트 (RPB-02)', () => {
+  it('RPB-02 SegmentBar 가 세그먼트마다 정규화 width·first/last·색 클래스로 fill 을 만든다', () => {
+    const view = render({
+      segments: [{
+        value: SEG_A,
+        color: 'blue'
+      }, {
+        value: SEG_B,
+        color: 'red'
+      }]
+    });
+    const [first, last] = fillsOf(view);
+    expect(fillsOf(view).map(fill => fill.style.width)).toEqual([`${NORMALIZED_A}%`, `${NORMALIZED_B}%`]);
+    expect([first.classList.contains('ncua-progress-bar__fill--first'), first.classList.contains('ncua-progress-bar__fill--last'), first.classList.contains('ncua-progress-bar__fill--color-blue'), last.classList.contains('ncua-progress-bar__fill--last'), last.classList.contains('ncua-progress-bar__fill--color-red')]).toEqual([true, false, true, true, true]);
+    expect(requireElement(view, '.ncua-progress-bar__bar').classList.contains('ncua-progress-bar__bar--segments')).toBe(true);
+  });
+  it('RPB-02 SegmentLabels 가 세그먼트마다 정규화 값 라벨과 색 클래스를 렌더한다', () => {
+    const view = render({
+      segments: [{
+        value: SEG_A,
+        color: 'blue'
+      }, {
+        value: SEG_B,
+        color: 'red'
+      }]
+    });
+    const labels = segmentLabelsOf(view);
+    expect(labels.map(label => label.textContent)).toEqual([`${NORMALIZED_A}%`, `${NORMALIZED_B}%`]);
+    expect([labels[0].classList.contains('ncua-progress-bar__label--color-blue'), labels[1].classList.contains('ncua-progress-bar__label--color-red')]).toEqual([true, true]);
+    expect(requireElement(view, '.ncua-progress-bar').classList.contains('ncua-progress-bar-bottom')).toBe(true);
+  });
+});
+describe('ProgressBar — 세그먼트 1개 (RPB-03)', () => {
+  it('RPB-03 색 fill 하나에 width·aria-valuenow 를 넣고 right 라벨에 값을 표시한다', () => {
+    const view = render({
+      label: 'right',
+      segments: [{
+        value: SEG_A,
+        color: 'green'
+      }]
+    });
+    const [fill] = fillsOf(view);
+    expect(fillsOf(view)).toHaveLength(1);
+    expect([fill.style.width, fill.getAttribute('aria-valuenow')]).toEqual([`${SEG_A}%`, String(SEG_A)]);
+    expect(fill.classList.contains('ncua-progress-bar__fill--color-green')).toBe(true);
+    expect(requireElement(view, '.ncua-progress-bar__label-right').textContent).toBe(`${SEG_A}%`);
+  });
+  it.each([['bottom', '.ncua-progress-bar__label-bottom'], ['top-float', '.ncua-progress-bar__label-top-float'], ['bottom-float', '.ncua-progress-bar__label-bottom-float']])('RPB-03 label %s 이면 SingleLabel 을 그 위치에 렌더한다', (label, selector) => {
+    const view = render({
+      label,
+      segments: [{
+        value: SEG_A,
+        color: 'green'
+      }]
+    });
+    expect(requireElement(view, selector).textContent).toBe(`${SEG_A}%`);
+    expect(view.querySelectorAll('.ncua-progress-bar__label')).toHaveLength(1);
+  });
+  it('RPB-03 세그먼트 1개 + float 라벨이면 컨테이너에 --progress-value 스타일을 준다', () => {
+    const view = render({
+      label: 'top-float',
+      segments: [{
+        value: FLOAT_VALUE
+      }]
+    });
+    expect(requireElement(view, '.ncua-progress-bar').style.getPropertyValue('--progress-value')).toBe(`${FLOAT_VALUE}%`);
+  });
+});
+// ── P1 ~ P3 ────────────────────────────────────────────
+const containerOf = view => requireElement(view, '.ncua-progress-bar');
+/** 컨테이너 직계 자식의 마지막 클래스(위치 modifier) — 라벨이 content 안/밖·앞/뒤 어디 있는지 본다 */
+const childOrderOf = view => Array.from(containerOf(view).children).map(child => child.classList[child.classList.length - 1] ?? '');
+describe('ProgressBar — 라벨 배치 (RPB-04)', () => {
+  it('RPB-04 right 라벨은 content 안 막대 뒤에 있고 컨테이너 클래스는 ncua-progress-bar-right', () => {
+    const view = render({
+      label: 'right',
+      value: VALUE
+    });
+    const content = requireElement(view, '.ncua-progress-bar__content');
+    expect(containerOf(view).classList.contains('ncua-progress-bar-right')).toBe(true);
+    expect(Array.from(content.children).map(child => child.classList[0])).toEqual(['ncua-progress-bar__bar', 'ncua-progress-bar__label']);
+    expect(requireElement(content, '.ncua-progress-bar__label-right').textContent).toBe(`${VALUE}%`);
+  });
+  it.each([['bottom', ['ncua-progress-bar__content', 'ncua-progress-bar__label-bottom']], ['top-float', ['ncua-progress-bar__label-top-float', 'ncua-progress-bar__content']], ['bottom-float', ['ncua-progress-bar__label-bottom-float', 'ncua-progress-bar__content']]])('RPB-04 %s 라벨은 content 밖 순서 %j', (label, order) => {
+    const view = render({
+      label,
+      value: VALUE
+    });
+    expect(childOrderOf(view)).toEqual(order);
+    expect(containerOf(view).classList.contains(`ncua-progress-bar-${label}`)).toBe(true);
+  });
+  it('RPB-04 float 라벨이면 컨테이너에 --progress-value 를 준다', () => {
+    const view = render({
+      label: 'bottom-float',
+      value: VALUE
+    });
+    expect(containerOf(view).style.getPropertyValue('--progress-value')).toBe(`${VALUE}%`);
+  });
+  it('RPB-04 세그먼트 1개 + bottom-float 도 라벨이 content 앞에 온다', () => {
+    const view = render({
+      label: 'bottom-float',
+      segments: [{
+        value: SEG_A
+      }]
+    });
+    expect(childOrderOf(view)).toEqual(['ncua-progress-bar__label-bottom-float', 'ncua-progress-bar__content']);
+  });
+});
+describe('ProgressBar — 0% 라벨 (RPB-05)', () => {
+  it.each([['기본(숨김)', undefined, null], ['showZeroLabel true', true, '0%']])('RPB-05 value 0 + %s → 라벨 %s', (_label, showZeroLabel, expected) => {
+    const view = render({
+      label: 'right',
+      value: 0,
+      showZeroLabel
+    });
+    expect(view.querySelector('.ncua-progress-bar__label')?.textContent ?? null).toBe(expected);
+  });
+  it('RPB-05 세그먼트 1개 값 0 도 기본은 라벨을 숨긴다', () => {
+    const view = render({
+      label: 'bottom',
+      segments: [{
+        value: 0
+      }]
+    });
+    expect(view.querySelector('.ncua-progress-bar__label')).toBeNull();
+  });
+  it('RPB-05 0 세그먼트 라벨은 기본 숨김, showZeroLabel 이면 앞 폭 합 − 1 위치에 translateX(0) 로 둔다', () => {
+    const segments = [{
+      value: SEG_A
+    }, {
+      value: 0
+    }, {
+      value: SEG_B
+    }];
+    const hidden = render({
+      segments
+    });
+    expect(segmentLabelsOf(hidden).map(label => label.textContent)).toEqual([`${NORMALIZED_A}%`, `${NORMALIZED_B}%`]);
+    const shown = render({
+      segments,
+      showZeroLabel: true
+    });
+    const zero = segmentLabelsOf(shown)[1];
+    expect([zero.textContent, zero.style.left, zero.style.transform]).toEqual(['0%', `${NORMALIZED_A - ZERO_LABEL_OFFSET}%`, 'translateX(0)']);
+  });
+  it('RPB-05 첫 세그먼트가 0 이면 시작점은 0 아래로 내려가지 않는다', () => {
+    const view = render({
+      segments: [{
+        value: 0
+      }, {
+        value: SEG_A
+      }],
+      showZeroLabel: true
+    });
+    expect(segmentLabelsOf(view)[0].style.left).toBe('0%');
+  });
+});
+describe('ProgressBar — 세그먼트 라벨 위치 (RPB-06)', () => {
+  it('RPB-06 라벨 left = 앞 세그먼트 폭 합 + 자기 폭 / 2, transform translateX(-50%)', () => {
+    const view = render({
+      segments: [{
+        value: SEG_A
+      }, {
+        value: SEG_B
+      }]
+    });
+    const labels = segmentLabelsOf(view);
+    expect(labels.map(label => [label.style.left, label.style.transform])).toEqual([[`${FIRST_LABEL_LEFT}%`, 'translateX(-50%)'], [`${SECOND_LABEL_LEFT}%`, 'translateX(-50%)']]);
+  });
+  it('RPB-06 색이 없으면 색 클래스를 붙이지 않는다', () => {
+    const view = render({
+      segments: [{
+        value: SEG_A
+      }, {
+        value: SEG_B
+      }]
+    });
+    expect(fillsOf(view).some(fill => Array.from(fill.classList).some(name => name.includes('--color-')))).toBe(false);
+  });
+});
+describe('ProgressBar — 다중 세그먼트 aria (RPB-07)', () => {
+  it('RPB-07 세그먼트 2개 이상이면 aria-valuenow 가 어디에도 없다', () => {
+    // 현재 동작 고정 — 결함 후보: #597 (다중 세그먼트에 진행 값 aria 가 없음 — vanilla ProgressBar.ts 와 같은 동작, 접근성)
+    const view = render({
+      segments: [{
+        value: SEG_A
+      }, {
+        value: SEG_B
+      }]
+    });
+    expect(view.querySelector('[aria-valuenow]')).toBeNull();
+  });
+  it.todo('RPB-07 세그먼트 2개 이상이면 role="progressbar" 와 합계 aria-valuenow 를 노출한다 (기대, #597)');
+});
+describe('ProgressBar — label 미지정 (RPB-08)', () => {
+  it('RPB-08 label 을 생략하면 컨테이너 클래스가 빈 modifier ncua-progress-bar- 를 갖고 라벨이 없다', () => {
+    // 현재 동작 고정 — 결함 후보: #597 (label 생략 시 빈 modifier "ncua-progress-bar-" 클래스가 붙음)
+    const view = render({
+      value: VALUE
+    });
+    expect(containerOf(view).classList.contains('ncua-progress-bar-')).toBe(true);
+    expect(view.querySelector('.ncua-progress-bar__label')).toBeNull();
+  });
+  it.todo('RPB-08 label 을 생략하면 빈 modifier 클래스 ncua-progress-bar- 를 붙이지 않는다 (기대, #597)');
+});