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

package/dist/temp/src/components/forms-and-input/select-box/__tests__/SelectBox.portal.test.js

@@ -0,0 +1,312 @@
+// @vitest-environment jsdom
+//
+// SelectBox (React) 포털·방향·autoWidth 위험 경로 — 위험 목록표 SB-13·14·16.
+// ResizeObserver stub·innerHeight·HTMLElement.prototype.offsetWidth 가 파일 전체 전역을 건드리므로
+// 인라인 경로(SelectBox.test.ts)와 분리한다 (ComboBox.portal.test.ts 선례).
+// 실제 화면 위치(SB-24)는 useFloatingPosition·portalPosition 단위 테스트 소관 — 여기서는 style 이 붙는지만 본다.
+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 { FloatingProvider } from '../../../../contexts/FloatingContext';
+import { PORTAL_PANEL_Z_INDEX } from '../../../../utils/portal-position';
+import { SelectBox } from '../SelectBox';
+globalThis.IS_REACT_ACT_ENVIRONMENT = true;
+/** useFloatingPosition 기본 간격 */
+const PANEL_OFFSET = 4;
+const ANCHOR_TOP = 100;
+const ANCHOR_LEFT = 50;
+const ANCHOR_WIDTH = 240;
+const ANCHOR_HEIGHT = 40;
+const VIEWPORT_HEIGHT = 800;
+/** calculateDropdownPosition 의 옵션 1개 높이·여유 간격 */
+const ITEM_HEIGHT = 40;
+const DIRECTION_GAP = 20;
+const OPTIONS = [
+    { id: 'a', label: 'A' },
+    { id: 'b', label: 'B' },
+    { id: 'c', label: 'C' },
+];
+const OPTIONS_COUNT = OPTIONS.length;
+/** 옵션 3개 → 패널 높이 min(275, 3×40) = 120, 아래 공간이 120+20 보다 작으면 up */
+const PANEL_HEIGHT = OPTIONS_COUNT * ITEM_HEIGHT;
+const BOTTOM_AT_BOUNDARY = VIEWPORT_HEIGHT - PANEL_HEIGHT - DIRECTION_GAP;
+const SMALL_MAX_HEIGHT = 80;
+/** autoWidth 측정용 패널 offsetWidth */
+const PANEL_WIDTH = 180;
+const WIDER_PANEL_WIDTH = 260;
+const installResizeObserverStub = () => {
+    const callbacks = [];
+    class ResizeObserverStub {
+        constructor(callback) {
+            this.observe = vi.fn();
+            this.unobserve = vi.fn();
+            this.disconnect = vi.fn();
+            callbacks.push(callback);
+        }
+    }
+    vi.stubGlobal('ResizeObserver', ResizeObserverStub);
+    return {
+        /** useWindowResize 는 entries 가 비어 있으면 무시하므로 항목 1개를 넘긴다 */
+        triggerAll: () => {
+            for (const callback of callbacks) {
+                callback([{}], {});
+            }
+        },
+    };
+};
+const originalOffsetWidth = Object.getOwnPropertyDescriptor(HTMLElement.prototype, 'offsetWidth');
+const stubOffsetWidth = (width) => {
+    Object.defineProperty(HTMLElement.prototype, 'offsetWidth', { configurable: true, get: () => width });
+};
+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 = (props = {}, floating) => {
+    const selectBox = createElement(SelectBox, { optionItems: OPTIONS, ...props });
+    return renderElement(floating ? createElement(FloatingProvider, { value: floating }, selectBox) : selectBox);
+};
+beforeEach(() => {
+    vi.spyOn(window, 'scrollTo').mockImplementation(() => undefined);
+    vi.stubGlobal('innerHeight', VIEWPORT_HEIGHT);
+});
+afterEach(() => {
+    if (root) {
+        act(() => {
+            root?.unmount();
+        });
+    }
+    root = null;
+    container = null;
+    document.body.innerHTML = '';
+    if (originalOffsetWidth) {
+        Object.defineProperty(HTMLElement.prototype, 'offsetWidth', originalOffsetWidth);
+    }
+    vi.unstubAllGlobals();
+    vi.restoreAllMocks();
+});
+const requireElement = (scope, selector) => {
+    const element = scope.querySelector(selector);
+    if (!element)
+        throw new Error(`요소를 찾을 수 없습니다: ${selector}`);
+    return element;
+};
+const rootOf = (view) => requireElement(view, '.ncua-selectbox');
+const triggerOf = (view) => requireElement(view, '.ncua-selectbox__content');
+const panelIn = (scope) => scope.querySelector('.ncua-select-dropdown');
+const optionIn = (scope, label) => {
+    const option = Array.from(scope.querySelectorAll('.ncua-select-dropdown__option')).find((element) => element.textContent === label);
+    if (!option)
+        throw new Error(`옵션이 없습니다: ${label}`);
+    return option;
+};
+const click = (element) => {
+    act(() => {
+        element.click();
+    });
+};
+const mouseDown = (element) => {
+    act(() => {
+        element.dispatchEvent(new MouseEvent('mousedown', { bubbles: true }));
+    });
+};
+/** 트리거 루트(internalRef) 의 기하를 고정한다 — 방향 판정과 포털 위치의 anchor */
+const stubAnchor = (view, top = ANCHOR_TOP) => {
+    vi.spyOn(rootOf(view), 'getBoundingClientRect').mockImplementation(() => DOMRect.fromRect({ x: ANCHOR_LEFT, y: top, width: ANCHOR_WIDTH, height: ANCHOR_HEIGHT }));
+};
+const open = (view) => {
+    click(triggerOf(view));
+};
+describe('SelectBox — 포털 (SB-13)', () => {
+    it('SB-13 usePortal 이면 패널을 body 직속에 렌더하고 --portal 과 floating style 을 붙인다', () => {
+        installResizeObserverStub();
+        const view = render({ usePortal: true });
+        stubAnchor(view);
+        open(view);
+        const panel = panelIn(document.body);
+        expect(panelIn(view)).toBeNull();
+        expect(panel?.parentElement).toBe(document.body);
+        expect(panel?.classList.contains('ncua-select-dropdown--portal')).toBe(true);
+        expect(panel?.style.position).toBe('fixed');
+        expect(panel?.style.top).toBe(`${ANCHOR_TOP + ANCHOR_HEIGHT + PANEL_OFFSET}px`);
+        expect(panel?.style.left).toBe(`${ANCHOR_LEFT}px`);
+        expect(panel?.style.minWidth).toBe(`${ANCHOR_WIDTH}px`);
+        expect(panel?.style.zIndex).toBe(String(PORTAL_PANEL_Z_INDEX));
+    });
+    it('SB-13 FloatingProvider preferPortal 이면 portalContainer 에 렌더한다', () => {
+        installResizeObserverStub();
+        const portalContainer = document.createElement('div');
+        document.body.appendChild(portalContainer);
+        const view = render({}, { preferPortal: true, portalContainer });
+        open(view);
+        expect(panelIn(portalContainer)?.classList.contains('ncua-select-dropdown--portal')).toBe(true);
+        expect(panelIn(view)).toBeNull();
+    });
+    it('SB-13 portalContainer 가 없는 context 는 body 를 기본 컨테이너로 쓴다', () => {
+        installResizeObserverStub();
+        const view = render({}, { preferPortal: true });
+        open(view);
+        expect(panelIn(document.body)?.parentElement).toBe(document.body);
+    });
+    it('SB-13 usePortal false 는 context preferPortal 보다 우선해 인라인으로 렌더한다', () => {
+        const view = render({ usePortal: false }, { preferPortal: true });
+        open(view);
+        const panel = panelIn(view);
+        expect(panel).not.toBeNull();
+        expect(panel?.classList.contains('ncua-select-dropdown--portal')).toBe(false);
+        expect(panel?.getAttribute('style')).toBeNull();
+    });
+    it('SB-13 닫히면 포털 패널이 제거된다', () => {
+        installResizeObserverStub();
+        const view = render({ usePortal: true });
+        open(view);
+        expect(panelIn(document.body)).not.toBeNull();
+        click(triggerOf(view));
+        expect(panelIn(document.body)).toBeNull();
+    });
+    it('SB-13 포털 패널 안 mousedown·다중 옵션 click 은 닫지 않고, 트리거 click 으로 전파되지 않는다', () => {
+        installResizeObserverStub();
+        const onChange = vi.fn();
+        const view = render({ usePortal: true, multiple: true, value: [], onChange });
+        open(view);
+        const panel = panelIn(document.body);
+        if (!panel)
+            throw new Error('포털 패널이 없습니다');
+        mouseDown(optionIn(panel, 'B'));
+        click(optionIn(panel, 'B'));
+        expect(onChange).toHaveBeenCalledWith(['b']);
+        expect(panelIn(document.body)).not.toBeNull();
+    });
+    it('SB-13 포털 단일 옵션 click 은 선택 후 패널을 닫는다', () => {
+        installResizeObserverStub();
+        const onChange = vi.fn();
+        const view = render({ usePortal: true, onChange });
+        open(view);
+        const panel = panelIn(document.body);
+        if (!panel)
+            throw new Error('포털 패널이 없습니다');
+        click(optionIn(panel, 'C'));
+        expect(onChange).toHaveBeenCalledWith('c');
+        expect(panelIn(document.body)).toBeNull();
+    });
+    it('SB-13 포털 패널 밖 mousedown 은 닫는다', () => {
+        installResizeObserverStub();
+        const view = render({ usePortal: true });
+        const outside = document.createElement('div');
+        document.body.appendChild(outside);
+        open(view);
+        mouseDown(outside);
+        expect(panelIn(document.body)).toBeNull();
+    });
+    it('SB-13 포털로 위쪽에 열리면 anchor top 위에 배치된다 (jsdom 패널 높이 0)', () => {
+        installResizeObserverStub();
+        const view = render({ usePortal: true });
+        stubAnchor(view, VIEWPORT_HEIGHT - ANCHOR_HEIGHT);
+        open(view);
+        const panel = panelIn(document.body);
+        expect(panel?.classList.contains('ncua-select-dropdown--up')).toBe(true);
+        expect(panel?.style.top).toBe(`${VIEWPORT_HEIGHT - ANCHOR_HEIGHT - PANEL_OFFSET}px`);
+    });
+});
+describe('SelectBox — 방향 (SB-14)', () => {
+    /** 트리거 bottom 이 원하는 값이 되도록 top 을 맞춘다 */
+    const openWithBottom = (bottom, props = {}) => {
+        const view = render(props);
+        stubAnchor(view, bottom - ANCHOR_HEIGHT);
+        open(view);
+        return view;
+    };
+    const directionOf = (view) => requireElement(view, '.ncua-select-dropdown').classList.contains('ncua-select-dropdown--up') ? 'up' : 'down';
+    it('SB-14 아래 공간이 패널 높이+20 과 같으면 아래(--down) 로 열린다', () => {
+        const view = openWithBottom(BOTTOM_AT_BOUNDARY);
+        expect(directionOf(view)).toBe('down');
+        expect(panelIn(view)?.classList.contains('ncua-select-dropdown--down')).toBe(true);
+    });
+    it('SB-14 아래 공간이 패널 높이+20 보다 1 작으면 위(--up) 로 열린다', () => {
+        const view = openWithBottom(BOTTOM_AT_BOUNDARY + 1);
+        expect(directionOf(view)).toBe('up');
+    });
+    it('SB-14 패널 높이는 min(maxHeight, 개수×40) — maxHeight 가 작으면 같은 위치에서도 아래로 열린다', () => {
+        const view = openWithBottom(BOTTOM_AT_BOUNDARY + 1, { maxHeight: SMALL_MAX_HEIGHT });
+        expect(directionOf(view)).toBe('down');
+    });
+    it('SB-14 열린 동안 window resize 에 방향을 재계산한다 (ResizeObserver 미지원 경로)', () => {
+        const view = openWithBottom(ANCHOR_TOP + ANCHOR_HEIGHT);
+        expect(directionOf(view)).toBe('down');
+        stubAnchor(view, VIEWPORT_HEIGHT - ANCHOR_HEIGHT);
+        act(() => {
+            window.dispatchEvent(new Event('resize'));
+        });
+        expect(directionOf(view)).toBe('up');
+    });
+    it('SB-14 ResizeObserver 가 있으면 관찰 콜백에 방향을 재계산한다', () => {
+        const resizeObserver = installResizeObserverStub();
+        const view = openWithBottom(ANCHOR_TOP + ANCHOR_HEIGHT);
+        expect(directionOf(view)).toBe('down');
+        stubAnchor(view, VIEWPORT_HEIGHT - ANCHOR_HEIGHT);
+        act(() => {
+            resizeObserver.triggerAll();
+        });
+        expect(directionOf(view)).toBe('up');
+    });
+    it('SB-14 닫힌 동안의 resize 는 방향을 바꾸지 않아 다음 열림 시점에 다시 계산한다', () => {
+        const view = openWithBottom(ANCHOR_TOP + ANCHOR_HEIGHT);
+        click(triggerOf(view));
+        stubAnchor(view, VIEWPORT_HEIGHT - ANCHOR_HEIGHT);
+        act(() => {
+            window.dispatchEvent(new Event('resize'));
+        });
+        expect(panelIn(view)).toBeNull();
+        open(view);
+        expect(directionOf(view)).toBe('up');
+    });
+});
+describe('SelectBox — autoWidth (SB-16)', () => {
+    it('SB-16 기본(autoWidth true) 은 열릴 때 트리거 width 를 패널 offsetWidth 로 맞춘다', () => {
+        stubOffsetWidth(PANEL_WIDTH);
+        const view = render();
+        expect(rootOf(view).style.width).toBe('');
+        open(view);
+        expect(rootOf(view).style.width).toBe(`${PANEL_WIDTH}px`);
+    });
+    it('SB-16 열린 동안 optionItems 가 바뀌면 width 를 다시 맞춘다', () => {
+        stubOffsetWidth(PANEL_WIDTH);
+        const view = render();
+        open(view);
+        stubOffsetWidth(WIDER_PANEL_WIDTH);
+        render({ optionItems: [...OPTIONS, { id: 'd', label: '긴 라벨 옵션' }] });
+        expect(rootOf(view).style.width).toBe(`${WIDER_PANEL_WIDTH}px`);
+    });
+    it('SB-16 닫혀도 맞춘 width 를 되돌리지 않는다', () => {
+        stubOffsetWidth(PANEL_WIDTH);
+        const view = render();
+        open(view);
+        click(triggerOf(view));
+        expect(panelIn(view)).toBeNull();
+        expect(rootOf(view).style.width).toBe(`${PANEL_WIDTH}px`);
+    });
+    it('SB-16 autoWidth false 면 width 를 바꾸지 않는다', () => {
+        stubOffsetWidth(PANEL_WIDTH);
+        const view = render({ autoWidth: false });
+        open(view);
+        expect(panelIn(view)).not.toBeNull();
+        expect(rootOf(view).style.width).toBe('');
+    });
+    it('SB-16 포털 모드에서도 열릴 때 트리거 width 를 패널 offsetWidth 로 맞춘다', () => {
+        installResizeObserverStub();
+        stubOffsetWidth(PANEL_WIDTH);
+        const view = render({ usePortal: true });
+        open(view);
+        expect(rootOf(view).style.width).toBe(`${PANEL_WIDTH}px`);
+    });
+});

package/dist/temp/src/components/forms-and-input/select-box/__tests__/SelectBox.test.d.ts

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