@blaze-cms/react-page-builder 0.141.0-alpha.0 → 0.141.0-alpha.2

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 };

package/tests/unit/src/variants/LongFormGallery/helpers/parseImageData.test.js

@@ -0,0 +1,53 @@
+import { parseImageData } from '../../../../../../src/variants/LongformGallery/helpers';
+
+describe('parseImageData', () => {
+  const mockImage = {
+    id: '1',
+    url: 'image.jpg',
+    data: {
+      caption: 'Image Caption'
+    }
+  };
+
+  it('parses image data with caption when shouldDisplayCaption is true', () => {
+    const parsedData = parseImageData(mockImage, 0, 2, true);
+
+    expect(parsedData).toEqual({
+      id: '1',
+      url: 'image.jpg',
+      caption: 'Image Caption',
+      priority: true,
+      altText: '',
+      credits: '',
+      hrefUrl: ''
+    });
+  });
+
+  it('parses image data without caption when shouldDisplayCaption is false', () => {
+    const parsedData = parseImageData(mockImage, 0, 2, false);
+
+    expect(parsedData).toEqual({
+      id: '1',
+      url: 'image.jpg',
+      caption: '',
+      priority: true,
+      altText: '',
+      credits: '',
+      hrefUrl: ''
+    });
+  });
+
+  it('parses image data with default values when data is undefined', () => {
+    const parsedData = parseImageData({ id: '1', url: 'image.jpg' }, 0, 2, true);
+
+    expect(parsedData).toEqual({
+      id: '1',
+      url: 'image.jpg',
+      caption: '',
+      priority: true,
+      altText: '',
+      credits: '',
+      hrefUrl: ''
+    });
+  });
+});

package/tests/unit/src/variants/LongFormGallery/helpers/separateImages.test.js

@@ -0,0 +1,52 @@
+import { separateImages } from '../../../../../../src/variants/LongformGallery/helpers';
+
+describe('separateImages', () => {
+  const mockImages = [
+    { id: '1', url: 'image1.jpg', data: { caption: 'Caption 1' } },
+    { id: '2', url: 'image2.jpg', data: { caption: 'Caption 2' } },
+    { id: '3', url: 'image3.jpg', data: { caption: 'Caption 3' } }
+  ];
+
+  it('returns empty arrays for undefined or empty images', () => {
+    const result = separateImages(undefined, 2);
+    expect(result).toEqual([]);
+
+    const resultEmptyArray = separateImages([], 2, true);
+    expect(resultEmptyArray).toEqual([]);
+  });
+
+  it('returns grouped images i narrays', () => {
+    const groupedImages = separateImages(mockImages, 2, true);
+
+    expect(groupedImages).toHaveLength(1);
+    expect(groupedImages[0]).toHaveLength(3);
+    expect(groupedImages[0][0]).toEqual({
+      id: '1',
+      url: 'image1.jpg',
+      caption: 'Caption 1',
+      priority: true,
+      altText: '',
+      credits: '',
+      hrefUrl: ''
+    });
+
+    expect(groupedImages[0][1]).toEqual({
+      id: '2',
+      url: 'image2.jpg',
+      caption: 'Caption 2',
+      priority: true,
+      altText: '',
+      credits: '',
+      hrefUrl: ''
+    });
+    expect(groupedImages[0][2]).toEqual({
+      id: '3',
+      url: 'image3.jpg',
+      caption: 'Caption 3',
+      priority: false,
+      altText: '',
+      credits: '',
+      hrefUrl: ''
+    });
+  });
+});

package/tests/unit/src/variants/LongFormGallery/helpers/shouldSkip.test.js

@@ -0,0 +1,23 @@
+import { shouldSkip } from '../../../../../../src/variants/LongformGallery/helpers';
+
+describe('shouldSkip', () => {
+  it('returns true when ids is undefined', () => {
+    const result = shouldSkip(undefined);
+    expect(result).toBe(true);
+  });
+
+  it('returns true when ids is an empty array', () => {
+    const result = shouldSkip([]);
+    expect(result).toBe(true);
+  });
+
+  it('returns false when ids is a non-empty array', () => {
+    const result = shouldSkip(['1', '2', '3']);
+    expect(result).toBe(false);
+  });
+
+  it('returns false when ids is a non-array value', () => {
+    const result = shouldSkip('not an array');
+    expect(result).toBe(false);
+  });
+});

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

@@ -0,0 +1,36 @@
+/**
+ * @jest-environment jsdom
+ */
+import React from 'react';
+import { renderHook } from '@testing-library/react-hooks';
+import { MockedProvider } from '@apollo/client/testing';
+import useLongformGallery from '../../../../../src/variants/LongformGallery/useLongformGallery';
+import { IMAGE_MOCKS } from './constants';
+
+describe('useLongformGallery', () => {
+  it('returns data, loading, error, mainImages, secondaryImages, and handleImageOnClick', async () => {
+    const { result, waitForNextUpdate } = renderHook(
+      () =>
+        useLongformGallery({
+          imageIds: ['1', '2', '3'],
+          enableLightbox: true,
+          toggleModal: jest.fn(),
+          handleSelectedImage: jest.fn()
+        }),
+      {
+        wrapper: ({ children }) => <MockedProvider mocks={IMAGE_MOCKS}>{children}</MockedProvider>
+      }
+    );
+
+    expect(result.current.data).toBeUndefined();
+    expect(result.current.loading).toBe(true);
+    expect(result.current.error).toBeUndefined();
+    expect(result.current.groupedImages).toEqual([]);
+
+    await waitForNextUpdate();
+
+    expect(result.current.loading).toBe(false);
+    expect(result.current.error).toBeUndefined();
+    expect(result.current.groupedImages).toHaveLength(1);
+  });
+});

package/tests/unit/src/variants/ThumbnailCarousel/ThumbnailCarousel.test.js

@@ -0,0 +1,29 @@
+/**
+ * @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 ThumbnailCarousel from '../../../../../src/variants/ThumbnailCarousel/ThumbnailCarousel';
+import IMAGE_MOCKS from './mocks';
+
+const mockedProps = {
+  imageIds: ['1', '2', '3'],
+  priorityLimit: 0
+};
+
+describe('ThumbnailCarousel component', () => {
+  it('renders ThumbnailCarousel without error', async () => {
+    const { asFragment } = render(
+      <MockedProvider mocks={IMAGE_MOCKS}>
+        <ThumbnailCarousel {...mockedProps} />
+      </MockedProvider>
+    );
+    await waitFor(() => {
+      expect(screen.getAllByTestId('thumbnail-image')[0]).toBeInTheDocument();
+    });
+    expect(asFragment()).toMatchSnapshot();
+    expect(screen.getByTestId('thumbnail-carousel')).toBeInTheDocument();
+  });
+});

package/tests/unit/src/variants/ThumbnailCarousel/ThumbnailImage.test.js

@@ -0,0 +1,45 @@
+/**
+ * @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 ThumbnailImage from '../../../../../src/variants/ThumbnailCarousel/ThumbnailImage';
+import IMAGE_MOCKS from './mocks';
+
+describe('ThumbnailImage component', () => {
+  const mockedProps = {
+    imageId: '1',
+    enableLightbox: false,
+    toggleModal: () => {},
+    handleSelectedImage: () => {},
+    priority: 0,
+    selectedImageId: '1',
+    handleOnClick: () => {}
+  };
+
+  it('renders ThumbnailImage without error', async () => {
+    const { asFragment } = render(
+      <MockedProvider mocks={IMAGE_MOCKS}>
+        <ThumbnailImage {...mockedProps} />
+      </MockedProvider>
+    );
+    await waitFor(() => {
+      expect(screen.getByTestId('thumbnail-image')).toBeInTheDocument();
+    });
+    expect(asFragment()).toMatchSnapshot();
+  });
+
+  it('should render error message if query fails', async () => {
+    const { asFragment } = render(
+      <MockedProvider mocks={IMAGE_MOCKS}>
+        <ThumbnailImage {...mockedProps} imageId="6" />
+      </MockedProvider>
+    );
+    await waitFor(() => {
+      expect(screen.getByText('Oops something went wrong')).toBeInTheDocument();
+    });
+    expect(asFragment()).toMatchSnapshot();
+  });
+});

package/tests/unit/src/variants/ThumbnailCarousel/__snapshots__/ThumbnailCarousel.test.js.snap

@@ -0,0 +1,71 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ThumbnailCarousel component renders ThumbnailCarousel without error 1`] = `
+<DocumentFragment>
+  <div
+    class="thumbnail-carousel"
+    data-testid="thumbnail-carousel"
+  >
+    <div
+      class="thumbnail-carousel__main_image_container"
+    >
+      <div
+        class="thumbnail-carousel__main_image_container__button"
+        id="previous-button"
+        role="button"
+      >
+        <div
+          class="arrow arrow--left"
+        />
+      </div>
+      <div
+        class="thumbnail-carousel-image"
+        data-testid="thumbnail-image"
+        role="button"
+      >
+        <span>
+          <img
+            alt=""
+            role="button"
+            src="image1.jpg"
+          />
+        </span>
+      </div>
+      <div
+        class="thumbnail-carousel__main_image_container__button next"
+        id="next-button"
+        role="button"
+      >
+        <div
+          class="arrow arrow--right"
+        />
+      </div>
+    </div>
+    <div
+      class="thumbnail-carousel__list"
+    >
+      <div
+        class="thumbnail-carousel-image thumbnail-carousel-image--selected"
+        data-testid="thumbnail-image"
+        role="button"
+      >
+        <span />
+      </div>
+      <div
+        class="thumbnail-carousel-image"
+        data-testid="thumbnail-image"
+        role="button"
+      >
+        <span />
+      </div>
+      <div
+        class="thumbnail-carousel-image"
+        data-testid="thumbnail-image"
+        role="button"
+      >
+        <span />
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;

package/tests/unit/src/variants/ThumbnailCarousel/__snapshots__/ThumbnailImage.test.js.snap

@@ -0,0 +1,19 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ThumbnailImage component renders ThumbnailImage without error 1`] = `
+<DocumentFragment>
+  <div
+    class="thumbnail-carousel-image thumbnail-carousel-image--selected"
+    data-testid="thumbnail-image"
+    role="button"
+  >
+    <span />
+  </div>
+</DocumentFragment>
+`;
+
+exports[`ThumbnailImage component should render error message if query fails 1`] = `
+<DocumentFragment>
+  Oops something went wrong
+</DocumentFragment>
+`;

package/tests/unit/src/variants/ThumbnailCarousel/mocks.js

@@ -0,0 +1,64 @@
+import { getFileById } from '../../../../../src/application/query';
+
+const IMAGE_MOCKS = [
+  {
+    request: {
+      query: getFileById,
+      variables: { id: '1' }
+    },
+    result: {
+      data: {
+        getFile: { id: '1', url: 'image1.jpg', caption: 'Caption 1', data: {} }
+      }
+    }
+  },
+  {
+    request: {
+      query: getFileById,
+      variables: { id: '2' }
+    },
+    result: {
+      data: {
+        getFile: { id: '2', url: 'image2.jpg', caption: 'Caption 2', data: {} }
+      }
+    }
+  },
+  {
+    request: {
+      query: getFileById,
+      variables: { id: '3' }
+    },
+    result: {
+      data: {
+        getFile: { id: '3', url: 'image3.jpg', caption: 'Caption 3', data: {} }
+      }
+    }
+  },
+  {
+    request: {
+      query: getFileById,
+      variables: { id: '6' }
+    },
+    error: {
+      message: 'Oops something went wrong'
+    }
+  }
+  //   {
+  //     request: {
+  //       query: getFiles,
+  //       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 default IMAGE_MOCKS;