@ncds/ui-admin 1.8.21-alpha.4 → 1.8.21-alpha.6

package/dist/cjs/src/components/overlays/notification/__tests__/MessageNotification.test.js

@@ -0,0 +1,246 @@
+"use strict";
+
+var _react = require("react");
+var _client = require("react-dom/client");
+var _testUtils = require("react-dom/test-utils");
+var _vitest = require("vitest");
+var _MessageNotification = require("../MessageNotification");
+// @vitest-environment jsdom
+
+// React 18에서 act() 사용 시 필요한 플래그 (미설정 시 console.error 경고 발생)
+globalThis.IS_REACT_ACT_ENVIRONMENT = true;
+const SELECTOR = {
+  ROOT: '.ncua-message-notification',
+  CONTENT: '.ncua-message-notification__content',
+  CONTENT_WRAPPER: '.ncua-message-notification__content-wrapper',
+  ICON: '.ncua-message-notification__icon',
+  ACTIONS_CONTAINER: '.ncua-message-notification__actions-container',
+  ACTIONS: '.ncua-message-notification__actions',
+  FOOTER_CONTAINER: '.ncua-message-notification__footer-container',
+  HIDE_LINK: '.ncua-message-notification__hide-link',
+  CLOSE_BUTTON: '.ncua-message-notification__close-button'
+};
+const mounted = [];
+function renderMessageNotification() {
+  let props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  const container = document.createElement('div');
+  document.body.appendChild(container);
+  const root = (0, _client.createRoot)(container);
+  (0, _testUtils.act)(() => {
+    root.render(/*#__PURE__*/(0, _react.createElement)(_MessageNotification.MessageNotification, {
+      title: '알림 제목',
+      ...props
+    }));
+  });
+  mounted.push({
+    root,
+    container
+  });
+  return container;
+}
+(0, _vitest.afterEach)(() => {
+  for (const {
+    root,
+    container
+  } of mounted.splice(0)) {
+    (0, _testUtils.act)(() => {
+      root.unmount();
+    });
+    container.remove();
+  }
+});
+(0, _vitest.describe)('MessageNotification (React) — DOM 구조 계약', () => {
+  (0, _vitest.it)('U-1: __footer-container가 __actions-container의 자식으로 렌더된다', () => {
+    // Given: 다시 보지 않기·닫기 핸들러가 주어지고
+    // When: MessageNotification을 렌더하면
+    const container = renderMessageNotification({
+      onHidePermanently: _vitest.vi.fn(),
+      onClose: _vitest.vi.fn()
+    });
+    // Then: footer-container는 actions-container의 직계 자식이다 (content의 직계 자식이 아니다)
+    const actionsContainer = container.querySelector(SELECTOR.ACTIONS_CONTAINER);
+    const footerContainer = container.querySelector(SELECTOR.FOOTER_CONTAINER);
+    (0, _vitest.expect)(actionsContainer).not.toBeNull();
+    (0, _vitest.expect)(footerContainer).not.toBeNull();
+    (0, _vitest.expect)(footerContainer?.parentElement).toBe(actionsContainer);
+  });
+  (0, _vitest.it)('U-2: actions 지정 시 __actions와 __footer-container가 __actions-container 안에 순서대로 공존한다', () => {
+    // Given: 액션 버튼 2개와 다시 보지 않기·닫기 핸들러가 주어지고
+    const actions = [{
+      label: '조회하기',
+      hierarchy: 'text',
+      onClick: _vitest.vi.fn()
+    }, {
+      label: '포인트 충전',
+      hierarchy: 'text-gray',
+      onClick: _vitest.vi.fn()
+    }];
+    // When: 렌더하면
+    const container = renderMessageNotification({
+      actions,
+      onHidePermanently: _vitest.vi.fn(),
+      onClose: _vitest.vi.fn()
+    });
+    // Then: actions-container의 자식은 [actions, footer-container] 순서다
+    const actionsContainer = container.querySelector(SELECTOR.ACTIONS_CONTAINER);
+    const actionsGroup = container.querySelector(SELECTOR.ACTIONS);
+    const footerContainer = container.querySelector(SELECTOR.FOOTER_CONTAINER);
+    (0, _vitest.expect)(actionsContainer).not.toBeNull();
+    (0, _vitest.expect)(Array.from(actionsContainer?.children ?? [])).toEqual([actionsGroup, footerContainer]);
+  });
+  (0, _vitest.it)('U-3: onHidePermanently·onClose·actions 미지정 시 빈 컨테이너가 남지 않는다', () => {
+    // Given/When: 우측 그룹에 표시할 요소가 하나도 없는 상태로 렌더하면
+    const container = renderMessageNotification();
+    // Then: actions-container도 footer-container도 렌더되지 않는다
+    (0, _vitest.expect)(container.querySelector(SELECTOR.ACTIONS_CONTAINER)).toBeNull();
+    (0, _vitest.expect)(container.querySelector(SELECTOR.FOOTER_CONTAINER)).toBeNull();
+    // 본문 영역은 그대로 유지된다
+    (0, _vitest.expect)(container.querySelector(SELECTOR.CONTENT_WRAPPER)).not.toBeNull();
+  });
+  (0, _vitest.it)('U-3-a: actions만 지정하면 actions-container만 남고 footer-container는 없다', () => {
+    // Given/When: 액션 버튼만 있고 닫기 그룹이 없으면
+    const container = renderMessageNotification({
+      actions: [{
+        label: '조회하기',
+        hierarchy: 'text',
+        onClick: _vitest.vi.fn()
+      }]
+    });
+    // Then: actions-container는 존재하고 그 자식은 actions 그룹 하나뿐이다
+    const actionsContainer = container.querySelector(SELECTOR.ACTIONS_CONTAINER);
+    const actionsGroup = container.querySelector(SELECTOR.ACTIONS);
+    (0, _vitest.expect)(actionsContainer).not.toBeNull();
+    (0, _vitest.expect)(container.querySelector(SELECTOR.FOOTER_CONTAINER)).toBeNull();
+    (0, _vitest.expect)(Array.from(actionsContainer?.children ?? [])).toEqual([actionsGroup]);
+  });
+  (0, _vitest.it)('U-3-b: onClose만 지정하면 footer-container에 닫기 버튼만 담긴다', () => {
+    // Given/When: 닫기 핸들러만 지정하면
+    const container = renderMessageNotification({
+      onClose: _vitest.vi.fn()
+    });
+    // Then: footer-container에는 닫기 버튼 1개만 존재하고 hide-link는 없다
+    const footerContainer = container.querySelector(SELECTOR.FOOTER_CONTAINER);
+    (0, _vitest.expect)(footerContainer?.children).toHaveLength(1);
+    (0, _vitest.expect)(footerContainer?.querySelector(SELECTOR.CLOSE_BUTTON)).not.toBeNull();
+    (0, _vitest.expect)(footerContainer?.querySelector(SELECTOR.HIDE_LINK)).toBeNull();
+  });
+  (0, _vitest.it)('U-4: FeaturedIcon이 md 사이즈(40px 원 / 20px 아이콘)로 렌더된다', () => {
+    // Given/When: error 색상으로 렌더하면
+    const container = renderMessageNotification({
+      color: 'error'
+    });
+    // Then: featured-icon은 --md 수식자를 가지며 내부 SVG는 20px다
+    const icon = container.querySelector(SELECTOR.ICON);
+    (0, _vitest.expect)(icon).not.toBeNull();
+    (0, _vitest.expect)(icon?.classList.contains('ncua-featured-icon--md')).toBe(true);
+    (0, _vitest.expect)(icon?.classList.contains('ncua-featured-icon--lg')).toBe(false);
+    (0, _vitest.expect)(icon?.querySelector('svg')?.getAttribute('width')).toBe('20');
+  });
+  (0, _vitest.it)('hide-link는 구현별 수식자(--link/--text) 없이 공통 클래스 2개만 갖는다', () => {
+    // Given/When: 다시 보지 않기 핸들러를 지정해 렌더하면
+    const container = renderMessageNotification({
+      onHidePermanently: _vitest.vi.fn()
+    });
+    // Then: SCSS 미정의 수식자 --link에 의존하지 않는다
+    const hideLink = container.querySelector(SELECTOR.HIDE_LINK);
+    (0, _vitest.expect)(hideLink?.className.split(' ').filter(Boolean).sort()).toEqual(['ncua-message-notification__hide-link', 'ncua-notification__action-button']);
+  });
+});
+(0, _vitest.describe)('MessageNotification (React) — 공개 API 회귀 방지', () => {
+  (0, _vitest.it)('지원하지 않는 color("info")는 neutral로 폴백한다', () => {
+    // Given/When: message 타입이 지원하지 않는 info 색상을 넘기면
+    const container = renderMessageNotification({
+      color: 'info'
+    });
+    // Then: neutral 수식자로 렌더되고 info 수식자는 없다
+    const root = container.querySelector(SELECTOR.ROOT);
+    (0, _vitest.expect)(root?.classList.contains('ncua-message-notification--neutral')).toBe(true);
+    (0, _vitest.expect)(root?.classList.contains('ncua-message-notification--info')).toBe(false);
+  });
+  (0, _vitest.it)('닫기/다시 보지 않기 클릭 시 핸들러가 호출되고 접근성 속성이 유지된다', () => {
+    // Given: 핸들러를 지정해 렌더하고
+    const onClose = _vitest.vi.fn();
+    const onHidePermanently = _vitest.vi.fn();
+    const container = renderMessageNotification({
+      onClose,
+      onHidePermanently
+    });
+    // When: 각 버튼을 클릭하면
+    (0, _testUtils.act)(() => {
+      container.querySelector(SELECTOR.CLOSE_BUTTON)?.click();
+      container.querySelector(SELECTOR.HIDE_LINK)?.click();
+    });
+    // Then: 핸들러가 각각 1회 호출되고 role/aria-label이 유지된다
+    (0, _vitest.expect)(onClose).toHaveBeenCalledTimes(1);
+    (0, _vitest.expect)(onHidePermanently).toHaveBeenCalledTimes(1);
+    (0, _vitest.expect)(container.querySelector(SELECTOR.ROOT)?.getAttribute('role')).toBe('alert');
+    (0, _vitest.expect)(container.querySelector(SELECTOR.CLOSE_BUTTON)?.getAttribute('aria-label')).toBe('알림 닫기');
+  });
+});
+(0, _vitest.describe)('MessageNotification (React) — 액션 버튼 색상(hierarchy)', () => {
+  const SIZE_MODIFIER = /^ncua-btn--(xs|sm|md|lg|xl)$/;
+  /** 사이즈를 제외한 `ncua-btn--*` 수식자 = 색상(hierarchy) 수식자. */
+  function buttonHierarchyModifiers(root) {
+    return Array.from(root.querySelectorAll('.ncua-btn')).map(button => Array.from(button.classList).find(name => name.startsWith('ncua-btn--') && !SIZE_MODIFIER.test(name)) ?? '');
+  }
+  (0, _vitest.it)('Figma TO-BE 조합(secondary-gray / secondary)을 ncua-btn 수식자로 반영한다', () => {
+    // Given/When: 조회하기 secondary-gray, 포인트 충전 secondary로 렌더하면
+    const container = renderMessageNotification({
+      actions: [{
+        label: '조회하기',
+        hierarchy: 'secondary-gray',
+        onClick: _vitest.vi.fn()
+      }, {
+        label: '포인트 충전',
+        hierarchy: 'secondary',
+        onClick: _vitest.vi.fn()
+      }]
+    });
+    // Then: ButtonTheme와 동일한 수식자가 순서대로 붙는다
+    (0, _vitest.expect)(buttonHierarchyModifiers(container)).toEqual(['ncua-btn--secondary-gray', 'ncua-btn--secondary']);
+  });
+  (0, _vitest.it)('text / text-gray도 계속 지원한다', () => {
+    // Given/When: 기존 어휘로 렌더하면
+    const container = renderMessageNotification({
+      actions: [{
+        label: '조회하기',
+        hierarchy: 'text',
+        onClick: _vitest.vi.fn()
+      }, {
+        label: '포인트 충전',
+        hierarchy: 'text-gray',
+        onClick: _vitest.vi.fn()
+      }]
+    });
+    // Then: 기존 수식자가 그대로 유지된다 (회귀 방지)
+    (0, _vitest.expect)(buttonHierarchyModifiers(container)).toEqual(['ncua-btn--text', 'ncua-btn--text-gray']);
+  });
+  (0, _vitest.it)('hierarchy를 생략하면 기본값 text로 렌더한다', () => {
+    // Given/When: 색상을 지정하지 않은 액션을 렌더하면
+    const container = renderMessageNotification({
+      actions: [{
+        label: '확인',
+        onClick: _vitest.vi.fn()
+      }]
+    });
+    // Then: Button의 기본값(secondary-gray)이 아니라 알림의 기본값 text가 적용된다
+    (0, _vitest.expect)(buttonHierarchyModifiers(container)).toEqual(['ncua-btn--text']);
+  });
+  (0, _vitest.it)('액션 버튼 클릭 시 onClick이 호출된다', () => {
+    // Given: secondary 색상 액션을 렌더하고
+    const onClick = _vitest.vi.fn();
+    const container = renderMessageNotification({
+      actions: [{
+        label: '포인트 충전',
+        hierarchy: 'secondary',
+        onClick
+      }]
+    });
+    // When: 버튼을 클릭하면
+    (0, _testUtils.act)(() => {
+      container.querySelector('.ncua-btn')?.click();
+    });
+    // Then: 핸들러가 1회 호출된다
+    (0, _vitest.expect)(onClick).toHaveBeenCalledTimes(1);
+  });
+});

package/dist/cjs/src/components/overlays/notification/__tests__/hidePermanentlyLabel.test.js

@@ -0,0 +1,209 @@
+"use strict";
+
+var _react = require("react");
+var _client = require("react-dom/client");
+var _testUtils = require("react-dom/test-utils");
+var _vitest = require("vitest");
+var _FullWidthNotification = require("../FullWidthNotification");
+var _MessageNotification = require("../MessageNotification");
+var _Notification = require("../Notification");
+// @vitest-environment jsdom
+
+// React 18에서 act() 사용 시 필요한 플래그 (미설정 시 console.error 경고 발생)
+globalThis.IS_REACT_ACT_ENVIRONMENT = true;
+const SELECTOR = {
+  /** message 타입 — 고도몰이 textContent 덮어쓰기에 쓰는 하위호환 계약 선택자. */
+  MESSAGE_HIDE_LINK: '.ncua-message-notification__hide-link',
+  /** full-width 타입 — 다시보지 않기 버튼. */
+  FULL_WIDTH_LINK: '.ncua-full-width-notification__link',
+  ACTION_BUTTON: '.ncua-notification__action-button'
+};
+/** 각 타입의 현행 기본 문구. 표기 통일은 별도 결정 사항이므로 서로 다른 값을 그대로 유지한다. */
+const DEFAULT_LABEL = {
+  MESSAGE: '다시 보지 않기',
+  FULL_WIDTH: '다시보지 않기'
+};
+const mounted = [];
+function render(element) {
+  const container = document.createElement('div');
+  document.body.appendChild(container);
+  const root = (0, _client.createRoot)(container);
+  (0, _testUtils.act)(() => {
+    root.render(element);
+  });
+  mounted.push({
+    root,
+    container
+  });
+  return container;
+}
+function renderMessage() {
+  let props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return render(/*#__PURE__*/(0, _react.createElement)(_MessageNotification.MessageNotification, {
+    title: '알림 제목',
+    ...props
+  }));
+}
+function renderFullWidth() {
+  let props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return render(/*#__PURE__*/(0, _react.createElement)(_FullWidthNotification.FullWidthNotification, {
+    title: '알림 제목',
+    ...props
+  }));
+}
+function renderNotification() {
+  let props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return render(/*#__PURE__*/(0, _react.createElement)(_Notification.Notification, {
+    title: '알림 제목',
+    ...props
+  }));
+}
+(0, _vitest.afterEach)(() => {
+  for (const {
+    root,
+    container
+  } of mounted.splice(0)) {
+    (0, _testUtils.act)(() => {
+      root.unmount();
+    });
+    container.remove();
+  }
+});
+(0, _vitest.describe)('hidePermanentlyLabel (React) — message 타입', () => {
+  (0, _vitest.it)('R-1: prop 미지정 시 기본 문구 "다시 보지 않기"가 렌더된다', () => {
+    // Given: hidePermanentlyLabel 없이 onHidePermanently만 주어지고
+    // When: MessageNotification을 렌더하면
+    const container = renderMessage({
+      onHidePermanently: _vitest.vi.fn()
+    });
+    // Then: 현행 기본 문구가 그대로 노출된다 (시각적 변화 0)
+    const hideLink = container.querySelector(SELECTOR.MESSAGE_HIDE_LINK);
+    (0, _vitest.expect)(hideLink?.textContent).toBe(DEFAULT_LABEL.MESSAGE);
+  });
+  (0, _vitest.it)('R-2: prop 지정 시 그 값이 렌더된다', () => {
+    // Given: 커스텀 라벨이 주어지고
+    // When: 렌더하면
+    const container = renderMessage({
+      onHidePermanently: _vitest.vi.fn(),
+      hidePermanentlyLabel: '30일간 보지 않기'
+    });
+    // Then: 하드코딩 문구 대신 전달한 값이 노출된다
+    const hideLink = container.querySelector(SELECTOR.MESSAGE_HIDE_LINK);
+    (0, _vitest.expect)(hideLink?.textContent).toBe('30일간 보지 않기');
+  });
+  (0, _vitest.it)('R-3: ReactNode 라벨을 받아 엘리먼트로 렌더한다', () => {
+    // Given: 문자열이 아닌 ReactNode 라벨이 주어지고
+    const label = /*#__PURE__*/(0, _react.createElement)('span', {
+      className: 'custom-hide-label'
+    }, '커스텀 노드');
+    // When: 렌더하면
+    const container = renderMessage({
+      onHidePermanently: _vitest.vi.fn(),
+      hidePermanentlyLabel: label
+    });
+    // Then: 노드가 hide-link 내부에 그대로 마운트된다
+    const hideLink = container.querySelector(SELECTOR.MESSAGE_HIDE_LINK);
+    (0, _vitest.expect)(hideLink?.querySelector('.custom-hide-label')?.textContent).toBe('커스텀 노드');
+  });
+  (0, _vitest.it)('R-4: 라벨을 바꿔도 __hide-link 클래스 계약이 유지된다', () => {
+    // Given: 커스텀 라벨이 주어지고
+    // When: 렌더하면
+    const container = renderMessage({
+      onHidePermanently: _vitest.vi.fn(),
+      hidePermanentlyLabel: '커스텀'
+    });
+    // Then: 고도몰의 textContent 덮어쓰기가 계속 동작하도록 기존 클래스가 모두 남는다
+    const hideLink = container.querySelector(SELECTOR.MESSAGE_HIDE_LINK);
+    (0, _vitest.expect)(hideLink).not.toBeNull();
+    (0, _vitest.expect)(hideLink?.classList.contains('ncua-notification__action-button')).toBe(true);
+    (0, _vitest.expect)(hideLink?.classList.contains('ncua-message-notification__hide-link')).toBe(true);
+  });
+  (0, _vitest.it)('R-5: onHidePermanently 없이 라벨만 주면 버튼이 렌더되지 않는다', () => {
+    // Given: 핸들러 없이 라벨만 주어지고
+    // When: 렌더하면
+    const container = renderMessage({
+      hidePermanentlyLabel: '커스텀'
+    });
+    // Then: 라벨만으로는 버튼이 생기지 않는다 (핸들러가 렌더 조건)
+    (0, _vitest.expect)(container.querySelector(SELECTOR.MESSAGE_HIDE_LINK)).toBeNull();
+  });
+  (0, _vitest.it)('R-6: 라벨이 DOM 속성으로 새어나가지 않는다', () => {
+    // Given: 커스텀 라벨이 주어지고
+    // When: 렌더하면
+    const container = renderMessage({
+      onHidePermanently: _vitest.vi.fn(),
+      hidePermanentlyLabel: '커스텀'
+    });
+    // Then: rest 스프레드를 타고 루트 div의 속성으로 흘러들지 않는다
+    const root = container.querySelector('.ncua-message-notification');
+    (0, _vitest.expect)(root?.hasAttribute('hidepermanentlylabel')).toBe(false);
+  });
+});
+(0, _vitest.describe)('hidePermanentlyLabel (React) — full-width 타입', () => {
+  (0, _vitest.it)('R-7: prop 미지정 시 기본 문구 "다시보지 않기"가 렌더된다', () => {
+    // Given: hidePermanentlyLabel 없이 onHidePermanently만 주어지고
+    // When: FullWidthNotification을 렌더하면
+    const container = renderFullWidth({
+      onHidePermanently: _vitest.vi.fn()
+    });
+    // Then: message 타입과 다른 현행 문구가 그대로 유지된다 (표기 통일은 별도 결정)
+    const hideButton = container.querySelector(SELECTOR.FULL_WIDTH_LINK);
+    (0, _vitest.expect)(hideButton?.textContent).toBe(DEFAULT_LABEL.FULL_WIDTH);
+  });
+  (0, _vitest.it)('R-8: prop 지정 시 그 값이 렌더된다', () => {
+    // Given: 커스텀 라벨이 주어지고
+    // When: 렌더하면
+    const container = renderFullWidth({
+      onHidePermanently: _vitest.vi.fn(),
+      hidePermanentlyLabel: '오늘 하루 보지 않기'
+    });
+    // Then: 전달한 값이 노출된다
+    const hideButton = container.querySelector(SELECTOR.FULL_WIDTH_LINK);
+    (0, _vitest.expect)(hideButton?.textContent).toBe('오늘 하루 보지 않기');
+  });
+  (0, _vitest.it)('R-9: 라벨을 바꿔도 기존 클래스 계약이 유지된다', () => {
+    // Given: 커스텀 라벨이 주어지고
+    // When: 렌더하면
+    const container = renderFullWidth({
+      onHidePermanently: _vitest.vi.fn(),
+      hidePermanentlyLabel: '커스텀'
+    });
+    // Then: 액션 버튼 클래스가 그대로 남는다
+    const hideButton = container.querySelector(SELECTOR.FULL_WIDTH_LINK);
+    (0, _vitest.expect)(hideButton?.classList.contains('ncua-notification__action-button')).toBe(true);
+    (0, _vitest.expect)(hideButton?.classList.contains('ncua-notification__action-button--text')).toBe(true);
+  });
+  (0, _vitest.it)('R-10: onHidePermanently 없이 라벨만 주면 버튼이 렌더되지 않는다', () => {
+    // Given: 핸들러 없이 라벨만 주어지고
+    // When: 렌더하면
+    const container = renderFullWidth({
+      hidePermanentlyLabel: '커스텀'
+    });
+    // Then: 액션 버튼이 생기지 않는다
+    (0, _vitest.expect)(container.querySelector(SELECTOR.ACTION_BUTTON)).toBeNull();
+  });
+});
+(0, _vitest.describe)('hidePermanentlyLabel (React) — Notification 공유 Props 경유', () => {
+  (0, _vitest.it)('R-11: type="message"에서 공유 Props의 라벨이 전달된다', () => {
+    // Given: 공유 Notification props로 라벨이 주어지고
+    // When: type="message"로 렌더하면
+    const container = renderNotification({
+      type: 'message',
+      onHidePermanently: _vitest.vi.fn(),
+      hidePermanentlyLabel: '공유 프롭 라벨'
+    });
+    // Then: message 구현까지 라벨이 도달한다
+    (0, _vitest.expect)(container.querySelector(SELECTOR.MESSAGE_HIDE_LINK)?.textContent).toBe('공유 프롭 라벨');
+  });
+  (0, _vitest.it)('R-12: type="full-width"에서 공유 Props의 라벨이 전달된다', () => {
+    // Given: 공유 Notification props로 라벨이 주어지고
+    // When: type="full-width"로 렌더하면
+    const container = renderNotification({
+      type: 'full-width',
+      onHidePermanently: _vitest.vi.fn(),
+      hidePermanentlyLabel: '공유 프롭 라벨'
+    });
+    // Then: full-width 구현까지 라벨이 도달한다
+    (0, _vitest.expect)(container.querySelector(SELECTOR.FULL_WIDTH_LINK)?.textContent).toBe('공유 프롭 라벨');
+  });
+});