@blaze-cms/react-page-builder 0.146.0-rc-eagle.0 → 0.146.0-rc-eagle-3.0

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

@@ -1,46 +0,0 @@
-/**
- * @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 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/Infographic/Infographic.test.js

@@ -1,30 +0,0 @@
-/*
- * @jest-environment jsdom
- */
-
-import React from 'react';
-import { render } from '@testing-library/react';
-import '@testing-library/jest-dom/extend-expect';
-import Infographic from '../../../../../src/variants/Infographic/Infographic';
-
-describe('Infographic Component', () => {
-  it('renders children correctly', () => {
-    const { getByText } = render(
-      <Infographic>
-        <span>Test Child</span>
-      </Infographic>
-    );
-
-    expect(getByText('Test Child')).toBeInTheDocument();
-  });
-
-  it('applies passed props to the container', () => {
-    const { container } = render(
-      <Infographic data-testid="infographic" className="custom-class" />
-    );
-
-    const infographicElement = container.firstChild;
-    expect(infographicElement).toHaveClass('custom-class');
-    expect(infographicElement).toHaveAttribute('data-testid', 'infographic');
-  });
-});

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

@@ -1,121 +0,0 @@
-/**
- * @jest-environment jsdom
- */
-import React from 'react';
-import { render, screen, fireEvent, waitFor } from '@testing-library/react';
-import '@testing-library/jest-dom/extend-expect';
-import dayjs from 'dayjs';
-import LiveBlogList from '../../../../../src/variants/LiveBlogList/LiveBlogList';
-import { LONG_TEXT, SHORT_TEXT } from './constants';
-
-describe('LiveBlogList', () => {
-  afterEach(() => {
-    jest.restoreAllMocks();
-  });
-
-  it('short content: uses date and hides toggle button', async () => {
-    jest.spyOn(HTMLElement.prototype, 'scrollHeight', 'get').mockReturnValue(200);
-    const dateProps = { date: '2025-04-15T11:26:03.863Z' };
-
-    const { container } = render(
-      <LiveBlogList {...dateProps}>
-        <h2>Short item</h2>
-        <p>{SHORT_TEXT}</p>
-      </LiveBlogList>
-    );
-
-    const contentElement = container.querySelector('.live-blog-content');
-    expect(contentElement).toBeInTheDocument();
-    expect(container.querySelector('.live-blog-toggle')).not.toBeInTheDocument();
-    const displayedDate = container.querySelector('.live-blog-date');
-
-    expect(displayedDate).toBeInTheDocument();
-    expect(displayedDate.textContent).not.toBe('');
-  });
-
-  it('long content: shows toggle button and lets you expand and collapse', async () => {
-    jest.spyOn(HTMLElement.prototype, 'scrollHeight', 'get').mockReturnValue(500);
-    const dateProps = { date: '2025-04-15T15:51:59.303Z' };
-
-    const { container } = render(
-      <LiveBlogList {...dateProps}>
-        <h3>The day so far</h3>
-        <div>{LONG_TEXT}</div>
-      </LiveBlogList>
-    );
-
-    const toggleButton = await screen.findByRole('button', { name: /show more/i });
-    expect(toggleButton).toBeInTheDocument();
-    const contentElement = container.querySelector('.live-blog-content');
-    expect(contentElement).toHaveClass('collapsed');
-
-    fireEvent.click(toggleButton);
-    await waitFor(() => {
-      expect(contentElement).not.toHaveClass('collapsed');
-      expect(toggleButton.textContent).toMatch(/show less/i);
-    });
-
-    fireEvent.click(toggleButton);
-    await waitFor(() => {
-      expect(contentElement).toHaveClass('collapsed');
-      expect(toggleButton.textContent).toMatch(/show more/i);
-    });
-
-    const displayedDate = container.querySelector('.live-blog-date');
-    expect(displayedDate).toBeInTheDocument();
-    expect(displayedDate.textContent).not.toBe('');
-  });
-
-  it('if date less than 1 day ago, shows relative time', () => {
-    const recentDate = '2025-04-15T15:52:00.000Z';
-    jest.useFakeTimers('modern');
-    jest.setSystemTime(new Date('2025-04-16T10:00:00.000Z'));
-
-    const { container } = render(
-      <LiveBlogList date={recentDate}>
-        <p>Less than 1 day old content</p>
-      </LiveBlogList>
-    );
-
-    const dateElement = container.querySelector('.live-blog-date');
-    expect(dateElement).toBeInTheDocument();
-    expect(dateElement.textContent).toMatch(/ago/i);
-    jest.useRealTimers();
-  });
-
-  it('if older than a day but within a year, shows date in DD MMM format', () => {
-    const fewDaysOld = '2025-04-09T00:00:00.000Z';
-    jest.useFakeTimers('modern');
-    jest.setSystemTime(new Date('2025-04-16T10:00:00.000Z'));
-
-    const { container } = render(
-      <LiveBlogList date={fewDaysOld}>
-        <p>Older than 1 day but less than a year</p>
-      </LiveBlogList>
-    );
-
-    const dateElement = container.querySelector('.live-blog-date--date');
-    expect(dateElement).toBeInTheDocument();
-    const expectedDate = dayjs(fewDaysOld).format('DD MMM');
-    expect(dateElement.textContent).toBe(expectedDate);
-    jest.useRealTimers();
-  });
-
-  it('if older than a year, shows date in DD MMM YYYY format', () => {
-    const oldDate = '2023-03-15T00:00:00.000Z';
-    jest.useFakeTimers('modern');
-    jest.setSystemTime(new Date('2025-04-16T10:00:00.000Z'));
-
-    const { container } = render(
-      <LiveBlogList date={oldDate}>
-        <p>More than 1 year old content</p>
-      </LiveBlogList>
-    );
-
-    const dateElement = container.querySelector('.live-blog-date');
-    expect(dateElement).toBeInTheDocument();
-    const expectedDate = dayjs(oldDate).format('DD MMM YYYY');
-    expect(dateElement.textContent).toBe(expectedDate);
-    jest.useRealTimers();
-  });
-});

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

@@ -1,10 +0,0 @@
-const LONG_TEXT = `
-    In case you’re just joining us, here’s a recap of the latest news and global market moves since the European market open. (You can see the earlier round-up here)
-    Europe’s main indexes started on a surprisingly positive note at the start of trading, as markets seemed to recover some ground from the tariff sell-off, even as it became clear that Trump had applied 145% tariffs on Chinese goods
-    Mining giants, supported in part by growing appetite for safe haven assets like gold, were leading the FTSE 100 – including Fresnillo, Glencore, and Anglo American
-    There was also some optimism emanating from the UK GDP figures, which showed the economy expanding by more than expected in February at 0.5%
-`;
-
-const SHORT_TEXT = `Winners of the 2022 World Superyacht Awards have been revealed. From the newly crowned Motor Yacht of the Year to the prestigious Voyagers Award, find out which yachts...`;
-
-export { LONG_TEXT, SHORT_TEXT };

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

@@ -1,42 +0,0 @@
-/**
- * @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

@@ -1,44 +0,0 @@
-/**
- * @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

@@ -1,99 +0,0 @@
-// 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

@@ -1,51 +0,0 @@
-// 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

@@ -1,37 +0,0 @@
-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

@@ -1,53 +0,0 @@
-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

@@ -1,52 +0,0 @@
-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

@@ -1,23 +0,0 @@
-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

@@ -1,36 +0,0 @@
-/**
- * @jest-environment jsdom
- */
-import React from 'react';
-import { renderHook } from '@testing-library/react';
-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);
-  });
-});