@blaze-cms/react-page-builder 0.146.0-alpha.0 → 0.146.0-alpha.13

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

@@ -6,25 +6,44 @@ import { render } from '@blaze-cms/tools/test-helpers/test-functions';
 import '@testing-library/jest-dom/extend-expect';
 import MenuItem from '../../../../../src/components/MenuItem';
 
-const props = {
+jest.mock('@apollo/client', () => ({
+  ...jest.requireActual('@apollo/client'),
+  useQuery: jest.fn(({ data, loading, error, fetchMore }) => ({ data, loading, error, fetchMore }))
+}));
+
+jest.mock('@blaze-cms/utils-handlebars', () => ({
+  useStringTemplate: jest.fn((parent, [title]) => ({ loading: false, data: [title] }))
+}));
+
+const componentProps = {
+  id: 'id',
+  name: 'mock name',
   eventType: 'hover',
-  text: 'Item 1',
+  url: '/search?category.name={{currentParent.name}}',
+  text: 'Category: {{currentParent.name}}',
+  entity: 'page',
+  parent: {
+    itemEntity: 'page',
+    itemId: 'item-id'
+  },
+  category: {
+    publishedListingPage: {
+      url: 'published-url'
+    },
+    name: 'Category name'
+  },
   modifier: 'menu-item-mod',
   children: [
     <div className="child_1" key="1" component={{ type: 'menuitem' }}>
-      some child
+      menu child
     </div>
-  ]
+  ],
+  displayCategory: true
 };
 
 describe('MenuItem component', () => {
-  it('should render without throwing an error and match snapshot', () => {
-    const { asFragment } = render(MenuItem, props);
-    expect(asFragment()).toMatchSnapshot();
-  });
-
-  it('should render link if url is passed', () => {
-    const { asFragment } = render(MenuItem, { ...props, url: '/somewhere' });
+  it('should render a MenuItem based on passed parameters', async () => {
+    const { asFragment } = await render(MenuItem, componentProps);
     expect(asFragment()).toMatchSnapshot();
   });
 });

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

@@ -0,0 +1,55 @@
+/**
+ * @jest-environment jsdom
+ */
+
+import React from 'react';
+import { render, fireEvent } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
+import MenuRender from '../../../../../src/components/MenuItem/MenuItemRender';
+
+jest.mock('@blaze-cms/utils-handlebars', () => ({
+  useStringTemplate: jest.fn((parent, [title]) => ({ loadig: false, data: [title] }))
+}));
+
+describe('MenuRender component', () => {
+  it('renders menu item with link when URL is provided', () => {
+    const { getByText } = render(<MenuRender eventType="click" text="Home" url="/home" />);
+    const linkElement = getByText('Home');
+    expect(linkElement).toBeInTheDocument();
+    expect(linkElement.tagName).toBe('A');
+    expect(linkElement.getAttribute('href')).toBe('/home');
+  });
+
+  it('renders menu item without link when URL is not provided', () => {
+    const { getByText } = render(<MenuRender eventType="click" text="About" />);
+    const spanElement = getByText('About');
+    expect(spanElement).toBeInTheDocument();
+    expect(spanElement.tagName).toBe('SPAN');
+  });
+
+  it('toggles display of children on mouse enter and leave events', () => {
+    const { getByText, getByTestId } = render(
+      <MenuRender eventType="hover" text="Parent">
+        <div data-testid="child">Child</div>
+      </MenuRender>
+    );
+    const parentElement = getByText('Parent');
+    const childElement = getByTestId('child');
+
+    fireEvent.mouseEnter(parentElement);
+    expect(childElement).toBeInTheDocument();
+  });
+
+  it('toggles display of children on click event when URL is not provided', () => {
+    const { getByText, getByTestId } = render(
+      <MenuRender eventType="click" text="Parent">
+        <div data-testid="child">Child</div>
+      </MenuRender>
+    );
+    const parentElement = getByText('Parent');
+    const childElement = getByTestId('child');
+
+    fireEvent.click(parentElement);
+    expect(childElement).toBeInTheDocument();
+  });
+});

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

@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`MenuEntitiesItem component should render based on listData received 1`] = `<DocumentFragment />`;

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

@@ -1,22 +1,20 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`MenuItem component should render link if url is passed 1`] = `
+exports[`MenuItem component should render a MenuItem based on passed parameters 1`] = `
 <DocumentFragment>
   <li
-    aria-label="Item 1"
     class="menu-item-mod"
   >
     <div
       class="menu--item--link"
     >
       <a
-        aria-label="Item 1"
-        href="/somewhere"
+        aria-label="Category: {{currentParent.name}}"
+        href="/search?category.name={{url_encode currentParent.name}}"
       >
-        Item 1
+        Category: {{currentParent.name}}
       </a>
       <i
-        aria-label="Expand Item 1 menu items"
         class="menu--item--link--icon"
         role="button"
       >
@@ -42,56 +40,7 @@ exports[`MenuItem component should render link if url is passed 1`] = `
         class="child_1"
         component="[object Object]"
       >
-        some child
-      </div>
-    </div>
-  </li>
-</DocumentFragment>
-`;
-
-exports[`MenuItem component should render without throwing an error and match snapshot 1`] = `
-<DocumentFragment>
-  <li
-    aria-label="Item 1"
-    class="menu-item-mod"
-  >
-    <div
-      class="menu--item--link"
-    >
-      <span
-        aria-label="Item 1"
-        role="button"
-      >
-        Item 1
-      </span>
-      <i
-        aria-label="Expand Item 1 menu items"
-        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="menu--item-children hidden"
-    >
-      <div
-        class="child_1"
-        component="[object Object]"
-      >
-        some child
+        menu child
       </div>
     </div>
   </li>

package/tests/unit/src/components/MenuItem/helpers/inject-helper-into-template.test.js

@@ -0,0 +1,44 @@
+import '@testing-library/jest-dom/extend-expect';
+import { injectHelperIntoTemplate } from '../../../../../../src/components/MenuItem/helpers';
+
+describe('injectHelperIntoTemplate', () => {
+  it('should return the same template if there are no placeholders', () => {
+    const template = '/parts?productTypes.name=currentParent.name';
+    const result = injectHelperIntoTemplate(template, 'url_encode');
+    expect(result).toBe(template);
+  });
+
+  it('should return the same template if there are no helper provided', () => {
+    const template = '/parts?productTypes.name={{currentParent.name}}';
+    const result = injectHelperIntoTemplate(template);
+    expect(result).toBe(template);
+  });
+
+  it('should inject helper into template with {{ placeholder }}', () => {
+    const template = '/parts?productTypes.name={{currentParent.name}}';
+    const expected = '/parts?productTypes.name={{url_encode currentParent.name}}';
+    const result = injectHelperIntoTemplate(template, 'url_encode');
+    expect(result).toBe(expected);
+  });
+
+  it('should inject helper into template with {{{ placeholder }}}', () => {
+    const template = '/parts?productTypes.name={{{currentParent.name}}}';
+    const expected = '/parts?productTypes.name={{{url_encode currentParent.name}}}';
+    const result = injectHelperIntoTemplate(template, 'url_encode');
+    expect(result).toBe(expected);
+  });
+
+  it('should handle multiple {{ and {{{ placeholders in the template', () => {
+    const template =
+      '/parts?productTypes.name={{currentParent.name}}&productTypes.id={{{currentParent.id}}}';
+    const expected =
+      '/parts?productTypes.name={{url_encode currentParent.name}}&productTypes.id={{{url_encode currentParent.id}}}';
+    const result = injectHelperIntoTemplate(template, 'url_encode');
+    expect(result).toBe(expected);
+  });
+
+  it('should return null when template is null', () => {
+    const result = injectHelperIntoTemplate(null, 'url_encode');
+    expect(result).toBeNull();
+  });
+});

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

@@ -0,0 +1,71 @@
+import React from 'react';
+
+const MOCKED_MENUITEMS_PROPS = {
+  id: 'id',
+  name: 'mock name',
+  eventType: 'hover',
+  url: '/search?category.name={{currentParent.name}}',
+  text: 'Category: {{currentParent.name}}',
+  entity: 'page',
+  modifier: 'menu-item-mod',
+  children: [
+    <div className="child_1" key="1" component={{ type: 'menuitem' }}>
+      menu child
+    </div>
+  ],
+  index: 0,
+  listProps: {
+    id: '1',
+    initialOffset: 2,
+    isInfinite: false,
+    style: 'portrait',
+    name: 'list',
+    triggerInfiniteScroll: null,
+    displayThumbnail: true,
+    displayCount: false,
+    displayCategory: false,
+    displayTitle: true,
+    listTotal: 100,
+    itemsPerPage: 10
+  },
+  propsToDisplayModifiers: [],
+  cardProps: { name: 'item 1' },
+  itemEntity: 'page',
+  elementTitle: 'Elementtitle',
+  infiniteTotal: 10,
+  currentListLength: 5,
+  orderedListData: [{ id: 'page-1', __typename: 'PublishedPage' }],
+  isInfinite: false,
+  entityProps: {},
+  propsToDisplay: [],
+  pageBuilderComponents: [{ id: '1' }, { id: '2' }],
+  entities: ['page', 'article'],
+  parent: {
+    itemEntity: 'page',
+    itemId: 'item-id'
+  },
+  itemId: '1',
+  listTotal: 10,
+  initialOffset: 0,
+  triggerInfiniteScroll: null,
+  pageBuilderID: '1234',
+  displayCount: true,
+  banner: null,
+  itemsPerPage: 5,
+  itemsToDisplay: [],
+  paginationType: 'infinite',
+  displayThumbnail: true,
+  displayTitle: true,
+  graphqlEntityMap: {
+    PublishedPage: 'page',
+    PublishedArticle: 'article'
+  },
+  category: {
+    publishedListingPage: {
+      url: 'published-url'
+    },
+    name: 'Category name'
+  }
+};
+
+export { MOCKED_MENUITEMS_PROPS };

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

@@ -19,6 +19,10 @@ const props = {
   ]
 };
 
+jest.mock('../../../../../src/components/ModalAdapter', () =>
+  jest.fn().mockImplementation(({ children }) => children)
+);
+
 describe('Modal component', () => {
   it('should be defined', () => {
     expect(Modal).toBeDefined();

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

@@ -3,50 +3,15 @@
 exports[`Modal component should render without throwing an error and match snapshot 1`] = `
 <DocumentFragment>
   <div
-    class="overlay"
-  />
+    class="child_1"
+  >
+    some stuff
+  </div>
   <div
-    class=" modal modal--show"
+    class="child_2"
+    modifier="child-modi"
   >
-    <div
-      class="modal__header"
-    >
-      <div
-        class="modal__title"
-      />
-      <div
-        class="modal__close"
-        role="button"
-      >
-        <i
-          class="material-icons"
-        >
-          close
-        </i>
-      </div>
-    </div>
-    <div
-      class="modal__content"
-    >
-      <div
-        class="child_1"
-      >
-        some stuff
-      </div>
-      <div
-        class="child_2"
-        modifier="child-modi"
-      >
-        another child
-      </div>
-    </div>
-    <div
-      class="modal__footer"
-    >
-      <div
-        class="modal__button"
-      />
-    </div>
+    another child
   </div>
 </DocumentFragment>
 `;

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

@@ -6,7 +6,7 @@ exports[`MobileFormToolbar component should render without throwing error and ma
     class="filter__refine filter__refine--mobile-open"
   >
     <div
-      aria-label="Reset Filters"
+      aria-label="Reset search filters"
       class="reset"
       data-testid="reset-button"
       role="button"

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

@@ -6,6 +6,7 @@ exports[`ResetDesktopForm component should render without throwing error and mat
     class="filter__reset"
   >
     <button
+      aria-label="Reset search filters"
       class="icon-button icon-button--reset"
       data-testid="reset-icon"
       title="reset--button"
@@ -28,7 +29,6 @@ exports[`ResetDesktopForm component should render without throwing error and mat
       </i>
     </button>
     <div
-      aria-label="Reset Filters"
       data-testid="reset-button"
       role="button"
     >

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

@@ -14,6 +14,7 @@ exports[`SearchFilter component should render without throwing error and match s
         class="filter__reset"
       >
         <button
+          aria-label="Reset search filters"
           class="icon-button icon-button--reset"
           data-testid="reset-icon"
           title="reset--button"
@@ -36,7 +37,6 @@ exports[`SearchFilter component should render without throwing error and match s
           </i>
         </button>
         <div
-          aria-label="Reset Filters"
           data-testid="reset-button"
           role="button"
         >
@@ -56,11 +56,11 @@ exports[`SearchFilter component should render without throwing error and match s
     </div>
   </form>
   <div
+    aria-label="Toggle Search Filter"
     class="filter__refine filter__refine--mobile-close"
     data-testid="refine-mobile"
   >
     <div
-      aria-label="Toggle Search Filter"
       role="button"
     >
       Refine Search
@@ -83,6 +83,7 @@ exports[`SearchFilter component when groupAfterMobile = 0 and groupAfterDesktop
         class="filter__reset"
       >
         <button
+          aria-label="Reset search filters"
           class="icon-button icon-button--reset"
           data-testid="reset-icon"
           title="reset--button"
@@ -105,7 +106,6 @@ exports[`SearchFilter component when groupAfterMobile = 0 and groupAfterDesktop
           </i>
         </button>
         <div
-          aria-label="Reset Filters"
           data-testid="reset-button"
           role="button"
         >
@@ -122,6 +122,7 @@ exports[`SearchFilter component when groupAfterMobile = 0 and groupAfterDesktop
             class="filter__more-filters-mobile-content"
           >
             <button
+              aria-label="Show more search filters"
               class="filter__more-filters-desktop-toggler"
               data-testid="search-filter-desktop-toggler"
               type="button"
@@ -141,6 +142,7 @@ exports[`SearchFilter component when groupAfterMobile = 0 and groupAfterDesktop
                   class="filter__reset"
                 >
                   <button
+                    aria-label="Reset search filters"
                     class="icon-button icon-button--reset"
                     data-testid="reset-icon"
                     title="reset--button"
@@ -163,7 +165,6 @@ exports[`SearchFilter component when groupAfterMobile = 0 and groupAfterDesktop
                     </i>
                   </button>
                   <div
-                    aria-label="Reset Filters"
                     data-testid="reset-button"
                     role="button"
                   >
@@ -186,6 +187,7 @@ exports[`SearchFilter component when groupAfterMobile = 0 and groupAfterDesktop
               class="filter__reset"
             >
               <button
+                aria-label="Reset search filters"
                 class="icon-button icon-button--reset"
                 data-testid="reset-icon"
                 title="reset--button"
@@ -208,7 +210,6 @@ exports[`SearchFilter component when groupAfterMobile = 0 and groupAfterDesktop
                 </i>
               </button>
               <div
-                aria-label="Reset Filters"
                 data-testid="reset-button"
                 role="button"
               >
@@ -233,11 +234,11 @@ exports[`SearchFilter component when groupAfterMobile = 0 and groupAfterDesktop
     </div>
   </form>
   <div
+    aria-label="Toggle Search Filter"
     class="filter__refine filter__refine--mobile-close"
     data-testid="refine-mobile"
   >
     <div
-      aria-label="Toggle Search Filter"
       role="button"
     >
       Refine Search
@@ -260,6 +261,7 @@ exports[`SearchFilter component when groupAfterMobile > 0 and groupAfterDesktop
         class="filter__reset"
       >
         <button
+          aria-label="Reset search filters"
           class="icon-button icon-button--reset"
           data-testid="reset-icon"
           title="reset--button"
@@ -282,7 +284,6 @@ exports[`SearchFilter component when groupAfterMobile > 0 and groupAfterDesktop
           </i>
         </button>
         <div
-          aria-label="Reset Filters"
           data-testid="reset-button"
           role="button"
         >
@@ -318,6 +319,7 @@ exports[`SearchFilter component when groupAfterMobile > 0 and groupAfterDesktop
                   class="filter__reset"
                 >
                   <button
+                    aria-label="Reset search filters"
                     class="icon-button icon-button--reset"
                     data-testid="reset-icon"
                     title="reset--button"
@@ -340,7 +342,6 @@ exports[`SearchFilter component when groupAfterMobile > 0 and groupAfterDesktop
                     </i>
                   </button>
                   <div
-                    aria-label="Reset Filters"
                     data-testid="reset-button"
                     role="button"
                   >
@@ -363,6 +364,7 @@ exports[`SearchFilter component when groupAfterMobile > 0 and groupAfterDesktop
               class="filter__reset"
             >
               <button
+                aria-label="Reset search filters"
                 class="icon-button icon-button--reset"
                 data-testid="reset-icon"
                 title="reset--button"
@@ -385,7 +387,6 @@ exports[`SearchFilter component when groupAfterMobile > 0 and groupAfterDesktop
                 </i>
               </button>
               <div
-                aria-label="Reset Filters"
                 data-testid="reset-button"
                 role="button"
               >
@@ -410,11 +411,11 @@ exports[`SearchFilter component when groupAfterMobile > 0 and groupAfterDesktop
     </div>
   </form>
   <div
+    aria-label="Toggle Search Filter"
     class="filter__refine filter__refine--mobile-close"
     data-testid="refine-mobile"
   >
     <div
-      aria-label="Toggle Search Filter"
       role="button"
     >
       Refine Search
@@ -437,6 +438,7 @@ exports[`SearchFilter component when groupAfterMobile > 0 and groupAfterDesktop
         class="filter__reset"
       >
         <button
+          aria-label="Reset search filters"
           class="icon-button icon-button--reset"
           data-testid="reset-icon"
           title="reset--button"
@@ -459,7 +461,6 @@ exports[`SearchFilter component when groupAfterMobile > 0 and groupAfterDesktop
           </i>
         </button>
         <div
-          aria-label="Reset Filters"
           data-testid="reset-button"
           role="button"
         >
@@ -483,6 +484,7 @@ exports[`SearchFilter component when groupAfterMobile > 0 and groupAfterDesktop
             class="filter__more-filters-mobile-content"
           >
             <button
+              aria-label="Show more search filters"
               class="filter__more-filters-desktop-toggler"
               data-testid="search-filter-desktop-toggler"
               type="button"
@@ -502,6 +504,7 @@ exports[`SearchFilter component when groupAfterMobile > 0 and groupAfterDesktop
                   class="filter__reset"
                 >
                   <button
+                    aria-label="Reset search filters"
                     class="icon-button icon-button--reset"
                     data-testid="reset-icon"
                     title="reset--button"
@@ -524,7 +527,6 @@ exports[`SearchFilter component when groupAfterMobile > 0 and groupAfterDesktop
                     </i>
                   </button>
                   <div
-                    aria-label="Reset Filters"
                     data-testid="reset-button"
                     role="button"
                   >
@@ -547,6 +549,7 @@ exports[`SearchFilter component when groupAfterMobile > 0 and groupAfterDesktop
               class="filter__reset"
             >
               <button
+                aria-label="Reset search filters"
                 class="icon-button icon-button--reset"
                 data-testid="reset-icon"
                 title="reset--button"
@@ -569,7 +572,6 @@ exports[`SearchFilter component when groupAfterMobile > 0 and groupAfterDesktop
                 </i>
               </button>
               <div
-                aria-label="Reset Filters"
                 data-testid="reset-button"
                 role="button"
               >
@@ -594,11 +596,11 @@ exports[`SearchFilter component when groupAfterMobile > 0 and groupAfterDesktop
     </div>
   </form>
   <div
+    aria-label="Toggle Search Filter"
     class="filter__refine filter__refine--mobile-close"
     data-testid="refine-mobile"
   >
     <div
-      aria-label="Toggle Search Filter"
       role="button"
     >
       Refine Search
@@ -621,6 +623,7 @@ exports[`SearchFilter component when isCollapsedOnResponsive = false, displaySea
         class="filter__reset"
       >
         <button
+          aria-label="Reset search filters"
           class="icon-button icon-button--reset"
           data-testid="reset-icon"
           title="reset--button"
@@ -643,7 +646,6 @@ exports[`SearchFilter component when isCollapsedOnResponsive = false, displaySea
           </i>
         </button>
         <div
-          aria-label="Reset Filters"
           data-testid="reset-button"
           role="button"
         >
@@ -708,6 +710,7 @@ exports[`SearchFilter component when isCollapsedOnResponsive = true, displaySear
         class="filter__reset"
       >
         <button
+          aria-label="Reset search filters"
           class="icon-button icon-button--reset"
           data-testid="reset-icon"
           title="reset--button"
@@ -730,7 +733,6 @@ exports[`SearchFilter component when isCollapsedOnResponsive = true, displaySear
           </i>
         </button>
         <div
-          aria-label="Reset Filters"
           data-testid="reset-button"
           role="button"
         >
@@ -745,7 +747,7 @@ exports[`SearchFilter component when isCollapsedOnResponsive = true, displaySear
       class="filter__refine filter__refine--mobile-open"
     >
       <div
-        aria-label="Reset Filters"
+        aria-label="Reset search filters"
         class="reset"
         data-testid="reset-button"
         role="button"

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

@@ -1,5 +1,11 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`SearchFilter container should match snapshot 1`] = `<DocumentFragment />`;
+exports[`SearchFilter container should match snapshot 1`] = `
+<DocumentFragment>
+  <div>
+    Mocked component
+  </div>
+</DocumentFragment>
+`;
 
 exports[`SearchFilter container should return null if no filters are passed 1`] = `<DocumentFragment />`;