@blaze-cms/react-page-builder 0.124.0-alpha.2 → 0.124.0-alpha.22

package/src/components/SearchContent/index.js

@@ -1,179 +1,3 @@
-import React, { useState } from 'react';
-import PropTypes from 'prop-types';
-import { gql, useQuery } from '@apollo/client';
-import { useRouter } from 'next/router';
-import { getPublishedContent } from '../../application/query';
-import BlazeLink from '../BlazeLink';
-
-const SearchContent = ({
-  entity,
-  searchInputAlignment,
-  searchInputWrapperMobile,
-  searchInputWrapperDesktop,
-  collapsible,
-  isMobile,
-  placeholder
-}) => {
-  const [collapsed, setCollapsed] = useState(collapsible);
-  const [searchTerm, setSearchTerm] = useState(null);
-  const router = useRouter();
-
-  const capitalize = s => {
-    if (typeof s !== 'string') return '';
-    return s.charAt(0).toUpperCase() + s.slice(1);
-  };
-
-  const [a, b] = entity.split('_');
-
-  const entityName = capitalize(a) + capitalize(b);
-
-  const rawQueryStringified = JSON.stringify({
-    size: 0,
-    query: {
-      bool: {
-        should: [
-          {
-            match: {
-              docType: entity
-            }
-          }
-        ],
-        minimum_should_match: 1
-      }
-    }
-  });
-
-  const query = gql`
-    ${getPublishedContent(entityName)}
-  `;
-
-  const { loading, error, data } = useQuery(query, {
-    variables: { rawQueryStringified, offset: 0, limit: 5 }
-  });
-
-  if (loading) return null;
-  if (error) return null;
-
-  const handleClick = (e, url) => {
-    e.preventDefault();
-    router.push(url);
-  };
-
-  const handleKeyPress = e => {
-    if (e.key === 'Enter' && e.target.value !== '') {
-      router.push(`/search?search_term=${e.target.value}`);
-    }
-  };
-
-  const renderResults = () => {
-    // eslint-disable-next-line no-undef
-    const { results } = data?.searchPublishedContent;
-
-    if (results && searchTerm && searchTerm !== '') {
-      return results.map(({ name, url }) => {
-        if (name.includes(searchTerm)) {
-          return (
-            <BlazeLink href={url} onClick={e => handleClick(e, url)}>
-              {name}
-            </BlazeLink>
-          );
-        }
-
-        return null;
-      });
-    }
-
-    return [];
-  };
-
-  const searchResultsMessage = searchTerm ? `Search results for: ${searchTerm}` : '';
-
-  return collapsed ? (
-    <div className={isMobile ? searchInputWrapperMobile : searchInputWrapperDesktop}>
-      <div className="search-content--collapse__wrapper">
-        <label className="search-content--collapse__label">
-          <span className="search-content--collapse__icon_wrapper">
-            <svg className="search-content--collapse__icon" viewBox="0 0 20 20">
-              <path
-                fillRule="evenodd"
-                d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z"
-                clipRule="evenodd"
-              />
-            </svg>
-          </span>
-          <input
-            onFocus={() => setCollapsed(false)}
-            onChange={e => setSearchTerm(e.target.value)}
-            type="text"
-            name="search"
-            value=""
-            className="search-content--collapse__input"
-          />
-        </label>
-      </div>
-    </div>
-  ) : (
-    <>
-      <div className={`${isMobile ? searchInputWrapperMobile : searchInputWrapperDesktop}`}>
-        <div className="search-content--expanded__wrapper">
-          <label className="search-content--expanded__label">
-            <span className="search-content--expanded__icon_wrapper">
-              <svg className="search-content--expanded__icon" viewBox="0 0 20 20">
-                <path
-                  fillRule="evenodd"
-                  d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z"
-                  clipRule="evenodd"
-                />
-              </svg>
-            </span>
-            <input
-              type="text"
-              name="search"
-              onChange={e => setSearchTerm(e.target.value)}
-              onKeyPress={handleKeyPress}
-              className="search-content--expanded__input"
-              placeholder={placeholder}
-              onBlur={() => {
-                if (!collapsible) return;
-                if (!searchTerm || searchTerm === '') setCollapsed(true);
-              }}
-            />
-          </label>
-        </div>
-        {data &&
-          searchResultsMessage !== '' && (
-            <div className="search-content--results__wrapper">
-              <div className="search-content--results__wrapper--message">
-                <div className="text-sm pt-2">{searchResultsMessage}</div>
-
-                <div className="search-content--results__message">
-                  <div className="search-content--results__content">{renderResults()}</div>
-                </div>
-              </div>
-            </div>
-          )}
-      </div>
-    </>
-  );
-};
-
-SearchContent.propTypes = {
-  searchInputAlignment: PropTypes.string,
-  searchInputWrapperMobile: PropTypes.string,
-  searchInputWrapperDesktop: PropTypes.string,
-  placeholder: PropTypes.string,
-  isMobile: PropTypes.bool,
-  collapsible: PropTypes.bool,
-  entity: PropTypes.string.isRequired
-};
-
-SearchContent.defaultProps = {
-  searchInputAlignment: '',
-  searchInputWrapperMobile: '',
-  searchInputWrapperDesktop: '',
-  placeholder: '',
-  isMobile: false,
-  collapsible: false
-};
+import SearchContent from './SearchContent';
 
 export default SearchContent;

package/src/components/SearchFilter/SearchFilter/SearchFilter.js

@@ -48,9 +48,15 @@ const SearchFilter = ({
   const [moreFiltersDesktopCollapsed, setMoreFiltersDesktopCollapsed] = useState(true);
   const [filterValues, dispatch] = useReducer(reducer, initialFilterValues);
 
-  const handleSubmit = debounce(newValues => {
+  const doSubmit = (newValues = filterValues) => {
     const newQuery = buildQuery(newValues, filters);
     handleSearch(newQuery);
+    setMoreFiltersDesktopCollapsed(true);
+    setMoreFiltersMobileCollapsed(true);
+  };
+
+  const handleSubmit = debounce(newValues => {
+    doSubmit(newValues);
   }, 200);
 
   useEffect(
@@ -99,8 +105,7 @@ const SearchFilter = ({
         id={formId}
         onSubmit={e => {
           e.preventDefault();
-          const newQuery = buildQuery(filterValues, filters);
-          handleSearch(newQuery);
+          doSubmit();
         }}>
         {displaySearchFilter && (
           <CloseMobileForm handleClose={() => setDisplaySearchFilter(false)} />
@@ -136,6 +141,7 @@ const SearchFilter = ({
 
                 {!!groupAfterMobile && (
                   <button
+                    data-testId="search-filter-mobile-toggler"
                     className={moreFiltersMobileTogglerClass}
                     type="button"
                     onClick={() => setMoreFiltersMobileCollapsed(!moreFiltersMobileCollapsed)}>
@@ -160,6 +166,7 @@ const SearchFilter = ({
 
                     {!!groupAfterDesktop && (
                       <button
+                        data-testId="search-filter-desktop-toggler"
                         className={moreFiltersDesktopTogglerClass}
                         type="button"
                         onClick={() =>

package/src/components/SearchFilter/constants.js

@@ -2,7 +2,7 @@ const CHECKBOX = 'checkbox';
 const SELECT = 'select';
 const TEXT_SEARCH = 'text-search';
 const SEARCH_TERM = 'search_term';
-const SIZE = 50;
+const SIZE = process.env.BLAZE_PB_SEARCH_FILETER_AGG_SIZE || 500;
 const KEYWORD = 'keyword';
 const RAW_RESULTS = 'rawResults';
 const DEFAULT_OPTION = 'Any';

package/src/components/index.js

@@ -18,7 +18,7 @@ export default {
   video: dynamic(() => import(/* webpackChunkName: "blazePbVideo" */ './Video')),
   wrapper: dynamic(() => import(/* webpackChunkName: "blazePbWrapper" */ './Wrapper')),
   searchcontent: dynamic(() =>
-    import(/* webpackChunkName: "blazePbSearchFilter" */ './SearchContent')
+    import(/* webpackChunkName: "blazePbSearchFilter" */ './SearchContent/SearchContent')
   ),
   searchfilter: dynamic(() =>
     import(/* webpackChunkName: "blazePbSearchFilter" */ './SearchFilter')
@@ -42,5 +42,11 @@ export default {
     import(/* webpackChunkName: "blazePbPasswordResetRequest" */ './PasswordResetRequest')
   ),
   breadcrumb: dynamic(() => import(/* webpackChunkName: "blazePbBreadcrumb" */ './Breadcrumb')),
+  itemlistbutton: dynamic(() =>
+    import(/* webpackChunkName: "blazePbItemListButton" */ './ItemListButton')
+  ),
+  itemlistcounter: dynamic(() =>
+    import(/* webpackChunkName: "blazePbItemListCounter" */ './ItemListCounter')
+  ),
   backtotop: dynamic(() => import(/* webpackChunkName: "blazePbBackToTop" */ './BackToTop'))
 };

package/src/constants/index.js

@@ -209,6 +209,8 @@ const DATA_SUMMARY_EMAIL_REGEX = /^([a-z0-9_\.\+-]+)@([\da-z\.-]+)\.([a-z\.]{2,6
 const DATA_SUMMARY_URL_REGEX = /(https?:\/\/)?(www\.)?[-a-zA-Z0-9@:%._\+~#=]{2,256}\.[a-z]{2,6}\b([-a-zA-Z0-9@:%_\+.~#?&//=]*)/;
 const DATA_SUMMARY_TEL_REGEX = /^\+{0,1}[0-9\(\)\.\- \/]{7,}$/; // note: very loose phone number match not for validation
 
+const LIST_ITEM_LOCAL_KEY = 'blaze_item_list_';
+
 export {
   BANNER_LOADING,
   BANNER_EMPTY,
@@ -320,5 +322,6 @@ export {
   TARGET_BLANK,
   DATA_SUMMARY_EMAIL_REGEX,
   DATA_SUMMARY_URL_REGEX,
-  DATA_SUMMARY_TEL_REGEX
+  DATA_SUMMARY_TEL_REGEX,
+  LIST_ITEM_LOCAL_KEY
 };

package/src/helpers/build-props-query.js

@@ -22,23 +22,24 @@ const buildPropsQuery = (data, extraProps = [], cardOptions = null) => {
   const basicProps = uniqueProps
     .filter(prop => prop && !prop.includes('.'))
     .filter((prop, i, arr) => arr.indexOf(prop) === i);
-  const complexProps = buildComplexProps(shouldAddCategoryProps, uniqueProps);
-
+  const complexProps = buildComplexProps(shouldAddCategoryProps, uniqueProps, data);
   return [...basicProps, ...complexProps].join(',');
 };
 
-const buildComplexProps = (shouldAddCategoryProps, props) =>
+const buildComplexProps = (shouldAddCategoryProps, props, { getEntitySchema: { relations } }) =>
   props
     .filter(prop => prop && prop.includes('.'))
     .map(nested => nested.split('.')[0])
     .filter((prop, i, arr) => arr.indexOf(prop) === i)
     .map(base => {
+      const matchingRelation = relations.find(({ localField }) => localField === base);
       const nestedProps = props
         .filter(
           (extraProp, i, arr) =>
             extraProp && extraProp.startsWith(`${base}.`) && arr.indexOf(extraProp) === i
         )
         .map(nested => nested.split('.')[1]);
+      if (matchingRelation && !nestedProps.includes('id')) nestedProps.push('id');
 
       const jointNestedProps = nestedProps.join(',');
       if (base === 'category' && shouldAddCategoryProps)
@@ -70,6 +71,8 @@ const getTypeBaseProps = (data, cardOptions, extraPropsHaveCategory) => {
   typeBasedProps.push(...getCategoyProps(shouldAddCategoryProps, hasCategory, hasPreheader));
   typeBasedProps.push(...getContentProps(isContent));
 
+  if (properties.url || dynamicProperties.url) typeBasedProps.push('url');
+
   if (displayThumbnail && relations.find(({ localField }) => localField === 'image')) {
     typeBasedProps.push('image.id', 'image.url', 'image.data');
   }

package/src/helpers/build-raw-query.js

@@ -62,6 +62,7 @@ const buildRawQuery = (
 
   if (itemsToDisplay && itemsToDisplay.length) {
     const itemsToDisplayIds = getItemsToDisplayIds(itemsToDisplay);
+
     query.bool.must.push({ ids: { values: itemsToDisplayIds } });
     if (shouldApplySort) {
       return {

package/src/helpers/get-item-list-data.js

@@ -0,0 +1,6 @@
+const getItemListData = data => {
+  if (data && data.getItemList && data.getItemList.listItems) return data.getItemList.listItems;
+  return [];
+};
+
+export default getItemListData;

package/src/helpers/get-item-list-id.js

@@ -0,0 +1,11 @@
+import { LIST_ITEM_LOCAL_KEY } from '../constants';
+
+const getItemListId = (listName, queryId) => {
+  if (queryId) return queryId;
+  if (!listName || typeof localStorage === 'undefined') return '';
+
+  const localListName = `${LIST_ITEM_LOCAL_KEY}${listName}`;
+  return localStorage.getItem(localListName) || '';
+};
+
+export default getItemListId;

package/src/helpers/get-item-list-ids.js

@@ -0,0 +1,10 @@
+import getItemListData from './get-item-list-data';
+
+const getItemListIds = data => {
+  const itemListElements = getItemListData(data);
+  return itemListElements.length
+    ? itemListElements.map(({ itemId }) => ({ displayItems: [itemId] }))
+    : null;
+};
+
+export default getItemListIds;

package/src/helpers/index.js

@@ -51,3 +51,6 @@ export { default as getParsedPropValues } from './get-parsed-prop-values';
 export { default as getSanitizedPropValues } from './get-sanitized-prop-values';
 export { default as appendImages } from './append-images';
 export { default as parseTextBlock } from './parse-TextBlock';
+export { default as getItemListId } from './get-item-list-id';
+export { default as getItemListIds } from './get-item-list-ids';
+export { default as getItemListData } from './get-item-list-data';

package/tests/helpers/mocks.js

@@ -1521,13 +1521,13 @@ const RAW_QUERY_ALL_SEARCH_VALUE_DIFFERENT_OPERATOR_TEXT_CHECKBOX_HAS_OR_OPERATO
 };
 
 const RAW_QUERY_STRINGIFIED =
-  '{"aggs":{"tags.name":{"terms":{"field":"tags.name.keyword","size":50}},"category.name"' +
-  ':{"terms":{"field":"category.name.keyword","size":50}}},"size":0,"query":{"bool":{"filter":{"bool"' +
+  '{"aggs":{"tags.name":{"terms":{"field":"tags.name.keyword","size":500}},"category.name"' +
+  ':{"terms":{"field":"category.name.keyword","size":500}}},"size":0,"query":{"bool":{"filter":{"bool"' +
   ':{"should":[{"match":{"docType":"published_page"}}],"minimum_should_match":1}}}}}';
 
 const RAW_QUERY_STRINGIFIED_WITH_RANGE =
-  '{"aggs":{"tags.name":{"terms":{"field":"tags.name.keyword","size":50}},"category.name":{"' +
-  'terms":{"field":"category.name.keyword","size":50}},"price":{"stats":{"field":"price"}},"length":' +
+  '{"aggs":{"tags.name":{"terms":{"field":"tags.name.keyword","size":500}},"category.name":{"' +
+  'terms":{"field":"category.name.keyword","size":500}},"price":{"stats":{"field":"price"}},"length":' +
   '{"stats":{"field":"length"}}},"size":0,"query":{"bool":{"filter":{"bool":{"should":[{"match":' +
   '{"docType":"published_page"}}],"minimum_should_match":1}}}}}';
 

package/tests/unit/src/components/Carousel/__snapshots__/Carousel.test.js.snap

@@ -11,7 +11,7 @@ exports[`Carousel component should render carousel and match snapshot 1`] = `
         role="button"
       >
         <div
-          class="arrow arrow--left"
+          class="carousel--arrow__left"
         />
       </div>
       <div
@@ -28,7 +28,7 @@ exports[`Carousel component should render carousel and match snapshot 1`] = `
         role="button"
       >
         <div
-          class="arrow arrow--right"
+          class="carousel--arrow__right"
         />
       </div>
     </div>

package/tests/unit/src/components/SearchContent/SearchContent.test.js

@@ -0,0 +1,29 @@
+import React from 'react';
+import '@testing-library/jest-dom/extend-expect';
+import { MockedProvider } from '@apollo/client/testing';
+import { render } from '@testing-library/react';
+import SearchContent from '../../../../../src/components/SearchContent';
+
+jest.mock('@apollo/client', () => ({
+  ...jest.requireActual('@apollo/client'),
+  useQuery: jest.fn(() => ({ data: {}, loading: false, error: null }))
+}));
+
+jest.mock('next/router', () => ({
+  useRouter: jest.fn(() => ({ asPath: 'test-url' }))
+}));
+
+jest.mock('../../../../../src/components/SearchContent/SearchContent', () =>
+  jest.fn(() => <div>Mocked component</div>)
+);
+
+describe('SearchContent', () => {
+  it('should match snapshot', async () => {
+    const { asFragment } = render(
+      <MockedProvider mocks={[]} addTypename={false}>
+        <SearchContent />
+      </MockedProvider>
+    );
+    expect(asFragment()).toMatchSnapshot();
+  });
+});

package/tests/unit/src/components/SearchContent/__snapshots__/SearchContent.test.js.snap

@@ -0,0 +1,9 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`SearchContent should match snapshot 1`] = `
+<DocumentFragment>
+  <div>
+    Mocked component
+  </div>
+</DocumentFragment>
+`;

package/tests/unit/src/components/SearchFilter/SearchFilter/SearchFilter.test.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { render, screen } from '@testing-library/react';
+import { render, screen, fireEvent } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import SearchFilter from '../../../../../../src/components/SearchFilter/SearchFilter';
 
@@ -153,5 +153,27 @@ describe('SearchFilter component', () => {
       const { asFragment } = renderComponent(SearchFilter, specificMockedProps);
       expect(asFragment()).toMatchSnapshot();
     });
+
+    it('should toggle open and close classes on click and submit', () => {
+      const { getByTestId } = renderComponent(SearchFilter, specificMockedProps);
+      const mobileToggler = getByTestId('search-filter-mobile-toggler');
+      const desktopToggler = getByTestId('search-filter-desktop-toggler');
+      const form = screen.getByTestId(`filter-${specificMockedProps.name}-form`);
+
+      fireEvent.click(mobileToggler);
+      expect(mobileToggler).toHaveClass(
+        'filter__more-filters-mobile-toggler filter__more-filters-mobile-toggler--open'
+      );
+
+      fireEvent.click(desktopToggler);
+      expect(desktopToggler).toHaveClass(
+        'filter__more-filters-desktop-toggler filter__more-filters-desktop-toggler--open'
+      );
+
+      fireEvent.submit(form);
+
+      expect(mobileToggler).toHaveClass('filter__more-filters-mobile-toggler');
+      expect(desktopToggler).toHaveClass('filter__more-filters-desktop-toggler');
+    });
   });
 });

package/tests/unit/src/components/SearchFilter/SearchFilter/__snapshots__/SearchFilter.test.js.snap

@@ -121,6 +121,7 @@ exports[`SearchFilter component when groupAfterMobile = 0 and groupAfterDesktop
           >
             <button
               class="filter__more-filters-desktop-toggler"
+              data-testid="search-filter-desktop-toggler"
               type="button"
             >
               More filters
@@ -288,6 +289,7 @@ exports[`SearchFilter component when groupAfterMobile > 0 and groupAfterDesktop
       >
         <button
           class="filter__more-filters-mobile-toggler"
+          data-testid="search-filter-mobile-toggler"
           type="button"
         >
           Filters
@@ -461,6 +463,7 @@ exports[`SearchFilter component when groupAfterMobile > 0 and groupAfterDesktop
       >
         <button
           class="filter__more-filters-mobile-toggler"
+          data-testid="search-filter-mobile-toggler"
           type="button"
         >
           Filters
@@ -473,6 +476,7 @@ exports[`SearchFilter component when groupAfterMobile > 0 and groupAfterDesktop
           >
             <button
               class="filter__more-filters-desktop-toggler"
+              data-testid="search-filter-desktop-toggler"
               type="button"
             >
               More filters

package/tests/unit/src/components/__snapshots__/index.test.js.snap

@@ -46,6 +46,14 @@ Object {
     "$$typeof": Symbol(react.forward_ref),
     "render": [Function],
   },
+  "itemlistbutton": Object {
+    "$$typeof": Symbol(react.forward_ref),
+    "render": [Function],
+  },
+  "itemlistcounter": Object {
+    "$$typeof": Symbol(react.forward_ref),
+    "render": [Function],
+  },
   "list": Object {
     "$$typeof": Symbol(react.forward_ref),
     "render": [Function],

package/tests/unit/src/helpers/build-props-query.test.js

@@ -33,6 +33,7 @@ describe('get card render props', () => {
       dynamicProperties: {}
     }
   };
+
   const cardProps = {};
 
   it('should be a function', () => {
@@ -159,4 +160,46 @@ describe('get card render props', () => {
       'id,name,url,sponsored,featured,category{name,listingPageId,listingPageEntity, id publishedListingPage{id, url}}'
     );
   });
+
+  it('should include url if property has url', () => {
+    testUrlProperty({ extraProperties: { url: 'url' }, cardProps });
+  });
+
+  it('should include url if dynamic property has url', () => {
+    testUrlProperty({ dynamicProperties: { url: 'url' }, cardProps });
+  });
+
+  it('should add id prop to nested relations', () => {
+    const _data = {
+      getEntitySchema: {
+        interfaces: [CONTENT_INTERFACE],
+        properties: {
+          id: 'id',
+          categoryId: 'catId'
+        },
+        relations: [{ localField: 'address' }],
+        dynamicProperties: {}
+      }
+    };
+    const query = buildPropsQuery(_data, ['address.country'], cardProps);
+    expect(query).toEqual(
+      'id,name,url,sponsored,featured,category{name,listingPageId,listingPageEntity, id publishedListingPage{id, url}},address{country,id}'
+    );
+  });
 });
+
+function testUrlProperty({ extraProperties = {}, dynamicProperties = {}, cardProps }) {
+  const dataWithUrlProperty = {
+    getEntitySchema: {
+      interfaces: [],
+      properties: {
+        id: 'id',
+        ...extraProperties
+      },
+      relations: [],
+      dynamicProperties
+    }
+  };
+  const query = buildPropsQuery(dataWithUrlProperty, [], cardProps);
+  expect(query).toEqual('id,name,url');
+}

package/tests/unit/src/helpers/get-item-list-data.test.js

@@ -0,0 +1,28 @@
+import '@testing-library/jest-dom/extend-expect';
+import getItemListData from '../../../../src/helpers/get-item-list-data';
+
+describe('getItemListData helper', () => {
+  const noData = getItemListData();
+  const noGetItemList = getItemListData({});
+  const noListItems = getItemListData({ getItemList: {} });
+  const withCorrectData = getItemListData({
+    getItemList: { listItems: ['one item', 'two items'] }
+  });
+
+  it('should always return an array', () => {
+    expect(Array.isArray(noData)).toBeTruthy();
+    expect(Array.isArray(noGetItemList)).toBeTruthy();
+    expect(Array.isArray(noListItems)).toBeTruthy();
+    expect(Array.isArray(withCorrectData)).toBeTruthy();
+  });
+
+  it('should return an empty array if data passed doesnt have expected props', () => {
+    expect(noData).toEqual([]);
+    expect(noGetItemList).toEqual([]);
+    expect(noListItems).toEqual([]);
+  });
+
+  it('should return listData otherwise', () => {
+    expect(withCorrectData).toEqual(['one item', 'two items']);
+  });
+});

package/tests/unit/src/helpers/get-item-list-id.test.js

@@ -0,0 +1,20 @@
+import '@testing-library/jest-dom/extend-expect';
+import getitemListId from '../../../../src/helpers/get-item-list-id';
+
+describe('getitemListId helper', () => {
+  const noValues = getitemListId();
+  const noListId = getitemListId('listName');
+  const noListName = getitemListId(null, '123asd');
+
+  it('should return empty string if no values are passed', () => {
+    expect(noValues).toEqual('');
+  });
+
+  it('should return listId if passed', () => {
+    expect(noListName).toEqual('123asd');
+  });
+
+  it('should return local value if no id is passed but name is', () => {
+    expect(noListId).toEqual('');
+  });
+});

package/tests/unit/src/helpers/get-item-list-ids.test.js

@@ -0,0 +1,19 @@
+import '@testing-library/jest-dom/extend-expect';
+import getitemListIds from '../../../../src/helpers/get-item-list-ids';
+
+describe('getitemListIds helper', () => {
+  const noData = getitemListIds();
+  const emptyData = getitemListIds({});
+  const withData = getitemListIds({
+    getItemList: { listItems: [{ itemId: '123' }, { itemId: '456' }] }
+  });
+
+  it('should return null if no valid data is passed', () => {
+    expect(noData).toEqual(null);
+    expect(emptyData).toEqual(null);
+  });
+
+  it('should return itemsToDisplay formatted ids', () => {
+    expect(withData).toEqual([{ displayItems: ['123'] }, { displayItems: ['456'] }]);
+  });
+});