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

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

@@ -5,7 +5,7 @@ import { MdSearch } from 'react-icons/md';
 import { withTitle } from '../../../HOC';
 import { SEARCH_TERM } from '../constants';
 
-const TextSearch = ({ label, searchValue, updateFilterValues, handleSubmit, filterValues }) => (
+const TextSearch = ({ label, searchValue, updateFilterValues }) => (
   <div className="search">
     <div className="search__wrapper">
       <div className="form-field form-field--input form-field--search">
@@ -34,10 +34,8 @@ const TextSearch = ({ label, searchValue, updateFilterValues, handleSubmit, filt
 );
 
 TextSearch.propTypes = {
-  filterValues: PropTypes.object.isRequired,
   searchValue: PropTypes.string.isRequired,
   updateFilterValues: PropTypes.func.isRequired,
-  handleSubmit: PropTypes.func.isRequired,
   label: PropTypes.string
 };
 

package/src/components/SearchFilter/helpers/build-filters-query.js

@@ -0,0 +1,40 @@
+const builFilterObject = (key, value, filters) => {
+  const isArray = Array.isArray(value);
+  if (!isArray) {
+    const singleFilterObj = { match: { [key]: value } };
+    filters.push(singleFilterObj);
+    return;
+  }
+
+  value.forEach(filterValue => {
+    filters.push({ match: { [key]: filterValue } });
+  });
+};
+const buildFiltersQuery = (query, filterBy, filterByProperty) => {
+  const mustFilters = [];
+  Object.keys(query).forEach(queryKey => {
+    if (queryKey === 'search_term' || queryKey === 'shouldSearch') return;
+    if (!queryKey || !query[queryKey]) return;
+    const queryValue = query[queryKey];
+    const queryKeyword = `${queryKey}.keyword`;
+    builFilterObject(queryKeyword, queryValue, mustFilters);
+  });
+
+  if (filterByProperty && filterByProperty.length) {
+    filterByProperty &&
+      filterByProperty.forEach(filterByPropOption => {
+        const [filterByPropKey] = filterByPropOption.split('/');
+        filterBy.forEach(filterByOption => {
+          if (filterByOption.indexOf(filterByPropKey) === -1) return;
+          const [, filteryByValue] = filterByOption.split('/');
+          const filterByKeyword = `${filterByPropKey}.keyword`;
+          if (!filteryByValue) return;
+          mustFilters.push({ match: { [filterByKeyword]: filteryByValue } });
+        });
+      });
+  }
+
+  return mustFilters;
+};
+
+export default buildFiltersQuery;

package/src/components/SearchFilter/helpers/build-query.js

@@ -3,7 +3,9 @@ import parseFilterValue from './parse-filter-value';
 
 const buildQuery = (filterValues, filters) => {
   const newQuery = [];
-  const searchValue = filterValues[SEARCH_TERM];
+  const searchValue = filterValues[SEARCH_TERM]
+    ? encodeURIComponent(filterValues[SEARCH_TERM])
+    : '';
   if (searchValue) newQuery.push(`${SEARCH_TERM}=${searchValue}`);
 
   filters.forEach(({ propsToDisplay, type }) => {

package/src/components/SearchFilter/helpers/build-raw-query-stringified.js

@@ -1,6 +1,6 @@
 import { KEYWORD, SIZE } from '../constants';
 
-const buildRawQueryStringified = (checkboxSelectValues, rangeValues, entity) => {
+const buildRawQueryStringified = (checkboxSelectValues, rangeValues, entity, mustFilters) => {
   if (!checkboxSelectValues.length && !rangeValues.length) return '';
 
   const aggs = {};
@@ -36,6 +36,7 @@ const buildRawQueryStringified = (checkboxSelectValues, rangeValues, entity) =>
                 }
               }
             ],
+            must: mustFilters,
             minimum_should_match: 1
           }
         }

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

@@ -3,12 +3,23 @@ import getFilterValueFromQuery from './get-filter-value-from-query';
 
 const getInitialFilterValues = (filterData, filters, query) => {
   const filterValues = {};
+  filterValues[SEARCH_TERM] = query[SEARCH_TERM] || '';
+
+  if (!filterData) {
+    filters.forEach(({ propsToDisplay: [key] }) => {
+      filterValues[key] = null;
+    });
+    filterValues.dataNotSet = true;
+    return filterValues;
+  }
+
   Object.keys(filterData).forEach(key => {
     const filterProps =
       filters.find(({ propsToDisplay }) => propsToDisplay.find(prop => key === prop)) || {};
     filterValues[key] = getFilterValueFromQuery(key, filterProps, filterData[key], query);
   });
-  filterValues[SEARCH_TERM] = query[SEARCH_TERM] || '';
+
+  filterValues.dataNotSet = false;
 
   return filterValues;
 };

package/src/components/SearchFilter/helpers/index.js

@@ -13,6 +13,7 @@ import isDeviceDesktop from './is-device-desktop';
 import getInitialFilterValues from './get-initial-filter-values';
 import getFilterValueFromQuery from './get-filter-value-from-query';
 import buildQuery from './build-query';
+import buildFiltersQuery from './build-filters-query';
 
 export {
   buildQuery,
@@ -30,5 +31,6 @@ export {
   getSelectOptions,
   isDeviceDesktop,
   getInitialFilterValues,
-  getFilterValueFromQuery
+  getFilterValueFromQuery,
+  buildFiltersQuery
 };

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

@@ -8,10 +8,10 @@ const parseFilterValue = (key, type, value) => {
       if (value.minValue === value.min && value.maxValue === value.max) return null;
       return `${key}=${value.minValue}-${value.maxValue}`;
     case CHECKBOX:
-      if (typeof value === 'string') return `${key}=${value}`;
-      return value.map(val => `${key}=${val}`).join('&');
+      if (typeof value === 'string') return `${key}=${encodeURIComponent(value)}`;
+      return value.map(val => `${key}=${encodeURIComponent(val)}`).join('&');
     case SELECT: {
-      const parsedValue = value.replace(/&/g, '%26');
+      const parsedValue = encodeURIComponent(value);
       return `${key}=${parsedValue}`;
     }
 

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,14 @@ export default {
     import(/* webpackChunkName: "blazePbPasswordResetRequest" */ './PasswordResetRequest')
   ),
   breadcrumb: dynamic(() => import(/* webpackChunkName: "blazePbBreadcrumb" */ './Breadcrumb')),
+  itemlistbutton: dynamic(() =>
+    import(/* webpackChunkName: "blazePbItemListButton" */ './ItemList/ItemListButton')
+  ),
+  itemlistcounter: dynamic(() =>
+    import(/* webpackChunkName: "blazePbItemListCounter" */ './ItemList/ItemListCounter')
+  ),
+  itemlistnew: dynamic(() =>
+    import(/* webpackChunkName: "blazePbItemListNew" */ './ItemList/ItemListNew')
+  ),
   backtotop: dynamic(() => import(/* webpackChunkName: "blazePbBackToTop" */ './BackToTop'))
 };

package/src/constants/index.js

@@ -17,6 +17,7 @@ const RANGE = 'range';
 const CHECKBOX = 'checkbox';
 const ELEMENT = 'element';
 const MENU_ITEM = 'menuitem';
+const SUB_MENU = 'submenu';
 const SELECT = 'select';
 const ON_CLICK = 'onClick';
 const KEYWORD = 'keyword';
@@ -303,6 +304,7 @@ export {
   MOBILE_WIDTH,
   HIDDEN,
   MENU_ITEM,
+  SUB_MENU,
   LOGIN_FORM,
   PASSWORD_REGEX,
   PASSWORD_VALIDATION_MESSAGE,

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/hooks/helpers/append-gtm-classname.js

@@ -7,6 +7,9 @@ const appendGtmClassName = (settings, childComponents) => {
       children: [, compChildren]
     }
   } = childComponents;
+
+  if (!compChildren || !Array.isArray(compChildren)) return settings;
+
   const gtmClassNames = compChildren
     .filter(
       ({

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { act, render } from '@testing-library/react';
+import { act, render, fireEvent, waitFor } from '@testing-library/react';
 import '@testing-library/jest-dom/extend-expect';
 import Button from '../../../../src/components/Button';
 
@@ -20,6 +20,16 @@ const componentProps = {
   }
 };
 
+const contentToShow = 'Content to show';
+
+const seoVisivilityProps = {
+  text: 'show more',
+  afterClickText: 'show less',
+  url: '',
+  icon: '',
+  children: [<p>Content to show</p>]
+};
+
 const renderComponent = async props => {
   let renderResults;
 
@@ -68,4 +78,48 @@ describe('Button component', () => {
     const { container } = await renderComponent(logoutButton);
     expect(container.innerHTML).toBe('');
   });
+
+  it('should toggle button text and render child components for SEO visibility ', async () => {
+    const props = {
+      ...componentProps,
+      ...seoVisivilityProps,
+      childSeoVisibility: true
+    };
+    const { container, getByText } = await renderComponent(props);
+
+    const element = await waitFor(() => getByText('show more'));
+    expect(container.innerHTML).toContain(contentToShow);
+
+    fireEvent(
+      element,
+      new MouseEvent('click', {
+        bubbles: true,
+        cancelable: true
+      })
+    );
+    expect(container.innerHTML).toContain('show less');
+    expect(container.innerHTML).toContain(contentToShow);
+  });
+
+  it('should toggle button text hide child components when SEO visibility is disabled', async () => {
+    const props = {
+      ...componentProps,
+      ...seoVisivilityProps,
+      childSeoVisibility: false
+    };
+    const { container, getByText } = await renderComponent(props);
+
+    const element = await waitFor(() => getByText('show more'));
+    expect(container.innerHTML).not.toContain(contentToShow);
+
+    fireEvent(
+      element,
+      new MouseEvent('click', {
+        bubbles: true,
+        cancelable: true
+      })
+    );
+    expect(container.innerHTML).toContain('show less');
+    expect(container.innerHTML).toContain(contentToShow);
+  });
 });

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

@@ -0,0 +1,175 @@
+import React from 'react';
+import '@testing-library/jest-dom/extend-expect';
+import { render, waitFor, fireEvent } from '@testing-library/react';
+import { MockedProvider } from '@apollo/client/testing';
+
+import ItemListButton from '../../../../../src/components/ItemList/ItemListButton';
+import {
+  getItemList,
+  addItemsToList,
+  removeItemsFromList
+} from '../../../../../src/application/query';
+import userItemListId from '../../../../../src/components/ItemList/hooks/use-item-list-id';
+import setItemListId from '../../../../../src/components/ItemList/helpers/set-item-list-id';
+
+jest.mock('../../../../../src/components/ItemList/hooks/use-item-list-id', () =>
+  jest.fn(() => ({ listId: 'LIST ID' }))
+);
+
+jest.mock('../../../../../src/components/ItemList/helpers/set-item-list-id', () => {
+  const originalModule = jest.requireActual(
+    '../../../../../src/components/ItemList/helpers/set-item-list-id'
+  );
+  return jest.fn((...args) => originalModule.default(...args));
+});
+
+const listId = 'LIST ID';
+const missingListId = 'MISSING';
+const emptyListId = 'EMPTY';
+const listItem = { itemId: 'ID', itemEntity: 'ENTITY' };
+const listName = 'list_name';
+const props = {
+  listName,
+  modifier: 'modifier',
+  parent: {
+    itemId: 'ID',
+    itemEntity: 'ENTITY'
+  }
+};
+
+const mocks = [
+  {
+    request: {
+      query: getItemList,
+      variables: { id: listId }
+    },
+    result: {
+      data: {
+        getItemList: { id: listId, listItems: [listItem] }
+      }
+    }
+  },
+  {
+    request: {
+      query: getItemList,
+      variables: { id: missingListId }
+    },
+    result: {
+      data: {
+        getItemList: null
+      }
+    }
+  },
+  {
+    request: {
+      query: getItemList,
+      variables: { id: emptyListId }
+    },
+    result: {
+      data: {
+        getItemList: { id: emptyListId, listItems: [] }
+      }
+    }
+  },
+  {
+    request: {
+      query: addItemsToList,
+      variables: { name: listName, id: '', listItems: [props.parent] }
+    },
+    result: {
+      data: {
+        addItemsToList: {
+          result: { id: listId, listItems: [listItem] }
+        }
+      }
+    }
+  },
+  {
+    request: {
+      query: removeItemsFromList,
+      variables: { listId, listItems: [props.parent] }
+    },
+    result: {
+      data: {
+        removeItemsFromList: {
+          result: { id: listId, listItems: [listItem] }
+        }
+      }
+    }
+  }
+];
+
+const selectedClasses = 'item-list-button item-list-button--selected modifier';
+const unselectedClasses = 'item-list-button modifier';
+const buttonRole = 'button';
+
+describe('ItemListButton component', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('should render button marked selected when current parent is in the list', async () => {
+    const { asFragment, getByRole } = render(
+      <MockedProvider mocks={mocks}>
+        <ItemListButton {...props} />
+      </MockedProvider>
+    );
+
+    await waitFor(() => getByRole(buttonRole));
+    const button = getByRole(buttonRole);
+    expect(button).toHaveClass(selectedClasses);
+    expect(asFragment()).toMatchSnapshot();
+  });
+
+  it('should add and remove item to the list on click', async () => {
+    userItemListId.mockReturnValueOnce({ listId: '' }).mockReturnValueOnce({ listId });
+    const { asFragment, getByRole } = render(
+      <MockedProvider mocks={mocks}>
+        <ItemListButton {...props} />
+      </MockedProvider>
+    );
+
+    await waitFor(() => getByRole(buttonRole));
+    const button = getByRole(buttonRole);
+    fireEvent.click(button);
+    await waitFor(() => getByRole(buttonRole));
+    const selectedButton = getByRole(buttonRole);
+    expect(selectedButton).toHaveClass(selectedClasses);
+    expect(asFragment()).toMatchSnapshot();
+
+    fireEvent.click(selectedButton);
+    await waitFor(() => getByRole(buttonRole));
+    const removedButton = getByRole(buttonRole);
+    expect(removedButton).toHaveClass(unselectedClasses);
+    expect(asFragment()).toMatchSnapshot();
+  });
+
+  it('should set list id from mutation', async () => {
+    userItemListId.mockReturnValue({ listId: '' });
+    const { getByRole } = render(
+      <MockedProvider mocks={mocks}>
+        <ItemListButton {...props} />
+      </MockedProvider>
+    );
+
+    await waitFor(() => getByRole(buttonRole));
+    const button = getByRole(buttonRole);
+    fireEvent.click(button);
+    await waitFor(() => getByRole(buttonRole));
+    expect(setItemListId).toHaveBeenCalledWith(listName, listId);
+  });
+
+  it('should render button not marked selected when current parent is not in the list', async () => {
+    userItemListId.mockReturnValue({ listId: emptyListId });
+    const { asFragment, getByRole } = render(
+      <MockedProvider mocks={mocks}>
+        <ItemListButton {...props} />
+      </MockedProvider>
+    );
+
+    await waitFor(() => getByRole(buttonRole));
+    const button = getByRole(buttonRole);
+    expect(button).toHaveClass(unselectedClasses);
+    expect(asFragment()).toMatchSnapshot();
+  });
+});

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

@@ -0,0 +1,65 @@
+import React from 'react';
+import '@testing-library/jest-dom/extend-expect';
+import { render, waitFor, fireEvent } from '@testing-library/react';
+import { MockedProvider } from '@apollo/client/testing';
+import { useRouter } from 'next/router';
+import ItemListCounter from '../../../../../src/components/ItemList/ItemListCounter';
+import { getItemList } from '../../../../../src/application/query';
+
+jest.mock('../../../../../src/components/ItemList/hooks/use-item-list-id', () =>
+  jest.fn(() => ({ listId: 'LIST ID' }))
+);
+
+jest.mock('next/router', () => {
+  const push = jest.fn();
+  return {
+    useRouter: jest.fn(() => ({ push }))
+  };
+});
+
+const listId = 'LIST ID';
+const listItem = { itemId: 'ID', itemEntity: 'ENTITY' };
+const listName = 'list_name';
+const props = {
+  listName,
+  modifier: 'modifier',
+  url: '/list-url'
+};
+
+const mocks = [
+  {
+    request: {
+      query: getItemList,
+      variables: { id: listId }
+    },
+    result: {
+      data: {
+        getItemList: { id: listId, listItems: [listItem] }
+      }
+    }
+  }
+];
+
+const buttonRole = 'button';
+const router = useRouter();
+
+describe('ItemListCounter component', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('should display listItem count and route to url', async () => {
+    const { asFragment, getByRole, getByText } = render(
+      <MockedProvider mocks={mocks}>
+        <ItemListCounter {...props} />
+      </MockedProvider>
+    );
+    await waitFor(() => getByText('1'));
+
+    const button = getByRole(buttonRole);
+    expect(asFragment()).toMatchSnapshot();
+
+    fireEvent.click(button);
+    expect(router.push).toHaveBeenCalledWith('/Resolver', `${props.url}?itemListId=${listId}`);
+  });
+});

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

@@ -0,0 +1,164 @@
+import React from 'react';
+import '@testing-library/jest-dom/extend-expect';
+import { render, waitFor, fireEvent } from '@testing-library/react';
+import { MockedProvider } from '@apollo/client/testing';
+import { useRouter } from 'next/router';
+import ItemListNew from '../../../../../src/components/ItemList/ItemListNew';
+import { getItemList } from '../../../../../src/application/query';
+import userItemListId from '../../../../../src/components/ItemList/hooks/use-item-list-id';
+import getItemListData from '../../../../../src/components/ItemList/helpers/get-item-list-data';
+import setItemListId from '../../../../../src/components/ItemList/helpers/set-item-list-id';
+import setParamAndRedirect from '../../../../../src/components/ItemList/helpers/set-param-and-redirect';
+import { LIST_ITEM_QUERY_PARAM } from '../../../../../src/components/ItemList/constants';
+
+jest.mock('next/router', () => {
+  const useRouterMock = jest.fn(() => ({ asPath: '/test' }));
+  return { useRouter: useRouterMock };
+});
+
+jest.mock('../../../../../src/components/ItemList/hooks/use-item-list-id', () =>
+  jest.fn(() => ({ listId: 'LIST ID' }))
+);
+
+jest.mock('../../../../../src/components/ItemList/helpers/set-item-list-id', () => {
+  const originalModule = jest.requireActual(
+    '../../../../../src/components/ItemList/helpers/set-item-list-id'
+  );
+  return jest.fn((...args) => originalModule.default(...args));
+});
+
+jest.mock('../../../../../src/components/ItemList/helpers/set-param-and-redirect', () => jest.fn());
+
+jest.mock('../../../../../src/components/ItemList/helpers/get-item-list-data', () => {
+  const originalModule = jest.requireActual(
+    '../../../../../src/components/ItemList/helpers/get-item-list-data'
+  );
+  return jest.fn((...args) => originalModule.default(...args));
+});
+
+const listId = 'LIST ID';
+const missingListId = 'MISSING';
+const emptyListId = 'EMPTY';
+const queryListId = 'QUERY-LIST-ID';
+const queryListItem = { itemId: 'ID FROM QUERY', itemEntity: 'ENTITY' };
+const mocks = [
+  {
+    request: {
+      query: getItemList,
+      variables: { id: listId }
+    },
+    result: {
+      data: {
+        getItemList: { id: listId, listItems: [{ itemId: 'ID', itemEntity: 'ENTITY' }] }
+      }
+    }
+  },
+  {
+    request: {
+      query: getItemList,
+      variables: { id: missingListId }
+    },
+    result: {
+      data: {
+        getItemList: null
+      }
+    }
+  },
+  {
+    request: {
+      query: getItemList,
+      variables: { id: emptyListId }
+    },
+    result: {
+      data: {
+        getItemList: { id: emptyListId, listItems: [] }
+      }
+    }
+  },
+  {
+    request: {
+      query: getItemList,
+      variables: { id: queryListId }
+    },
+    result: {
+      data: {
+        getItemList: { id: queryListId, listItems: [queryListItem] }
+      }
+    }
+  }
+];
+
+describe('ItemListNew component', () => {
+  const props = {
+    listName: 'list_name',
+    modifier: 'button',
+    text: 'Clear list'
+  };
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('should match snapshot and render without throwing an error', async () => {
+    const { asFragment, getByText } = render(
+      <MockedProvider mocks={mocks}>
+        <ItemListNew {...props} />
+      </MockedProvider>
+    );
+    await waitFor(() => expect(getByText(props.text)).toBeInTheDocument());
+    expect(asFragment()).toMatchSnapshot();
+  });
+
+  it('should not render if list not found', async () => {
+    userItemListId.mockReturnValue({ listId: missingListId });
+    const { asFragment } = render(
+      <MockedProvider mocks={mocks}>
+        <ItemListNew {...props} listName={missingListId} />
+      </MockedProvider>
+    );
+
+    await waitFor(() => expect(getItemListData).toHaveBeenCalled());
+    expect(asFragment()).toMatchSnapshot();
+  });
+
+  it('should render using listId from query', async () => {
+    userItemListId.mockReturnValue({ listId });
+    const queryStringPath = { asPath: `/test?${LIST_ITEM_QUERY_PARAM}=${queryListId}` };
+    useRouter.mockReturnValueOnce(queryStringPath).mockReturnValueOnce(queryStringPath);
+    const { asFragment } = render(
+      <MockedProvider mocks={mocks}>
+        <ItemListNew {...props} listName={queryListId} />
+      </MockedProvider>
+    );
+
+    await waitFor(() => expect(getItemListData).toHaveBeenCalled());
+    expect(getItemListData).toHaveBeenCalledWith({
+      getItemList: { id: queryListId, listItems: [queryListItem] }
+    });
+    expect(asFragment()).toMatchSnapshot();
+  });
+
+  it('should not render if list has not items', async () => {
+    userItemListId.mockReturnValue({ listId: emptyListId });
+    const { asFragment } = render(
+      <MockedProvider mocks={mocks}>
+        <ItemListNew {...props} listName={emptyListId} />
+      </MockedProvider>
+    );
+    await waitFor(() => expect(getItemListData).toHaveBeenCalled());
+    expect(asFragment()).toMatchSnapshot();
+  });
+
+  it('should clear id and redirect onclick', async () => {
+    userItemListId.mockReturnValue({ listId });
+    const { getByText } = render(
+      <MockedProvider mocks={mocks}>
+        <ItemListNew {...props} />
+      </MockedProvider>
+    );
+    await waitFor(() => expect(getByText(props.text)).toBeInTheDocument());
+    fireEvent.click(getByText(props.text));
+    expect(setItemListId).toHaveBeenCalledWith(props.listName, '');
+    expect(setParamAndRedirect).toHaveBeenCalled();
+  });
+});