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

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

@@ -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';
 
@@ -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,
@@ -153,5 +150,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/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');
   });
 });

package/tests/unit/src/components/SearchFilter/helpers/get-initial-filter-values.test.js

@@ -1,17 +1,19 @@
 import getInitialFilterValues from '../../../../../../src/components/SearchFilter/helpers/get-initial-filter-values';
 import { SEARCH_TERM } from '../../../../../../src/components/SearchFilter/constants';
 
+const filters = [
+  { propsToDisplay: ['rangeFilter'], type: 'range', rangeInterval: 1 },
+  { propsToDisplay: ['checkboxFilter'], type: 'checkbox' },
+  { propsToDisplay: ['emptySelect'], type: 'select' }
+];
+const query = {
+  [SEARCH_TERM]: 'some text search',
+  rangeFilter: '7-8',
+  checkboxFilter: ['check1', 'check2']
+};
 const mockedProps = [
   [{}, [], {}],
-  [
-    { rangeFilter: { min: 5, max: 10 }, checkboxFilter: {}, emptySelect: {} },
-    [
-      { propsToDisplay: ['rangeFilter'], type: 'range', rangeInterval: 1 },
-      { propsToDisplay: ['checkboxFilter'], type: 'checkbox' },
-      { propsToDisplay: ['emptySelect'], type: 'select' }
-    ],
-    { [SEARCH_TERM]: 'some text search', rangeFilter: '7-8', checkboxFilter: ['check1', 'check2'] }
-  ]
+  [{ rangeFilter: { min: 5, max: 10 }, checkboxFilter: {}, emptySelect: {} }, filters, query]
 ];
 
 describe('getInitialFilterValues helper function', () => {
@@ -19,12 +21,24 @@ describe('getInitialFilterValues helper function', () => {
   const withValues = getInitialFilterValues(...mockedProps[1]);
 
   it('should return init filter values based on query and filterData', () => {
-    expect(withNoValue).toEqual({ search_term: '' });
+    expect(withNoValue).toEqual({ dataNotSet: false, search_term: '' });
     expect(withValues).toEqual({
-      search_term: 'some text search',
+      dataNotSet: false,
+      search_term: query[SEARCH_TERM],
       rangeFilter: { max: 10, maxValue: 8, min: 5, minValue: 7, step: 1 },
       checkboxFilter: ['check1', 'check2'],
       emptySelect: null
     });
   });
+
+  it('should return init filter values without filterData', () => {
+    const withNoData = getInitialFilterValues(null, filters, query);
+    expect(withNoData).toEqual({
+      dataNotSet: true,
+      search_term: query[SEARCH_TERM],
+      rangeFilter: null,
+      checkboxFilter: null,
+      emptySelect: null
+    });
+  });
 });

package/tests/unit/src/components/SearchFilter/helpers/parse-filter-value.test.js

@@ -30,6 +30,6 @@ describe('parseFilterValue helper function', () => {
     expect(rangeValue).toEqual('rangeVal=10-20');
     expect(checkboxArrayValue).toEqual('checkVal=check1&checkVal=check2');
     expect(checkboxStringValue).toEqual('checkVal2=check3');
-    expect(selectValue).toEqual('selectVal=select value');
+    expect(selectValue).toEqual('selectVal=select%20value');
   });
 });

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

@@ -46,6 +46,18 @@ 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],
+  },
+  "itemlistnew": Object {
+    "$$typeof": Symbol(react.forward_ref),
+    "render": [Function],
+  },
   "list": Object {
     "$$typeof": Symbol(react.forward_ref),
     "render": [Function],