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

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);
+  });
+});