@blaze-cms/react-page-builder 0.140.3 → 0.141.0-alpha.1

package/tests/unit/src/components/Video/providers/__snapshots__/Default.test.js.snap

@@ -3,159 +3,162 @@
 exports[`Default provider component should render without throwing error and match snapshot 1`] = `
 <DocumentFragment>
   <div
-    class="video-react-controls-enabled video-react-paused video-react-fluid video-react-user-active video-react-workinghover video-react mocked-modifier"
-    role="region"
-    style="padding-top: 56.25%;"
-    tabindex="-1"
+    class="video__wrapper"
   >
-    <video
-      class="video-react-video"
-      preload="none"
-      tabindex="-1"
-    >
-      <source
-        src="http://media.w3.org/2010/05/bunny/movie.mp4"
-        type="video/mp4"
-      />
-    </video>
     <div
-      class="video-react-loading-spinner"
-    />
-    <button
-      aria-live="polite"
-      class="video-react-big-play-button video-react-big-play-button-left big-play-button-hide"
-      tabindex="0"
-      type="button"
+      class="video-react-controls-enabled video-react-paused video-react-fluid video-react-user-active video-react-workinghover video-react mocked-modifier"
+      role="region"
+      style="padding-top: 56.25%;"
+      tabindex="-1"
     >
-      <span
-        class="video-react-control-text"
+      <video
+        class="video-react-video"
+        preload="none"
+        tabindex="-1"
       >
-        Play Video
-      </span>
-    </button>
-    <div
-      class="video-react-control-bar video-react-control-bar-auto-hide"
-    >
+        <source
+          src="http://media.w3.org/2010/05/bunny/movie.mp4"
+        />
+      </video>
+      <div
+        class="video-react-loading-spinner"
+      />
       <button
-        class="video-react-play-control video-react-control video-react-button video-react-paused"
+        aria-live="polite"
+        class="video-react-big-play-button video-react-big-play-button-left big-play-button-hide"
         tabindex="0"
         type="button"
       >
         <span
           class="video-react-control-text"
         >
-          Play
+          Play Video
         </span>
       </button>
       <div
-        class="video-react-volume-menu-button-horizontal video-react-vol-3 video-react-volume-menu-button video-react-menu-button-inline video-react-control video-react-button video-react-menu-button"
-        role="button"
-        tabindex="0"
+        class="video-react-control-bar video-react-control-bar-auto-hide"
       >
+        <button
+          class="video-react-play-control video-react-control video-react-button video-react-paused"
+          tabindex="0"
+          type="button"
+        >
+          <span
+            class="video-react-control-text"
+          >
+            Play
+          </span>
+        </button>
         <div
-          class="video-react-menu"
+          class="video-react-volume-menu-button-horizontal video-react-vol-3 video-react-volume-menu-button video-react-menu-button-inline video-react-control video-react-button video-react-menu-button"
+          role="button"
+          tabindex="0"
         >
           <div
-            class="video-react-menu-content"
+            class="video-react-menu"
           >
             <div
-              aria-label="volume level"
-              aria-valuemax="100"
-              aria-valuemin="0"
-              aria-valuenow="100.00"
-              aria-valuetext="100.00%"
-              class="video-react-volume-bar video-react-slider-bar video-react-slider-horizontal video-react-slider"
-              role="slider"
-              tabindex="0"
+              class="video-react-menu-content"
             >
               <div
-                class="video-react-volume-level"
-                style="width: 100.00%;"
+                aria-label="volume level"
+                aria-valuemax="100"
+                aria-valuemin="0"
+                aria-valuenow="100.00"
+                aria-valuetext="100.00%"
+                class="video-react-volume-bar video-react-slider-bar video-react-slider-horizontal video-react-slider"
+                role="slider"
+                tabindex="0"
               >
-                <span
-                  class="video-react-control-text"
-                />
+                <div
+                  class="video-react-volume-level"
+                  style="width: 100.00%;"
+                >
+                  <span
+                    class="video-react-control-text"
+                  />
+                </div>
               </div>
             </div>
           </div>
         </div>
-      </div>
-      <div
-        class="video-react-current-time video-react-time-control video-react-control"
-      >
         <div
-          aria-live="off"
-          class="video-react-current-time-display"
+          class="video-react-current-time video-react-time-control video-react-control"
         >
-          <span
-            class="video-react-control-text"
+          <div
+            aria-live="off"
+            class="video-react-current-time-display"
           >
-            Current Time 
-          </span>
-          0:00
-        </div>
-      </div>
-      <div
-        class="video-react-time-control video-react-time-divider"
-        dir="ltr"
-      >
-        <div>
-          <span>
-            /
-          </span>
+            <span
+              class="video-react-control-text"
+            >
+              Current Time 
+            </span>
+            0:00
+          </div>
         </div>
-      </div>
-      <div
-        class="video-react-duration video-react-time-control video-react-control"
-      >
         <div
-          aria-live="off"
-          class="video-react-duration-display"
+          class="video-react-time-control video-react-time-divider"
+          dir="ltr"
         >
-          <span
-            class="video-react-control-text"
-          >
-            Duration Time 
-          </span>
-          0:00
+          <div>
+            <span>
+              /
+            </span>
+          </div>
         </div>
-      </div>
-      <div
-        class="video-react-progress-control video-react-control"
-      >
         <div
-          aria-label="video progress bar"
-          aria-valuemax="100"
-          aria-valuemin="0"
-          aria-valuenow="NaN"
-          aria-valuetext="0:00"
-          class="video-react-progress-holder video-react-slider-horizontal video-react-slider"
-          role="slider"
-          tabindex="0"
+          class="video-react-duration video-react-time-control video-react-control"
         >
           <div
-            class="video-react-play-progress video-react-slider-bar"
-            data-current-time="0:00"
+            aria-live="off"
+            class="video-react-duration-display"
           >
             <span
               class="video-react-control-text"
             >
-              Progress: NaN%
+              Duration Time 
             </span>
+            0:00
           </div>
         </div>
-      </div>
-      <button
-        class="video-react-icon-fullscreen video-react-fullscreen-control video-react-control video-react-button video-react-icon"
-        tabindex="0"
-        type="button"
-      >
-        <span
-          class="video-react-control-text"
+        <div
+          class="video-react-progress-control video-react-control"
         >
-          Non-Fullscreen
-        </span>
-      </button>
+          <div
+            aria-label="video progress bar"
+            aria-valuemax="100"
+            aria-valuemin="0"
+            aria-valuenow="NaN"
+            aria-valuetext="0:00"
+            class="video-react-progress-holder video-react-slider-horizontal video-react-slider"
+            role="slider"
+            tabindex="0"
+          >
+            <div
+              class="video-react-play-progress video-react-slider-bar"
+              data-current-time="0:00"
+            >
+              <span
+                class="video-react-control-text"
+              >
+                Progress: NaN%
+              </span>
+            </div>
+          </div>
+        </div>
+        <button
+          class="video-react-icon-fullscreen video-react-fullscreen-control video-react-control video-react-button video-react-icon"
+          tabindex="0"
+          type="button"
+        >
+          <span
+            class="video-react-control-text"
+          >
+            Non-Fullscreen
+          </span>
+        </button>
+      </div>
     </div>
   </div>
 </DocumentFragment>

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

@@ -3,9 +3,9 @@
 exports[`BlazeLink component should render without throwing an error and match snapshot 1`] = `
 <DocumentFragment>
   <a
+    aria-label="test-name"
     class="test-class"
     href="/test-href"
-    name="test-name"
   >
     <div>
       child div

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

@@ -3,6 +3,7 @@
 exports[`Button component should render without throwing an error and match snapshot 1`] = `
 <DocumentFragment>
   <a
+    aria-label="test"
     class="icon-button"
     href="http://google.com"
     rel="noopener nofollow"

package/tests/unit/src/helpers/__snapshots__/parse-textBlock.test.js.snap

@@ -5,6 +5,7 @@ exports[`Parse textBlock it should match snapshot 1`] = `
   <p>
     lorem ipsum 
     <a
+      aria-label="link"
       href="/"
     >
       link

package/tests/unit/src/helpers/parse-textBlock.test.js

@@ -24,6 +24,8 @@ describe('Parse textBlock', () => {
 
   test('it should include a link tag', () => {
     const { container } = render(expectedMarkup);
-    expect(container).toContainHTML("<a href='/'>link</a>");
+    expect(container).toContainHTML(
+      '<div><p>lorem ipsum <a aria-label="link" href="/">link</a></p></div>'
+    );
   });
 });

package/tests/unit/src/hooks/use-app-sync-evet-hook.test.js

@@ -0,0 +1,50 @@
+import React from 'react';
+import { renderHook } from '@testing-library/react-hooks';
+import { AppContext } from '@blaze-cms/nextjs-components';
+import { useAppSyncEventHook } from '../../../../src/hooks';
+
+describe('useAppSyncEventHook', () => {
+  test('should emit event with correct event name and data', () => {
+    const blazeAppMock = {
+      events: {
+        emit: jest.fn()
+      }
+    };
+
+    const eventName = 'testEvent';
+    const data = { key: 'value' };
+    const props = { someProp: 'value' };
+
+    const wrapper = ({ children }) => (
+      <AppContext.Provider value={{ blazeApp: blazeAppMock }}>{children}</AppContext.Provider>
+    );
+
+    const { result } = renderHook(() => useAppSyncEventHook({ eventName, data, props }), {
+      wrapper
+    });
+
+    expect(blazeAppMock.events.emit).toHaveBeenCalledWith(`plugin:page-builder:${eventName}:sync`, {
+      data,
+      props
+    });
+
+    expect(result.current.data).toEqual(data);
+  });
+
+  test('should return correct data', () => {
+    const blazeAppMock = {
+      events: {
+        emit: jest.fn()
+      }
+    };
+
+    const data = { key: 'value' };
+
+    const wrapper = ({ children }) => (
+      <AppContext.Provider value={{ blazeApp: blazeAppMock }}>{children}</AppContext.Provider>
+    );
+    const { result } = renderHook(() => useAppSyncEventHook({ data }), { wrapper });
+
+    expect(result.current.data).toEqual(data);
+  });
+});

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

@@ -33,9 +33,14 @@ describe('variantHandler function', () => {
     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'
-    );
+  it('should call console.warn error if we try to add an object that has already been added', () => {
+    const { warn } = console;
+    // eslint-disable-next-line no-console
+    console.warn = jest.fn();
+    variantHandler.add('RandomVariant', () => <div />);
+    // eslint-disable-next-line no-console
+    expect(console.warn).toHaveBeenCalledWith('Variant already exists: RandomVariant');
+    // eslint-disable-next-line no-console
+    console.warn = warn;
   });
 });

package/tests/unit/src/variants/LongFormGallery/LongformGallery.test.js

@@ -0,0 +1,42 @@
+/**
+ * @jest-environment jsdom
+ */
+import React from 'react';
+import '@testing-library/jest-dom/extend-expect';
+import { render, screen, waitFor } from '@testing-library/react';
+import { MockedProvider } from '@apollo/client/testing';
+import LongformGallery from '../../../../../src/variants/LongformGallery/LongformGallery';
+import { IMAGE_MOCKS } from './constants';
+
+const mockedProps = {
+  imageIds: ['1', '2', '3'],
+  priorityLimit: [0]
+};
+const longFormTestId = 'longform-gallery';
+
+describe('LongformGallery', () => {
+  it('renders LongformGallery without error', async () => {
+    const { asFragment } = render(
+      <MockedProvider mocks={IMAGE_MOCKS}>
+        <LongformGallery {...mockedProps} />
+      </MockedProvider>
+    );
+    await waitFor(() => {
+      expect(screen.getByTestId(longFormTestId)).toBeInTheDocument();
+    });
+    expect(asFragment()).toMatchSnapshot();
+    expect(screen.getByTestId(longFormTestId)).toBeInTheDocument();
+  });
+
+  it('renders LongformGallery with two-group modifier if images length is 4', async () => {
+    const { asFragment } = render(
+      <MockedProvider mocks={IMAGE_MOCKS}>
+        <LongformGallery {...mockedProps} imageIds={['1', '2', '3', '4']} />
+      </MockedProvider>
+    );
+    await waitFor(() => {
+      expect(screen.getByTestId(longFormTestId)).toBeInTheDocument();
+    });
+    expect(asFragment()).toMatchSnapshot();
+  });
+});

package/tests/unit/src/variants/LongFormGallery/LongformGalleryImage.test.js

@@ -0,0 +1,44 @@
+/**
+ * @jest-environment jsdom
+ */
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
+import LongformGalleryImage from '../../../../../src/variants/LongformGallery/LongformGalleryImage';
+
+const mockedProps = {
+  url: 'https://mock-url/image-id-1.jpg',
+  id: 'image-id-1',
+  caption: '',
+  altText: '',
+  priority: true,
+  className: 'longform-gallery__images__image main-image',
+  handleImageOnClick: jest.fn()
+};
+
+describe('LongformGalleryImage component', () => {
+  it('should be a function', () => {
+    expect(typeof LongformGalleryImage).toEqual('function');
+  });
+
+  it('renders LongformGalleryImage component', () => {
+    const { asFragment } = render(<LongformGalleryImage {...mockedProps} />);
+    expect(asFragment()).toMatchSnapshot();
+    expect(screen.getByTestId('longform-gallery__images__image__container')).toBeInTheDocument();
+  });
+
+  it('renders LongformGalleryImage component', () => {
+    const { asFragment } = render(
+      <LongformGalleryImage {...mockedProps} caption="some image caption" />
+    );
+    expect(asFragment()).toMatchSnapshot();
+    expect(screen.getByTestId('longform-gallery__images__image__details')).toBeInTheDocument();
+  });
+
+  it('calls handleImageOnClick when image is clicked', () => {
+    render(<LongformGalleryImage {...mockedProps} />);
+    const image = screen.getByTestId('longform-gallery__images__image__container');
+    fireEvent.click(image);
+    expect(mockedProps.handleImageOnClick).toHaveBeenCalledWith(mockedProps.id);
+  });
+});

package/tests/unit/src/variants/LongFormGallery/__snapshots__/LongformGallery.test.js.snap

@@ -0,0 +1,99 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`LongformGallery renders LongformGallery with two-group modifier if images length is 4 1`] = `
+<DocumentFragment>
+  <div
+    class="longform-gallery"
+    data-testid="longform-gallery"
+  >
+    <div
+      class="longform-gallery__images"
+      data-testid="grouped-images"
+    >
+      <div
+        class="longform-gallery__images__image main-image"
+      >
+        <div
+          class="longform-gallery__images__image__container"
+          data-testid="longform-gallery__images__image__container"
+          role="button"
+        />
+      </div>
+      <div
+        class="longform-gallery__images__image main-image"
+      >
+        <div
+          class="longform-gallery__images__image__container"
+          data-testid="longform-gallery__images__image__container"
+          role="button"
+        />
+      </div>
+    </div>
+    <div
+      class="longform-gallery__images"
+      data-testid="grouped-images"
+    >
+      <div
+        class="longform-gallery__images__image main-image"
+      >
+        <div
+          class="longform-gallery__images__image__container"
+          data-testid="longform-gallery__images__image__container"
+          role="button"
+        />
+      </div>
+      <div
+        class="longform-gallery__images__image main-image"
+      >
+        <div
+          class="longform-gallery__images__image__container"
+          data-testid="longform-gallery__images__image__container"
+          role="button"
+        />
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`LongformGallery renders LongformGallery without error 1`] = `
+<DocumentFragment>
+  <div
+    class="longform-gallery"
+    data-testid="longform-gallery"
+  >
+    <div
+      class="longform-gallery__images"
+      data-testid="grouped-images"
+    >
+      <div
+        class="longform-gallery__images__image secondary-image"
+      >
+        <div
+          class="longform-gallery__images__image__container"
+          data-testid="longform-gallery__images__image__container"
+          role="button"
+        />
+      </div>
+      <div
+        class="longform-gallery__images__image secondary-image"
+      >
+        <div
+          class="longform-gallery__images__image__container"
+          data-testid="longform-gallery__images__image__container"
+          role="button"
+        />
+      </div>
+      <div
+        class="longform-gallery__images__image secondary-image"
+      >
+        <div
+          class="longform-gallery__images__image__container"
+          data-testid="longform-gallery__images__image__container"
+          role="button"
+        />
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;

package/tests/unit/src/variants/LongFormGallery/__snapshots__/LongformGalleryImage.test.js.snap

@@ -0,0 +1,51 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`LongformGalleryImage component renders LongformGalleryImage component 1`] = `
+<DocumentFragment>
+  <div
+    class="longform-gallery__images__image main-image"
+  >
+    <div
+      class="longform-gallery__images__image__container"
+      data-testid="longform-gallery__images__image__container"
+      role="button"
+    >
+      <img
+        alt=""
+        role="button"
+        src="https://mock-url/image-id-1.jpg"
+      />
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`LongformGalleryImage component renders LongformGalleryImage component 2`] = `
+<DocumentFragment>
+  <div
+    class="longform-gallery__images__image main-image"
+  >
+    <div
+      class="longform-gallery__images__image__container"
+      data-testid="longform-gallery__images__image__container"
+      role="button"
+    >
+      <img
+        alt=""
+        role="button"
+        src="https://mock-url/image-id-1.jpg"
+      />
+    </div>
+    <div
+      class="longform-gallery__images__image__details"
+      data-testid="longform-gallery__images__image__details"
+    >
+      <div
+        class="longform-gallery__images__image__details__caption"
+      >
+        some image caption
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;

package/tests/unit/src/variants/LongFormGallery/constants.js

@@ -0,0 +1,37 @@
+import { GET_IMAGES_QUERY } from '../../../../../src/variants/LongformGallery/constants';
+
+const IMAGE_MOCKS = [
+  {
+    request: {
+      query: GET_IMAGES_QUERY,
+      variables: { where: { id: { _in: ['1', '2', '3'] } } }
+    },
+    result: {
+      data: {
+        getImages: [
+          { id: '1', url: 'image1.jpg', caption: 'Caption 1', data: {} },
+          { id: '2', url: 'image2.jpg', caption: 'Caption 2', data: {} },
+          { id: '3', url: 'image3.jpg', caption: 'Caption 3', data: {} }
+        ]
+      }
+    }
+  },
+  {
+    request: {
+      query: GET_IMAGES_QUERY,
+      variables: { where: { id: { _in: ['1', '2', '3', '4'] } } }
+    },
+    result: {
+      data: {
+        getImages: [
+          { id: '1', url: 'image1.jpg', caption: 'Caption 1', data: {} },
+          { id: '2', url: 'image2.jpg', caption: 'Caption 2', data: {} },
+          { id: '3', url: 'image3.jpg', caption: 'Caption 3', data: {} },
+          { id: '4', url: 'image4.jpg', caption: 'Caption 4', data: {} }
+        ]
+      }
+    }
+  }
+];
+
+export { IMAGE_MOCKS };