@ncds/ui-admin 1.8.24 → 1.8.25-alpha.1

package/dist/cjs/src/components/navigation/bread-crumb/__tests__/BreadCrumb.test.js

@@ -0,0 +1,207 @@
+"use strict";
+
+var _react = require("react");
+var _client = require("react-dom/client");
+var _testUtils = require("react-dom/test-utils");
+var _vitest = require("vitest");
+var _BreadCrumb = require("../BreadCrumb");
+// @vitest-environment jsdom
+
+const LIST_ITEM = '.ncua-breadcrumb__list-item';
+const HOME_MODIFIER = 'ncua-breadcrumb__list-item--home';
+const ACTIVE_MODIFIER = 'ncua-breadcrumb__list-item--active';
+const ITEM = '.ncua-breadcrumb__item';
+/** DocBreadcrumbs(유일한 사내 호출부)와 같은 형태의 입력 — AC-7 회귀 기준 */
+const DOC_ITEMS = [{
+  href: '/',
+  label: '홈'
+}, {
+  href: '/docs',
+  label: '문서'
+}, {
+  label: '현재 페이지'
+}];
+let root = null;
+let container = null;
+function 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)(_BreadCrumb.BreadCrumb, props));
+  });
+  return container;
+}
+(0, _vitest.afterEach)(() => {
+  if (root && container) {
+    (0, _testUtils.act)(() => root?.unmount());
+    container.remove();
+  }
+  root = null;
+  container = null;
+});
+const listItems = el => Array.from(el.querySelectorAll(LIST_ITEM));
+/** <li> 안에서 실제 포커스를 받는 요소(<a> 또는 <span>) */
+const itemOf = li => li.querySelector(ITEM);
+(0, _vitest.describe)('BreadCrumb — showHomeIcon 아이콘/라벨 분기', () => {
+  (0, _vitest.it)('AC-1: showHomeIcon 미지정이면 첫 항목을 홈 아이콘으로 렌더한다', () => {
+    // Given/When: showHomeIcon 을 넘기지 않고 렌더하면
+    const el = render({
+      items: DOC_ITEMS
+    });
+    // Then: 첫 항목은 --home 모디파이어를 달고 svg 를 품으며, label 텍스트는 노출되지 않는다
+    const [first] = listItems(el);
+    (0, _vitest.expect)(first.classList.contains(HOME_MODIFIER)).toBe(true);
+    (0, _vitest.expect)(first.querySelector('svg')).not.toBeNull();
+    (0, _vitest.expect)(first.textContent).not.toContain(DOC_ITEMS[0].label);
+  });
+  (0, _vitest.it)('AC-2: showHomeIcon={false} 이면 첫 항목을 label 텍스트로 렌더한다', () => {
+    // Given/When: 라벨 모드로 렌더하면
+    const el = render({
+      items: DOC_ITEMS,
+      showHomeIcon: false
+    });
+    // Then: 아이콘 대신 label 텍스트가 나오고 --home 은 붙지 않는다
+    const [first] = listItems(el);
+    (0, _vitest.expect)(first.classList.contains(HOME_MODIFIER)).toBe(false);
+    (0, _vitest.expect)(first.querySelector('svg')).toBeNull();
+    (0, _vitest.expect)(first.textContent).toBe(DOC_ITEMS[0].label);
+  });
+  (0, _vitest.it)('AC-3: 홈 아이콘 항목의 링크에 label 값이 aria-label 로 부여된다', () => {
+    // Given/When: 아이콘 모드로 렌더하면
+    const el = render({
+      items: DOC_ITEMS
+    });
+    // Then: 접근 가능한 이름은 <li> 가 아니라 포커스를 받는 <a> 에 붙는다
+    const [first] = listItems(el);
+    const anchor = itemOf(first);
+    (0, _vitest.expect)(anchor?.tagName).toBe('A');
+    (0, _vitest.expect)(anchor?.getAttribute('aria-label')).toBe(DOC_ITEMS[0].label);
+  });
+  (0, _vitest.it)('AC-4(라벨 모드): 어떤 항목에도 --home 과 aria-label 이 붙지 않는다', () => {
+    // Given/When: 라벨 모드로 렌더하면
+    const el = render({
+      items: DOC_ITEMS,
+      showHomeIcon: false
+    });
+    // Then: --home 은 전 항목에서 사라지고, 첫 항목의 aria-label 속성 자체가 출력되지 않는다
+    const items = listItems(el);
+    (0, _vitest.expect)(items.every(li => !li.classList.contains(HOME_MODIFIER))).toBe(true);
+    (0, _vitest.expect)(itemOf(items[0])?.hasAttribute('aria-label')).toBe(false);
+  });
+  (0, _vitest.it)('AC-4(아이콘 모드): --home 은 첫 항목에만 붙는다', () => {
+    // Given/When: 아이콘 모드로 렌더하면
+    const el = render({
+      items: DOC_ITEMS
+    });
+    // Then: 홈 아이콘인 첫 항목에만 붙고 나머지에는 붙지 않는다
+    const items = listItems(el);
+    (0, _vitest.expect)(items.filter(li => li.classList.contains(HOME_MODIFIER))).toHaveLength(1);
+    (0, _vitest.expect)(items[0].classList.contains(HOME_MODIFIER)).toBe(true);
+  });
+  (0, _vitest.it)('AC-5: 마지막 항목은 showHomeIcon 과 무관하게 --active 를 달고 링크가 아니다', () => {
+    // Given/When: 아이콘 모드로 렌더하면
+    const iconMode = listItems(render({
+      items: DOC_ITEMS
+    }));
+    const iconLast = iconMode[iconMode.length - 1];
+    // Then: --active 가 붙고 <span> 이라 클릭 이동이 없다
+    (0, _vitest.expect)(iconLast.classList.contains(ACTIVE_MODIFIER)).toBe(true);
+    (0, _vitest.expect)(itemOf(iconLast)?.tagName).toBe('SPAN');
+    // When: 라벨 모드로 다시 렌더해도
+    const labelMode = listItems(render({
+      items: DOC_ITEMS,
+      showHomeIcon: false
+    }));
+    const labelLast = labelMode[labelMode.length - 1];
+    // Then: 판정은 showHomeIcon 과 독립이다
+    (0, _vitest.expect)(labelLast.classList.contains(ACTIVE_MODIFIER)).toBe(true);
+    (0, _vitest.expect)(itemOf(labelLast)?.tagName).toBe('SPAN');
+  });
+  (0, _vitest.it)('AC-6: 단일 항목이면 첫 항목이 곧 마지막 항목으로 처리된다', () => {
+    // Given/When: 항목이 하나뿐인 배열을 아이콘 모드로 렌더하면
+    const single = [{
+      href: '/',
+      label: '홈'
+    }];
+    const [iconOnly] = listItems(render({
+      items: single
+    }));
+    // Then: --home 과 --active 가 동시에 붙고 링크가 아니다
+    (0, _vitest.expect)(iconOnly.classList.contains(HOME_MODIFIER)).toBe(true);
+    (0, _vitest.expect)(iconOnly.classList.contains(ACTIVE_MODIFIER)).toBe(true);
+    (0, _vitest.expect)(itemOf(iconOnly)?.tagName).toBe('SPAN');
+    (0, _vitest.expect)(iconOnly.querySelector('svg')).not.toBeNull();
+    // When: 같은 배열을 라벨 모드로 렌더하면
+    const [labelOnly] = listItems(render({
+      items: single,
+      showHomeIcon: false
+    }));
+    // Then: --active 만 붙고 label 텍스트가 나온다
+    (0, _vitest.expect)(labelOnly.classList.contains(HOME_MODIFIER)).toBe(false);
+    (0, _vitest.expect)(labelOnly.classList.contains(ACTIVE_MODIFIER)).toBe(true);
+    (0, _vitest.expect)(labelOnly.textContent).toBe(single[0].label);
+  });
+  (0, _vitest.it)('AC-7: 기존 호출부 입력의 렌더 결과는 --home·aria-label 추가분 외에 변하지 않는다', () => {
+    // Given/When: DocBreadcrumbs 와 같은 입력을 showHomeIcon 미지정으로 렌더하면
+    const el = render({
+      items: DOC_ITEMS
+    });
+    const items = listItems(el);
+    // Then: 요소 종류·텍스트·href 는 변경 전과 같고, 첫 항목 svg 도 그대로다
+    (0, _vitest.expect)(items).toHaveLength(DOC_ITEMS.length);
+    (0, _vitest.expect)(items.map(li => itemOf(li)?.tagName)).toEqual(['A', 'A', 'SPAN']);
+    (0, _vitest.expect)(items.map(li => itemOf(li)?.getAttribute('href'))).toEqual(['/', '/docs', null]);
+    (0, _vitest.expect)(items.map(li => li.textContent)).toEqual(['', DOC_ITEMS[1].label, DOC_ITEMS[2].label]);
+    (0, _vitest.expect)(items[0].querySelector('svg')).not.toBeNull();
+    // Then: <li> 클래스는 기존 베이스/--active 를 그대로 유지하고, 늘어난 것은 --home 뿐이다
+    (0, _vitest.expect)(items.map(li => Array.from(li.classList).sort())).toEqual([['ncua-breadcrumb__list-item', HOME_MODIFIER].sort(), ['ncua-breadcrumb__list-item'], ['ncua-breadcrumb__list-item', ACTIVE_MODIFIER].sort()]);
+    // Then: <a>/<span> 에 늘어난 속성은 첫 항목의 aria-label 뿐이다
+    (0, _vitest.expect)(itemOf(items[1])?.hasAttribute('aria-label')).toBe(false);
+    (0, _vitest.expect)(itemOf(items[2])?.hasAttribute('aria-label')).toBe(false);
+  });
+  (0, _vitest.it)('비링크 홈 항목에는 role="img" 를 부여해 aria-label 이 무시되지 않게 한다', () => {
+    // Given/When: 첫 항목에 href 가 없어 <span> 으로 렌더되는 입력(meta usageExamples.default 형태)을 아이콘 모드로 렌더하면
+    const el = render({
+      items: [{
+        label: '대시보드'
+      }, {
+        href: '/products',
+        label: '상품'
+      }, {
+        label: '상품 상세'
+      }]
+    });
+    // Then: generic role 의 <span> 은 aria-label 을 노출하지 못하므로 role="img" 로 이름을 살린다
+    const [first] = listItems(el);
+    const home = itemOf(first);
+    (0, _vitest.expect)(home?.tagName).toBe('SPAN');
+    (0, _vitest.expect)(home?.getAttribute('role')).toBe('img');
+    (0, _vitest.expect)(home?.getAttribute('aria-label')).toBe('대시보드');
+  });
+  (0, _vitest.it)('링크인 홈 항목에는 role 을 부여하지 않는다', () => {
+    // Given/When: 첫 항목에 href 가 있어 <a> 로 렌더되는 입력을 아이콘 모드로 렌더하면
+    const el = render({
+      items: DOC_ITEMS
+    });
+    // Then: 링크는 이미 접근 가능한 이름을 지원하므로 role 을 덧씌우지 않는다 (ADR-3)
+    const items = listItems(el);
+    const home = itemOf(items[0]);
+    (0, _vitest.expect)(home?.tagName).toBe('A');
+    (0, _vitest.expect)(home?.hasAttribute('role')).toBe(false);
+    // Then: 홈이 아닌 항목에도 role 은 출력되지 않는다
+    (0, _vitest.expect)(items.slice(1).every(li => !itemOf(li)?.hasAttribute('role'))).toBe(true);
+  });
+  (0, _vitest.it)('경계: items 가 빈 배열이면 아무것도 렌더하지 않는다', () => {
+    // Given/When: 빈 배열을 양쪽 모드로 렌더하면
+    const el = render({
+      items: [],
+      showHomeIcon: false
+    });
+    // Then: <nav> 자체가 만들어지지 않는다 (기존 동작 유지)
+    (0, _vitest.expect)(el.querySelector('.ncua-breadcrumb')).toBeNull();
+    (0, _vitest.expect)(el.innerHTML).toBe('');
+  });
+});