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

package/tests/unit/src/helpers/get-component-id.test.js

@@ -0,0 +1,36 @@
+import cssesc from 'cssesc';
+import getComponentId from '../../../../src/helpers/get-component-id';
+import { COMPONENT_ID_PREFIX } from '../../../../src/constants';
+
+jest.mock('cssesc');
+
+describe('Get component Id', () => {
+  beforeEach(() => {
+    cssesc.mockClear();
+  });
+
+  it('should call cssesc with correct arguments', () => {
+    cssesc.mockReturnValue('escapedId');
+    const componentName = 'MyComponent';
+    const expectedInput = `${COMPONENT_ID_PREFIX}${componentName}`;
+    const result = getComponentId(componentName);
+
+    expect(cssesc).toHaveBeenCalledWith(expectedInput, { isIdentifier: true });
+    expect(result).toBe('escapedId');
+  });
+
+  it('should handle special characters in component name', () => {
+    cssesc.mockImplementation(str => `escaped:${str}`);
+    const componentName = 'My$Component#1';
+    const expectedInput = `${COMPONENT_ID_PREFIX}${componentName}`;
+    const result = getComponentId(componentName);
+
+    expect(result).toBe(`escaped:${expectedInput}`);
+  });
+
+  it('should return a string', () => {
+    cssesc.mockReturnValue('someId');
+    const result = getComponentId('Test');
+    expect(typeof result).toBe('string');
+  });
+});

package/tests/unit/src/helpers/get-current-offset.test.js

@@ -9,7 +9,7 @@ const mockedArgs = [
   [1, 5, 3, 5]
 ];
 
-const mockedResults = [11, 4, 3, 7, 1];
+const mockedResults = [3, 2, 0, 3, 5];
 
 describe('get pagination index from url', () => {
   const offsetWithAllParams = getCurrentOffset(...mockedArgs[0]);
@@ -32,7 +32,7 @@ describe('get pagination index from url', () => {
   it('should return the current offset', () => {
     expect(offsetWithAllParams).toEqual(mockedResults[0]);
     expect(offsetWithNoDefaultOffset).toEqual(mockedResults[1]);
-    expect(offsetWithNoItemsPerPage).toEqual(mockedResults[1]);
+    expect(offsetWithNoItemsPerPage).toEqual(mockedResults[2]);
     expect(offsetWithNoPagination).toEqual(mockedResults[3]);
     expect(offsetWithLimit).toEqual(mockedResults[4]);
   });

package/tests/unit/src/helpers/get-custom-html-properties.test.js

@@ -0,0 +1,51 @@
+import getCustomHtmlProperties from '../../../../src/helpers/get-custom-html-properties';
+
+describe('getCustomHtmlProperties function', () => {
+  it('should return an empty object when customHtmlProps is an empty array', () => {
+    expect(getCustomHtmlProperties({ customHtmlProps: [] })).toEqual({});
+  });
+
+  it('should return an empty object when customHtmlProps is not provided', () => {
+    expect(getCustomHtmlProperties({})).toEqual({});
+  });
+
+  it('should return an empty object when customHtmlProps is null', () => {
+    expect(getCustomHtmlProperties({ customHtmlProps: null })).toEqual({});
+  });
+
+  it('should convert an array of name/value pairs into an object', () => {
+    const customHtmlProps = [
+      { name: 'data-id', value: '123' },
+      { name: 'aria-label', value: 'My label' }
+    ];
+    expect(getCustomHtmlProperties({ customHtmlProps })).toEqual({
+      'data-id': '123',
+      'aria-label': 'My label'
+    });
+  });
+
+  it('should exclude entries where value is the string "null"', () => {
+    const customHtmlProps = [
+      { name: 'data-id', value: '123' },
+      { name: 'data-skip', value: 'null' }
+    ];
+    expect(getCustomHtmlProperties({ customHtmlProps })).toEqual({ 'data-id': '123' });
+  });
+
+  it('should exclude entries where name is falsy', () => {
+    const customHtmlProps = [
+      { name: 'data-id', value: '123' },
+      { name: '', value: 'ignored' },
+      { name: null, value: 'also-ignored' }
+    ];
+    expect(getCustomHtmlProperties({ customHtmlProps })).toEqual({ 'data-id': '123' });
+  });
+
+  it('should return an empty object when all entries are invalid', () => {
+    const customHtmlProps = [
+      { name: '', value: 'foo' },
+      { name: 'bar', value: 'null' }
+    ];
+    expect(getCustomHtmlProperties({ customHtmlProps })).toEqual({});
+  });
+});

package/tests/unit/src/helpers/get-image-ids.test.js

@@ -42,10 +42,10 @@ describe('getImageIds helper', () => {
     expect(getImageIds(relationNameProp, relationData, '')).toEqual(['test', 'test3']);
   });
 
-  it('should return expected value if relationName is an empty object', () => {
+  it('should return the relation object itself when relationName is an empty object', () => {
     expect(
       getImageIds(relationNameProp, { entityData: { relationName: {} } }, 'test-id-not-array')
-    ).toEqual(['test-id-not-array']);
+    ).toEqual([{}]);
   });
 
   it('should return expected value if relationName is not an empty object', () => {
@@ -58,16 +58,10 @@ describe('getImageIds helper', () => {
     ).toEqual(['prop-value']);
   });
 
-  it('should return expected value if relationName is not an object or array', () => {
+  it('should return primitive relationName when it is not an object or array', () => {
     expect(
       getImageIds(relationNameProp, { entityData: { relationName: 'relationName' } }, imageId)
-    ).toEqual([imageId]);
-  });
-
-  it('should return empty array', () => {
-    expect(
-      getImageIds(relationNameProp, { entityData: { relationName: 'relationName' } }, '')
-    ).toEqual([]);
+    ).toEqual(['relationName']);
   });
 
   it('should return data from object with non array property', () => {
@@ -77,4 +71,22 @@ describe('getImageIds helper', () => {
   it('should return data from object with array property', () => {
     expect(getImageIds(['objectRelation.imageIds'], relationData, '')).toEqual(['test5']);
   });
+
+  it('should return an empty array when no imageId and relation produces no ids', () => {
+    const dataWithNoMatches = {
+      entityData: {
+        relationName: [{ otherProp: 'x' }, { otherProp: 'y' }]
+      }
+    };
+    expect(getImageIds(['relationName.relationProp'], dataWithNoMatches, '')).toEqual([]);
+  });
+
+  it('should return multiple ids when relation property is an array', () => {
+    const dataWithPropArray = {
+      entityData: {
+        gallery: { imageIds: ['id1', 'id2'] }
+      }
+    };
+    expect(getImageIds(['gallery.imageIds'], dataWithPropArray, '')).toEqual(['id1', 'id2']);
+  });
 });

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

@@ -14,9 +14,7 @@ describe('Parse textBlock', () => {
 
   beforeAll(() => {
     const parsedTextBlock = parseTextBlock({ html, LinkWrapper: BlazeLink });
-    expectedMarkup = () => {
-      parsedTextBlock;
-    };
+    expectedMarkup = () => parsedTextBlock;
   });
 
   test('it should match snapshot', () => {

package/tests/unit/src/helpers/render-children.test.js

@@ -6,14 +6,14 @@ import '@testing-library/jest-dom/extend-expect';
 import renderChildren from '../../../../src/helpers/render-children';
 
 const mocks = [
-  <span className="span-child" modifier="has-modifier">
+  <span className="span-child" data-modifier="has-modifier">
     Span Child
   </span>,
   <div className="div-child">Div Child</div>
 ];
 
 const mockedResults = [
-  { type: 'span', className: 'span-child', modifier: 'has-modifier' },
+  { type: 'span', className: 'span-child', 'data-modifier': 'has-modifier' },
   { type: 'div', className: 'div-child' }
 ];
 
@@ -39,17 +39,19 @@ describe('render children helper', () => {
     withChildren.forEach(({ type, props: childProps }, i) => {
       expect(type).toEqual(mockedResults[i].type);
       expect(childProps.className).toEqual(mockedResults[i].className);
-      expect(childProps.modifier).toEqual(mockedResults[i].modifier);
+      if (mockedResults[i]['data-modifier']) {
+        expect(childProps['data-modifier']).toEqual(mockedResults[i]['data-modifier']);
+      }
     });
   });
 
   it('should map nested children', () => {
     const nestedMocks = [
       <div className="div-child">
-        <span className="span-child" modifier="has-modifier">
+        <span className="span-child" data-modifier="has-modifier">
           Span Child 1
         </span>
-        <span className="span-child" modifier="has-modifier">
+        <span className="span-child" data-modifier="has-modifier">
           Span Child 2
         </span>
       </div>

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

@@ -0,0 +1,64 @@
+/**
+ * @jest-environment jsdom
+ */
+import React from 'react';
+import { renderHook, waitFor } from '@testing-library/react';
+import { AppContext } from '@blaze-cms/nextjs-components';
+import { useAppEventHook } from '../../../../src/hooks';
+
+describe('useAppEventHook', () => {
+  const eventName = 'test-event';
+  const initialData = { foo: 'bar' };
+  const props = { prop1: 'val1' };
+  let blazeAppMock;
+
+  beforeEach(() => {
+    blazeAppMock = {
+      events: {
+        hasListeners: jest.fn(),
+        emitAsync: jest.fn().mockResolvedValue()
+      }
+    };
+  });
+
+  const wrapper = ({ children }) => (
+    <AppContext.Provider value={{ blazeApp: blazeAppMock }}>{children}</AppContext.Provider>
+  );
+
+  it('should not emit event if there are no listeners', () => {
+    blazeAppMock.events.hasListeners.mockReturnValue(false);
+
+    const { result } = renderHook(() => useAppEventHook({ eventName, data: initialData, props }), {
+      wrapper
+    });
+
+    expect(result.current.loading).toBe(false);
+    expect(result.current.data).toEqual(initialData); // Returns initial data immediately
+    expect(blazeAppMock.events.emitAsync).not.toHaveBeenCalled();
+  });
+
+  it('should emit async event if listeners exist', async () => {
+    blazeAppMock.events.hasListeners.mockReturnValue(true);
+
+    const { result } = renderHook(() => useAppEventHook({ eventName, data: initialData, props }), {
+      wrapper
+    });
+
+    // Initial state: loading is true because hasListeners is true
+    expect(result.current.loading).toBe(true);
+
+    await waitFor(() => {
+      expect(blazeAppMock.events.emitAsync).toHaveBeenCalledWith(
+        `plugin:page-builder:${eventName}`,
+        {
+          data: initialData,
+          props
+        }
+      );
+    });
+
+    // Loading should be false after emitAsync resolves
+    expect(result.current.loading).toBe(false);
+    expect(result.current.data).toEqual(initialData);
+  });
+});

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

@@ -1,20 +1,24 @@
 import React from 'react';
-import { renderHook } from '@testing-library/react-hooks';
+import { renderHook } from '@testing-library/react';
 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 blazeAppMock = {
+    events: {
+      emit: jest.fn()
+    }
+  };
 
-    const eventName = 'testEvent';
-    const data = { key: 'value' };
-    const props = { someProp: 'value' };
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
 
+  test('should emit event with correct event name and data', () => {
     const wrapper = ({ children }) => (
       <AppContext.Provider value={{ blazeApp: blazeAppMock }}>{children}</AppContext.Provider>
     );
@@ -31,15 +35,31 @@ describe('useAppSyncEventHook', () => {
     expect(result.current.data).toEqual(data);
   });
 
-  test('should return correct data', () => {
-    const blazeAppMock = {
-      events: {
-        emit: jest.fn()
+  test('should not emit event on render when using returnFunction', () => {
+    const wrapper = ({ children }) => (
+      <AppContext.Provider value={{ blazeApp: blazeAppMock }}>{children}</AppContext.Provider>
+    );
+
+    const { result } = renderHook(
+      () => useAppSyncEventHook({ eventName, data, props, returnFunction: true }),
+      {
+        wrapper
       }
-    };
+    );
 
-    const data = { key: 'value' };
+    expect(blazeAppMock.events.emit).not.toHaveBeenCalled();
 
+    result.current.runHook();
+
+    expect(blazeAppMock.events.emit).toHaveBeenCalledWith(`plugin:page-builder:${eventName}:sync`, {
+      data,
+      props
+    });
+
+    expect(result.current.data).toEqual(data);
+  });
+
+  test('should return correct data', () => {
     const wrapper = ({ children }) => (
       <AppContext.Provider value={{ blazeApp: blazeAppMock }}>{children}</AppContext.Provider>
     );

package/tests/unit/src/hooks/use-check-mobile-screen.test.js

@@ -1,13 +1,12 @@
 /**
  * @jest-environment jsdom
  */
-import { renderHook } from '@testing-library/react';
+import { renderHook, waitFor, act } from '@testing-library/react';
 import { useCheckMobileScreen } from '../../../../src/hooks';
 // TODO fix breaking test
 describe('Check Mobile Screen hook', () => {
   it('should server render will always be mobile', () => {
-    global.innerWidth = undefined;
-    global.dispatchEvent(new Event('resize'));
+    delete window.innerWidth;
     const { result } = renderHook(() => useCheckMobileScreen());
     expect(result.current).toBe(true);
   });
@@ -17,25 +16,32 @@ describe('Check Mobile Screen hook', () => {
     expect(result.current).toBe(true);
   });
 
-  it('should return false if on desktop', () => {
+  it('should return false if on desktop', async () => {
     const screenSize = 1080;
     const isMobile = false;
-    resizeCheck(screenSize, isMobile);
+    await resizeCheck(screenSize, isMobile);
   });
 
-  it('should return true if on mobile', () => {
+  it('should return true if on mobile', async () => {
     const screenSize = 600;
     const isMobile = true;
-    resizeCheck(screenSize, isMobile);
+    await resizeCheck(screenSize, isMobile);
   });
 });
 
-function resizeCheck(screenSize, isMobile) {
+async function resizeCheck(screenSize, isMobile) {
   const { result, rerender } = renderHook(() => useCheckMobileScreen());
-  rerender();
 
-  global.innerWidth = screenSize;
-  global.dispatchEvent(new Event('resize'));
+  act(() => {
+    Object.defineProperty(window, 'innerWidth', {
+      writable: true,
+      configurable: true,
+      value: screenSize
+    });
+    window.dispatchEvent(new Event('resize'));
+  });
 
-  expect(result.current).toBe(isMobile);
+  await waitFor(() => {
+    expect(result.current).toBe(isMobile);
+  });
 }

package/tests/unit/src/hooks/use-get-image-id-from-relation.test.js

@@ -41,11 +41,21 @@ describe('useGetImageIdFromRelation', () => {
   it('should use `get` query when preview is true', async () => {
     const spy = jest.spyOn(query, 'generateSingleItemQuery');
 
-    renderHook(() => useGetImageIdFromRelation(mockProps.id, [], mockProps.actions, true, true), {
-      wrapper
-    });
+    renderHook(
+      () =>
+        useGetImageIdFromRelation(
+          mockProps.id,
+          mockProps.imageRelation,
+          mockProps.actions,
+          true,
+          true
+        ),
+      {
+        wrapper
+      }
+    );
 
-    expect(spy).toHaveBeenCalledWith('getPage', 'id');
+    expect(spy).toHaveBeenCalledWith('getPage', 'publishedPages { imageId }');
   });
 
   it('should use `getPublished` query when preview is false', async () => {
@@ -73,6 +83,65 @@ describe('useGetImageIdFromRelation', () => {
     expect(result.current.error).toBeUndefined();
     expect(result.current.data).toEqual({});
   });
+
+  it('should skip when hasImgSrc is true', async () => {
+    const { result } = renderHook(
+      () =>
+        useGetImageIdFromRelation(
+          mockProps.id,
+          mockProps.imageRelation,
+          mockProps.actions,
+          true,
+          false,
+          true
+        ),
+      { wrapper }
+    );
+
+    expect(result.current.loading).toBeFalsy();
+    expect(result.current.error).toBeUndefined();
+    expect(result.current.data).toEqual({});
+  });
+
+  it('should skip when id is not a string', async () => {
+    const { result } = renderHook(
+      () =>
+        useGetImageIdFromRelation(
+          12345,
+          mockProps.imageRelation,
+          mockProps.actions,
+          true,
+          false,
+          false
+        ),
+      { wrapper }
+    );
+
+    expect(result.current.loading).toBeFalsy();
+    expect(result.current.error).toBeUndefined();
+    expect(result.current.data).toEqual({});
+  });
+
+  it('should fallback to `get` when `getPublished` is missing', async () => {
+    const actionsWithoutPublished = { ...mockProps.actions };
+    delete actionsWithoutPublished.getPublished;
+
+    const spy = jest.spyOn(query, 'generateSingleItemQuery');
+
+    renderHook(
+      () =>
+        useGetImageIdFromRelation(
+          mockProps.id,
+          mockProps.imageRelation,
+          actionsWithoutPublished,
+          true,
+          false
+        ),
+      { wrapper }
+    );
+
+    expect(spy).toHaveBeenCalledWith('getPage', 'publishedPages { imageId }');
+  });
 });
 
 function renderCustomHook() {

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

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

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

@@ -0,0 +1,10 @@
+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/useLongformGallery.test.js

@@ -2,7 +2,7 @@
  * @jest-environment jsdom
  */
 import React from 'react';
-import { renderHook } from '@testing-library/react-hooks';
+import { renderHook } from '@testing-library/react';
 import { MockedProvider } from '@apollo/client/testing';
 import useLongformGallery from '../../../../../src/variants/LongformGallery/useLongformGallery';
 import { IMAGE_MOCKS } from './constants';