@blaze-cms/react-page-builder 0.146.0-core-styles.42 → 0.146.0-node18.0

package/tests/unit/src/components/DataSummary/helpers/build-props-to-display-with-content.test.js

@@ -7,7 +7,11 @@ const mockerPropsObj = {
   id: 'f6a84af0-d956-11e9-b283-ffc6056b4ee9',
   metaDescription: '',
   name: 'Page2',
-  tags: [{ name: 'name1', id: '1' }, { name: 'name2', id: '2' }, { name: 'name3', id: '3' }],
+  tags: [
+    { name: 'name1', id: '1' },
+    { name: 'name2', id: '2' },
+    { name: 'name3', id: '3' }
+  ],
   url: '/test2'
 };
 

package/tests/unit/src/components/DataSummary/helpers/get-value-from-array.test.js

@@ -19,7 +19,10 @@ describe('build props to display func', () => {
   });
 
   it('should return object with correct data', () => {
-    const arrMultiple = [{ id: 'id1', url: 'url1' }, { id: 'id2', url: 'url2' }];
+    const arrMultiple = [
+      { id: 'id1', url: 'url1' },
+      { id: 'id2', url: 'url2' }
+    ];
     const resultMultiple = getValueFromArray(key, arrMultiple, prefix, suffix);
 
     expect(resultMultiple).toHaveLength(2);

package/tests/unit/src/components/DataSummary/helpers/strip-summary-props-content.test.js

@@ -4,8 +4,14 @@ import stripSummaryPropsContent from '../../../../../../src/components/DataSumma
 describe('strip summary props content', () => {
   const stripTrue = [{ shouldStrip: true }];
   const stripFalse = [{ shouldStrip: false }];
-  const mockedData = [['Props', '| meta | description |', ''], ['Props', 'meta', '']];
-  const expectedResult = [['Props', 'meta | description', ''], ['Props', 'meta', '']];
+  const mockedData = [
+    ['Props', '| meta | description |', ''],
+    ['Props', 'meta', '']
+  ];
+  const expectedResult = [
+    ['Props', 'meta | description', ''],
+    ['Props', 'meta', '']
+  ];
 
   const result = stripSummaryPropsContent(stripTrue, mockedData);
 

package/tests/unit/src/components/DataSummary/mockData.js

@@ -3,7 +3,10 @@ import { generateSingleItemQuery } from '../../../../../src/application/query';
 const propsDataSummary = {
   elementTitle: 'test-title',
   modifier: 'mod',
-  summaryPropsWithContent: [['first', 'something', '', ''], ['second', 'other thing', '', '']],
+  summaryPropsWithContent: [
+    ['first', 'something', '', ''],
+    ['second', 'other thing', '', '']
+  ],
   propsToDisplayModifiers: []
 };
 

package/tests/unit/src/components/Image/ImageFactory.test.js

@@ -73,9 +73,10 @@ describe('ImageFactory component', () => {
   });
 
   it('should render image', async () => {
-    const { asFragment } = await setupTest({}, MOCK_BASIC);
-
-    await waitFor(() => expect(asFragment()).toBeDefined(), options);
+    const { asFragment, container } = await setupTest({ imageId: 'test-id' }, MOCK_BASIC);
+    await waitFor(() => {
+      expect(container.childNodes.length).toBe(1);
+    });
     expect(asFragment()).toMatchSnapshot();
   });
 

package/tests/unit/src/components/ItemList/ItemListCounter.test.js

@@ -44,7 +44,6 @@ const mocks = [
 ];
 
 const buttonRole = 'button';
-const router = useRouter();
 
 describe('ItemListCounter component', () => {
   beforeEach(() => {
@@ -52,6 +51,8 @@ describe('ItemListCounter component', () => {
   });
 
   it('should display listItem count and route to url', async () => {
+    const router = useRouter(); // Move the useRouter call here
+
     const { asFragment, getByRole, getByText } = render(
       <MockedProvider mocks={mocks}>
         <ItemListCounter {...props} />

package/tests/unit/src/components/ItemList/hooks/use-item-list-id.test.js

@@ -1,7 +1,7 @@
 /**
  * @jest-environment jsdom
  */
-import { renderHook, act } from '@testing-library/react-hooks';
+import { renderHook, act } from '@testing-library/react';
 import useItemListId from '../../../../../../src/components/ItemList/hooks/use-item-list-id';
 import getItemListId from '../../../../../../src/components/ItemList/helpers/get-item-list-id';
 

package/tests/unit/src/components/Layout/LayoutFactory.test.js

@@ -23,10 +23,6 @@ const testId = 'child-test-id';
 describe('LayoutFactoriy component', () => {
   const props = { someProps: true, children: <div data-testid={testId} /> };
 
-  it('should be defined', () => {
-    expect(Layout).toBeDefined();
-  });
-
   it('should render Layout component', () => {
     const { getByTestId } = render(<Layout {...props} />);
     expect(getByTestId(defaultComponentTestId)).toBeDefined();

package/tests/unit/src/components/List/components/Cards/CardsRender.test.js

@@ -2,19 +2,26 @@
  * @jest-environment jsdom
  */
 import '@testing-library/jest-dom/extend-expect';
+import { useRouter } from 'next/router';
 import { render } from '@blaze-cms/tools/test-helpers/test-functions';
 import CardsRender from '../../../../../../../src/components/List/components/Cards';
 import { MOCKED_LIST_OPTIONS } from '../mocks';
 
 jest.mock('@blaze-cms/utils-handlebars', () => ({
-  useStringTemplate: jest.fn((parent, [title]) => ({ loadig: false, data: [title] }))
+  useStringTemplate: jest.fn((_, [title]) => ({ loadig: false, data: [title] }))
 }));
 
 jest.mock('../../../../../../../src/hooks', () => ({
   useGetImages: jest.fn(() => ({ data: {}, loading: false }))
 }));
 
+jest.mock('react', () => ({
+  ...jest.requireActual('react'),
+  useContext: () => ({ itemId: 'contextItemId', isPreview: false })
+}));
+
 describe('CardsRender component', () => {
+  useRouter();
   it('should render based on listData received', async () => {
     const { asFragment } = await render(CardsRender, MOCKED_LIST_OPTIONS);
     expect(asFragment()).toMatchSnapshot();

package/tests/unit/src/components/List/components/Pagination/Classic.test.js

@@ -15,7 +15,7 @@ const mockedOptions = {
 
 describe('Classic pagination component', () => {
   it('should render based on props passed', async () => {
-    const { asFragment } = await render(Classic, { ...mockedOptions, isInfinite: true });
+    const { asFragment } = render(Classic, { ...mockedOptions, isInfinite: true });
     expect(asFragment()).toMatchSnapshot();
   });
 });

package/tests/unit/src/components/PlaceholderIcon/index.test.js

@@ -3,8 +3,8 @@
  */
 import { render } from '@blaze-cms/tools/test-helpers/test-functions';
 
-import PlaceholderIcon from '../../../../../../blaze-plugin-page-builder-ui/src/components/EditorView/PlaceholderIcon';
-import { CardIcon } from '../../../../../../blaze-plugin-page-builder-ui/src/Icons';
+import { CardIcon } from '@blaze-cms/plugin-page-builder-ui/src/Icons';
+import PlaceholderIcon from '@blaze-cms/plugin-page-builder-ui/src/components/EditorView/PlaceholderIcon';
 
 const mockedProps = {
   type: 'card',

package/tests/unit/src/components/SearchFilter/components/Range.test.js

@@ -38,14 +38,14 @@ describe('Range component', () => {
     const component = await getMockedProvider(Range, {
       props: { ...getMockedProps() }
     });
-    expect(component.toJSON()).toMatchSnapshot();
+    expect(component).toMatchSnapshot();
   });
 
   it('should match snapshot with interval', async () => {
     const component = await getMockedProvider(Range, {
       props: { ...getMockedProps({ rangeInterval: 5 }) }
     });
-    expect(component.toJSON()).toMatchSnapshot();
+    expect(component).toMatchSnapshot();
   });
 
   it('should match snapshot large values formatted correctly', async () => {
@@ -69,7 +69,7 @@ describe('Range component', () => {
     const component = await getMockedProvider(Range, {
       props: { ...mockedProps }
     });
-    expect(component.toJSON()).toMatchSnapshot();
+    expect(component).toMatchSnapshot();
   });
 
   it('should match snapshot with interval and rounded min & max values', async () => {
@@ -93,7 +93,7 @@ describe('Range component', () => {
     const component = await getMockedProvider(Range, {
       props: { ...mockedProps }
     });
-    expect(component.toJSON()).toMatchSnapshot();
+    expect(component).toMatchSnapshot();
   });
 
   it('should match snapshot with adjusted min & max values based on interval', async () => {
@@ -117,6 +117,6 @@ describe('Range component', () => {
     const component = await getMockedProvider(Range, {
       props: { ...mockedProps }
     });
-    expect(component.toJSON()).toMatchSnapshot();
+    expect(component).toMatchSnapshot();
   });
 });

package/tests/unit/src/components/SearchFilter/components/__snapshots__/Range.test.js.snap

@@ -1,251 +1,236 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Range component should match snapshot 1`] = `
-Array [
-  "",
+<div
+  className="form-field form-field--range "
+>
+  <label
+    className=""
+  >
+    GLabel
+  </label>
+  <div
+    className="values"
+  >
+    <span>
+      0
+    </span>
+    <span>
+      6600
+    </span>
+  </div>
   <div
-    className="form-field form-field--range "
+    className="range__filter name"
+    id="nameRange"
+    max={6600}
+    max-value={6600}
+    min={0}
+    min-value={0}
+    step={100}
   >
-    <label
-      className=""
+    <div
+      className="range__filter--left"
     >
-      GLabel
-    </label>
+      <span />
+    </div>
     <div
-      className="values"
+      className="range__filter--right"
     >
-      <span>
-        0
-      </span>
-      <span>
-        6600
-      </span>
+      <span />
     </div>
     <div
-      className="range__filter name"
-      id="nameRange"
-      max={6600}
-      max-value={6600}
-      min={0}
-      min-value={0}
-      step={100}
+      className="range__filter--line"
     >
-      <div
-        className="range__filter--left"
-      >
-        <span />
-      </div>
-      <div
-        className="range__filter--right"
-      >
-        <span />
-      </div>
-      <div
-        className="range__filter--line"
-      >
-        <span />
-      </div>
+      <span />
     </div>
-  </div>,
-]
+  </div>
+</div>
 `;
 
 exports[`Range component should match snapshot large values formatted correctly 1`] = `
-Array [
-  "",
+<div
+  className="form-field form-field--range "
+>
+  <label
+    className=""
+  >
+    GLabel
+  </label>
   <div
-    className="form-field form-field--range "
+    className="values"
   >
-    <label
-      className=""
+    <span>
+      9999
+    </span>
+    <span>
+      10,000
+    </span>
+  </div>
+  <div
+    className="range__filter name"
+    id="nameRange"
+    max={10000}
+    max-value={10000}
+    min={9995}
+    min-value={9999}
+    step={1}
+  >
+    <div
+      className="range__filter--left"
     >
-      GLabel
-    </label>
+      <span />
+    </div>
     <div
-      className="values"
+      className="range__filter--right"
     >
-      <span>
-        9999
-      </span>
-      <span>
-        10,000
-      </span>
+      <span />
     </div>
     <div
-      className="range__filter name"
-      id="nameRange"
-      max={10000}
-      max-value={10000}
-      min={9995}
-      min-value={9999}
-      step={1}
+      className="range__filter--line"
     >
-      <div
-        className="range__filter--left"
-      >
-        <span />
-      </div>
-      <div
-        className="range__filter--right"
-      >
-        <span />
-      </div>
-      <div
-        className="range__filter--line"
-      >
-        <span />
-      </div>
+      <span />
     </div>
-  </div>,
-]
+  </div>
+</div>
 `;
 
 exports[`Range component should match snapshot with adjusted min & max values based on interval 1`] = `
-Array [
-  "",
+<div
+  className="form-field form-field--range "
+>
+  <label
+    className=""
+  >
+    GLabel
+  </label>
+  <div
+    className="values"
+  >
+    <span>
+      7
+    </span>
+    <span>
+      8
+    </span>
+  </div>
   <div
-    className="form-field form-field--range "
+    className="range__filter name"
+    id="nameRange"
+    max={8}
+    max-value={8}
+    min={6}
+    min-value={7}
+    step={1}
   >
-    <label
-      className=""
+    <div
+      className="range__filter--left"
     >
-      GLabel
-    </label>
+      <span />
+    </div>
     <div
-      className="values"
+      className="range__filter--right"
     >
-      <span>
-        7
-      </span>
-      <span>
-        8
-      </span>
+      <span />
     </div>
     <div
-      className="range__filter name"
-      id="nameRange"
-      max={8}
-      max-value={8}
-      min={6}
-      min-value={7}
-      step={1}
+      className="range__filter--line"
     >
-      <div
-        className="range__filter--left"
-      >
-        <span />
-      </div>
-      <div
-        className="range__filter--right"
-      >
-        <span />
-      </div>
-      <div
-        className="range__filter--line"
-      >
-        <span />
-      </div>
+      <span />
     </div>
-  </div>,
-]
+  </div>
+</div>
 `;
 
 exports[`Range component should match snapshot with interval 1`] = `
-Array [
-  "",
+<div
+  className="form-field form-field--range "
+>
+  <label
+    className=""
+  >
+    GLabel
+  </label>
   <div
-    className="form-field form-field--range "
+    className="values"
   >
-    <label
-      className=""
+    <span>
+      0
+    </span>
+    <span>
+      6600
+    </span>
+  </div>
+  <div
+    className="range__filter name"
+    id="nameRange"
+    max={6600}
+    max-value={6600}
+    min={0}
+    min-value={0}
+    step={100}
+  >
+    <div
+      className="range__filter--left"
     >
-      GLabel
-    </label>
+      <span />
+    </div>
     <div
-      className="values"
+      className="range__filter--right"
     >
-      <span>
-        0
-      </span>
-      <span>
-        6600
-      </span>
+      <span />
     </div>
     <div
-      className="range__filter name"
-      id="nameRange"
-      max={6600}
-      max-value={6600}
-      min={0}
-      min-value={0}
-      step={100}
+      className="range__filter--line"
     >
-      <div
-        className="range__filter--left"
-      >
-        <span />
-      </div>
-      <div
-        className="range__filter--right"
-      >
-        <span />
-      </div>
-      <div
-        className="range__filter--line"
-      >
-        <span />
-      </div>
+      <span />
     </div>
-  </div>,
-]
+  </div>
+</div>
 `;
 
 exports[`Range component should match snapshot with interval and rounded min & max values 1`] = `
-Array [
-  "",
+<div
+  className="form-field form-field--range "
+>
+  <label
+    className=""
+  >
+    GLabel
+  </label>
+  <div
+    className="values"
+  >
+    <span>
+      15.5
+    </span>
+    <span>
+      49.5
+    </span>
+  </div>
   <div
-    className="form-field form-field--range "
+    className="range__filter name"
+    id="nameRange"
+    max={50}
+    max-value={49.5}
+    min={15}
+    min-value={15.5}
+    step={1}
   >
-    <label
-      className=""
+    <div
+      className="range__filter--left"
     >
-      GLabel
-    </label>
+      <span />
+    </div>
     <div
-      className="values"
+      className="range__filter--right"
     >
-      <span>
-        15.5
-      </span>
-      <span>
-        49.5
-      </span>
+      <span />
     </div>
     <div
-      className="range__filter name"
-      id="nameRange"
-      max={50}
-      max-value={49.5}
-      min={15}
-      min-value={15.5}
-      step={1}
+      className="range__filter--line"
     >
-      <div
-        className="range__filter--left"
-      >
-        <span />
-      </div>
-      <div
-        className="range__filter--right"
-      >
-        <span />
-      </div>
-      <div
-        className="range__filter--line"
-      >
-        <span />
-      </div>
+      <span />
     </div>
-  </div>,
-]
+  </div>
+</div>
 `;

package/tests/unit/src/components/SearchFilter/helpers/get-select-options.test.js

@@ -14,7 +14,10 @@ describe('get select options', () => {
       propsToDisplay
     );
     expect(Array.isArray(selectOptions)).toBeTruthy();
-    expect(selectOptions).toEqual([['priceUsd', '$'], ['priceEur', '€']]);
+    expect(selectOptions).toEqual([
+      ['priceUsd', '$'],
+      ['priceEur', '€']
+    ]);
   });
 
   it('should return empty array if entitySchema has no content', () => {
@@ -28,7 +31,10 @@ describe('get select options', () => {
         { dynamicProperties: { pricePound: { unit: '£' }, priceEur: { unit: '€' } } },
         dynamicPropsToDisplay
       )
-    ).toEqual([['pricePound', '£'], ['priceEur', '€']]);
+    ).toEqual([
+      ['pricePound', '£'],
+      ['priceEur', '€']
+    ]);
   });
 
   it('should return dynamic properties when no properties are provided', () => {

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

@@ -6,7 +6,7 @@ import { render } from '@blaze-cms/tools/test-helpers/test-functions';
 import TextBlock from '../../../../../src/components/TextBlock';
 
 jest.mock('@blaze-cms/utils-handlebars', () => ({
-  useStringTemplate: jest.fn((parent, [title]) => ({ loadig: false, data: [title] }))
+  useStringTemplate: jest.fn((_, [title]) => ({ loadig: false, data: [title] }))
 }));
 
 const { setEnvs, deleteEnvs } = require('@blaze-cms/tools/test-helpers/test-files/test-env');