@blaze-cms/react-page-builder 0.146.0-core-styles.44 → 0.146.0-node18.1

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

@@ -3,7 +3,7 @@
  */
 import React from 'react';
 import { render, act, waitFor } from '@testing-library/react';
-
+import { useRouter } from 'next/router';
 import '@testing-library/jest-dom/extend-expect';
 import CardsContainer from '../../../../../src/components/Card/CardsContainer';
 import { cardDataMockedOptions } from './mockData';
@@ -12,6 +12,11 @@ jest.mock('@blaze-cms/utils-handlebars', () => ({
   useStringTemplate: jest.fn((parent, [title]) => ({ loadig: false, data: [title] }))
 }));
 
+jest.mock('react', () => ({
+  ...jest.requireActual('react'),
+  useContext: () => ({ itemId: 'contextItemId', isPreview: false })
+}));
+
 // eslint-disable-next-line react/prop-types
 jest.mock('../../../../../src/components/LazyImage', () => () => null);
 
@@ -30,6 +35,7 @@ const renderComponent = async props => {
 };
 
 describe('CardsContainer component', () => {
+  useRouter();
   it('should render without throwing error and match snapshot', async () => {
     const { asFragment } = await renderComponent({
       ...cardDataMockedOptions,

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

@@ -38,6 +38,9 @@ exports[`Card component should not render alternative headline if alternativePre
           <a
             aria-label="mock name"
             href="/mockurl"
+          />
+          <a
+            href="/mockurl"
           >
             mock name
           </a>
@@ -109,6 +112,9 @@ exports[`Card component should not render alternative headline if displayCategor
           <a
             aria-label="mock name"
             href="/mockurl"
+          />
+          <a
+            href="/mockurl"
           >
             mock name
           </a>
@@ -187,6 +193,9 @@ exports[`Card component should not render preHeader if alternativeHeadline is no
           <a
             aria-label="mock name"
             href="/mockurl"
+          />
+          <a
+            href="/mockurl"
           >
             mock name
           </a>
@@ -263,6 +272,9 @@ exports[`Card component should render customPreheader and alternativeHeadline in
           <a
             aria-label="Alternative headline"
             href="/mockurl"
+          />
+          <a
+            href="/mockurl"
           >
             Alternative headline
           </a>
@@ -424,6 +436,9 @@ 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>

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

@@ -43,6 +43,9 @@ 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>
@@ -82,6 +85,9 @@ 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>
@@ -135,6 +141,9 @@ 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>
@@ -174,6 +183,9 @@ 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/Card/mockData.js

@@ -4,8 +4,7 @@ const cardDataMockedOptions = {
       name: 'Swan 78',
       url: '/nautors-swan/swan-78',
       image: {
-        url:
-          'https://cdn-events.boatinternational.com/files/2020/04/2506afd0-879a-11ea-aab3-6d01477a82d7-180807_esk_0267.jpg',
+        url: 'https://cdn-events.boatinternational.com/files/2020/04/2506afd0-879a-11ea-aab3-6d01477a82d7-180807_esk_0267.jpg',
         data: {
           altText: 'Swan 78 | Exterior',
           caption: ''
@@ -25,8 +24,7 @@ const cardDataMockedOptions = {
       url: '/nautors-swan/swan-98',
       arrowSize: 14,
       image: {
-        url:
-          'https://cdn-events.boatinternational.com/files/2020/04/2f8c4030-879c-11ea-aab3-6d01477a82d7-Swan 98 - 1.jpg',
+        url: 'https://cdn-events.boatinternational.com/files/2020/04/2f8c4030-879c-11ea-aab3-6d01477a82d7-Swan 98 - 1.jpg',
         data: {
           altText: 'Swan 98 | Exterior',
           caption: ''

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

@@ -3,71 +3,72 @@
  */
 import React from 'react';
 import '@testing-library/jest-dom/extend-expect';
-import { shallow } from 'enzyme';
-import CarouselImage from '../../../../../../src/components/Carousel/CarouselImage';
+import { useRouter } from 'next/router';
+import { render, waitFor } from '@testing-library/react';
+import { MockedRoot } from '@blaze-cms/tools/test-helpers/test-functions';
+import { MOCK_BASIC, MOCK_RELATION } from '../../Image/mocks';
 import CarouselRender from '../../../../../../src/components/Carousel/CarouselRender';
-
+// TODO fix test breaking
 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('react', () => ({
+  ...jest.requireActual('react'),
+  useContext: () => ({ isPreview: false })
 }));
 
-const mockedProps = {
+const getMockedProps = overrides => ({
   imageIds: ['test-id', 'test-altText', 'test-caption'],
   displayCount: true,
   enableLightbox: true,
   toggleModal: jest.fn(),
   handleSelectedImage: jest.fn(),
-  shouldDisplayCount: true,
-  shouldDisplayCaption: true,
-  direction: {
-    next: true,
-    back: false
-  },
-  handleNavigation: jest.fn()
-};
+  ...overrides
+});
 
 describe('CarouselRender component', () => {
-  let wrapper;
+  const router = useRouter();
+  const mockedProps = getMockedProps();
 
-  beforeAll(() => {
-    wrapper = shallow(<CarouselRender.WrappedComponent {...mockedProps} />);
-  });
-
-  it('should be defined and render without throwing error', () => {
-    expect(CarouselRender).toBeDefined();
-    expect(typeof CarouselRender).toEqual('function');
-  });
+  it('should render one image button if there is one image to display', async () => {
+    const overrides = { imageIds: ['test1'] };
+    const { getByText } = render(
+      <MockedRoot mocks={MOCK_BASIC}>
+        <CarouselRender {...mockedProps} {...overrides} />
+      </MockedRoot>
+    );
 
-  it('should match snapshot', async () => {
-    const component = shallow(<CarouselRender {...mockedProps} />);
-    expect(component).toMatchSnapshot();
+    await waitFor(() => {
+      expect(getByText('1 image')).toBeInTheDocument();
+    });
   });
 
-  it('should render number count if there are images to display and show count is enabled', () => {
-    expect(wrapper.find('p').length).toEqual(1);
-  });
+  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 { getByText } = render(
+      <MockedRoot mocks={MOCK_RELATION}>
+        <CarouselRender {...mockedProps} {...overrides} />
+      </MockedRoot>
+    );
 
-  it('should render the right amount of images to display', () => {
-    expect(wrapper.find(CarouselImage).length).toEqual(3);
+    await waitFor(() => {
+      expect(getByText('2 images')).toBeInTheDocument();
+    });
   });
 
-  it('should not render number count if display count is disabled', () => {
-    const overrides = { shouldDisplayCount: false };
-    const wrapperCountDisabled = shallow(
-      <CarouselRender.WrappedComponent {...mockedProps} {...overrides} />
+  it('should not render number count if display count is disabled', async () => {
+    const overrides = { displayCount: false };
+    const { asFragment, container } = render(
+      <MockedRoot mocks={MOCK_BASIC}>
+        <CarouselRender {...mockedProps} {...overrides} />
+      </MockedRoot>
     );
-    expect(wrapperCountDisabled.find('p').length).toEqual(0);
-  });
-
-  it('should not display number count after clicking previous image', () => {
-    const wrapperPrevClick = shallow(<CarouselRender.WrappedComponent {...mockedProps} />);
-    wrapperPrevClick.find('div.carousel__button--previous').simulate('click');
-    expect(mockedProps.handleNavigation).toHaveBeenCalledWith(mockedProps.direction.back);
-  });
 
-  it('should not display number count after clicking next image', () => {
-    const wrapperNextClick = shallow(<CarouselRender.WrappedComponent {...mockedProps} />);
-    wrapperNextClick.find('div.carousel__button--next').simulate('click');
-    expect(mockedProps.handleNavigation).toHaveBeenCalledWith(mockedProps.direction.next);
+    await waitFor(() => {
+      const countDisplay = container.querySelector('p');
+      expect(countDisplay).toBe(null);
+      expect(asFragment()).toMatchSnapshot();
+    });
   });
 });

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

@@ -1,3 +1,47 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`CarouselRender component should match snapshot 1`] = `ShallowWrapper {}`;
+exports[`CarouselRender component should not render number count if display count is disabled 1`] = `
+<DocumentFragment>
+  <div
+    class="carousel"
+  >
+    <div>
+      <div
+        class="carousel__button carousel__button--previous"
+        role="button"
+      >
+        <div
+          class="arrow arrow--left"
+        />
+      </div>
+      <div
+        class="carousel__list"
+      >
+        <div
+          class="carousel__slide"
+        >
+          <div />
+        </div>
+        <div
+          class="carousel__slide"
+        >
+          <div />
+        </div>
+        <div
+          class="carousel__slide"
+        >
+          <div />
+        </div>
+      </div>
+      <div
+        class="carousel__button carousel__button--next"
+        role="button"
+      >
+        <div
+          class="arrow arrow--right"
+        />
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;

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"
         >
-          <span />
+          <div />
         </div>
       </div>
       <div

package/tests/unit/src/components/ContentGroup/ContentGroupTabs.test.js

@@ -13,7 +13,10 @@ const mockedProps = {
   name: 'testTabs',
   contentType: 'tab',
   groupSections: [<div>section one</div>, <div>section two</div>],
-  sectionsData: [['section-one', 'sectionOne'], ['section-two', 'sectionTwo']]
+  sectionsData: [
+    ['section-one', 'sectionOne'],
+    ['section-two', 'sectionTwo']
+  ]
 };
 
 describe('ContentGroupTabs component', () => {

package/tests/unit/src/components/ContentGroup/helpers/get-sections-data.test.js

@@ -15,7 +15,10 @@ describe('getSectionsData helper', () => {
   it('should return section name and label', () => {
     const match = getSectionsData(mockedSections);
 
-    expect(match).toEqual([['nameone', 'labelonne'], ['nameTwo', 'labelTwo']]);
+    expect(match).toEqual([
+      ['nameone', 'labelonne'],
+      ['nameTwo', 'labelTwo']
+    ]);
   });
 
   it('should return section name and label propertly formated when spaces are present', () => {

package/tests/unit/src/components/DataSummary/__snapshots__/DataSummaryRender.test.js.snap

@@ -4,7 +4,6 @@ exports[`DataSummaryRender component should render without throwing an error 1`]
 <div
   className="stats"
 >
-  
   <div
     className="stats__wrapper"
   >

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