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

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

@@ -0,0 +1,284 @@
+"use strict";
+
+var _react = require("react");
+var _client = require("react-dom/client");
+var _testUtils = require("react-dom/test-utils");
+var _vitest = require("vitest");
+var _Notification = require("../../../../../assets/scripts/notification/Notification");
+var _positionSync = require("../../../../../assets/scripts/notification/positionSync");
+var _dom = require("../../../../__tests__/helpers/dom");
+var _matchMedia = require("../../../../__tests__/helpers/matchMedia");
+var _FloatingNotification = require("../FloatingNotification");
+// @vitest-environment jsdom
+
+// React 18에서 act() 사용 시 필요한 플래그 (미설정 시 console.error 경고 발생)
+globalThis.IS_REACT_ACT_ENVIRONMENT = true;
+const HOST_SELECTOR = '.ncua-floating-notification-host';
+const SELECTOR = {
+  CARD: '.ncua-floating-notification',
+  TITLE: '.ncua-floating-notification__title',
+  SUPPORTING_TEXT: '.ncua-floating-notification__supporting-text',
+  ACTIONS: '.ncua-floating-notification__actions',
+  CLOSE: '.ncua-floating-notification__close-button',
+  FEATURED_ICON: '.ncua-featured-icon'
+};
+/** React portal 2개 + vanilla show() 1개. */
+const SHARED_HOST_CARD_COUNT = 3;
+const cleanups = [];
+const mounted = [];
+/** React 이벤트 핸들러 예외는 window error 로만 보고된다 — 클릭 경로는 이 배열이 비었는지 본다. */
+let windowErrors = [];
+function onWindowError(event) {
+  windowErrors.push(event.error);
+}
+(0, _vitest.beforeEach)(() => {
+  windowErrors = [];
+  window.addEventListener('error', onWindowError);
+  cleanups.push(() => window.removeEventListener('error', onWindowError));
+});
+(0, _vitest.afterEach)(() => {
+  for (const {
+    root,
+    container
+  } of mounted.splice(0)) {
+    (0, _testUtils.act)(() => {
+      root.unmount();
+    });
+    container.remove();
+  }
+  for (const cleanup of cleanups.splice(0).reverse()) {
+    cleanup();
+  }
+  // portal 이 시작한 위치 동기화(모듈 싱글턴)와 호스트를 걷어 다음 테스트가 새 호스트를 만들게 한다.
+  (0, _positionSync.stopPositionSync)();
+  for (const host of Array.from(document.querySelectorAll(HOST_SELECTOR))) {
+    host.remove();
+  }
+});
+function installMatchMedia(initial) {
+  return (0, _matchMedia.installMatchMedia)(cleanups, initial, dispatchToListeners => {
+    (0, _testUtils.act)(() => {
+      dispatchToListeners();
+    });
+  });
+}
+function mount(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 render() {
+  let props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return mount(/*#__PURE__*/(0, _react.createElement)(_FloatingNotification.FloatingNotification, {
+    title: '제목',
+    ...props
+  }));
+}
+(0, _vitest.describe)('FloatingNotification (React) — portal', () => {
+  (0, _vitest.beforeEach)(() => {
+    installMatchMedia(false);
+  });
+  (0, _vitest.it)('RNT-02: portal 기본(false) 이면 부모 트리 안에 인라인으로 렌더하고 호스트를 만들지 않는다', () => {
+    // Given/When: portal 없이 렌더하면
+    const container = render();
+    // Then: 카드는 컨테이너 안에 있고 호스트는 없다
+    (0, _vitest.expect)(container.querySelector(SELECTOR.CARD)).not.toBeNull();
+    (0, _vitest.expect)(document.querySelector(HOST_SELECTOR)).toBeNull();
+  });
+  (0, _vitest.it)('RNT-02: portal 이면 effect 뒤 body 의 호스트에 포털로 렌더한다', () => {
+    // Given/When: portal 로 렌더하면
+    const container = render({
+      portal: true
+    });
+    // Then: 카드는 컨테이너가 아니라 호스트 아래에 있다
+    const host = (0, _dom.mustQuery)(document.body, HOST_SELECTOR);
+    (0, _vitest.expect)(container.querySelector(SELECTOR.CARD)).toBeNull();
+    (0, _vitest.expect)((0, _dom.mustQuery)(host, SELECTOR.CARD).parentElement).toBe(host);
+  });
+  (0, _vitest.it)('RNT-02: 두 인스턴스와 vanilla show() 가 같은 호스트를 공유하고, 언마운트 뒤에도 호스트는 남는다', () => {
+    // Given: portal 알림 두 개를 렌더하고
+    render({
+      portal: true,
+      title: '첫째'
+    });
+    render({
+      portal: true,
+      title: '둘째'
+    });
+    const host = (0, _dom.mustQuery)(document.body, HOST_SELECTOR);
+    // When: vanilla floating 을 show 하면
+    const vanilla = new _Notification.NcuaNotification({
+      title: '바닐라',
+      type: 'floating'
+    });
+    cleanups.push(() => vanilla.destroy());
+    vanilla.show();
+    // Then: 호스트는 하나이고 세 카드가 모두 그 호스트의 자식이다
+    (0, _vitest.expect)(document.querySelectorAll(HOST_SELECTOR)).toHaveLength(1);
+    (0, _vitest.expect)(host.children).toHaveLength(SHARED_HOST_CARD_COUNT);
+    (0, _vitest.expect)(host.querySelectorAll(`:scope > ${SELECTOR.CARD}`)).toHaveLength(SHARED_HOST_CARD_COUNT);
+    (0, _vitest.expect)(vanilla.getElement().parentElement).toBe(host);
+    // When: React 쪽을 모두 언마운트하면
+    for (const {
+      root,
+      container
+    } of mounted.splice(0)) {
+      (0, _testUtils.act)(() => {
+        root.unmount();
+      });
+      container.remove();
+    }
+    // Then: 호스트는 문서에 남아 있다
+    (0, _vitest.expect)(host.isConnected).toBe(true);
+  });
+});
+(0, _vitest.describe)('FloatingNotification (React) — a11y · 닫기', () => {
+  (0, _vitest.beforeEach)(() => {
+    installMatchMedia(false);
+  });
+  _vitest.it.each([{
+    color: 'error',
+    role: 'alert'
+  }, {
+    color: 'warning',
+    role: 'alert'
+  }, {
+    color: 'success',
+    role: 'status'
+  }, {
+    color: 'neutral',
+    role: 'status'
+  }])('RNT-03: color $color → role="$role"', _ref => {
+    let {
+      color,
+      role
+    } = _ref;
+    // Given/When: 색상을 주어 렌더하면
+    const card = (0, _dom.mustQuery)(render({
+      color
+    }), SELECTOR.CARD);
+    // Then: 색상에 맞는 live region role 이다
+    (0, _vitest.expect)(card.getAttribute('role')).toBe(role);
+  });
+  (0, _vitest.it)('RNT-03: aria-labelledby 는 제목 id, aria-describedby 는 supportingText 가 있을 때만 그 id 를 가리킨다', () => {
+    // Given/When: 본문 유무만 다르게 두 개 렌더하면
+    const withText = (0, _dom.mustQuery)(render({
+      supportingText: '본문'
+    }), SELECTOR.CARD);
+    const withoutText = (0, _dom.mustQuery)(render(), SELECTOR.CARD);
+    // Then: 제목 · 본문 id 와 연결되고, 본문이 없으면 describedby 가 없다
+    (0, _vitest.expect)(withText.getAttribute('aria-labelledby')).toBe((0, _dom.mustQuery)(withText, SELECTOR.TITLE).id);
+    (0, _vitest.expect)(withText.getAttribute('aria-describedby')).toBe((0, _dom.mustQuery)(withText, SELECTOR.SUPPORTING_TEXT).id);
+    (0, _vitest.expect)(withoutText.hasAttribute('aria-describedby')).toBe(false);
+  });
+  (0, _vitest.it)('RNT-10: 닫기 버튼은 클릭하면 onClose 를 부르지만 접근 가능한 이름(aria-label)이 없다', () => {
+    // 현재 동작 고정 — 결함 후보 #597 CA-02 · RTP-18 (공용 ButtonCloseX 가 aria-label 을 받지 않음)
+    // Given: onClose 가 있는 알림을 렌더하고
+    const onClose = _vitest.vi.fn();
+    const button = (0, _dom.mustQuery)(render({
+      onClose
+    }), SELECTOR.CLOSE);
+    // When: 닫기 버튼을 클릭하면
+    (0, _testUtils.act)(() => {
+      button.click();
+    });
+    // Then: onClose 는 불리고 예외는 없지만 버튼 이름이 비어 있다
+    (0, _vitest.expect)(onClose).toHaveBeenCalled();
+    (0, _vitest.expect)(windowErrors).toEqual([]);
+    (0, _vitest.expect)(button.getAttribute('aria-label')).toBeNull();
+  });
+  _vitest.it.todo('RNT-10 floating 닫기 버튼에 "알림 닫기" 접근 가능한 이름이 있다 (vanilla 와 같게)');
+});
+(0, _vitest.describe)('FloatingNotification (React) — 모바일', () => {
+  _vitest.it.each([{
+    viewport: 'mobile',
+    matches: true,
+    featuredIcon: 'md',
+    closeButton: 'sm'
+  }, {
+    viewport: 'desktop',
+    matches: false,
+    featuredIcon: 'sm',
+    closeButton: 'xs'
+  }])('RNT-04: $viewport 에서 마운트하면 FeaturedIcon $featuredIcon · 닫기 $closeButton 크기다', _ref2 => {
+    let {
+      matches,
+      featuredIcon,
+      closeButton
+    } = _ref2;
+    // Given/When: 매체 조건을 맞추고 닫기 버튼이 있는 알림을 렌더하면
+    installMatchMedia(matches);
+    const container = render({
+      onClose: _vitest.vi.fn()
+    });
+    // Then: 첫 effect 뒤 그 화면 크기다
+    const icon = (0, _dom.mustQuery)(container, SELECTOR.FEATURED_ICON);
+    const close = (0, _dom.mustQuery)(container, SELECTOR.CLOSE);
+    (0, _vitest.expect)(icon.classList.contains(`ncua-featured-icon--${featuredIcon}`)).toBe(true);
+    (0, _vitest.expect)(close.classList.contains(`ncua-button-close-x--${closeButton}`)).toBe(true);
+  });
+  (0, _vitest.it)('RNT-04 · RNT-09: 데스크톱에서 모바일로 바뀌면 onClose 를 부르지만 카드는 그대로 남는다', () => {
+    // 현재 동작 고정 — 결함 후보 #620 (전환 시 onClose 만 부르고 카드를 남김 — vanilla 는 제거)
+    // Given: 데스크톱에서 렌더된 알림이
+    const media = installMatchMedia(false);
+    const onClose = _vitest.vi.fn();
+    const container = render({
+      onClose
+    });
+    // When: 모바일로 전환되면
+    media.fire(true);
+    // Then: onClose 는 불리고 크기는 모바일이 되지만 카드는 소비자가 지울 때까지 남는다
+    const card = (0, _dom.mustQuery)(container, SELECTOR.CARD);
+    (0, _vitest.expect)(onClose).toHaveBeenCalled();
+    (0, _vitest.expect)((0, _dom.mustQuery)(card, SELECTOR.FEATURED_ICON).classList.contains('ncua-featured-icon--md')).toBe(true);
+    (0, _vitest.expect)(card.isConnected).toBe(true);
+  });
+  (0, _vitest.it)('RNT-09: 처음부터 모바일이면 마운트 시 onClose 를 부르지 않는다', () => {
+    // 현재 동작 고정 — 결함 후보 #620 (vanilla 는 생성 시 즉시 onClose — React 는 전환 때만)
+    // Given/When: 모바일 매체 조건에서 렌더하면
+    installMatchMedia(true);
+    const onClose = _vitest.vi.fn();
+    const container = render({
+      onClose
+    });
+    // Then: 카드는 표시되고 onClose 는 불리지 않는다
+    (0, _vitest.expect)(container.querySelector(SELECTOR.CARD)).not.toBeNull();
+    (0, _vitest.expect)(onClose).not.toHaveBeenCalled();
+  });
+  _vitest.it.todo('RNT-09 모바일 진입 시 React · vanilla 가 같은 규칙으로 onClose 와 카드 제거를 처리한다');
+});
+(0, _vitest.describe)('FloatingNotification (React) — 결함 후보: info · 빈 actions', () => {
+  (0, _vitest.beforeEach)(() => {
+    installMatchMedia(false);
+  });
+  (0, _vitest.it)('RNT-08: color info 면 --info 클래스로 아이콘 없이 렌더한다 (vanilla 는 neutral 클래스 + 핀 아이콘)', () => {
+    // 현재 동작 고정 — 결함 후보 #620 (info 가 iconMap 에 없어 아이콘 미렌더 — vanilla 는 neutral 로 대체)
+    // Given/When: info 로 렌더하면
+    const card = (0, _dom.mustQuery)(render({
+      color: 'info'
+    }), SELECTOR.CARD);
+    // Then: --info 클래스이고 FeaturedIcon 이 없다
+    (0, _vitest.expect)(card.classList.contains('ncua-floating-notification--info')).toBe(true);
+    (0, _vitest.expect)(card.classList.contains('ncua-floating-notification--neutral')).toBe(false);
+    (0, _vitest.expect)(card.querySelector(SELECTOR.FEATURED_ICON)).toBeNull();
+  });
+  _vitest.it.todo('RNT-08 floating color info 는 vanilla 와 같게 neutral 클래스와 핀 아이콘으로 렌더한다');
+  (0, _vitest.it)('RNT-11: actions 가 빈 배열이면 버튼 없는 빈 __actions 래퍼를 렌더한다', () => {
+    // 현재 동작 고정 — 결함 후보 #620 (`actions &&` 판정이라 빈 배열도 래퍼를 만듦)
+    // Given/When: actions 를 빈 배열로 렌더하면
+    const wrapper = (0, _dom.mustQuery)(render({
+      actions: []
+    }), SELECTOR.ACTIONS);
+    // Then: 래퍼는 있지만 버튼이 없다
+    (0, _vitest.expect)(wrapper.querySelector('button')).toBeNull();
+  });
+  _vitest.it.todo('RNT-11 actions 가 빈 배열이면 __actions 래퍼를 렌더하지 않는다');
+});

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

@@ -285,4 +285,16 @@ function renderedIconPathD(container) {
     // Then: 핸들러가 1회 호출된다
     (0, _vitest.expect)(onClick).toHaveBeenCalledTimes(1);
   });
+});
+(0, _vitest.describe)('MessageNotification (React) — 아이콘 폴백', () => {
+  (0, _vitest.it)('RNT-12: 타입 밖 color 로 기본 아이콘 매핑이 비면 핀 아이콘으로 폴백한다', () => {
+    // Given/When: 기본 매개변수가 대체하지 못하는 타입 밖 color 로 렌더하면 (JS 소비자 오입력 재현)
+    const container = renderMessageNotification({
+      color: 'unknown'
+    });
+    // Then: 아이콘 자리가 비지 않고 Pin02 로 렌더된다
+    const pin = iconPathD(_uiAdminIcon.Pin02);
+    (0, _vitest.expect)(pin).not.toBeNull();
+    (0, _vitest.expect)(renderedIconPathD(container)).toBe(pin);
+  });
 });

package/dist/cjs/src/components/overlays/postcode-search-modal/PostcodeSearchModalTip.js

@@ -3,14 +3,14 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.Tip = exports.TIP_TITLE = void 0;
+exports.Tip = void 0;
 var _jsxRuntime = require("react/jsx-runtime");
 var _uiAdminIcon = require("@ncds/ui-admin-icon");
 var _classnames = _interopRequireDefault(require("classnames"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const TIP_LABEL = 'Tip';
 /** Tip 카드 첫 줄 안내 문구 (기획서 TIPS.searchTitle) */
-const TIP_TITLE = exports.TIP_TITLE = '아래 조합으로 검색하면 원하는 주소를 더 쉽게 찾을 수 있어요.';
+const TIP_TITLE = '아래 조합으로 검색하면 원하는 주소를 더 쉽게 찾을 수 있어요.';
 /** Tip 에 노출할 검색어 조합과 예시 주소 (기획서 TIPS.searchTips) */
 const TIP_ITEMS = [{
   combination: '도로명 + 건물번호',

package/dist/cjs/src/components/overlays/postcode-search-modal/__tests__/PostcodeSearchModal.viewport.test.js

@@ -0,0 +1,141 @@
+"use strict";
+
+var _react = require("react");
+var _client = require("react-dom/client");
+var _testUtils = require("react-dom/test-utils");
+var _vitest = require("vitest");
+var _PostcodeSearchModal = require("../PostcodeSearchModal");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); } // @vitest-environment jsdom
+// React 18에서 act() 사용 시 필요한 플래그 (미설정 시 console.error 경고 발생)
+globalThis.IS_REACT_ACT_ENVIRONMENT = true;
+/**
+ * Modal.Content 를 스크롤 컨테이너 클래스가 없는 div 로 바꿀 수 있게 한다.
+ * 실제 사용처는 항상 Modal.Content 안이라 "스크롤 컨테이너를 못 찾는" 분기에는 이 대역으로만 닿는다.
+ * plain 이 false 면 실구현을 그대로 쓴다.
+ */
+const contentMode = _vitest.vi.hoisted(() => ({
+  plain: false
+}));
+_vitest.vi.mock('../../modal', async importOriginal => {
+  const actual = await importOriginal();
+  const react = await Promise.resolve().then(() => _interopRequireWildcard(require('react')));
+  const Content = props => contentMode.plain ? react.createElement('div', {
+    className: 'plain-content'
+  }, props.children) : react.createElement(actual.Modal.Content, props);
+  const Modal = Object.assign(props => react.createElement(actual.Modal, props), actual.Modal, {
+    Content
+  });
+  return {
+    ...actual,
+    Modal
+  };
+});
+const RESULT_COUNT = 3;
+const ZIP_CODE_BASE = 10000;
+/** 본문을 아래로 내린 상태를 흉내 낼 scrollTop 값 */
+const SCROLLED_OFFSET = 120;
+const SEARCH_QUERY = '판교로';
+const makeResults = count => Array.from({
+  length: count
+}, (_, i) => ({
+  zipCode: String(ZIP_CODE_BASE + i),
+  roadAddress: `도로명 주소 ${i}`,
+  jibunAddress: `지번 주소 ${i}`
+}));
+const baseProps = function () {
+  let overrides = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return {
+    open: true,
+    onClose: _vitest.vi.fn(),
+    searchQuery: '',
+    onSearchQueryChange: _vitest.vi.fn(),
+    onSearch: _vitest.vi.fn(),
+    results: [],
+    totalCount: 0,
+    currentPage: 1,
+    onPageChange: _vitest.vi.fn(),
+    onSelect: _vitest.vi.fn(),
+    ...overrides
+  };
+};
+const mounted = [];
+(0, _vitest.afterEach)(() => {
+  for (const {
+    root,
+    container
+  } of mounted.splice(0)) {
+    (0, _testUtils.act)(() => root.unmount());
+    container.remove();
+  }
+  contentMode.plain = false;
+  _vitest.vi.unstubAllGlobals();
+});
+/** Modal 은 document.body 포털이라 조회 기준은 body 다 */
+const mount = node => {
+  const container = document.createElement('div');
+  document.body.appendChild(container);
+  const root = (0, _client.createRoot)(container);
+  mounted.push({
+    root,
+    container
+  });
+  (0, _testUtils.act)(() => root.render(node));
+  return document.body;
+};
+const mustQuery = (root, selector) => {
+  const found = root.querySelector(selector);
+  if (!found) throw new Error(`요소를 찾을 수 없습니다: ${selector}`);
+  return found;
+};
+/** jsdom 은 레이아웃이 없어 scrollTop 이 항상 0 이므로, 값을 덮어쓰고 scroll 이벤트를 쏜다 */
+const scroll = scroller => {
+  Object.defineProperty(scroller, 'scrollTop', {
+    value: SCROLLED_OFFSET,
+    configurable: true
+  });
+  (0, _testUtils.act)(() => {
+    scroller.dispatchEvent(new Event('scroll'));
+  });
+};
+const isFixed = body => mustQuery(body, '.ncua-postcode-search-modal__search-area').classList.contains('is-fixed');
+(0, _vitest.describe)('PostcodeSearchModal — 뷰포트 판정 · 스크롤 컨테이너 · 검색어 지우기 (RSD-03)', () => {
+  (0, _vitest.it)('RSD-03 matchMedia 가 없는 환경에서도 렌더하고 PC 판정(pc 페이지네이션)을 유지한다', () => {
+    // Given: matchMedia 를 제거한 환경 (SSR · 구형 브라우저)
+    _vitest.vi.stubGlobal('matchMedia', undefined);
+    (0, _vitest.expect)(typeof window.matchMedia).toBe('undefined');
+    // When: 결과가 있는 모달을 렌더한다
+    const body = mount(/*#__PURE__*/(0, _react.createElement)(_PostcodeSearchModal.PostcodeSearchModal, baseProps({
+      results: makeResults(RESULT_COUNT),
+      totalCount: RESULT_COUNT
+    })));
+    // Then: 결과 목록이 있고 페이지네이션은 pc 다
+    (0, _vitest.expect)(body.querySelectorAll('.ncua-postcode-search-modal__item').length).toBe(RESULT_COUNT);
+    (0, _vitest.expect)(mustQuery(body, '.ncua-pagination').classList.contains('ncua-pagination--pc')).toBe(true);
+  });
+  (0, _vitest.it)('RSD-03 스크롤 컨테이너(.ncua-modal__content) 밖에 렌더되면 경계선 감시를 걸지 않아 스크롤해도 is-fixed 가 없다', () => {
+    // Given: 스크롤 컨테이너 클래스가 없는 본문 대역 안에 결과와 함께 렌더
+    contentMode.plain = true;
+    const body = mount(/*#__PURE__*/(0, _react.createElement)(_PostcodeSearchModal.PostcodeSearchModal, baseProps({
+      results: makeResults(RESULT_COUNT),
+      totalCount: RESULT_COUNT
+    })));
+    // When: 대역 본문을 스크롤한다
+    scroll(mustQuery(body, '.plain-content'));
+    // Then: is-fixed 가 붙지 않는다 (실제 Modal.Content 안에서 붙는 대조는 PostcodeSearchModal.test.ts
+    // '결과를 스크롤하면 is-fixed 가 붙고, 맨 위로 돌아오면 다시 사라진다')
+    (0, _vitest.expect)(body.querySelector('.ncua-modal__content')).toBeNull();
+    (0, _vitest.expect)(isFixed(body)).toBe(false);
+  });
+  (0, _vitest.it)('RSD-03 검색어 지우기 버튼을 클릭하면 onSearchQueryChange 를 빈 문자열로 부른다', () => {
+    // Given: 검색어가 있는 모달
+    const onSearchQueryChange = _vitest.vi.fn();
+    const body = mount(/*#__PURE__*/(0, _react.createElement)(_PostcodeSearchModal.PostcodeSearchModal, baseProps({
+      searchQuery: SEARCH_QUERY,
+      onSearchQueryChange
+    })));
+    // When: 지우기 버튼을 클릭한다
+    (0, _testUtils.act)(() => mustQuery(body, '.ncua-input__clear').click());
+    // Then: 빈 문자열로 알린다
+    (0, _vitest.expect)(onSearchQueryChange).toHaveBeenCalledWith('');
+  });
+});