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

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

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

package/dist/temp/src/components/navigation/context-tab/__tests__/useContextTabScroll.test.d.ts

@@ -0,0 +1 @@
+export {};