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

package/dist/esm/src/components/feedback-and-status/tag/__tests__/Tag.test.js

@@ -0,0 +1,601 @@
+// @vitest-environment jsdom
+//
+// React Tag — 위험 목록표 RTAG-xx (PR-7e).
+// vanilla Tag(assets/scripts/tag, TG-xx)와 같은 기능의 독립 React 구현이다. 하위 구현(XClose · Dot)은 실구현을 쓴다.
+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 { Tag } from '../Tag';
+globalThis.IS_REACT_ACT_ENVIRONMENT = true;
+/** Tag 의 기본 maxLength */
+const DEFAULT_MAX_LENGTH = 20;
+/** 말줄임 시 남기는 글자 수 = maxLength − 말줄임표 몫 */
+const ELLIPSIS_RESERVED = 2;
+const ICON_SIZE_SM = 14;
+const ICON_SIZE_MD = 16;
+const mounted = [];
+const cleanups = [];
+afterEach(() => {
+  for (const {
+    root,
+    container
+  } of mounted.splice(0)) {
+    act(() => {
+      root.unmount();
+    });
+    container.remove();
+  }
+  for (const cleanup of cleanups.splice(0)) cleanup();
+  vi.useRealTimers();
+  vi.restoreAllMocks();
+});
+/* ========== 공통 헬퍼 ========== */
+const mount = props => {
+  const container = document.createElement('div');
+  document.body.appendChild(container);
+  const root = createRoot(container);
+  act(() => {
+    root.render(/*#__PURE__*/createElement(Tag, props));
+  });
+  const entry = {
+    root,
+    container
+  };
+  mounted.push(entry);
+  const unmount = () => {
+    act(() => {
+      root.unmount();
+    });
+    mounted.splice(mounted.indexOf(entry), 1);
+    container.remove();
+  };
+  return {
+    container,
+    unmount
+  };
+};
+const outside = () => {
+  const element = document.createElement('div');
+  document.body.appendChild(element);
+  cleanups.push(() => element.remove());
+  return element;
+};
+const tagOf = container => {
+  const tag = container.querySelector('.ncua-tag');
+  if (!tag) throw new Error('태그를 찾지 못했습니다');
+  return tag;
+};
+/** React 는 mouseover/mouseout 의 relatedTarget 으로 enter/leave 를 합성한다 */
+const hover = container => {
+  act(() => {
+    tagOf(container).dispatchEvent(new MouseEvent('mouseover', {
+      bubbles: true,
+      relatedTarget: outside()
+    }));
+  });
+};
+const leave = container => {
+  act(() => {
+    tagOf(container).dispatchEvent(new MouseEvent('mouseout', {
+      bubbles: true,
+      relatedTarget: outside()
+    }));
+  });
+};
+const textOf = container => container.querySelector('.ncua-tag__text')?.textContent ?? null;
+const tooltipOf = container => container.querySelector('.ncua-tag__tooltip');
+const closeButtonOf = container => {
+  const button = container.querySelector('.ncua-tag__close');
+  if (!button) throw new Error('닫기 버튼을 찾지 못했습니다');
+  return button;
+};
+/** 같은 글자를 n 개 이어 붙인 합성 텍스트 */
+const textOfLength = length => '가'.repeat(length);
+/** jsdom 의 getBoundingClientRect 는 전부 0 이라 배치 판정용 rect 를 직접 만든다 */
+const toRect = _ref => {
+  let {
+    left,
+    top,
+    width,
+    height
+  } = _ref;
+  return {
+    left,
+    top,
+    width,
+    height,
+    right: left + width,
+    bottom: top + height,
+    x: left,
+    y: top,
+    toJSON: () => ({})
+  };
+};
+/* ========== P0 ========== */
+describe('RTAG-01 기본 렌더', () => {
+  it('RTAG-01 기본 size 는 sm 이고 텍스트를 렌더한다', () => {
+    const {
+      container
+    } = mount({
+      text: '태그'
+    });
+    const tag = tagOf(container);
+    expect(tag.classList.contains('ncua-tag--sm')).toBe(true);
+    expect(textOf(container)).toBe('태그');
+  });
+  it('RTAG-01 size md 면 md modifier 를 붙인다', () => {
+    const {
+      container
+    } = mount({
+      text: '태그',
+      size: 'md'
+    });
+    const tag = tagOf(container);
+    expect(tag.classList).toContain('ncua-tag--md');
+    expect(tag.classList).not.toContain('ncua-tag--sm');
+  });
+});
+describe('RTAG-02 maxLength 말줄임', () => {
+  it('RTAG-02 기본 maxLength 와 같은 길이는 그대로 둔다', () => {
+    const text = textOfLength(DEFAULT_MAX_LENGTH);
+    const {
+      container
+    } = mount({
+      text
+    });
+    expect(textOf(container)).toBe(text);
+    expect(tagOf(container).classList.contains('ncua-tag--truncated')).toBe(false);
+  });
+  it('RTAG-02 기본 maxLength 를 넘으면 maxLength − 2 글자 + ... 로 줄이고 truncated 를 붙인다', () => {
+    const text = textOfLength(DEFAULT_MAX_LENGTH + 1);
+    const {
+      container
+    } = mount({
+      text
+    });
+    expect(textOf(container)).toBe(`${textOfLength(DEFAULT_MAX_LENGTH - ELLIPSIS_RESERVED)}...`);
+    expect(tagOf(container).classList.contains('ncua-tag--truncated')).toBe(true);
+  });
+  it('RTAG-02 maxLength 옵션을 기준으로 줄인다', () => {
+    const maxLength = 5;
+    const {
+      container
+    } = mount({
+      text: 'abcdef',
+      maxLength
+    });
+    expect(textOf(container)).toBe('abc...');
+  });
+});
+describe('RTAG-03 말줄임 툴팁', () => {
+  it('RTAG-03 잘린 태그에 진입하면 전체 텍스트 툴팁을 보이고, 이탈하면 없앤다', () => {
+    vi.useFakeTimers({
+      toFake: ['setTimeout']
+    });
+    const text = textOfLength(DEFAULT_MAX_LENGTH + 1);
+    const {
+      container
+    } = mount({
+      text
+    });
+    hover(container);
+    const contentOnHover = tooltipOf(container)?.querySelector('.ncua-tag__tooltip-content')?.textContent ?? null;
+    leave(container);
+    expect(contentOnHover).toBe(text);
+    expect(tooltipOf(container)).toBeNull();
+  });
+  it('RTAG-03 잘리지 않은 태그는 진입해도 툴팁이 없다', () => {
+    const {
+      container
+    } = mount({
+      text: '태그'
+    });
+    hover(container);
+    expect(tooltipOf(container)).toBeNull();
+  });
+});
+describe('RTAG-04 닫기 버튼', () => {
+  it('RTAG-04 close 면 type=button 닫기 버튼을 두고, 클릭하면 onButtonClick 에 이벤트를 넘긴다', () => {
+    const onButtonClick = vi.fn();
+    const {
+      container
+    } = mount({
+      text: '태그',
+      close: true,
+      onButtonClick
+    });
+    const button = closeButtonOf(container);
+    act(() => {
+      button.click();
+    });
+    expect(button.type).toBe('button');
+    expect(onButtonClick).toHaveBeenCalledWith(expect.objectContaining({
+      type: 'click'
+    }));
+  });
+  it('RTAG-04 onButtonClick 이 없어도 클릭이 무해하다', () => {
+    const {
+      container
+    } = mount({
+      text: '태그',
+      close: true
+    });
+    const button = closeButtonOf(container);
+    expect(() => {
+      act(() => {
+        button.click();
+      });
+    }).not.toThrow();
+  });
+  it.each([{
+    size: 'sm',
+    iconSize: ICON_SIZE_SM
+  }, {
+    size: 'md',
+    iconSize: ICON_SIZE_MD
+  }])('RTAG-04 size $size 면 닫기 아이콘 크기가 $iconSize 다', _ref2 => {
+    let {
+      size,
+      iconSize
+    } = _ref2;
+    const {
+      container
+    } = mount({
+      text: '태그',
+      close: true,
+      size
+    });
+    const svg = closeButtonOf(container).querySelector('svg');
+    expect([svg?.getAttribute('width'), svg?.getAttribute('height')]).toEqual([String(iconSize), String(iconSize)]);
+  });
+  it('RTAG-04 close 가 없으면 닫기 버튼이 없다', () => {
+    const {
+      container
+    } = mount({
+      text: '태그'
+    });
+    expect(container.querySelector('.ncua-tag__close')).toBeNull();
+  });
+});
+/* ========== 나머지 분기 ========== */
+/** Tag 가 넘긴 props 를 그대로 속성에 기록하는 합성 아이콘 — 실제 아이콘의 color 처리는 아이콘 패키지 소관이다 */
+const RecordingIcon = _ref3 => {
+  let {
+    width,
+    height,
+    color
+  } = _ref3;
+  return /*#__PURE__*/createElement('svg', {
+    className: 'recording-icon',
+    width,
+    height,
+    'data-color': color
+  });
+};
+const recordedIconOf = container => {
+  const svg = container.querySelector('.recording-icon');
+  if (!svg) throw new Error('슬롯 아이콘을 찾지 못했습니다');
+  return svg;
+};
+describe('RTAG-05 슬롯', () => {
+  it.each([{
+    size: 'sm',
+    iconSize: ICON_SIZE_SM
+  }, {
+    size: 'md',
+    iconSize: ICON_SIZE_MD
+  }])('RTAG-05 icon 슬롯은 size $size 에 맞춰 $iconSize 크기로 렌더한다', _ref4 => {
+    let {
+      size,
+      iconSize
+    } = _ref4;
+    const {
+      container
+    } = mount({
+      text: '태그',
+      size,
+      icon: {
+        type: 'icon',
+        icon: RecordingIcon
+      }
+    });
+    const svg = recordedIconOf(container);
+    expect([svg.getAttribute('width'), svg.getAttribute('height')]).toEqual([String(iconSize), String(iconSize)]);
+  });
+  it.each([{
+    slotSize: undefined,
+    expected: 'sm'
+  }, {
+    slotSize: 'lg',
+    expected: 'lg'
+  }])('RTAG-05 dot 슬롯 size $slotSize → ncua-dot--$expected', _ref5 => {
+    let {
+      slotSize,
+      expected
+    } = _ref5;
+    const icon = {
+      type: 'dot',
+      color: 'error',
+      size: slotSize
+    };
+    const {
+      container
+    } = mount({
+      text: '태그',
+      icon
+    });
+    const dot = container.querySelector('.ncua-dot');
+    if (!dot) throw new Error('dot 슬롯을 찾지 못했습니다');
+    expect(Array.from(dot.classList)).toEqual(expect.arrayContaining(['ncua-dot--error', `ncua-dot--${expected}`]));
+  });
+  it('RTAG-05 custom 슬롯은 children 을 그대로 렌더한다', () => {
+    const {
+      container
+    } = mount({
+      text: '태그',
+      icon: {
+        type: 'custom',
+        children: /*#__PURE__*/createElement('i', {
+          className: 'custom-slot'
+        }, '커스텀')
+      }
+    });
+    expect(container.querySelector('.custom-slot')?.textContent).toBe('커스텀');
+  });
+  it('RTAG-05 순서는 아이콘 → 텍스트 → count → 닫기 버튼이다', () => {
+    const {
+      container
+    } = mount({
+      text: '태그',
+      count: '3',
+      close: true,
+      icon: {
+        type: 'icon',
+        icon: RecordingIcon
+      }
+    });
+    const children = Array.from(tagOf(container).children);
+    const expectedOrder = ['recording-icon', 'ncua-tag__text', 'ncua-tag__count', 'ncua-tag__close'];
+    const positions = expectedOrder.map(name => children.findIndex(child => child.classList.contains(name)));
+    expect(positions).toEqual(expectedOrder.map((_, index) => index));
+  });
+  it('RTAG-05 count 가 빈 문자열이면 count 를 표시하지 않는다', () => {
+    const {
+      container
+    } = mount({
+      text: '태그',
+      count: ''
+    });
+    expect(container.querySelector('.ncua-tag__count')).toBeNull();
+  });
+});
+describe('RTAG-06 · 07 말줄임 툴팁 위치', () => {
+  /** jsdom 기본 뷰포트(1024×768)에서 툴팁 기본 크기(200×60) + 여백 10 이 들어가는지를 가르는 태그 배치 */
+  const NEAR_LEFT = 100;
+  const FAR_LEFT = 900;
+  const ROOM_TOP = 300;
+  const CRAMPED_TOP = 20;
+  const TAG_WIDTH = 50;
+  const TAG_HEIGHT = 20;
+  /** 좌우 어느 쪽에도 툴팁 폭이 들어가지 않는 너비 */
+  const WIDE_TAG_WIDTH = 824;
+  /** 위아래 어느 쪽에도 툴팁 높이가 들어가지 않는 높이 */
+  const TALL_TAG_HEIGHT = 740;
+  /** 기본값(DEFAULT_TOOLTIP_WIDTH 200 · HEIGHT 60)과 다른 실측 rect — 실제 rect 사용과 기본값 폴백을 구분한다 */
+  const MEASURED_TOOLTIP_WIDTH = 60;
+  const MEASURED_TOOLTIP_HEIGHT = 400;
+  const truncatedText = textOfLength(DEFAULT_MAX_LENGTH + 1);
+  const stubTagRect = function (container, left, top) {
+    let width = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : TAG_WIDTH;
+    let height = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : TAG_HEIGHT;
+    tagOf(container).getBoundingClientRect = () => toRect({
+      left,
+      top,
+      width,
+      height
+    });
+  };
+  const positionOf = container => {
+    const tooltip = tooltipOf(container);
+    if (!tooltip) throw new Error('툴팁을 찾지 못했습니다');
+    return Array.from(tooltip.classList).find(name => name.startsWith('ncua-tag__tooltip--')) ?? null;
+  };
+  beforeEach(() => {
+    vi.useFakeTimers({
+      toFake: ['setTimeout']
+    });
+  });
+  it('RTAG-06 진입 직후에는 기본 top-right 이다', () => {
+    const {
+      container
+    } = mount({
+      text: truncatedText
+    });
+    stubTagRect(container, FAR_LEFT, CRAMPED_TOP);
+    hover(container);
+    expect(positionOf(container)).toBe('ncua-tag__tooltip--top-right');
+  });
+  it.each([{
+    name: '위 · 오른쪽 공간',
+    left: NEAR_LEFT,
+    top: ROOM_TOP,
+    width: TAG_WIDTH,
+    height: TAG_HEIGHT,
+    expected: 'top-right'
+  }, {
+    name: '위 공간 · 오른쪽 부족',
+    left: FAR_LEFT,
+    top: ROOM_TOP,
+    width: TAG_WIDTH,
+    height: TAG_HEIGHT,
+    expected: 'top-left'
+  }, {
+    name: '위 부족 · 오른쪽 공간',
+    left: NEAR_LEFT,
+    top: CRAMPED_TOP,
+    width: TAG_WIDTH,
+    height: TAG_HEIGHT,
+    expected: 'bottom-right'
+  }, {
+    name: '위 부족 · 오른쪽 부족',
+    left: FAR_LEFT,
+    top: CRAMPED_TOP,
+    width: TAG_WIDTH,
+    height: TAG_HEIGHT,
+    expected: 'bottom-left'
+  }, {
+    name: '좌우 모두 부족 · 위 공간',
+    left: NEAR_LEFT,
+    top: ROOM_TOP,
+    width: WIDE_TAG_WIDTH,
+    height: TAG_HEIGHT,
+    expected: 'top-right'
+  }, {
+    name: '좌우 모두 부족 · 위 부족',
+    left: NEAR_LEFT,
+    top: CRAMPED_TOP,
+    width: WIDE_TAG_WIDTH,
+    height: TAG_HEIGHT,
+    expected: 'bottom-right'
+  }, {
+    name: '위아래 모두 부족',
+    left: NEAR_LEFT,
+    top: CRAMPED_TOP,
+    width: TAG_WIDTH,
+    height: TALL_TAG_HEIGHT,
+    expected: 'bottom-right'
+  }])('RTAG-06 $name → 다음 틱에 $expected 로 재계산한다', _ref6 => {
+    let {
+      left,
+      top,
+      width,
+      height,
+      expected
+    } = _ref6;
+    const {
+      container
+    } = mount({
+      text: truncatedText
+    });
+    stubTagRect(container, left, top, width, height);
+    hover(container);
+    act(() => {
+      vi.runAllTimers();
+    });
+    expect(positionOf(container)).toBe(`ncua-tag__tooltip--${expected}`);
+  });
+  it('RTAG-06 재계산 대기 중 unmount 해도 무해하다', () => {
+    const {
+      container,
+      unmount
+    } = mount({
+      text: truncatedText
+    });
+    hover(container);
+    unmount();
+    expect(() => {
+      act(() => {
+        vi.runAllTimers();
+      });
+    }).not.toThrow();
+  });
+  it('RTAG-07 툴팁이 떠 있는 채 진입이 다시 오면 실제 툴팁 rect 로 즉시 계산한다 (합성 이벤트 — 실사용 경로 아님)', () => {
+    const {
+      container
+    } = mount({
+      text: truncatedText
+    });
+    stubTagRect(container, FAR_LEFT, ROOM_TOP);
+    hover(container);
+    const tooltip = tooltipOf(container);
+    if (!tooltip) throw new Error('툴팁을 찾지 못했습니다');
+    tooltip.getBoundingClientRect = () => toRect({
+      left: 0,
+      top: 0,
+      width: MEASURED_TOOLTIP_WIDTH,
+      height: MEASURED_TOOLTIP_HEIGHT
+    });
+    hover(container);
+    expect(positionOf(container)).toBe('ncua-tag__tooltip--bottom-right');
+  });
+});
+/* ========== 결함 후보 ========== */
+describe('RTAG-08 icon 슬롯 color · size', () => {
+  it('RTAG-08 color 토큰 키를 COLOR 매핑 없이 넘기고 slot.size 는 무시한다', () => {
+    // 현재 동작 고정 — 결함 후보: 후속 이슈 (Badge · Button · InputBase 는 COLOR[slot.color] 로 매핑 — "gray700" 은 유효한 CSS 색이 아님, slot.size 미반영)
+    const slotSize = 24;
+    const {
+      container
+    } = mount({
+      text: '태그',
+      icon: {
+        type: 'icon',
+        icon: RecordingIcon,
+        color: 'gray700',
+        size: slotSize
+      }
+    });
+    const svg = recordedIconOf(container);
+    expect(svg.getAttribute('data-color')).toBe('gray700');
+    expect(svg.getAttribute('width')).toBe(String(ICON_SIZE_SM));
+  });
+  it.todo('RTAG-08 icon 슬롯 color 는 COLOR[slot.color] 로 매핑하고 slot.size 가 있으면 그 크기로 렌더한다');
+});
+describe('RTAG-09 maxLength ≤ 2', () => {
+  it.each([{
+    maxLength: 1,
+    text: 'ab',
+    expected: 'a...'
+  }, {
+    maxLength: 2,
+    text: 'abc',
+    expected: '...'
+  }])('RTAG-09 maxLength $maxLength · "$text" → "$expected"', _ref7 => {
+    let {
+      maxLength,
+      text,
+      expected
+    } = _ref7;
+    // 현재 동작 고정 — 결함 후보: 후속 이슈 (#588 TG-19 같은 뿌리 — maxLength − 2 가 0 이하면 slice 결과가 비거나 끝에서 자름)
+    const {
+      container
+    } = mount({
+      text,
+      maxLength
+    });
+    expect(textOf(container)).toBe(expected);
+  });
+  it.todo('RTAG-09 maxLength ≤ 2 에서도 원문 앞부분을 최소 1글자 남기고 말줄임한다');
+});
+describe('RTAG-10 닫기 버튼 접근 가능한 이름', () => {
+  it('RTAG-10 닫기 버튼에 aria-label 도 텍스트도 없다', () => {
+    // 현재 동작 고정 — 결함 후보: 후속 이슈 (#597 CA-02 같은 유형 — 접근 가능한 이름이 비어 있음, vanilla Tag 도 같은 마크업)
+    const {
+      container
+    } = mount({
+      text: '태그',
+      close: true
+    });
+    const button = closeButtonOf(container);
+    expect([button.getAttribute('aria-label'), button.textContent]).toEqual([null, '']);
+  });
+  it.todo('RTAG-10 닫기 버튼에 aria-label 로 접근 가능한 이름을 준다');
+});
+describe('RTAG-11 children', () => {
+  it('RTAG-11 children 을 받아도 렌더하지 않는다', () => {
+    // 현재 동작 고정 — 결함 후보: 후속 이슈 (타입에 선언됐으나 미사용 — 문서 소개문 "체크박스 … 기능을 포함할 수 있습니다" 에 해당 prop 없음)
+    const props = {
+      text: '태그',
+      children: /*#__PURE__*/createElement('input', {
+        type: 'checkbox',
+        className: 'tag-child'
+      })
+    };
+    const {
+      container
+    } = mount(props);
+    expect(container.querySelector('.tag-child')).toBeNull();
+  });
+  it.todo('RTAG-11 children 을 렌더하거나, 쓰지 않는다면 타입 · 문서에서 뺀다');
+});