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

package/dist/cjs/src/components/navigation/context-tab/__tests__/ContextTab.test.js

@@ -0,0 +1,616 @@
+"use strict";
+
+var _react = require("react");
+var _client = require("react-dom/client");
+var _testUtils = require("react-dom/test-utils");
+var _vitest = require("vitest");
+var _ContextTab = require("../ContextTab");
+// @vitest-environment jsdom
+//
+// ContextTab (React) 위험 경로 — 위험 목록표 CT-xx.
+// 가로 스크롤 에지 계산·자동 스크롤 자체는 useContextTabScroll.test.ts(CS-xx)가 덮고,
+// 여기서는 이전·다음 버튼이 훅에 연결돼 있는지만 확인한다 (CT-06).
+// jsdom 에는 Element 의 scrollTo·scrollBy 와 ResizeObserver 가 없어 매 테스트마다 붙이고 걷어낸다.
+
+globalThis.IS_REACT_ACT_ENVIRONMENT = true;
+const BAR_SCROLL_LEFT = 100;
+const BAR_CLIENT_WIDTH = 300;
+const BAR_SCROLL_WIDTH = 1000;
+const VISIBLE_TABS_DEFAULT = 7;
+const FEW_VISIBLE_TABS = 3;
+const ODD_MENU_COUNT = 5;
+const MENUS = [{
+  id: 'order',
+  label: '주문'
+}, {
+  id: 'claim',
+  label: '클레임'
+}, {
+  id: 'settle',
+  label: '정산'
+}, {
+  id: 'stats',
+  label: '통계'
+}];
+class ResizeObserverStub {
+  observe() {
+    // 에지 재계산은 useContextTabScroll.test.ts 가 검증한다.
+  }
+  unobserve() {
+    // 사용하지 않는다.
+  }
+  disconnect() {
+    // 사용하지 않는다.
+  }
+}
+const SCROLL_METHODS = ['scrollTo', 'scrollBy'];
+let scrollBy;
+let root = null;
+let container = null;
+(0, _vitest.beforeEach)(() => {
+  scrollBy = _vitest.vi.fn();
+  Object.defineProperty(HTMLElement.prototype, 'scrollTo', {
+    configurable: true,
+    writable: true,
+    value: _vitest.vi.fn()
+  });
+  Object.defineProperty(HTMLElement.prototype, 'scrollBy', {
+    configurable: true,
+    writable: true,
+    value: scrollBy
+  });
+  _vitest.vi.stubGlobal('ResizeObserver', ResizeObserverStub);
+});
+(0, _vitest.afterEach)(() => {
+  if (root) {
+    (0, _testUtils.act)(() => {
+      root?.unmount();
+    });
+  }
+  root = null;
+  container = null;
+  document.body.innerHTML = '';
+  for (const method of SCROLL_METHODS) {
+    delete HTMLElement.prototype[method];
+  }
+  _vitest.vi.restoreAllMocks();
+  _vitest.vi.unstubAllGlobals();
+});
+const 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)(_ContextTab.ContextTab, props));
+  });
+  return container;
+};
+const tabs = view => Array.from(view.querySelectorAll('.ncua-context-tab__tab'));
+const options = view => Array.from(view.querySelectorAll('.ncua-context-tab__option'));
+const trigger = view => view.querySelector('.ncua-context-tab__control--menu');
+const panel = view => view.querySelector('.ncua-context-tab__panel');
+const bar = view => view.querySelector('.ncua-context-tab__bar');
+const prevButton = view => view.querySelector('.ncua-context-tab__control--prev');
+const nextButton = view => view.querySelector('.ncua-context-tab__control--next');
+const click = element => {
+  (0, _testUtils.act)(() => {
+    element.click();
+  });
+};
+const mouseDown = target => {
+  (0, _testUtils.act)(() => {
+    target.dispatchEvent(new MouseEvent('mousedown', {
+      bubbles: true
+    }));
+  });
+};
+const keyDown = key => {
+  (0, _testUtils.act)(() => {
+    document.dispatchEvent(new KeyboardEvent('keydown', {
+      key,
+      bubbles: true
+    }));
+  });
+};
+const openPanel = view => {
+  click(trigger(view));
+};
+const hasClassName = (element, className) => element?.classList.contains(className) ?? false;
+/** jsdom 은 레이아웃을 계산하지 않으므로 측정 속성을 bar 인스턴스에 직접 정의한 뒤 scroll 로 재계산시킨다. */
+const scrollBarTo = (view, metrics) => {
+  for (const [key, value] of Object.entries(metrics)) {
+    Object.defineProperty(bar(view), key, {
+      configurable: true,
+      writable: true,
+      value
+    });
+  }
+  (0, _testUtils.act)(() => {
+    bar(view).dispatchEvent(new Event('scroll'));
+  });
+};
+const MIDDLE_METRICS = {
+  scrollLeft: BAR_SCROLL_LEFT,
+  clientWidth: BAR_CLIENT_WIDTH,
+  scrollWidth: BAR_SCROLL_WIDTH
+};
+const withItem = (id, patch) => MENUS.map(item => item.id === id ? {
+  ...item,
+  ...patch
+} : item);
+const tabOf = (view, label) => tabs(view).find(tab => tab.querySelector('.ncua-context-tab__tab-label')?.textContent === label);
+const optionOf = (view, label) => options(view).find(option => option.querySelector('.ncua-context-tab__option-label')?.textContent === label);
+const rootOf = view => view.querySelector('.ncua-context-tab');
+(0, _vitest.describe)('ContextTab — 탭 선택 (CT-01)', () => {
+  (0, _vitest.it)('CT-01 탭을 click 하면 그 탭의 id 로 onTabChange 를 호출한다', () => {
+    const onTabChange = _vitest.vi.fn();
+    const view = render({
+      menus: MENUS,
+      activeTab: 'order',
+      onTabChange
+    });
+    click(tabs(view)[1]);
+    (0, _vitest.expect)(onTabChange).toHaveBeenCalledWith('claim');
+  });
+  (0, _vitest.it)('CT-01 이미 활성인 탭을 click 해도 onTabChange 를 호출한다', () => {
+    const onTabChange = _vitest.vi.fn();
+    const view = render({
+      menus: MENUS,
+      activeTab: 'order',
+      onTabChange
+    });
+    click(tabs(view)[0]);
+    (0, _vitest.expect)(onTabChange).toHaveBeenCalledWith('order');
+  });
+  (0, _vitest.it)('CT-01 onTabChange 가 없어도 탭 click 에 예외가 나지 않는다', () => {
+    const view = render({
+      menus: MENUS
+    });
+    (0, _vitest.expect)(() => click(tabs(view)[1])).not.toThrow();
+  });
+  (0, _vitest.it)('CT-01 disabled 탭은 disabled 속성이 붙어 click 해도 onTabChange 를 호출하지 않는다', () => {
+    const onTabChange = _vitest.vi.fn();
+    const view = render({
+      menus: withItem('claim', {
+        disabled: true
+      }),
+      onTabChange
+    });
+    const disabledTab = tabs(view)[1];
+    click(disabledTab);
+    (0, _vitest.expect)(disabledTab.disabled).toBe(true);
+    (0, _vitest.expect)(onTabChange).not.toHaveBeenCalled();
+  });
+});
+(0, _vitest.describe)('ContextTab — 노출 조건 (CT-02)', () => {
+  (0, _vitest.it)('CT-02 menus 를 생략하면(기본값 []) 아무것도 렌더하지 않는다', () => {
+    const view = render({});
+    (0, _vitest.expect)(view.innerHTML).toBe('');
+  });
+  (0, _vitest.it)('CT-02 menus 가 1개면 아무것도 렌더하지 않는다', () => {
+    const view = render({
+      menus: MENUS.slice(0, 1)
+    });
+    (0, _vitest.expect)(rootOf(view)).toBeNull();
+  });
+  (0, _vitest.it)('CT-02 menus 가 2개부터 탭 바를 렌더한다', () => {
+    const view = render({
+      menus: MENUS.slice(0, 2)
+    });
+    (0, _vitest.expect)(rootOf(view)).not.toBeNull();
+    (0, _vitest.expect)(tabs(view)).toHaveLength(2);
+  });
+});
+(0, _vitest.describe)('ContextTab — 메뉴 패널 열고 닫기 (CT-03)', () => {
+  (0, _vitest.it)('CT-03 트리거를 click 하면 aria-expanded 가 true 가 되고 role=menu 패널을 연다', () => {
+    const view = render({
+      menus: MENUS
+    });
+    (0, _vitest.expect)(trigger(view).getAttribute('aria-expanded')).toBe('false');
+    (0, _vitest.expect)(panel(view)).toBeNull();
+    openPanel(view);
+    (0, _vitest.expect)(trigger(view).getAttribute('aria-expanded')).toBe('true');
+    (0, _vitest.expect)(trigger(view).getAttribute('aria-haspopup')).toBe('menu');
+    (0, _vitest.expect)(panel(view)?.getAttribute('role')).toBe('menu');
+    (0, _vitest.expect)(options(view)).toHaveLength(MENUS.length);
+  });
+  (0, _vitest.it)('CT-03 패널이 열리면 첫 번째 비활성 아닌 옵션으로 포커스를 옮긴다', () => {
+    const view = render({
+      menus: MENUS
+    });
+    openPanel(view);
+    (0, _vitest.expect)(document.activeElement).toBe(options(view)[0]);
+  });
+  (0, _vitest.it)('CT-03 열린 상태에서 트리거를 다시 click 하면 패널을 닫는다', () => {
+    const view = render({
+      menus: MENUS
+    });
+    openPanel(view);
+    click(trigger(view));
+    (0, _vitest.expect)(trigger(view).getAttribute('aria-expanded')).toBe('false');
+    (0, _vitest.expect)(panel(view)).toBeNull();
+  });
+});
+(0, _vitest.describe)('ContextTab — 옵션 선택 (CT-04)', () => {
+  (0, _vitest.it)('CT-04 옵션을 click 하면 onTabChange(id) 를 호출하고 패널을 닫은 뒤 트리거로 포커스를 돌려준다', () => {
+    const onTabChange = _vitest.vi.fn();
+    const view = render({
+      menus: MENUS,
+      activeTab: 'order',
+      onTabChange
+    });
+    openPanel(view);
+    click(optionOf(view, '정산'));
+    (0, _vitest.expect)(onTabChange).toHaveBeenCalledWith('settle');
+    (0, _vitest.expect)(panel(view)).toBeNull();
+    (0, _vitest.expect)(trigger(view).getAttribute('aria-expanded')).toBe('false');
+    (0, _vitest.expect)(document.activeElement).toBe(trigger(view));
+  });
+  (0, _vitest.it)('CT-04 onTabChange 가 없어도 옵션 click 으로 패널이 닫힌다', () => {
+    const view = render({
+      menus: MENUS
+    });
+    openPanel(view);
+    click(options(view)[1]);
+    (0, _vitest.expect)(panel(view)).toBeNull();
+  });
+});
+(0, _vitest.describe)('ContextTab — 패널 바깥 클릭·Escape 로 닫기 (CT-05)', () => {
+  (0, _vitest.it)('CT-05 컨테이너 밖에서 mousedown 하면 닫고 바깥 요소의 포커스를 트리거로 가져오지 않는다', () => {
+    const view = render({
+      menus: MENUS
+    });
+    const outside = document.createElement('button');
+    document.body.appendChild(outside);
+    openPanel(view);
+    outside.focus();
+    mouseDown(outside);
+    (0, _vitest.expect)(panel(view)).toBeNull();
+    (0, _vitest.expect)(document.activeElement).toBe(outside);
+  });
+  (0, _vitest.it)('CT-05 컨테이너 안쪽(탭 바)에서 mousedown 하면 열린 상태를 유지한다', () => {
+    const view = render({
+      menus: MENUS
+    });
+    openPanel(view);
+    mouseDown(bar(view));
+    (0, _vitest.expect)(panel(view)).not.toBeNull();
+  });
+  (0, _vitest.it)('CT-05 Escape 를 누르면 닫고 트리거로 포커스를 돌려준다', () => {
+    const view = render({
+      menus: MENUS
+    });
+    openPanel(view);
+    keyDown('Escape');
+    (0, _vitest.expect)(panel(view)).toBeNull();
+    (0, _vitest.expect)(document.activeElement).toBe(trigger(view));
+  });
+  (0, _vitest.it)('CT-05 Escape 가 아닌 키는 패널을 닫지 않는다', () => {
+    const view = render({
+      menus: MENUS
+    });
+    openPanel(view);
+    keyDown('Enter');
+    (0, _vitest.expect)(panel(view)).not.toBeNull();
+  });
+  (0, _vitest.it)('CT-05 닫힌 상태에서는 document 에 mousedown·keydown 리스너를 걸지 않는다', () => {
+    const addListener = _vitest.vi.spyOn(document, 'addEventListener');
+    render({
+      menus: MENUS
+    });
+    const eventTypes = addListener.mock.calls.map(_ref => {
+      let [type] = _ref;
+      return type;
+    });
+    (0, _vitest.expect)(eventTypes).not.toContain('mousedown');
+    (0, _vitest.expect)(eventTypes).not.toContain('keydown');
+  });
+  (0, _vitest.it)('CT-05 패널이 닫히면 열 때 건 document 리스너를 같은 핸들러로 해제한다', () => {
+    const addListener = _vitest.vi.spyOn(document, 'addEventListener');
+    const removeListener = _vitest.vi.spyOn(document, 'removeEventListener');
+    const view = render({
+      menus: MENUS
+    });
+    openPanel(view);
+    const handlerOf = type => addListener.mock.calls.find(_ref2 => {
+      let [eventType] = _ref2;
+      return eventType === type;
+    })?.[1];
+    const pointerHandler = handlerOf('mousedown');
+    const keyHandler = handlerOf('keydown');
+    keyDown('Escape');
+    (0, _vitest.expect)(pointerHandler).toBeTypeOf('function');
+    (0, _vitest.expect)(keyHandler).toBeTypeOf('function');
+    (0, _vitest.expect)(removeListener).toHaveBeenCalledWith('mousedown', pointerHandler);
+    (0, _vitest.expect)(removeListener).toHaveBeenCalledWith('keydown', keyHandler);
+  });
+  (0, _vitest.it)('CT-05 열린 채 언마운트하면 document 리스너를 해제한다', () => {
+    const addListener = _vitest.vi.spyOn(document, 'addEventListener');
+    const removeListener = _vitest.vi.spyOn(document, 'removeEventListener');
+    const view = render({
+      menus: MENUS
+    });
+    openPanel(view);
+    const pointerHandler = addListener.mock.calls.find(_ref3 => {
+      let [type] = _ref3;
+      return type === 'mousedown';
+    })?.[1];
+    (0, _testUtils.act)(() => {
+      root?.unmount();
+    });
+    root = null;
+    (0, _vitest.expect)(pointerHandler).toBeTypeOf('function');
+    (0, _vitest.expect)(removeListener).toHaveBeenCalledWith('mousedown', pointerHandler);
+  });
+});
+(0, _vitest.describe)('ContextTab — 이전·다음 버튼 (CT-06)', () => {
+  (0, _vitest.it)('CT-06 jsdom 초기 측정값(0)에서는 처음이자 끝이라 이전·다음 버튼이 모두 disabled 다', () => {
+    const view = render({
+      menus: MENUS
+    });
+    (0, _vitest.expect)(prevButton(view).disabled).toBe(true);
+    (0, _vitest.expect)(nextButton(view).disabled).toBe(true);
+  });
+  (0, _vitest.it)('CT-06 스크롤 위치가 중간이 되면 두 버튼이 활성화된다', () => {
+    const view = render({
+      menus: MENUS
+    });
+    scrollBarTo(view, MIDDLE_METRICS);
+    (0, _vitest.expect)(prevButton(view).disabled).toBe(false);
+    (0, _vitest.expect)(nextButton(view).disabled).toBe(false);
+  });
+  (0, _vitest.it)('CT-06 다음 버튼은 보이는 폭만큼 오른쪽, 이전 버튼은 왼쪽으로 scrollBy 한다', () => {
+    const view = render({
+      menus: MENUS
+    });
+    scrollBarTo(view, MIDDLE_METRICS);
+    click(nextButton(view));
+    (0, _vitest.expect)(scrollBy).toHaveBeenLastCalledWith({
+      left: BAR_CLIENT_WIDTH,
+      behavior: 'smooth'
+    });
+    click(prevButton(view));
+    (0, _vitest.expect)(scrollBy).toHaveBeenLastCalledWith({
+      left: -BAR_CLIENT_WIDTH,
+      behavior: 'smooth'
+    });
+  });
+});
+(0, _vitest.describe)('ContextTab — 활성 표시 (CT-07)', () => {
+  (0, _vitest.it)('CT-07 activeTab 인 탭만 aria-selected=true·is-active 다', () => {
+    const view = render({
+      menus: MENUS,
+      activeTab: 'claim'
+    });
+    (0, _vitest.expect)(tabOf(view, '클레임').getAttribute('aria-selected')).toBe('true');
+    (0, _vitest.expect)(hasClassName(tabOf(view, '클레임'), 'is-active')).toBe(true);
+    (0, _vitest.expect)(tabOf(view, '주문').getAttribute('aria-selected')).toBe('false');
+    (0, _vitest.expect)(hasClassName(tabOf(view, '주문'), 'is-active')).toBe(false);
+  });
+  (0, _vitest.it)('CT-07 activeTab 인 옵션만 aria-current·is-active·체크 아이콘을 가진다', () => {
+    const view = render({
+      menus: MENUS,
+      activeTab: 'claim'
+    });
+    openPanel(view);
+    const active = optionOf(view, '클레임');
+    const inactive = optionOf(view, '주문');
+    (0, _vitest.expect)(active.getAttribute('aria-current')).toBe('true');
+    (0, _vitest.expect)(hasClassName(active, 'is-active')).toBe(true);
+    (0, _vitest.expect)(active.querySelector('.ncua-context-tab__option-check')).not.toBeNull();
+    (0, _vitest.expect)(inactive.hasAttribute('aria-current')).toBe(false);
+    (0, _vitest.expect)(hasClassName(inactive, 'is-active')).toBe(false);
+    (0, _vitest.expect)(inactive.querySelector('.ncua-context-tab__option-check')).toBeNull();
+  });
+  (0, _vitest.it)('CT-07 activeTab 이 없으면 탭·옵션 모두 비활성이다', () => {
+    const view = render({
+      menus: MENUS
+    });
+    openPanel(view);
+    (0, _vitest.expect)(tabs(view).map(tab => tab.getAttribute('aria-selected'))).toEqual(MENUS.map(() => 'false'));
+    (0, _vitest.expect)(view.querySelector('.is-active')).toBeNull();
+    (0, _vitest.expect)(view.querySelector('.ncua-context-tab__option-check')).toBeNull();
+  });
+});
+(0, _vitest.describe)('ContextTab — 배지·접근성 이름 (CT-08)', () => {
+  (0, _vitest.it)('CT-08 isNew 면 탭·옵션에 new-badge 를 붙이고 aria-label 을 "{label}, 신규" 로 합성한다', () => {
+    const view = render({
+      menus: withItem('settle', {
+        isNew: true
+      })
+    });
+    openPanel(view);
+    const tab = tabOf(view, '정산');
+    const option = optionOf(view, '정산');
+    (0, _vitest.expect)(tab.getAttribute('aria-label')).toBe('정산, 신규');
+    (0, _vitest.expect)(tab.querySelector('.ncua-badge--new-badge')).not.toBeNull();
+    (0, _vitest.expect)(option.getAttribute('aria-label')).toBe('정산, 신규');
+    (0, _vitest.expect)(option.querySelector('.ncua-badge--new-badge')).not.toBeNull();
+  });
+  (0, _vitest.it)('CT-08 badgeLabel 이면 그 텍스트로 pill-outline 배지를 붙이고 aria-label 은 두지 않는다', () => {
+    const view = render({
+      menus: withItem('settle', {
+        badgeLabel: '베타'
+      })
+    });
+    const tab = tabOf(view, '정산');
+    (0, _vitest.expect)(tab.querySelector('.ncua-badge--pill-outline .ncua-badge__label')?.textContent).toBe('베타');
+    (0, _vitest.expect)(tab.hasAttribute('aria-label')).toBe(false);
+  });
+  (0, _vitest.it)('CT-08 isNew 와 badgeLabel 이 함께 있으면 new-badge 만 붙인다', () => {
+    const view = render({
+      menus: withItem('settle', {
+        isNew: true,
+        badgeLabel: '베타'
+      })
+    });
+    const tab = tabOf(view, '정산');
+    (0, _vitest.expect)(tab.querySelector('.ncua-badge--new-badge')).not.toBeNull();
+    (0, _vitest.expect)(tab.querySelector('.ncua-badge--pill-outline')).toBeNull();
+  });
+  (0, _vitest.it)('CT-08 둘 다 없으면 배지도 aria-label 도 없다', () => {
+    const view = render({
+      menus: MENUS
+    });
+    openPanel(view);
+    (0, _vitest.expect)(view.querySelector('.ncua-badge')).toBeNull();
+    (0, _vitest.expect)(tabOf(view, '주문').hasAttribute('aria-label')).toBe(false);
+    (0, _vitest.expect)(optionOf(view, '주문').hasAttribute('aria-label')).toBe(false);
+  });
+});
+(0, _vitest.describe)('ContextTab — disabled 항목 (CT-09)', () => {
+  (0, _vitest.it)('CT-09 disabled 탭은 aria-disabled·is-disabled·disabled 를 갖고, 아닌 탭에는 없다', () => {
+    const view = render({
+      menus: withItem('claim', {
+        disabled: true
+      })
+    });
+    const disabledTab = tabOf(view, '클레임');
+    const enabledTab = tabOf(view, '주문');
+    (0, _vitest.expect)(disabledTab.getAttribute('aria-disabled')).toBe('true');
+    (0, _vitest.expect)(hasClassName(disabledTab, 'is-disabled')).toBe(true);
+    (0, _vitest.expect)(disabledTab.disabled).toBe(true);
+    (0, _vitest.expect)(enabledTab.hasAttribute('aria-disabled')).toBe(false);
+    (0, _vitest.expect)(hasClassName(enabledTab, 'is-disabled')).toBe(false);
+  });
+  (0, _vitest.it)('CT-09 disabled 옵션은 disabled·aria-disabled 이고 click 해도 onTabChange 없이 패널이 열려 있다', () => {
+    const onTabChange = _vitest.vi.fn();
+    const view = render({
+      menus: withItem('claim', {
+        disabled: true
+      }),
+      onTabChange
+    });
+    openPanel(view);
+    const disabledOption = optionOf(view, '클레임');
+    click(disabledOption);
+    (0, _vitest.expect)(disabledOption.disabled).toBe(true);
+    (0, _vitest.expect)(disabledOption.getAttribute('aria-disabled')).toBe('true');
+    (0, _vitest.expect)(onTabChange).not.toHaveBeenCalled();
+    (0, _vitest.expect)(panel(view)).not.toBeNull();
+  });
+  (0, _vitest.it)('CT-09 앞 옵션들이 disabled 면 패널 첫 포커스는 disabled 를 건너뛴 옵션으로 간다', () => {
+    const menus = MENUS.map(item => item.id === 'order' || item.id === 'claim' ? {
+      ...item,
+      disabled: true
+    } : item);
+    const view = render({
+      menus
+    });
+    openPanel(view);
+    (0, _vitest.expect)(document.activeElement).toBe(optionOf(view, '정산'));
+  });
+});
+(0, _vitest.describe)('ContextTab — 패널 2열 배치 (CT-10)', () => {
+  (0, _vitest.it)('CT-10 짝수 인덱스는 왼쪽 열, 홀수 인덱스는 오른쪽 열에 row-major 순서로 놓는다', () => {
+    const menus = Array.from({
+      length: ODD_MENU_COUNT
+    }, (_, index) => ({
+      id: `c${index}`,
+      label: `항목${index}`
+    }));
+    const view = render({
+      menus
+    });
+    openPanel(view);
+    const columns = Array.from(view.querySelectorAll('.ncua-context-tab__panel-column')).map(column => Array.from(column.querySelectorAll('.ncua-context-tab__option-label')).map(label => label.textContent));
+    (0, _vitest.expect)(columns).toEqual([['항목0', '항목2', '항목4'], ['항목1', '항목3']]);
+  });
+});
+(0, _vitest.describe)('ContextTab — 탭 바 채움·노출 수·className (CT-11)', () => {
+  (0, _vitest.it)('CT-11 menus 가 visibleTabsCount(기본 7) 이하면 bar 에 is-fill, CSS 변수는 7 이다', () => {
+    const view = render({
+      menus: MENUS
+    });
+    (0, _vitest.expect)(hasClassName(bar(view), 'is-fill')).toBe(true);
+    (0, _vitest.expect)(bar(view).style.getPropertyValue('--ncua-context-tab-visible')).toBe(String(VISIBLE_TABS_DEFAULT));
+  });
+  (0, _vitest.it)('CT-11 menus 수가 visibleTabsCount 와 같아도 is-fill 이다', () => {
+    const view = render({
+      menus: MENUS,
+      visibleTabsCount: MENUS.length
+    });
+    (0, _vitest.expect)(hasClassName(bar(view), 'is-fill')).toBe(true);
+  });
+  (0, _vitest.it)('CT-11 menus 가 visibleTabsCount 를 넘으면 is-fill 이 없고 CSS 변수는 그 값이다', () => {
+    const view = render({
+      menus: MENUS,
+      visibleTabsCount: FEW_VISIBLE_TABS
+    });
+    (0, _vitest.expect)(hasClassName(bar(view), 'is-fill')).toBe(false);
+    (0, _vitest.expect)(bar(view).style.getPropertyValue('--ncua-context-tab-visible')).toBe(String(FEW_VISIBLE_TABS));
+  });
+  (0, _vitest.it)('CT-11 className 은 루트에 기본 클래스와 함께 병합된다', () => {
+    const view = render({
+      menus: MENUS,
+      className: 'page-context'
+    });
+    const element = rootOf(view);
+    (0, _vitest.expect)(hasClassName(element, 'ncua-context-tab')).toBe(true);
+    (0, _vitest.expect)(hasClassName(element, 'page-context')).toBe(true);
+  });
+});
+(0, _vitest.describe)('ContextTab — 모든 옵션 disabled·title (CT-12)', () => {
+  (0, _vitest.it)('CT-12 옵션이 모두 disabled 면 패널이 열려도 포커스를 옮기지 않는다', () => {
+    const view = render({
+      menus: MENUS.map(item => ({
+        ...item,
+        disabled: true
+      }))
+    });
+    trigger(view).focus();
+    openPanel(view);
+    (0, _vitest.expect)(panel(view)).not.toBeNull();
+    (0, _vitest.expect)(document.activeElement).toBe(trigger(view));
+  });
+  (0, _vitest.it)('CT-12 탭 버튼과 옵션 라벨에 label 을 title 로 둔다', () => {
+    const view = render({
+      menus: MENUS
+    });
+    openPanel(view);
+    (0, _vitest.expect)(tabOf(view, '통계').title).toBe('통계');
+    (0, _vitest.expect)(optionOf(view, '통계').querySelector('.ncua-context-tab__option-label')?.title).toBe('통계');
+  });
+});
+(0, _vitest.describe)('ContextTab — menus 축소 중 열림 상태 (CT-13)', () => {
+  (0, _vitest.it)('CT-13 menus 가 2개 미만으로 줄었다 돌아오면 패널이 열린 채 다시 나타난다 (포커스는 옮기지 않음)', () => {
+    // 현재 동작 고정 — 결함 후보: #593 (null early return 이 state·effect 뒤라 isOpen 이 유지됨)
+    const view = render({
+      menus: MENUS
+    });
+    const outside = document.createElement('button');
+    document.body.appendChild(outside);
+    openPanel(view);
+    render({
+      menus: MENUS.slice(0, 1)
+    });
+    (0, _vitest.expect)(rootOf(view)).toBeNull();
+    // containerRef 가 null 이라 바깥 mousedown 으로도 닫히지 않는다.
+    mouseDown(outside);
+    outside.focus();
+    render({
+      menus: MENUS
+    });
+    (0, _vitest.expect)(panel(view)).not.toBeNull();
+    (0, _vitest.expect)(trigger(view).getAttribute('aria-expanded')).toBe('true');
+    // 포커스 effect 는 isOpen 변화에만 반응하므로 다시 나타난 패널로 포커스가 가지 않는다.
+    (0, _vitest.expect)(document.activeElement).toBe(outside);
+  });
+  _vitest.it.todo('CT-13 menus 가 2개 미만이 되면 패널을 닫아, 다시 2개 이상이 돼도 닫힌 상태로 나타난다 (#593)');
+});
+(0, _vitest.describe)('ContextTab — 패널 첫 포커스와 읽기 순서 (CT-14)', () => {
+  (0, _vitest.it)('CT-14 첫 옵션만 disabled 면 읽기 순서상 다음(클레임)이 아니라 DOM 순서상 다음(왼쪽 열 정산)으로 포커스한다', () => {
+    // 현재 동작 고정 — 결함 후보: #593 (패널 DOM 이 열 우선이라 포커스·Tab 순서가 row-major 읽기 순서와 다름)
+    const view = render({
+      menus: withItem('order', {
+        disabled: true
+      })
+    });
+    openPanel(view);
+    (0, _vitest.expect)(document.activeElement).toBe(optionOf(view, '정산'));
+    (0, _vitest.expect)(document.activeElement).not.toBe(optionOf(view, '클레임'));
+  });
+  _vitest.it.todo('CT-14 패널 첫 포커스와 Tab 이동 순서가 row-major 읽기 순서(0 → 1 → 2 …)를 따른다 (#593)');
+});