@blaze-cms/react-page-builder 0.139.0-project-admin-customisations.0 → 0.139.0

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

@@ -22,12 +22,17 @@ const MOCKED_LIST_OPTIONS = {
   infiniteTotal: 10,
   gridModifier: 'grid grid--three',
   currentListLength: 3,
-  orderedListData: [{ id: 'item1' }, { id: 'item2' }, { id: 'item3' }],
+  orderedListData: [
+    { id: 'item1', __typename: 'PublishedPage' },
+    { id: 'item2', __typename: 'PublishedArticle' },
+    { id: 'item3', __typename: 'PublishedArticle' }
+  ],
   isInfinite: false,
   pageBuilderComponents: [{ id: '1' }, { id: '2' }],
   entityProps: {},
   propsToDisplay: [],
-  entity: 'page',
+  // entity: 'page', // old prop
+  entities: ['page', 'article'],
   itemId: '123',
   listTotal: 10,
   initialOffset: 0,
@@ -43,7 +48,8 @@ const MOCKED_LIST_OPTIONS = {
   displayThumbnail: true,
   displayTitle: true,
   graphqlEntityMap: {
-    PublishedPage: 'page'
+    PublishedPage: 'page',
+    PublishedArticle: 'article'
   }
 };
 

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

@@ -9,7 +9,7 @@ exports[`Menu component should render without throwing an error and match snapsh
       class="menu--desktop-wrapper"
     >
       <ul
-        class=" menu-mod"
+        class="menu-mod"
       >
         <div
           class="child_1"

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

@@ -7,10 +7,8 @@ exports[`Placeholder component should render PlaceholderIcon 1`] = `
     data-testid="placeholder-icon"
   >
     <svg
-      height="25px"
       version="1.1"
       viewBox="0 0 20 20"
-      width="25px"
       xmlns="http://www.w3.org/2000/svg"
       xmlns:xlink="http://www.w3.org/1999/xlink"
     >
@@ -44,13 +42,13 @@ exports[`Placeholder component should render PlaceholderIcon 1`] = `
               />
               <path
                 d="M5.00003877,4.07973585 C5.00003879,3.4834142 5.50109477,3 6.11917864,3 C6.73726251,3 7.2383185,3.4834142 7.2383185,4.07973585 C7.2383185,4.6760575 6.73726252,5.15947172 6.11917864,5.15947172 C5.82268209,5.15728623 5.53857972,5.04442179 5.32645457,4.84454876 C5.11586241,4.64208328 4.99827309,4.36656405 5.00003877,4.07973585 Z"
-                fill="red"
+                fill="#899BBC"
                 fill-rule="nonzero"
                 id="Path"
               />
               <path
                 d="M3.375,14.625 C3.375,14.3143398 3.62683983,14.0625 3.9375,14.0625 L14.0625,14.0625 C14.3731602,14.0625 14.625,14.3143398 14.625,14.625 C14.625,14.9356602 14.3731602,15.1875 14.0625,15.1875 L3.9375,15.1875 C3.62683983,15.1875 3.375,14.9356602 3.375,14.625 Z"
-                fill="red"
+                fill="#899BBC"
                 fill-rule="nonzero"
                 id="Shape"
               />
@@ -58,7 +56,7 @@ exports[`Placeholder component should render PlaceholderIcon 1`] = `
                 height="16.7"
                 id="Rectangle"
                 rx="2"
-                stroke="red"
+                stroke="#899BBC"
                 stroke-width="1.3"
                 width="16.7"
                 x="0.65"
@@ -66,7 +64,7 @@ exports[`Placeholder component should render PlaceholderIcon 1`] = `
               />
               <line
                 id="Line-2"
-                stroke="red"
+                stroke="#899BBC"
                 stroke-linecap="square"
                 stroke-width="1.3"
                 x1="1"

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

@@ -4,7 +4,7 @@
 import React from 'react';
 import '@testing-library/jest-dom/extend-expect';
 import { MockedProvider } from '@apollo/client/testing';
-import { render } from '@testing-library/react';
+import { render, fireEvent, waitFor } from '@testing-library/react';
 import SearchContent from '../../../../../src/components/SearchContent';
 
 jest.mock('@apollo/client', () => ({
@@ -13,20 +13,45 @@ jest.mock('@apollo/client', () => ({
 }));
 
 jest.mock('next/router', () => ({
-  useRouter: jest.fn(() => ({ asPath: 'test-url' }))
+  useRouter: jest.fn(() => ({ asPath: 'test-url', events: { on: jest.fn(), off: jest.fn() } }))
 }));
 
-jest.mock('../../../../../src/components/SearchContent/SearchContent', () =>
-  jest.fn(() => <div>Mocked component</div>)
-);
+const SEARCH_INPUT_TEST_ID = 'search-content-input';
 
 describe('SearchContent', () => {
+  const entities = [];
+
   it('should match snapshot', async () => {
-    const { asFragment } = render(
+    const { asFragment, getByTestId, queryByTestId } = render(
+      <MockedProvider mocks={[]} addTypename={false}>
+        <SearchContent entities={entities} />
+      </MockedProvider>
+    );
+    expect(asFragment()).toMatchSnapshot();
+    const searchInput = getByTestId(SEARCH_INPUT_TEST_ID);
+    fireEvent.change(searchInput, { target: { value: 'search' } });
+    await waitFor(() => expect(queryByTestId('search-content-icon-close')).toBeTruthy());
+    const closeIcon = getByTestId('search-content-icon-close');
+    expect(closeIcon).toBeTruthy();
+    fireEvent.click(closeIcon);
+    expect(searchInput.value).toEqual('');
+    await waitFor(() => expect(queryByTestId('search-content-icon')).toBeTruthy());
+  });
+
+  it('should should be collapsed when collapsedSearch=true', async () => {
+    const { asFragment, getByTestId, queryByTestId } = render(
       <MockedProvider mocks={[]} addTypename={false}>
-        <SearchContent />
+        <SearchContent collapsedSearch entities={entities} />
       </MockedProvider>
     );
+    expect(queryByTestId(SEARCH_INPUT_TEST_ID)).toBeNull();
     expect(asFragment()).toMatchSnapshot();
+
+    const searchIcon = getByTestId('search-content-icon');
+    fireEvent.click(searchIcon);
+    await waitFor(() => expect(queryByTestId(SEARCH_INPUT_TEST_ID)).toBeTruthy());
+    const closeIcon = getByTestId('search-content-icon-close');
+    fireEvent.click(closeIcon);
+    await waitFor(() => expect(queryByTestId(SEARCH_INPUT_TEST_ID)).toBeNull());
   });
 });

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

@@ -2,8 +2,72 @@
 
 exports[`SearchContent should match snapshot 1`] = `
 <DocumentFragment>
-  <div>
-    Mocked component
+  <div
+    class="search-content"
+  >
+    <div
+      class="search-content--expanded__wrapper"
+    >
+      <label
+        class="search-content--expanded__label"
+      >
+        <span
+          class="search-content--expanded__icon_wrapper"
+        >
+          <svg
+            class="search-content--expanded__icon"
+            data-testid="search-content-icon"
+            viewBox="0 0 20 20"
+          >
+            <path
+              clip-rule="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"
+              fill-rule="evenodd"
+            />
+          </svg>
+        </span>
+        <input
+          class="search-content--expanded__input"
+          data-testid="search-content-input"
+          name="search"
+          placeholder=""
+          type="text"
+          value=""
+        />
+      </label>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`SearchContent should should be collapsed when collapsedSearch=true 1`] = `
+<DocumentFragment>
+  <div
+    class="search-content"
+  >
+    <div
+      class="search-content--collapse__wrapper"
+    >
+      <label
+        class="search-content--collapse__label"
+      >
+        <span
+          class="search-content--collapse__icon_wrapper"
+        >
+          <svg
+            class="search-content--expanded__icon"
+            data-testid="search-content-icon"
+            viewBox="0 0 20 20"
+          >
+            <path
+              clip-rule="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"
+              fill-rule="evenodd"
+            />
+          </svg>
+        </span>
+      </label>
+    </div>
   </div>
 </DocumentFragment>
 `;

package/tests/unit/src/utils/variant-handler.test.js

@@ -0,0 +1,41 @@
+/**
+ * @jest-environment jsdom
+ */
+import React from 'react';
+import '@testing-library/jest-dom/extend-expect';
+import { variantHandler } from '../../../../src/utils';
+
+describe('variantHandler function', () => {
+  it('should return an object with random id and three methods', () => {
+    expect(typeof variantHandler).toEqual('object');
+    expect(typeof variantHandler.add).toEqual('function');
+    expect(typeof variantHandler.get).toEqual('function');
+    expect(typeof variantHandler.getAll).toEqual('function');
+  });
+
+  it('should throw error if we try to add an object with no key', () => {
+    expect(() => variantHandler.add()).toThrow('Variant requires key and component');
+  });
+
+  it('should throw error if we try to add an object with no component', () => {
+    expect(() => variantHandler.add('EmptyVariant')).toThrow('Variant requires key and component');
+  });
+
+  it('should add variant', () => {
+    variantHandler.add('RandomVariant', () => <div />);
+    variantHandler.add('RandomVariant2', () => <div />);
+    const element = variantHandler.get('RandomVariant2');
+    expect(element).toBeDefined();
+  });
+
+  it('should return correct number of entries', () => {
+    const entries = variantHandler.getAll();
+    expect(entries.length).toEqual(2);
+  });
+
+  it('should throw error if we try to add an object that has already been added', () => {
+    expect(() => variantHandler.add('RandomVariant', () => <div />)).toThrow(
+      'Variant already exist'
+    );
+  });
+});