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

package/tests/unit/src/components/Card/CardsRender.test.js

@@ -0,0 +1,118 @@
+/**
+ * @jest-environment jsdom
+ */
+import React from 'react';
+import { render } from '@testing-library/react'; // No hooks here
+import { useQuery } from '@apollo/client';
+import { MainContext } from '@blaze-cms/nextjs-components';
+import CardsRender from '../../../../../src/components/Card/CardsRender';
+import { useAppEventHook } from '../../../../../src/hooks';
+import { buildQueryBooster } from '../../../../../src/components/List/helpers';
+
+// Mocks
+jest.mock('@apollo/client', () => ({
+  useQuery: jest.fn(),
+  gql: jest.fn(str => str)
+}));
+
+jest.mock('../../../../../src/hooks', () => ({
+  useGetEntitySchemasAsObj: jest.fn(() => ({})),
+  useGetImages: jest.fn(() => ({ data: [], loading: false })),
+  useAppEventHook: jest.fn()
+}));
+
+jest.mock('../../../../../src/components/List/helpers', () => ({
+  buildQueryBooster: jest.fn()
+}));
+
+// Mock dynamic import
+jest.mock('next/dynamic', () => () => {
+  const DynamicComponent = () => null;
+  DynamicComponent.displayName = 'LoadableComponent';
+  DynamicComponent.preload = jest.fn();
+  return DynamicComponent;
+});
+
+describe('CardsRender', () => {
+  const mockProps = {
+    entity: { id: '1', kind: 'Article' },
+    entities: [],
+    entityFields: {},
+    itemsToDisplay: [{ id: '1', kind: 'Article' }], // Ensure itemsToDisplay has content so query runs
+    children: null,
+    VariantComponent: () => null,
+    recencyBoostProperty: ['publishedAt'], // Example prop intended for boosting
+    parent: { itemId: '1', itemEntity: 'Article' }
+  };
+
+  const mockContext = {
+    isPreview: false
+  };
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+    useQuery.mockReturnValue({ data: {}, loading: false, error: null });
+
+    // Default mock implementation for app event hook (returns data unchanged)
+    useAppEventHook.mockImplementation(({ data }) => ({ data, loading: false }));
+
+    // Default mock for booster (returns data unchanged)
+    buildQueryBooster.mockImplementation((_, data) => data);
+  });
+
+  it('should trigger useAppEventHook with correct arguments', () => {
+    // We expect variables to be derived inside CardsRender (from filterQuerySetup helper logic)
+    // Since itemsToDisplay is passed, filterQuerySetup should produce some variables.
+
+    render(
+      <MainContext.Provider value={mockContext}>
+        <CardsRender {...mockProps} />
+      </MainContext.Provider>
+    );
+
+    expect(useAppEventHook).toHaveBeenCalledWith(
+      expect.objectContaining({
+        eventName: 'cards:query-variables',
+        // We can't easily predict 'data' (variables) without mocking filterQuerySetup heavily,
+        // but we can check the eventName is correct.
+        props: expect.objectContaining({
+          recencyBoostProperty: mockProps.recencyBoostProperty
+        })
+      })
+    );
+  });
+
+  it('should call buildQueryBooster with the result from useAppEventHook', () => {
+    const hookData = { someVar: 'hook-modified' };
+    useAppEventHook.mockReturnValue({ data: hookData, loading: false });
+
+    render(
+      <MainContext.Provider value={mockContext}>
+        <CardsRender {...mockProps} />
+      </MainContext.Provider>
+    );
+
+    expect(buildQueryBooster).toHaveBeenCalledWith(
+      expect.objectContaining({ recencyBoostProperty: mockProps.recencyBoostProperty }),
+      hookData
+    );
+  });
+
+  it('should pass boosted variables to useQuery', () => {
+    const boostedVars = { boosted: true };
+    buildQueryBooster.mockReturnValue(boostedVars);
+
+    render(
+      <MainContext.Provider value={mockContext}>
+        <CardsRender {...mockProps} />
+      </MainContext.Provider>
+    );
+
+    expect(useQuery).toHaveBeenCalledWith(
+      expect.any(Object), // action
+      expect.objectContaining({
+        variables: boostedVars
+      })
+    );
+  });
+});

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

@@ -28,7 +28,7 @@ exports[`Card component should not render alternative headline if alternativePre
         <a
           aria-label="category-name"
           class="badge badge--label"
-          href="published-url"
+          href="/published-url"
         >
           category-name
         </a>
@@ -38,9 +38,6 @@ exports[`Card component should not render alternative headline if alternativePre
           <a
             aria-label="mock name"
             href="/mockurl"
-          />
-          <a
-            href="/mockurl"
           >
             mock name
           </a>
@@ -71,7 +68,7 @@ exports[`Card component should not render alternative headline if alternativePre
         </div>
         <div
           class="child_2"
-          modifier="child-modi"
+          data-modifier="child-modifier"
         >
           another child
         </div>
@@ -112,9 +109,6 @@ exports[`Card component should not render alternative headline if displayCategor
           <a
             aria-label="mock name"
             href="/mockurl"
-          />
-          <a
-            href="/mockurl"
           >
             mock name
           </a>
@@ -145,7 +139,7 @@ exports[`Card component should not render alternative headline if displayCategor
         </div>
         <div
           class="child_2"
-          modifier="child-modi"
+          data-modifier="child-modifier"
         >
           another child
         </div>
@@ -183,7 +177,7 @@ exports[`Card component should not render preHeader if alternativeHeadline is no
         <a
           aria-label="category-name"
           class="badge badge--label"
-          href="published-url"
+          href="/published-url"
         >
           category-name
         </a>
@@ -193,9 +187,6 @@ exports[`Card component should not render preHeader if alternativeHeadline is no
           <a
             aria-label="mock name"
             href="/mockurl"
-          />
-          <a
-            href="/mockurl"
           >
             mock name
           </a>
@@ -226,7 +217,7 @@ exports[`Card component should not render preHeader if alternativeHeadline is no
         </div>
         <div
           class="child_2"
-          modifier="child-modi"
+          data-modifier="child-modifier"
         >
           another child
         </div>
@@ -272,9 +263,6 @@ exports[`Card component should render customPreheader and alternativeHeadline in
           <a
             aria-label="Alternative headline"
             href="/mockurl"
-          />
-          <a
-            href="/mockurl"
           >
             Alternative headline
           </a>
@@ -305,7 +293,7 @@ exports[`Card component should render customPreheader and alternativeHeadline in
         </div>
         <div
           class="child_2"
-          modifier="child-modi"
+          data-modifier="child-modifier"
         >
           another child
         </div>
@@ -388,7 +376,7 @@ exports[`Card component should render link wrapper 1`] = `
         </div>
         <div
           class="child_2"
-          modifier="child-modi"
+          data-modifier="child-modifier"
         >
           another child
         </div>
@@ -426,7 +414,7 @@ exports[`Card component should render without throwing an error and match snapsh
         <a
           aria-label="category-name"
           class="badge badge--label"
-          href="published-url"
+          href="/published-url"
         >
           category-name
         </a>
@@ -436,9 +424,6 @@ exports[`Card component should render without throwing an error and match snapsh
           <a
             aria-label="mock name"
             href="/mockurl"
-          />
-          <a
-            href="/mockurl"
           >
             mock name
           </a>
@@ -469,7 +454,7 @@ exports[`Card component should render without throwing an error and match snapsh
         </div>
         <div
           class="child_2"
-          modifier="child-modi"
+          data-modifier="child-modifier"
         >
           another child
         </div>

package/tests/unit/src/components/Card/__snapshots__/CardContainer.test.js.snap

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`CardsContainer component should render with carousel if option is enabled 1`] = `
 <DocumentFragment>
@@ -43,9 +43,6 @@ exports[`CardsContainer component should render with carousel if option is enabl
               <a
                 aria-label="Swan 78"
                 href="/nautors-swan/swan-78"
-              />
-              <a
-                href="/nautors-swan/swan-78"
               >
                 Swan 78
               </a>
@@ -85,9 +82,6 @@ exports[`CardsContainer component should render with carousel if option is enabl
               <a
                 aria-label="Swan 98"
                 href="/nautors-swan/swan-98"
-              />
-              <a
-                href="/nautors-swan/swan-98"
               >
                 Swan 98
               </a>
@@ -141,9 +135,6 @@ exports[`CardsContainer component should render without throwing error and match
             <a
               aria-label="Swan 78"
               href="/nautors-swan/swan-78"
-            />
-            <a
-              href="/nautors-swan/swan-78"
             >
               Swan 78
             </a>
@@ -183,9 +174,6 @@ exports[`CardsContainer component should render without throwing error and match
             <a
               aria-label="Swan 98"
               href="/nautors-swan/swan-98"
-            />
-            <a
-              href="/nautors-swan/swan-98"
             >
               Swan 98
             </a>

package/tests/unit/src/components/Carousel/Carousel.test.js

@@ -4,28 +4,35 @@
 import React from 'react';
 import '@testing-library/jest-dom/extend-expect';
 import { MockedProvider } from '@apollo/client/testing';
-import { render, screen, waitFor } from '@testing-library/react';
+import { render, screen, act, waitFor } from '@testing-library/react';
+import { MockedRoot } from '@blaze-cms/tools/test-helpers/test-functions';
 import { getFileById } from '../../../../../src/application/query';
 import Carousel from '../../../../../src/components/Carousel';
+import { MOCK_RELATION } from '../Image/mocks';
 
 const imageId = 'test-id';
-const getMockedProps = overrides => ({
+const getMockedProps = (overrides = {}) => ({
   imageIds: [imageId],
   enableLightbox: true,
   imageId,
   toggleModal: jest.fn(),
   handleSelectedImage: jest.fn(),
   displayCount: true,
+  entity: 'page',
+  imagesProperty: ['publishedPage.otherImageIds'],
+  parent: {
+    itemId: 'parentId',
+    getAction: 'getPublishedPage',
+    itemEntity: 'page'
+  },
   ...overrides
 });
 
-const mock = [
+const mocks = [
   {
     request: {
       query: getFileById,
-      variables: {
-        id: imageId
-      }
+      variables: { id: imageId }
     },
     result: {
       data: {
@@ -42,73 +49,85 @@ const mock = [
   }
 ];
 
-const MockedVariantComponent = () => <div>Variation component</div>;
-
-const setup = props => {
-  const mockComponent = (
-    <MockedProvider mocks={mock}>
+const setup = props =>
+  render(
+    <MockedProvider mocks={mocks}>
       <Carousel {...props} />
     </MockedProvider>
   );
 
-  return render(mockComponent);
+const setupWithRoot = async (props, mockOverrides) => {
+  const component = (
+    <MockedRoot mocks={mockOverrides}>
+      <Carousel {...props} />
+    </MockedRoot>
+  );
+  let renderResults;
+  await act(async () => {
+    renderResults = render(component);
+  });
+  return renderResults;
 };
 
 describe('Carousel component', () => {
   it('should render loading state initially', async () => {
-    const { container } = await setup(getMockedProps());
-
+    const { container } = setup(getMockedProps());
     expect(container.innerHTML).toContain('carousel');
   });
 
   it('should render carousel and match snapshot', async () => {
-    const { asFragment } = await setup(getMockedProps());
-
-    await waitFor(() => expect(asFragment()).toBeDefined());
-
+    const { asFragment } = setup(getMockedProps());
     await waitFor(() => expect(asFragment()).toMatchSnapshot());
   });
 
   it('should render priority images and match snapshot', async () => {
-    const { asFragment, getAllByRole } = await setup(getMockedProps({ priorityLimit: 1 }));
-
-    await waitFor(() => expect(asFragment()).toBeDefined());
-
+    const { asFragment, getAllByRole } = setup(getMockedProps({ priorityLimit: 1 }));
     await waitFor(() => expect(asFragment()).toMatchSnapshot());
-    expect(getAllByRole('button').length).toEqual(3);
+    expect(getAllByRole('button')).toHaveLength(3);
   });
 
   it('should return null if there are no imageIds', () => {
-    const mockedProps = getMockedProps({ imageIds: [] });
-    const { container } = setup(mockedProps);
-
+    const { container } = setup(getMockedProps({ imageIds: [] }));
     expect(container.innerHTML).toBe('');
   });
 
+  it('should render image fetching data from relation', async () => {
+    const { asFragment, container } = await setupWithRoot(getMockedProps({ imageIds: [] }), [
+      ...MOCK_RELATION,
+      ...mocks
+    ]);
+    await waitFor(() => {
+      expect(container.childNodes.length).toBeGreaterThan(0);
+      expect(container.querySelectorAll('img').length).toBeGreaterThan(1);
+    });
+    expect(asFragment()).toMatchSnapshot();
+  });
+
   it('should display caption if shouldDisplayCaption is true', () => {
     const caption = 'caption test';
-    const mockedProps = getMockedProps({ isCaptionDisplayed: true, caption });
-
-    setup(mockedProps);
+    setup(getMockedProps({ isCaptionDisplayed: true, caption }));
     expect(screen.getByText(caption)).toBeInTheDocument();
   });
 
   it('should render VariantComponent if it is set', () => {
-    const mockedProps = getMockedProps({ VariantComponent: MockedVariantComponent });
+    const mockedProps = getMockedProps({ VariantComponent: () => <div>Variation component</div> });
     const { container } = setup(mockedProps);
-
     expect(container.innerHTML).toBe('<div>Variation component</div>');
   });
 
   it('should display image count if displayCount is true', () => {
-    const mockedProps = getMockedProps({ imageIds: ['id1', 'id2', 'id3'] });
-    setup(mockedProps);
+    setup(getMockedProps({ imageIds: ['id1', 'id2', 'id3'] }));
     expect(screen.getByTestId('count')).toHaveTextContent('3 images');
   });
 
   it('should not display image count if displayCount is false', () => {
-    const mockedProps = getMockedProps({ displayCount: false });
-    setup(mockedProps);
+    setup(getMockedProps({ displayCount: false }));
     expect(screen.queryByTestId('count')).toBeNull();
   });
+
+  it('should remove duplicate imageIds keeping first occurrence', () => {
+    setup(getMockedProps({ imageIds: ['id1', 'id2', 'id3', 'id1', 'id4', 'id2'] }));
+    // Should display count as 4 unique images, not 6
+    expect(screen.getByTestId('count')).toHaveTextContent('4 images');
+  });
 });

package/tests/unit/src/components/Carousel/CarouselImage/CarouselImage.test.js

@@ -8,9 +8,13 @@ import CarouselImage from '../../../../../../src/components/Carousel/CarouselIma
 import getMockedProps from './helpers';
 import mocks from './mocks';
 
-jest.mock('../../../../../../src/components/LazyImage', () => ({ alt, ...props }) => (
-  <img {...props} alt={alt} data-testid="lazy-image-mock" />
-));
+jest.mock(
+  '../../../../../../src/components/LazyImage',
+  () =>
+    function ({ alt, ...props }) {
+      return <img {...props} alt={alt} data-testid="lazy-image-mock" />;
+    }
+);
 
 const [MOCK_WITH_DATA, MOCK_WITH_ERROR] = mocks;
 

package/tests/unit/src/components/Carousel/CarouselRender/CarouselRender.test.js

@@ -13,14 +13,23 @@ jest.mock('@blaze-cms/utils-handlebars', () => ({
   useStringTemplate: jest.fn((_, [title]) => ({ loadig: false, data: [title] }))
 }));
 
-jest.mock('react', () => ({
-  ...jest.requireActual('react'),
-  useContext: () => ({ isPreview: false })
+jest.mock('next/router', () => ({
+  useRouter: jest.fn(() => ({ asPath: '/' }))
 }));
 
+jest.mock('@blaze-cms/nextjs-components', () => {
+  // eslint-disable-next-line global-require, no-shadow
+  const React = require('react');
+  const MainContext = React.createContext({ isPreview: false });
+  return {
+    ...jest.requireActual('@blaze-cms/nextjs-components'),
+    MainContext
+  };
+});
+
 const getMockedProps = overrides => ({
   imageIds: ['test-id', 'test-altText', 'test-caption'],
-  displayCount: true,
+  shouldDisplayCount: true,
   enableLightbox: true,
   toggleModal: jest.fn(),
   handleSelectedImage: jest.fn(),
@@ -28,11 +37,11 @@ const getMockedProps = overrides => ({
 });
 
 describe('CarouselRender component', () => {
-  const router = useRouter();
   const mockedProps = getMockedProps();
 
   it('should render one image button if there is one image to display', async () => {
-    const overrides = { imageIds: ['test1'] };
+    const countMessage = '1 image';
+    const overrides = { imageIds: ['test-id'], countMessage };
     const { getByText } = render(
       <MockedRoot mocks={MOCK_BASIC}>
         <CarouselRender {...mockedProps} {...overrides} />
@@ -40,12 +49,13 @@ describe('CarouselRender component', () => {
     );
 
     await waitFor(() => {
-      expect(getByText('1 image')).toBeInTheDocument();
+      expect(getByText(countMessage)).toBeInTheDocument();
     });
   });
 
   it('should render n images button if there is more than one image to display', async () => {
-    const overrides = { imageIds: ['test-id', 'test-id-2'] };
+    const countMessage = '2 images';
+    const overrides = { imageIds: ['test-id', 'test-id-2'], countMessage };
     const { getByText } = render(
       <MockedRoot mocks={MOCK_RELATION}>
         <CarouselRender {...mockedProps} {...overrides} />
@@ -53,12 +63,12 @@ describe('CarouselRender component', () => {
     );
 
     await waitFor(() => {
-      expect(getByText('2 images')).toBeInTheDocument();
+      expect(getByText(countMessage)).toBeInTheDocument();
     });
   });
 
   it('should not render number count if display count is disabled', async () => {
-    const overrides = { displayCount: false };
+    const overrides = { shouldDisplayCount: false };
     const { asFragment, container } = render(
       <MockedRoot mocks={MOCK_BASIC}>
         <CarouselRender {...mockedProps} {...overrides} />

package/tests/unit/src/components/Carousel/CarouselRender/__snapshots__/CarouselRender.test.js.snap

@@ -7,6 +7,7 @@ exports[`CarouselRender component should not render number count if display coun
   >
     <div>
       <div
+        aria-label="Previous Slide"
         class="carousel__button carousel__button--previous"
         role="button"
       >
@@ -20,20 +21,21 @@ exports[`CarouselRender component should not render number count if display coun
         <div
           class="carousel__slide"
         >
-          <div />
+          <span />
         </div>
         <div
           class="carousel__slide"
         >
-          <div />
+          <span />
         </div>
         <div
           class="carousel__slide"
         >
-          <div />
+          <span />
         </div>
       </div>
       <div
+        aria-label="Next Slide"
         class="carousel__button carousel__button--next"
         role="button"
       >

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

@@ -21,7 +21,7 @@ exports[`Carousel component should render carousel and match snapshot 1`] = `
         <div
           class="carousel__slide"
         >
-          <div />
+          <span />
         </div>
       </div>
       <div
@@ -43,7 +43,7 @@ exports[`Carousel component should render carousel and match snapshot 1`] = `
 </DocumentFragment>
 `;
 
-exports[`Carousel component should render priority images and match snapshot 1`] = `
+exports[`Carousel component should render image fetching data from relation 1`] = `
 <DocumentFragment>
   <div
     class="carousel"
@@ -73,6 +73,61 @@ exports[`Carousel component should render priority images and match snapshot 1`]
             />
           </span>
         </div>
+        <div
+          class="carousel__slide"
+        >
+          <span>
+            <img
+              alt="Carousel image"
+              aria-label="View Image"
+              role="button"
+              src="test-url"
+            />
+          </span>
+        </div>
+      </div>
+      <div
+        aria-label="Next Slide"
+        class="carousel__button carousel__button--next"
+        role="button"
+      >
+        <p
+          data-testid="count"
+        >
+          2 images
+        </p>
+        <div
+          class="arrow arrow--right"
+        />
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Carousel component should render priority images and match snapshot 1`] = `
+<DocumentFragment>
+  <div
+    class="carousel"
+  >
+    <div>
+      <div
+        aria-label="Previous Slide"
+        class="carousel__button carousel__button--previous"
+        role="button"
+      >
+        <div
+          class="arrow arrow--left"
+        />
+      </div>
+      <div
+        class="carousel__list"
+      >
+        <div
+          class="carousel__slide"
+        >
+          <span />
+        </div>
       </div>
       <div
         aria-label="Next Slide"

package/tests/unit/src/components/Code/Code.test.js

@@ -9,9 +9,13 @@ jest.mock('@blaze-cms/utils-handlebars', () => ({
   useStringTemplate: jest.fn((parent, [title]) => ({ loadig: false, data: [title] }))
 }));
 
-jest.mock('../../../../../src/components/Code/ScriptTag', () => () => (
-  <span data-testid="scriptTag" />
-));
+jest.mock(
+  '../../../../../src/components/Code/ScriptTag',
+  () =>
+    function () {
+      return <span data-testid="scriptTag" />;
+    }
+);
 
 const props = {
   code: '<p>Lorem ipsum</p>',