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

package/tests/unit/src/components/ItemList/__snapshots__/ItemListButton.test.js.snap

@@ -0,0 +1,107 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ItemListButton component should add and remove item to the list on click 1`] = `
+<DocumentFragment>
+  <div
+    class="item-list-button item-list-button--selected modifier"
+    role="button"
+  >
+    <i>
+      <svg
+        fill="currentColor"
+        height="1em"
+        stroke="currentColor"
+        stroke-width="0"
+        viewBox="0 0 16 16"
+        width="1em"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M2 15.5V2a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v13.5a.5.5 0 0 1-.74.439L8 13.069l-5.26 2.87A.5.5 0 0 1 2 15.5zm8.854-9.646a.5.5 0 0 0-.708-.708L7.5 7.793 6.354 6.646a.5.5 0 1 0-.708.708l1.5 1.5a.5.5 0 0 0 .708 0l3-3z"
+          fill-rule="evenodd"
+        />
+      </svg>
+    </i>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`ItemListButton component should add and remove item to the list on click 2`] = `
+<DocumentFragment>
+  <div
+    class="item-list-button item-list-button--selected modifier"
+    role="button"
+  >
+    <i>
+      <svg
+        fill="currentColor"
+        height="1em"
+        stroke="currentColor"
+        stroke-width="0"
+        viewBox="0 0 16 16"
+        width="1em"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M2 15.5V2a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v13.5a.5.5 0 0 1-.74.439L8 13.069l-5.26 2.87A.5.5 0 0 1 2 15.5zm8.854-9.646a.5.5 0 0 0-.708-.708L7.5 7.793 6.354 6.646a.5.5 0 1 0-.708.708l1.5 1.5a.5.5 0 0 0 .708 0l3-3z"
+          fill-rule="evenodd"
+        />
+      </svg>
+    </i>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`ItemListButton component should render button marked selected when current parent is in the list 1`] = `
+<DocumentFragment>
+  <div
+    class="item-list-button item-list-button--selected modifier"
+    role="button"
+  >
+    <i>
+      <svg
+        fill="currentColor"
+        height="1em"
+        stroke="currentColor"
+        stroke-width="0"
+        viewBox="0 0 16 16"
+        width="1em"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M2 15.5V2a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v13.5a.5.5 0 0 1-.74.439L8 13.069l-5.26 2.87A.5.5 0 0 1 2 15.5zm8.854-9.646a.5.5 0 0 0-.708-.708L7.5 7.793 6.354 6.646a.5.5 0 1 0-.708.708l1.5 1.5a.5.5 0 0 0 .708 0l3-3z"
+          fill-rule="evenodd"
+        />
+      </svg>
+    </i>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`ItemListButton component should render button not marked selected when current parent is not in the list 1`] = `
+<DocumentFragment>
+  <div
+    class="item-list-button modifier"
+    role="button"
+  >
+    <i>
+      <svg
+        fill="currentColor"
+        height="1em"
+        stroke="currentColor"
+        stroke-width="0"
+        viewBox="0 0 16 16"
+        width="1em"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M7.84 4.1a.178.178 0 0 1 .32 0l.634 1.285a.178.178 0 0 0 .134.098l1.42.206c.145.021.204.2.098.303L9.42 6.993a.178.178 0 0 0-.051.158l.242 1.414a.178.178 0 0 1-.258.187l-1.27-.668a.178.178 0 0 0-.165 0l-1.27.668a.178.178 0 0 1-.257-.187l.242-1.414a.178.178 0 0 0-.05-.158l-1.03-1.001a.178.178 0 0 1 .098-.303l1.42-.206a.178.178 0 0 0 .134-.098L7.84 4.1z"
+        />
+        <path
+          d="M2 2a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v13.5a.5.5 0 0 1-.777.416L8 13.101l-5.223 2.815A.5.5 0 0 1 2 15.5V2zm2-1a1 1 0 0 0-1 1v12.566l4.723-2.482a.5.5 0 0 1 .554 0L13 14.566V2a1 1 0 0 0-1-1H4z"
+        />
+      </svg>
+    </i>
+  </div>
+</DocumentFragment>
+`;

package/tests/unit/src/components/ItemList/__snapshots__/ItemListCounter.test.js.snap

@@ -0,0 +1,31 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ItemListCounter component should display listItem count and route to url 1`] = `
+<DocumentFragment>
+  <div
+    class="item-list-counter modifier"
+    role="button"
+    type="button"
+  >
+    <svg
+      fill="currentColor"
+      height="1em"
+      stroke="currentColor"
+      stroke-width="0"
+      viewBox="0 0 16 16"
+      width="1em"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M2 15.5V2a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v13.5a.5.5 0 0 1-.74.439L8 13.069l-5.26 2.87A.5.5 0 0 1 2 15.5zM8.16 4.1a.178.178 0 0 0-.32 0l-.634 1.285a.178.178 0 0 1-.134.098l-1.42.206a.178.178 0 0 0-.098.303L6.58 6.993c.042.041.061.1.051.158L6.39 8.565a.178.178 0 0 0 .258.187l1.27-.668a.178.178 0 0 1 .165 0l1.27.668a.178.178 0 0 0 .257-.187L9.368 7.15a.178.178 0 0 1 .05-.158l1.028-1.001a.178.178 0 0 0-.098-.303l-1.42-.206a.178.178 0 0 1-.134-.098L8.16 4.1z"
+        fill-rule="evenodd"
+      />
+    </svg>
+    <span
+      class="item-list-counter__badge"
+    >
+      1
+    </span>
+  </div>
+</DocumentFragment>
+`;

package/tests/unit/src/components/ItemList/__snapshots__/ItemListNew.test.js.snap

@@ -0,0 +1,27 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ItemListNew component should match snapshot and render without throwing an error 1`] = `
+<DocumentFragment>
+  <button
+    class="item-list-new button"
+    type="button"
+  >
+    Clear list
+  </button>
+</DocumentFragment>
+`;
+
+exports[`ItemListNew component should not render if list has not items 1`] = `<DocumentFragment />`;
+
+exports[`ItemListNew component should not render if list not found 1`] = `<DocumentFragment />`;
+
+exports[`ItemListNew component should render using listId from query 1`] = `
+<DocumentFragment>
+  <button
+    class="item-list-new button"
+    type="button"
+  >
+    Clear list
+  </button>
+</DocumentFragment>
+`;

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

@@ -0,0 +1,28 @@
+import '@testing-library/jest-dom/extend-expect';
+import getItemListData from '../../../../../../src/components/ItemList/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/components/ItemList/helpers/get-item-list-id.test.js

@@ -0,0 +1,20 @@
+import '@testing-library/jest-dom/extend-expect';
+import getitemListId from '../../../../../../src/components/ItemList/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/components/ItemList/helpers/get-item-list-ids.test.js

@@ -0,0 +1,19 @@
+import '@testing-library/jest-dom/extend-expect';
+import getitemListIds from '../../../../../../src/components/ItemList/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'] }]);
+  });
+});

package/tests/unit/src/components/ItemList/helpers/set-item-list-id.test.js

@@ -0,0 +1,13 @@
+import '@testing-library/jest-dom/extend-expect';
+import setItemListId from '../../../../../../src/components/ItemList/helpers/set-item-list-id';
+import { LIST_ITEM_LOCAL_KEY } from '../../../../../../src/components/ItemList/constants';
+
+describe('setItemListId helper', () => {
+  const listId = 'LIST ID';
+  const listName = 'LIST';
+
+  it('should set list id in localstorage', () => {
+    setItemListId(listName, listId);
+    expect(localStorage.setItem).toHaveBeenCalledWith(`${LIST_ITEM_LOCAL_KEY}${listName}`, listId);
+  });
+});

package/tests/unit/src/components/ItemList/helpers/set-param-and-redirect.test.js

@@ -0,0 +1,30 @@
+import '@testing-library/jest-dom/extend-expect';
+import setParamAndRedirect from '../../../../../../src/components/ItemList/helpers/set-param-and-redirect';
+import { LIST_ITEM_QUERY_PARAM } from '../../../../../../src/components/ItemList/constants';
+
+describe('setParamAndRedirect helper', () => {
+  const url = '/test?otherParam=abc';
+  const urlWithQueryString = `${url}&${LIST_ITEM_QUERY_PARAM}=123`;
+
+  it('should return if no value and queryParam not present', () => {
+    const router = { asPath: url, push: jest.fn() };
+    expect(setParamAndRedirect(router)).toBeUndefined();
+    expect(router.push).not.toHaveBeenCalled();
+  });
+
+  it('should remove queryString if no value passed', () => {
+    const router = { asPath: urlWithQueryString, push: jest.fn() };
+    expect(setParamAndRedirect(router)).toBeUndefined();
+    expect(router.push).toHaveBeenCalledWith('/Resolver', url, {
+      shallow: true
+    });
+  });
+
+  it('should add queryString if value passed', () => {
+    const router = { asPath: url, push: jest.fn() };
+    expect(setParamAndRedirect(router, '123')).toBeUndefined();
+    expect(router.push).toHaveBeenCalledWith('/Resolver', urlWithQueryString, {
+      shallow: true
+    });
+  });
+});

package/tests/unit/src/components/ItemList/hooks/use-item-list-id.test.js

@@ -0,0 +1,32 @@
+import { renderHook, act } from '@testing-library/react-hooks';
+import useItemListId from '../../../../../../src/components/ItemList/hooks/use-item-list-id';
+import getItemListId from '../../../../../../src/components/ItemList/helpers/get-item-list-id';
+
+jest.mock('../../../../../../src/components/ItemList/helpers/get-item-list-id', () =>
+  jest.fn(() => 'LIST ID')
+);
+
+describe('useItemListId hook', () => {
+  const listId = 'LIST ID';
+  const listName = 'LIST';
+
+  it('should return listId ', () => {
+    const { result } = renderHook(() => useItemListId({ listName }));
+    expect(result.current).toEqual({ listId });
+    expect(getItemListId).toHaveBeenCalledWith(listName);
+  });
+
+  it('should return listId after storage event', () => {
+    const noListValue = 'empty';
+    getItemListId.mockReturnValueOnce(noListValue);
+    const { result } = renderHook(() => useItemListId({ listName }));
+    expect(result.current).toEqual({ listId: noListValue });
+
+    act(() => {
+      window.dispatchEvent(new Event('storage'));
+    });
+
+    expect(result.current).toEqual({ listId });
+    expect(getItemListId).toHaveBeenNthCalledWith(2, listName);
+  });
+});

package/tests/unit/src/components/List/helpers/has-required-item-list-details.test.js

@@ -0,0 +1,30 @@
+import hasRequiredItemListDetails from '../../../../../../src/components/List/helpers/has-required-item-list-details';
+import setParamAndRedirect from '../../../../../../src/components/ItemList/helpers/set-param-and-redirect';
+
+jest.mock('../../../../../../src/components/ItemList/helpers/set-param-and-redirect', () =>
+  jest.fn()
+);
+
+describe('hasRequiredItemListDetails helper function', () => {
+  const itemListId = 'localstorage id';
+  const router = {};
+  const itemListName = 'LIST NAME';
+  const queryItemListId = 'query id';
+
+  it('should return true if no itemListName', () => {
+    expect(hasRequiredItemListDetails({})).toEqual(true);
+  });
+
+  it('should call setParamAndRedirect if queryItemListId not set and itemListId is', () => {
+    expect(hasRequiredItemListDetails({ itemListName, itemListId, router })).toEqual(false);
+    expect(setParamAndRedirect).toHaveBeenCalledWith(router, itemListId);
+  });
+
+  it('should return false if no queryItemListId and itemListId', () => {
+    expect(hasRequiredItemListDetails({ itemListName })).toEqual(false);
+  });
+
+  it('should return true queryItemListId is set', () => {
+    expect(hasRequiredItemListDetails({ itemListName, queryItemListId })).toEqual(true);
+  });
+});

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

@@ -3,16 +3,22 @@ import { render } from '@blaze-cms/tools/test-helpers/test-functions';
 import '@testing-library/jest-dom/extend-expect';
 import Menu from '../../../../../src/components/Menu';
 
-jest.mock('../../../../../src/components/SearchContent', () => () => 'Search Component');
+jest.mock('next/router', () => ({
+  useRouter: jest.fn(() => ({ events: { on: jest.fn(), off: jest.fn() } }))
+}));
 
 const props = {
   collapse: false,
   modifier: 'menu-mod',
-  children: [<div className="child_1">only child</div>]
+  children: [
+    <div className="child_1" key="1">
+      only child
+    </div>
+  ]
 };
 
 describe('Menu component', () => {
-  it.skip('should render without throwing an error and match snapshot', () => {
+  it('should render without throwing an error and match snapshot', () => {
     const { asFragment } = render(Menu, props);
     expect(asFragment()).toMatchSnapshot();
   });

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

@@ -3,20 +3,21 @@
 exports[`Menu component should render without throwing an error and match snapshot 1`] = `
 <DocumentFragment>
   <div
-    class="menu--desktop-wrapper"
+    class="menu--wrapper"
   >
-    <ul
-      class="menu-mod"
+    <div
+      class="menu--desktop-wrapper"
     >
-      <div
-        class="child_1"
+      <ul
+        class=" menu-mod"
       >
-        only child
-      </div>
-      <li>
-        Search Component
-      </li>
-    </ul>
+        <div
+          class="child_1"
+        >
+          only child
+        </div>
+      </ul>
+    </div>
   </div>
 </DocumentFragment>
 `;

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

@@ -8,7 +8,7 @@ const props = {
   text: 'Item 1',
   modifier: 'menu-item-mod',
   children: [
-    <div className="child_1" component={{ type: 'menuitem' }}>
+    <div className="child_1" key="1" component={{ type: 'menuitem' }}>
       some child
     </div>
   ]

package/tests/unit/src/components/MenuItem/SubMenu.test.js

@@ -15,7 +15,11 @@ describe('SubMenu component', () => {
   it('should render children if passed', () => {
     const { container, asFragment } = render(SubMenu, {
       modifier: '',
-      children: [<div className="sub-menu-child">some stuff</div>]
+      children: [
+        <div className="sub-menu-child" key="1">
+          some stuff
+        </div>
+      ]
     });
     expect(asFragment()).toMatchSnapshot();
     expect(container.firstChild.firstChild).toContainHTML('div');

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

@@ -5,13 +5,35 @@ exports[`MenuItem component should render link if url is passed 1`] = `
   <li
     class="menu-item-mod"
   >
-    <a
-      href="/somewhere"
+    <div
+      class="menu--item--link"
     >
-      Item 1
-    </a>
+      <a
+        href="/somewhere"
+      >
+        Item 1
+      </a>
+      <i
+        class="menu--item--link--icon"
+        role="button"
+      >
+        <svg
+          fill="currentColor"
+          height="1em"
+          stroke="currentColor"
+          stroke-width="0"
+          viewBox="0 0 448 512"
+          width="1em"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z"
+          />
+        </svg>
+      </i>
+    </div>
     <div
-      class="hidden"
+      class="menu--item-children hidden"
     >
       <div
         class="child_1"
@@ -29,13 +51,35 @@ exports[`MenuItem component should render without throwing an error and match sn
   <li
     class="menu-item-mod"
   >
-    <span
-      role="button"
+    <div
+      class="menu--item--link"
     >
-      Item 1
-    </span>
+      <span
+        role="button"
+      >
+        Item 1
+      </span>
+      <i
+        class="menu--item--link--icon"
+        role="button"
+      >
+        <svg
+          fill="currentColor"
+          height="1em"
+          stroke="currentColor"
+          stroke-width="0"
+          viewBox="0 0 448 512"
+          width="1em"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z"
+          />
+        </svg>
+      </i>
+    </div>
     <div
-      class="hidden"
+      class="menu--item-children hidden"
     >
       <div
         class="child_1"

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

@@ -11,7 +11,7 @@ const renderComponent = (Component, props) => {
 
 const mockedProps = {
   data: {},
-  initialFilterValues: {},
+  filterValues: {},
   filters: [],
   searchFilterRef: {},
   buttonRef: { current: null },
@@ -24,14 +24,11 @@ const mockedProps = {
   groupAfterMobile: 0,
   groupAfterDesktop: 0,
   isCollapsedOnResponsive: true,
-  displaySearchFilter: false
+  displaySearchFilter: false,
+  setAppliedFilters: jest.fn()
 };
 
 describe('SearchFilter component', () => {
-  it('should be defined', () => {
-    expect(SearchFilter).toBeDefined();
-  });
-
   describe('when isCollapsedOnResponsive = true, displaySearchFilter = false', () => {
     const specificMockedProps = {
       ...mockedProps,

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

@@ -10,6 +10,7 @@ exports[`Checkbox component should render without throwing an error match snapsh
       class="form-checkbox"
       data-cy="checkbox-cy-1"
       data-testid="checkbox-1"
+      disabled=""
       id="name1-checkbox"
       name="name"
       readonly=""
@@ -36,6 +37,7 @@ exports[`Checkbox component should render without throwing an error match snapsh
       class="form-checkbox"
       data-cy="checkbox-cy-2"
       data-testid="checkbox-2"
+      disabled=""
       id="name2-checkbox"
       name="name"
       readonly=""

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

@@ -13,11 +13,13 @@ exports[`Select component should display label as placeholder with no label tag
         Placeholder label
       </option>
       <option
+        disabled=""
         value="name1"
       >
         name1
       </option>
       <option
+        disabled=""
         value="name2"
       >
         name2
@@ -46,11 +48,13 @@ exports[`Select component should render witout throwing an error and match snaps
         Any
       </option>
       <option
+        disabled=""
         value="name1"
       >
         name1
       </option>
       <option
+        disabled=""
         value="name2"
       >
         name2

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

@@ -24,10 +24,10 @@ describe('buildQuery helper function', () => {
   });
 
   it('should return new query string with search term if available', () => {
-    expect(withTextSearch).toEqual('search_term=new search value');
+    expect(withTextSearch).toEqual('search_term=new%20search%20value');
   });
 
   it('should return new query string with search text and all other available query values', () => {
-    expect(withSearchAndRange).toEqual('search_term=new search value&rangeFilter=2-10');
+    expect(withSearchAndRange).toEqual('search_term=new%20search%20value&rangeFilter=2-10');
   });
 });