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

package/dist/temp/src/components/navigation/pagination/__tests__/Pagination.navigation.test.js

@@ -0,0 +1,265 @@
+// @vitest-environment jsdom
+import { ArrowLeft, ArrowRight, 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, beforeEach, describe, expect, it, vi } from 'vitest';
+import { COLOR } from '../../../../../constant/color';
+import { Pagination } from '../Pagination';
+// React 18에서 act() 사용 시 필요한 플래그 (미설정 시 console.error 경고 발생)
+globalThis.IS_REACT_ACT_ENVIRONMENT = true;
+const ITEM_COUNT_PER_PAGE = 10;
+const TOTAL_COUNT = 250;
+const TOTAL_PAGE = TOTAL_COUNT / ITEM_COUNT_PER_PAGE;
+/** 그룹 크기 — 기본값 10 과 다르게 골라 그룹 계산이 기본값에 기대지 않게 한다 */
+const PAGE_GROUP_SIZE = 5;
+const FIRST_PAGE = 1;
+/** 첫 그룹(1~5) 안의 페이지 */
+const PAGE_IN_FIRST_GROUP = 3;
+const SECOND_GROUP_START = FIRST_PAGE + PAGE_GROUP_SIZE;
+const THIRD_GROUP_START = SECOND_GROUP_START + PAGE_GROUP_SIZE;
+/** 앞뒤 그룹이 있어 이전 · 다음이 모두 활성인 페이지 */
+const PAGE_IN_THIRD_GROUP = THIRD_GROUP_START + 1;
+const LAST_PAGE_OF_SECOND_GROUP = THIRD_GROUP_START - 1;
+const groupPages = (start) => Array.from({ length: PAGE_GROUP_SIZE }, (_, i) => start + i);
+const SECOND_GROUP_PAGES = groupPages(SECOND_GROUP_START);
+const THIRD_GROUP_PAGES = groupPages(THIRD_GROUP_START);
+let root = null;
+let container = null;
+const render = (props = {}) => {
+    if (!container) {
+        container = document.createElement('div');
+        document.body.appendChild(container);
+        root = createRoot(container);
+    }
+    act(() => {
+        root?.render(createElement(Pagination, {
+            totalCount: TOTAL_COUNT,
+            itemCountPerPage: ITEM_COUNT_PER_PAGE,
+            pageCount: PAGE_GROUP_SIZE,
+            currentPage: PAGE_IN_FIRST_GROUP,
+            ...props,
+        }));
+    });
+    return container;
+};
+/** React 이벤트 핸들러 예외는 click() 밖으로 던져지지 않고 window error 로만 보고된다 */
+let windowErrors = [];
+const collectWindowError = (event) => {
+    windowErrors.push(event.error);
+    event.preventDefault();
+};
+beforeEach(() => {
+    windowErrors = [];
+    window.addEventListener('error', collectWindowError);
+});
+afterEach(() => {
+    window.removeEventListener('error', collectWindowError);
+    if (root && container) {
+        act(() => root?.unmount());
+        container.remove();
+    }
+    root = null;
+    container = null;
+});
+const mustQuery = (rootEl, selector) => {
+    const found = rootEl.querySelector(selector);
+    if (!found)
+        throw new Error(`요소를 찾을 수 없습니다: ${selector}`);
+    return found;
+};
+const pageButton = (el, page) => {
+    const found = Array.from(el.querySelectorAll('.ncua-pagination__page-num')).find((button) => button.textContent === String(page));
+    if (!found)
+        throw new Error(`페이지 버튼을 찾을 수 없습니다: ${page}`);
+    return found;
+};
+const pageNums = (el) => Array.from(el.querySelectorAll('.ncua-pagination__page-num')).map((button) => Number(button.textContent));
+const click = (element) => act(() => element.click());
+describe('Pagination — 페이지 번호 클릭 (PGN-01)', () => {
+    it('PGN-01 페이지 번호를 클릭하면 onPageChange 로 그 번호를 알린다', () => {
+        // Given: 첫 그룹을 보는 페이지네이션
+        const onPageChange = vi.fn();
+        const el = render({ onPageChange });
+        // When: 4 페이지 버튼을 클릭한다
+        const target = PAGE_IN_FIRST_GROUP + 1;
+        click(pageButton(el, target));
+        // Then: 그 번호로 알린다
+        expect(onPageChange).toHaveBeenCalledWith(target);
+    });
+    it('PGN-01 onPageChange 가 없으면 페이지 번호를 클릭해도 예외가 나지 않는다', () => {
+        // Given: onPageChange 없이 렌더
+        const el = render();
+        // When: 페이지 버튼을 클릭한다
+        click(pageButton(el, PAGE_IN_FIRST_GROUP + 1));
+        // Then: window error 가 없다
+        expect(windowErrors).toEqual([]);
+    });
+    it('PGN-01 (대조) onPageChange 가 던지면 window error 로 수집된다 — 위 단언이 공허하지 않음', () => {
+        // Given: 던지는 onPageChange
+        const el = render({
+            onPageChange: () => {
+                throw new Error('의도한 예외');
+            },
+        });
+        // When: 페이지 버튼을 클릭한다
+        click(pageButton(el, PAGE_IN_FIRST_GROUP + 1));
+        // Then: 수집 배열에 예외가 남는다
+        expect(windowErrors.length).toBeGreaterThan(0);
+    });
+});
+describe('Pagination — pc 그룹 이동 (PGN-02)', () => {
+    it.each([
+        ['처음', '.ncua-pagination__first', FIRST_PAGE],
+        ['이전 그룹', '.ncua-pagination__before', SECOND_GROUP_START],
+        ['다음 그룹', '.ncua-pagination__next', THIRD_GROUP_START + PAGE_GROUP_SIZE],
+        ['마지막', '.ncua-pagination__last', TOTAL_PAGE],
+    ])('PGN-02 세 번째 그룹에서 %s 버튼(%s)은 onPageChange 로 %s 번호를 알린다', (_name, selector, expected) => {
+        // Given: 세 번째 그룹 첫 페이지로 렌더한 페이지네이션
+        const onPageChange = vi.fn();
+        const el = render({ onPageChange, currentPage: THIRD_GROUP_START });
+        // When: 내비 버튼을 클릭한다
+        click(mustQuery(el, selector));
+        // Then: 그 번호로 알린다
+        expect(onPageChange).toHaveBeenCalledWith(expected);
+    });
+    it('PGN-02 currentPage 가 start + 그룹 크기가 되면 다음 그룹 번호로 목록을 바꾼다', () => {
+        // Given: 첫 그룹을 보던 페이지네이션
+        render();
+        // When: 다음 그룹 첫 페이지로 이동한다
+        const el = render({ currentPage: SECOND_GROUP_START });
+        // Then: 두 번째 그룹 번호가 보인다
+        expect(pageNums(el)).toEqual(SECOND_GROUP_PAGES);
+    });
+    it('PGN-02 이전 그룹의 페이지로 가면 한 그룹 앞으로 목록을 바꾼다', () => {
+        // Given: 세 번째 그룹을 보던 페이지네이션
+        const before = pageNums(render({ currentPage: THIRD_GROUP_START }));
+        // When: 두 번째 그룹의 마지막 페이지로 이동한다
+        const el = render({ currentPage: LAST_PAGE_OF_SECOND_GROUP });
+        // Then: 세 번째 그룹에서 두 번째 그룹으로 바뀐다
+        expect(before).toEqual(THIRD_GROUP_PAGES);
+        expect(pageNums(el)).toEqual(SECOND_GROUP_PAGES);
+    });
+});
+/** 폼 안에 렌더하고 submit 발생을 기록한다 (preventDefault 로 jsdom 의 폼 전송을 막는다) */
+const renderInForm = (props = {}) => {
+    if (container)
+        throw new Error('renderInForm 은 render 와 같은 테스트에서 쓰지 않는다 — 앞선 root 가 정리되지 않는다');
+    const submits = [];
+    container = document.createElement('div');
+    document.body.appendChild(container);
+    const formRoot = createRoot(container);
+    root = formRoot;
+    act(() => {
+        formRoot.render(createElement('form', {
+            onSubmit: (event) => {
+                event.preventDefault();
+                submits.push(event.nativeEvent);
+            },
+        }, createElement(Pagination, {
+            totalCount: TOTAL_COUNT,
+            itemCountPerPage: ITEM_COUNT_PER_PAGE,
+            pageCount: PAGE_GROUP_SIZE,
+            currentPage: PAGE_IN_FIRST_GROUP,
+            onPageChange: vi.fn(),
+            ...props,
+        })));
+    });
+    return { el: container, submits };
+};
+describe('Pagination — 폼 안 버튼 (PGN-04)', () => {
+    it('PGN-04 폼 안에서 페이지 번호를 클릭하면 type 이 없어 폼을 제출한다', () => {
+        // 현재 동작 고정 — 결함 후보: #627 PGN-04 (페이지 번호 button 에 type 이 없어 의도 없는 폼 제출)
+        // Given: 폼 안의 페이지네이션
+        const { el, submits } = renderInForm();
+        const target = pageButton(el, PAGE_IN_FIRST_GROUP + 1);
+        // When: 페이지 번호를 클릭한다
+        click(target);
+        // Then: type 속성이 없고 폼이 제출된다
+        expect(target.getAttribute('type')).toBeNull();
+        expect(submits).toHaveLength(1);
+    });
+    it.each([
+        ['이전', '.ncua-pagination__before'],
+        ['다음', '.ncua-pagination__next'],
+    ])('PGN-04 폼 안에서 %s 버튼(공용 Button)을 클릭하면 폼을 제출한다', (_name, selector) => {
+        // 현재 동작 고정 — 결함 후보: #627 PGN-04 (#620 VNT-12 같은 뿌리 — NavButton 은 type 기본값 없는 공용 Button)
+        // Given: 세 번째 그룹(11~15)을 보는 폼 안 페이지네이션 (이전 · 다음 모두 활성)
+        const { el, submits } = renderInForm({ currentPage: PAGE_IN_THIRD_GROUP });
+        const nav = mustQuery(el, selector);
+        // When: 내비 버튼을 클릭한다
+        click(nav);
+        // Then: 비활성이 아닌 버튼이고 폼이 제출된다
+        expect(nav.disabled).toBe(false);
+        expect(submits).toHaveLength(1);
+    });
+    it('PGN-04 (대조) restProps 로 type="button" 을 넘기면 페이지 번호 클릭이 폼을 제출하지 않는다', () => {
+        // Given: type="button" 을 넘긴 폼 안 페이지네이션 (restProps 는 페이지 번호 button 에만 전달된다)
+        const { el, submits } = renderInForm({ type: 'button' });
+        // When: 페이지 번호를 클릭한다
+        click(pageButton(el, PAGE_IN_FIRST_GROUP + 1));
+        // Then: submit 이 없다 — 위 케이스의 submit 기록이 배선 착시가 아님을 보인다
+        expect(submits).toEqual([]);
+    });
+    it.todo('PGN-04 기대 동작 (#627): 페이지 번호 · 처음 · 이전 · 다음 · 마지막 버튼은 type="button" 이라 폼을 제출하지 않는다');
+});
+/** NavButton 아이콘 크기 — pc 16 · mo 20 */
+const NAV_ICON_SIZE_PC = 16;
+const NAV_ICON_SIZE_MO = 20;
+const navIcon = (el, selector) => mustQuery(el, `${selector} svg`);
+/** 아이콘 컴포넌트의 svg 내부 도형 마크업 — 버튼 안 아이콘이 어느 아이콘인지 구분한다 */
+const iconPaths = (icon, size) => {
+    const host = document.createElement('div');
+    host.innerHTML = renderToStaticMarkup(createElement(icon, { width: size, height: size }));
+    return mustQuery(host, 'svg').innerHTML;
+};
+describe('Pagination — mo 이전 · 다음 (PGN-03)', () => {
+    it.each([
+        ['이전', '.ncua-pagination__before', PAGE_IN_FIRST_GROUP - 1],
+        ['다음', '.ncua-pagination__next', PAGE_IN_FIRST_GROUP + 1],
+    ])('PGN-03 mo 에서 %s 버튼은 currentPage 기준 한 칸 이동한 번호를 알린다', (_name, selector, expected) => {
+        // Given: mo 페이지네이션 (그룹 크기와 무관하게 한 칸씩 이동)
+        const onPageChange = vi.fn();
+        const el = render({ onPageChange, breakPoint: 'mo' });
+        // When: 내비 버튼을 클릭한다
+        click(mustQuery(el, selector));
+        // Then: 한 칸 이동한 번호를 알린다
+        expect(onPageChange).toHaveBeenCalledWith(expected);
+    });
+    // 비활성 · 이동 버튼 노출(pc 대조 포함)은 Pagination.test.ts 'mo 모드 이전/다음 버튼 노출' 이 고정한다
+});
+describe('NavButton — 아이콘 색 · 크기 (PGN-05)', () => {
+    it('PGN-05 비활성 버튼 아이콘은 gray200, 활성 버튼 아이콘은 gray700 이다', () => {
+        // Given/When: 첫 그룹 — 처음 · 이전은 비활성, 다음 · 마지막은 활성
+        const el = render();
+        // Then: 색이 상태를 따른다
+        expect([
+            navIcon(el, '.ncua-pagination__first').getAttribute('color'),
+            navIcon(el, '.ncua-pagination__next').getAttribute('color'),
+        ]).toEqual([COLOR.gray200, COLOR.gray700]);
+    });
+    it.each([
+        ['pc', NAV_ICON_SIZE_PC, 'ncua-btn--xs'],
+        ['mo', NAV_ICON_SIZE_MO, 'ncua-btn--sm'],
+    ])('PGN-05 %s 는 아이콘 %s px · 버튼 크기 클래스 %s', (breakPoint, iconSize, sizeClass) => {
+        const el = render({ breakPoint });
+        const next = mustQuery(el, '.ncua-pagination__next');
+        expect(navIcon(el, '.ncua-pagination__next').getAttribute('width')).toBe(String(iconSize));
+        expect(Array.from(next.classList)).toContain(sizeClass);
+    });
+    it.each([
+        ['pc', '이전', '.ncua-pagination__before', 'ChevronLeft', ChevronLeft, NAV_ICON_SIZE_PC],
+        ['pc', '다음', '.ncua-pagination__next', 'ChevronRight', ChevronRight, NAV_ICON_SIZE_PC],
+        ['mo', '이전', '.ncua-pagination__before', 'ArrowLeft', ArrowLeft, NAV_ICON_SIZE_MO],
+        ['mo', '다음', '.ncua-pagination__next', 'ArrowRight', ArrowRight, NAV_ICON_SIZE_MO],
+    ])('PGN-05 %s 의 %s 버튼(%s)은 %s 아이콘을 그린다', (breakPoint, _name, selector, _iconName, icon, size) => {
+        // Given/When: 이전 · 다음이 모두 활성인 세 번째 그룹
+        const el = render({ breakPoint, currentPage: PAGE_IN_THIRD_GROUP });
+        // Then: 버튼 안 svg 의 내부 도형이 기대 아이콘과 같다
+        expect(navIcon(el, selector).innerHTML).toBe(iconPaths(icon, size));
+    });
+    it('PGN-05 (대조) Chevron 과 Arrow 아이콘 도형은 서로 달라 위 단언이 공허하지 않다', () => {
+        expect(iconPaths(ChevronRight, NAV_ICON_SIZE_PC)).not.toBe(iconPaths(ArrowRight, NAV_ICON_SIZE_PC));
+    });
+});

package/dist/temp/src/components/navigation/vertical-tab/__tests__/VerticalTab.test.d.ts

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

package/dist/temp/src/components/navigation/vertical-tab/__tests__/VerticalTab.test.js

@@ -0,0 +1,172 @@
+// @vitest-environment jsdom
+//
+// VerticalTab (src/components/navigation/vertical-tab/VerticalTab.tsx) 위험 경로 — 위험 목록표 VT-xx.
+// breakPoint pc 는 TabButton 세로 목록, mobile 은 Select 로 렌더한다. TabButton·Select 는 실구현.
+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 { VerticalTab } from '../VerticalTab';
+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(createElement(VerticalTab, props));
+    });
+    return container;
+};
+const click = (element) => {
+    act(() => {
+        element.click();
+    });
+};
+/** 사용자가 option 을 고른 것처럼 value 를 바꾸고 change 를 보낸다 */
+const choose = (select, value) => {
+    act(() => {
+        if (select) {
+            select.value = value;
+            select.dispatchEvent(new Event('change', { bubbles: true }));
+        }
+    });
+};
+const tabs = (view) => Array.from(view.querySelectorAll('.ncua-tab-button'));
+const activeLabels = (view) => tabs(view)
+    .filter((tab) => tab.classList.contains('is-active'))
+    .map((tab) => tab.textContent);
+const selectOf = (view) => view.querySelector('select');
+const optionsOf = (view) => Array.from(view.querySelectorAll('option')).map((option) => ({ value: option.value, label: option.textContent }));
+const buttonMenus = (onClick) => [
+    { id: 'order', label: '주문', onClick },
+    { id: 'claim', label: '클레임', onClick },
+    { id: 'settle', label: '정산', onClick },
+];
+describe('VerticalTab — pc 세로 목록 (VT-01)', () => {
+    it('VT-01 기본(pc)은 TabButton 세로 목록이고 activeTab 과 id 가 같은 탭만 is-active, Select 는 없다', () => {
+        const view = render({ menus: buttonMenus(), activeTab: 'claim' });
+        expect(view.querySelector('.ncua-vertical-tab')).not.toBeNull();
+        expect(tabs(view).map((tab) => tab.textContent)).toEqual(['주문', '클레임', '정산']);
+        expect(activeLabels(view)).toEqual(['클레임']);
+        expect(selectOf(view)).toBeNull();
+    });
+    it('VT-01 링크 메뉴는 href 를 activeTab 과 비교한다', () => {
+        const menus = [
+            { id: 'order', label: '주문', href: '/orders' },
+            { id: 'claim', label: '클레임', href: '/claims' },
+        ];
+        const view = render({ menus, activeTab: '/claims' });
+        expect(activeLabels(view)).toEqual(['클레임']);
+    });
+    it('VT-01 탭을 click 하면 그 메뉴의 onClick(id) 를 호출한다', () => {
+        const onClick = vi.fn();
+        const onSelect = vi.fn();
+        const view = render({ menus: buttonMenus(onClick), activeTab: 'order', onSelect });
+        click(tabs(view)[1]);
+        expect(onClick).toHaveBeenCalledWith('claim');
+        expect(onSelect).not.toHaveBeenCalled();
+    });
+});
+describe('VerticalTab — mobile Select (VT-02)', () => {
+    it('VT-02 mobile 은 md Select 로 바뀌고 옵션은 menus 의 id·label, 값은 activeTab 이다', () => {
+        const view = render({ breakPoint: 'mobile', menus: buttonMenus(), activeTab: 'claim' });
+        expect(view.querySelector('.ncua-vertical-tab')).toBeNull();
+        expect(tabs(view)).toHaveLength(0);
+        expect(view.querySelector('.ncua-select')?.classList.contains('ncua-select--md')).toBe(true);
+        expect(optionsOf(view)).toEqual([
+            { value: 'order', label: '주문' },
+            { value: 'claim', label: '클레임' },
+            { value: 'settle', label: '정산' },
+        ]);
+        expect(selectOf(view)?.value).toBe('claim');
+    });
+    it('VT-02 옵션을 고르면 onSelect 를 고른 id 로 호출한다', () => {
+        const onSelect = vi.fn();
+        const view = render({ breakPoint: 'mobile', menus: buttonMenus(), activeTab: 'order', onSelect });
+        choose(selectOf(view), 'settle');
+        expect(onSelect).toHaveBeenCalledWith('settle');
+    });
+    it('VT-02 onSelect 가 없어도 옵션 선택에 예외가 나지 않는다', () => {
+        const view = render({ breakPoint: 'mobile', menus: buttonMenus(), activeTab: 'order' });
+        expect(() => choose(selectOf(view), 'claim')).not.toThrow();
+    });
+});
+const linkMenus = () => [
+    { id: 'order', label: '주문', href: '/orders' },
+    { id: 'claim', label: '클레임', href: '/claims' },
+];
+describe('VerticalTab — mobile 링크 메뉴 (VT-03)', () => {
+    it('VT-03 mobile 에서 activeTab(href) 이 옵션 id 와 맞지 않아 활성 메뉴가 아닌 첫 옵션이 선택돼 보인다', () => {
+        // 현재 동작 고정 — 결함 후보: #597 (pc 는 href 로 활성 판정, mobile Select 는 id 로만 매칭해 선택 표시 불일치)
+        const view = render({ breakPoint: 'mobile', menus: linkMenus(), activeTab: '/claims' });
+        expect(optionsOf(view).map((option) => option.value)).toEqual(['order', 'claim']);
+        expect(selectOf(view)?.value).toBe('order');
+    });
+    it('VT-03 mobile 에서 링크 메뉴를 골라도 이동 없이 onSelect 에 href 가 아닌 id 만 넘긴다', () => {
+        // 현재 동작 고정 — 결함 후보: #597 (링크 메뉴의 href 를 쓰지 않아 pc 링크 탭과 계약이 다름)
+        const onSelect = vi.fn();
+        const view = render({ breakPoint: 'mobile', menus: linkMenus(), activeTab: '/orders', onSelect });
+        choose(selectOf(view), 'claim');
+        expect(onSelect).toHaveBeenCalledWith('claim');
+        expect(view.querySelector('a')).toBeNull();
+    });
+    it.todo('VT-03 mobile 에서도 링크 메뉴는 activeTab(href) 과 맞는 옵션이 선택돼 보인다 (기대, #597)');
+    it.todo('VT-03 mobile 에서 링크 메뉴를 고르면 그 href 로 이동하거나 href 를 넘긴다 (기대, #597)');
+});
+describe('VerticalTab — mobile 에서 무시되는 메뉴 옵션 (VT-04)', () => {
+    it('VT-04 mobile 에서 옵션을 골라도 menu.onClick 은 호출되지 않고 badgeInfo·onClose 도 렌더되지 않는다', () => {
+        // 현재 동작 고정 — 결함 후보: #597 (pc 와 달리 menu.onClick·badgeInfo·onClose 를 조용히 무시)
+        const onClick = vi.fn();
+        const onClose = vi.fn();
+        const menus = [
+            { id: 'order', label: '주문', onClick, onClose, badgeInfo: { label: 'N' } },
+            { id: 'claim', label: '클레임', onClick, onClose },
+        ];
+        const onSelect = vi.fn();
+        const view = render({ breakPoint: 'mobile', menus, activeTab: 'order', onSelect });
+        choose(selectOf(view), 'claim');
+        expect(onSelect).toHaveBeenCalledWith('claim');
+        expect(onClick).not.toHaveBeenCalled();
+        expect(view.querySelector('.ncua-badge')).toBeNull();
+        expect(view.querySelector('.ncua-tab-close')).toBeNull();
+    });
+    it.todo('VT-04 mobile 에서 옵션을 고르면 그 메뉴의 onClick 도 호출한다 (기대, #597)');
+});
+describe('VerticalTab — 타입·빈 메뉴·누락 값 (VT-05)', () => {
+    it.each([
+        ['미지정(기본 button-primary)', undefined, 'button-primary'],
+        ['button-white', 'button-white', 'button-white'],
+        ['line-vertical', 'line-vertical', 'line-vertical'],
+    ])('VT-05 type 이 %s 면 그 타입 modifier 클래스를 붙인다', (_label, type, expected) => {
+        const view = render({ type, menus: buttonMenus() });
+        expect(view.querySelector('.ncua-vertical-tab')?.classList.contains(`ncua-vertical-tab--${expected}`)).toBe(true);
+    });
+    it('VT-05 menus 미지정이면 pc 는 빈 컨테이너를 렌더한다', () => {
+        const view = render({});
+        expect(view.querySelector('.ncua-vertical-tab')?.childElementCount).toBe(0);
+    });
+    it('VT-05 menus 미지정이면 mobile 은 옵션 없는 Select 를 렌더한다', () => {
+        const view = render({ breakPoint: 'mobile' });
+        expect(selectOf(view)).not.toBeNull();
+        expect(optionsOf(view)).toEqual([]);
+    });
+    it('VT-05 mobile 옵션은 id·label 이 없는 메뉴를 빈 문자열로 채운다', () => {
+        const view = render({ breakPoint: 'mobile', menus: [{}] });
+        expect(optionsOf(view)).toEqual([{ value: '', label: '' }]);
+    });
+});

package/dist/temp/src/components/overlays/dropdown/__tests__/Dropdown.dnd.test.d.ts

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