@blaze-cms/react-page-builder 0.146.0-translations.8 → 0.147.0-rc-eagle.2

package/tests/unit/src/hooks/use-get-single-entity-schema.test.js

@@ -1,78 +0,0 @@
-/**
- * @jest-environment jsdom
- */
-import React from 'react';
-import { renderHook, act } from '@testing-library/react-hooks';
-import { MockedProvider } from '@apollo/client/testing';
-import { useGetSingleEntitySchema } from '../../../../src/hooks';
-import { getSingleEntitySchema } from '../../../../src/application/query';
-
-const mockQueryResults = {
-  id: 'page',
-  identifier: 'page',
-  properties: {},
-  dynamicProperties: {},
-  actions: {},
-  interfaces: {},
-  relations: {},
-  __typename: 'DataEntitySchemaDefinition'
-};
-
-const getSingleEntitySchemaMock = {
-  request: {
-    query: getSingleEntitySchema,
-    variables: {
-      id: 'page'
-    }
-  },
-  result: {
-    data: {
-      getEntitySchema: {
-        id: 'page',
-        identifier: 'page',
-        properties: {},
-        dynamicProperties: {},
-        actions: {},
-        interfaces: {},
-        relations: {},
-        __typename: 'DataEntitySchemaDefinition'
-      }
-    }
-  }
-};
-
-const wrapper = ({ children }) => (
-  <MockedProvider mocks={[getSingleEntitySchemaMock]}>{children}</MockedProvider>
-);
-
-describe('useGetSingleEntitySchema hook', () => {
-  it('should return a single schema object', async () => {
-    const { result, waitForNextUpdate } = renderHook(() => useGetSingleEntitySchema('page'), {
-      wrapper
-    });
-
-    await act(() => waitForNextUpdate());
-
-    expect(result.current.loading).toEqual(false);
-    expect(result.current).toEqual({
-      data: {
-        getEntitySchema: mockQueryResults
-      },
-      error: undefined,
-      loading: false
-    });
-  });
-
-  it('should skip the query if skip is true', async () => {
-    const { result } = renderHook(() => useGetSingleEntitySchema('page', true), {
-      wrapper
-    });
-
-    expect(result.current.loading).toEqual(false);
-    expect(result.current).toEqual({
-      data: undefined,
-      error: undefined,
-      loading: false
-    });
-  });
-});

package/tests/unit/src/hooks/use-page-builder.test.js

@@ -1,48 +0,0 @@
-/**
- * @jest-environment jsdom
- */
-import React from 'react';
-import '@testing-library/jest-dom/extend-expect';
-import PropTypes from 'prop-types';
-import { shallow } from 'enzyme';
-import { usePageBuilder } from '../../../../src/hooks';
-import { PAGE_BUILDER_MOCK } from '../../../helpers/mocks';
-
-const Mock = ({ data = null }) => {
-  const child = usePageBuilder(data);
-
-  return <div>{child}</div>;
-};
-
-Mock.propTypes = {
-  data: PropTypes.array
-};
-
-Mock.defaultProps = {
-  data: null
-};
-
-describe('Build Page hook', () => {
-  const defaultPage = shallow(<Mock data={PAGE_BUILDER_MOCK} />);
-
-  it('should be defined', () => {
-    expect(usePageBuilder).toBeDefined();
-  });
-
-  describe('should always return an Array', () => {
-    const isArray = data => Array.isArray(data);
-
-    it('should return an Array with data', () => {
-      const hasChild = defaultPage.props().children;
-
-      expect(isArray(hasChild)).toBeTruthy();
-    });
-
-    it('should return Array with empty data', () => {
-      const pageWithoutData = shallow(<Mock />);
-      const hasNoChild = pageWithoutData.props().children;
-
-      expect(isArray(hasNoChild)).toBeTruthy();
-    });
-  });
-});

package/tests/unit/src/utils/component-map.test.js

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

package/tests/unit/src/utils/get-class-modifiers.test.js

@@ -1,116 +0,0 @@
-import { getClassModifiers } from '../../../../src/utils';
-
-describe('get class modifiers', () => {
-  const parallaxClass = 'image--parallax';
-  const mockedProps = {
-    desktop: true,
-    mobile: false,
-    tablet: false,
-    modifier: 'modify',
-    width: 'boxed'
-  };
-  const classModifiers = getClassModifiers('row', mockedProps);
-
-  it('should be a function', () => {
-    expect(typeof getClassModifiers).toEqual('function');
-  });
-
-  it('should always return a string', () => {
-    expect(typeof classModifiers).toBe('string');
-  });
-
-  it('should return correct class based on arguments passed to function', () => {
-    expect(classModifiers).toEqual('row--boxed hide-tablet hide-mobile modify');
-  });
-
-  it('should retun blank space when props do not contain a supported prop for the type', () => {
-    const notSupportedProp = getClassModifiers('not-supported', mockedProps);
-    expect(notSupportedProp).toEqual('');
-  });
-
-  it('should return button--icon class when props include icon & icon has value', () => {
-    const iconMockedProps = {
-      icon: 'test icon'
-    };
-    const iconModifiers = getClassModifiers('button', iconMockedProps);
-    expect(iconModifiers).toContain('button--icon');
-  });
-
-  it('should not add supported prop when propvalue is default', () => {
-    const defaultMockedProps = {
-      modifier: 'alignment',
-      alignment: 'default'
-    };
-    const defaultModifiers = getClassModifiers('button', defaultMockedProps);
-    expect(defaultModifiers).not.toContain('default');
-  });
-
-  it('should return alignment value', () => {
-    const alignmentProps = {
-      modifier: 'alignment',
-      alignment: 'center'
-    };
-    const alignmentModifiers = getClassModifiers('button', alignmentProps);
-    expect(alignmentModifiers).toContain('button--center');
-  });
-
-  it('should return gtmClassName value ', () => {
-    const alignmentProps = {
-      gtmClassName: 'gtm--test--classname'
-    };
-    const gtmModifiers = getClassModifiers('button', alignmentProps);
-    expect(gtmModifiers).toContain('gtm--test--classname');
-  });
-
-  it('should return string based on type & value if not match with any of the conditions', () => {
-    const alignmentProps = {
-      alignment: 'center'
-    };
-    const gtmModifiers = getClassModifiers('button', alignmentProps);
-    expect(gtmModifiers).toContain('button--center');
-  });
-
-  it('should return string based on type if prop is sticky & propValue is true', () => {
-    const columnMockedProps = {
-      sticky: true
-    };
-    const columnModifiers = getClassModifiers('column', columnMockedProps);
-    expect(columnModifiers).toContain('column--sticky');
-  });
-
-  it('should return empty string if prop is sticky & propValue is false', () => {
-    const columnMockedProps = {
-      sticky: false
-    };
-    const columnModifiers = getClassModifiers('column', columnMockedProps);
-    expect(columnModifiers).toContain('');
-  });
-
-  it('should return default values when nothing has been set', () => {
-    const unsetProps = {
-      type: null,
-      style: null,
-      size: null,
-      alignment: null
-    };
-    const defaultProps = getClassModifiers('button', unsetProps);
-    expect(defaultProps).toContain('button--center alignment');
-  });
-
-  it('should add parallax settings', () => {
-    const imageMockedProps = {
-      parallax: true
-    };
-    expect(getClassModifiers('image', imageMockedProps)).toContain(parallaxClass);
-  });
-
-  it('should not add parallax if false or not present', () => {
-    const imageMockedProps = {
-      parallax: false
-    };
-    expect(getClassModifiers('image', imageMockedProps)).not.toContain(parallaxClass);
-
-    delete imageMockedProps.parallax;
-    expect(getClassModifiers('image', imageMockedProps)).not.toContain(parallaxClass);
-  });
-});

package/tests/unit/src/utils/get-image-data.test.js

@@ -1,54 +0,0 @@
-import { getImageData } from '../../../../src/utils';
-
-describe('get image data', () => {
-  const altText = 'altText-test-prop';
-  const caption = 'caption-test-prop';
-  const credits = 'credits-test-prop';
-  const mockedProps = {
-    alt: altText,
-    caption,
-    credits
-  };
-
-  const mockedData = {
-    altText: 'altText-test-data',
-    caption: 'caption-test-data',
-    hrefUrl: 'hrefUrl-test-data',
-    credits: 'credits-test-data'
-  };
-
-  it('should be a function', () => {
-    expect(typeof getImageData).toEqual('function');
-  });
-
-  it('should always return an object', () => {
-    expect(typeof getImageData({}, {})).toBe('object');
-  });
-
-  it('should return expected value if has props', () => {
-    const imageData = getImageData(mockedProps, {});
-    const expected = {
-      credits,
-      altText,
-      caption,
-      hrefUrl: ''
-    };
-    expect(imageData).toEqual(expected);
-  });
-
-  it('should return expected value if has data', () => {
-    const imageData = getImageData({}, mockedData);
-    expect(imageData).toEqual(mockedData);
-  });
-
-  it('should return expected value if has props & data', () => {
-    const imageData = getImageData(mockedProps, mockedData);
-    const expected = {
-      altText,
-      caption,
-      hrefUrl: 'hrefUrl-test-data',
-      credits
-    };
-    expect(imageData).toEqual(expected);
-  });
-});

package/tests/unit/src/utils/get-props-to-display-modifiers.test.js

@@ -1,14 +0,0 @@
-import { getPropsToDisplayModifiers } from '../../../../src/utils';
-
-describe('getPropsToDisplayModifiers function', () => {
-  const mockedPropsToDisplay = [
-    { name: 'prop1', modifier: 'modifier 1' },
-    { slug: '/pro-2' },
-    { title: 'prop 3', modifier: 'modifier 3' }
-  ];
-
-  it('should return an array of modifiers', () => {
-    const expected = ['modifier 1', '', 'modifier 3'];
-    expect(getPropsToDisplayModifiers(mockedPropsToDisplay)).toEqual(expected);
-  });
-});

package/tests/unit/src/utils/is-object-empty.test.js

@@ -1,22 +0,0 @@
-import '@testing-library/jest-dom/extend-expect';
-import { isObjectEmpty } from '../../../../src/utils';
-
-describe('checks if an object is empty', () => {
-  it('should return true when empty object is passed as parameter', () => {
-    const emptyObject = {};
-    const response = isObjectEmpty(emptyObject);
-    expect(typeof response).toBe('boolean');
-    expect(response).toBeTruthy();
-  });
-  it('should return false when not empty object is passed as parameter', () => {
-    const variable = { a: 1 };
-    const response = isObjectEmpty(variable);
-    expect(typeof response).toBe('boolean');
-    expect(response).toBeFalsy();
-  });
-  it('should return false when no parameter is passed', () => {
-    const response = isObjectEmpty();
-    expect(typeof response).toBe('boolean');
-    expect(response).toBeFalsy();
-  });
-});

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