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

package/src/variants/ThumbnailCarousel/index.js

@@ -4,8 +4,8 @@ const ThumbnailCarousel = {
   getSettings: componentSettings => ({
     ...componentSettings
   }),
-  VariantComponent: dynamic(() =>
-    import(/* webpackChunkName: "blazePbVariantThumbnailCarousel" */ './ThumbnailCarousel')
+  VariantComponent: dynamic(
+    () => import(/* webpackChunkName: "blazePbVariantThumbnailCarousel" */ './ThumbnailCarousel')
   )
 };
 

package/tests/unit/src/HOC/withTitle.test.js

@@ -3,7 +3,7 @@
  */
 import React from 'react';
 import '@testing-library/jest-dom/extend-expect';
-import { shallow } from 'enzyme';
+import { render } from '@testing-library/react';
 import { withTitle } from '../../../../src/HOC';
 
 jest.mock('@blaze-cms/utils-handlebars', () => ({
@@ -15,36 +15,26 @@ const MockComponent = () => <div>MockedComponent</div>;
 describe('withTitle HOC', () => {
   it('should return h2 based on elementTitle prop', () => {
     const WrappedComponent = withTitle(MockComponent);
-    const shallowWrapper = shallow(<WrappedComponent />);
-    const children = shallowWrapper.prop('children');
-
-    expect(children.length).toBe(2);
-
-    const [firstChild, secondChild] = children;
-
-    expect(firstChild).toBe('');
-    expect(secondChild.type).toBe(MockComponent);
-
     const titleProp = 'test title';
-    const wrapperWithTitle = shallow(<WrappedComponent elementTitle={titleProp} />);
-    const [, secondChildWithTitle] = wrapperWithTitle.prop('children');
+    const { getByText } = render(<WrappedComponent elementTitle={titleProp} />);
 
-    expect(wrapperWithTitle.text()).toContain(titleProp);
-    expect(secondChildWithTitle.type).toBe(MockComponent);
+    expect(getByText('test title')).toBeInTheDocument();
+    expect(getByText('MockedComponent')).toBeInTheDocument();
   });
 
   it('should not display h2 if elementTitle is empty', () => {
     const WrappedComponent = withTitle(MockComponent);
     const blankTitle = '';
-    const wrapperWithTitle = shallow(<WrappedComponent elementTitle={blankTitle} />);
-
-    expect(wrapperWithTitle.find('.h2').length).toBe(0);
+    const { container } = render(<WrappedComponent elementTitle={blankTitle} />);
+    const header = container.querySelector('h2');
+    expect(header).toEqual(null);
   });
+
   it('should not display title if isHeroImg prop is true', () => {
     const WrappedComponent = withTitle(MockComponent);
     const blankTitle = '';
-    const wrapperWithTitle = shallow(<WrappedComponent elementTitle={blankTitle} isHeroImg />);
-
-    expect(wrapperWithTitle.find('.h2').length).toBe(0);
+    const { container } = render(<WrappedComponent elementTitle={blankTitle} isHeroImg />);
+    const header = container.querySelector('h2');
+    expect(header).toEqual(null);
   });
 });

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

@@ -25,7 +25,8 @@ describe('Layout component', () => {
   beforeAll(() =>
     useGetImages.mockImplementation(() => ({
       data: {}
-    })));
+    }))
+  );
 
   beforeEach(async () => {
     component = await getMockedProvider(Layout, {

package/tests/unit/src/Layout/helpers/check-if-row-has-columns.test.js

@@ -8,6 +8,7 @@ import { ROW, COLUMN } from '../../../../../src/components/Layout/constants';
 
 describe('checkIfRowHasColumns function', () => {
   const REACT_CHILDREN_WITH_COLUMN = [false, [<image id="1" component={{ type: 'column' }} />]];
+
   const ELEMENT_WITH_COLUMN = <element>{REACT_CHILDREN_WITH_COLUMN}</element>;
   const rowWithColumnChildren = checkIfRowHasColumns(ROW, ELEMENT_WITH_COLUMN);
 

package/tests/unit/src/components/Banner/AdSlotRender.test.js

@@ -23,7 +23,10 @@ const slotTestId = 'adslot-test';
 const sizeMapping = [
   {
     viewport: [970, 250],
-    sizes: [[970, 250], [970, 528]]
+    sizes: [
+      [970, 250],
+      [970, 528]
+    ]
   },
   {
     viewport: [320, 100],

package/tests/unit/src/components/Banner/helpers.test.js

@@ -116,15 +116,24 @@ describe('buildBannerSizes helper', () => {
   it('should return an array of sizes based on given sizeId', () => {
     const parsedSizes = buildBannerSizes(
       'sizeId',
-      [{ width: 300, height: 250 }, { width: 50, height: 50 }],
+      [
+        { width: 300, height: 250 },
+        { width: 50, height: 50 }
+      ],
       undefined
     );
-    expect(parsedSizes).toEqual([[300, 250], [50, 50]]);
+    expect(parsedSizes).toEqual([
+      [300, 250],
+      [50, 50]
+    ]);
   });
 
   it('should return an array of sizes based on given sizes string', () => {
     const parsedSizes = buildBannerSizes(undefined, {}, '320x180,1x1');
-    expect(parsedSizes).toEqual([[320, 180], [1, 1]]);
+    expect(parsedSizes).toEqual([
+      [320, 180],
+      [1, 1]
+    ]);
   });
 });
 
@@ -203,18 +212,36 @@ describe('buildSizeMapping helper', () => {
       {
         width: 300,
         height: 250,
-        viewports: [{ width: 1024, height: 768 }, { width: 900, height: 768 }]
+        viewports: [
+          { width: 1024, height: 768 },
+          { width: 900, height: 768 }
+        ]
       },
       { width: 210, height: 60, viewports: [{ width: 900, height: 768 }] }
     ]);
     expect(sizeMappingEmpty).toEqual([
-      { viewport: [1024, 768], sizes: [[728, 90], [300, 250]] },
-      { viewport: [900, 768], sizes: [[300, 250], [210, 60]] }
+      {
+        viewport: [1024, 768],
+        sizes: [
+          [728, 90],
+          [300, 250]
+        ]
+      },
+      {
+        viewport: [900, 768],
+        sizes: [
+          [300, 250],
+          [210, 60]
+        ]
+      }
     ]);
   });
 
   it('should return empty size if a size dimension is falsey', () => {
-    const viewports = [{ width: 1024, height: 768 }, { width: 768, height: null }];
+    const viewports = [
+      { width: 1024, height: 768 },
+      { width: 768, height: null }
+    ];
     const otherViewports = [{ width: 600, height: null }];
     const expectedSizes = [[300, 250]];
     const sizeMappingEmpty = buildSizeMapping('id', [

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

@@ -6,7 +6,7 @@ import { render, waitFor, act } from '@testing-library/react';
 import '@testing-library/jest-dom/extend-expect';
 import { MainContext } from '@blaze-cms/nextjs-components';
 import BlazeLink from '../../../../src/components/BlazeLink';
-
+// TODO fix breaking test
 const mockedProps = {
   children: <div>child div</div>,
   href: '/test-href',
@@ -41,13 +41,10 @@ describe('BlazeLink component', () => {
     await waitFor(() => {
       expect(asFragment()).toMatchSnapshot();
     });
-
-    await act(() => promise);
   });
 
   it('should use default props value when hasGTM is set to false', async () => {
     const promise = Promise.resolve();
-
     const { getByRole } = await renderWithContext();
 
     await waitFor(() => {

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

@@ -14,6 +14,9 @@ exports[`Breadcrumb component should match snapshot 1`] = `
         <a
           aria-label="Home"
           href="/"
+        />
+        <a
+          href="/"
         >
           Home
         </a>
@@ -21,6 +24,9 @@ exports[`Breadcrumb component should match snapshot 1`] = `
       <li
         class="breadcrumb__item"
       >
+        <a
+          href="/Resolver"
+        />
         <a />
       </li>
     </ul>
@@ -42,6 +48,9 @@ exports[`Breadcrumb component should not render if loading, err or no data exist
         <a
           aria-label="Home"
           href="/"
+        />
+        <a
+          href="/"
         >
           Home
         </a>
@@ -49,6 +58,9 @@ exports[`Breadcrumb component should not render if loading, err or no data exist
       <li
         class="breadcrumb__item"
       >
+        <a
+          href="/Resolver"
+        />
         <a />
       </li>
     </ul>
@@ -70,6 +82,9 @@ exports[`Breadcrumb component should render 1`] = `
         <a
           aria-label="Home"
           href="/"
+        />
+        <a
+          href="/"
         >
           Home
         </a>
@@ -77,6 +92,9 @@ exports[`Breadcrumb component should render 1`] = `
       <li
         class="breadcrumb__item"
       >
+        <a
+          href="/Resolver"
+        />
         <a />
       </li>
     </ul>

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

@@ -4,10 +4,16 @@
 import React from 'react';
 import { render as _render, act, waitFor, screen } from '@testing-library/react';
 import '@testing-library/jest-dom/extend-expect';
+import { useRouter } from 'next/router';
 import { setEnvs, deleteEnvs } from '@blaze-cms/tools/test-helpers/test-files/test-env';
 import Card from '../../../../../src/components/Card/Card';
 import { pageBuilderComponentsMocks } from './mockData';
 
+jest.mock('react', () => ({
+  ...jest.requireActual('react'),
+  useContext: () => ({ itemId: 'contextItemId', isPreview: false })
+}));
+
 const render = async (Component, props) => {
   let renderResults;
 
@@ -27,7 +33,9 @@ const propsToDisplay = [
     htmlAttribute: 'data-testid'
   }
 ];
-const getMockedParsedProp = children => <>{children}</>;
+const getMockedParsedProp = children => {
+  children;
+};
 const firstPropValue = 'some description';
 const secondPropValue = 'extra props';
 const firstPropToDisplay = getMockedParsedProp(['', '', firstPropValue, '', '']);
@@ -66,11 +74,16 @@ const preHeaderName = 'Pre header';
 const alternativeHeadline = 'Alternative headline';
 
 // eslint-disable-next-line react/prop-types
-jest.mock('../../../../../src/components/LazyImage', () => ({ src, alt }) => (
-  <img src={src} alt={alt} />
-));
+jest.mock(
+  '../../../../../src/components/LazyImage',
+  () =>
+    function ({ src, alt }) {
+      return <img src={src} alt={alt} />;
+    }
+);
 
 describe('Card component', () => {
+  const router = useRouter();
   it('should render without throwing an error and match snapshot', async () => {
     const { asFragment, getByTestId } = await render(Card, componentProps);
     expect(getByTestId(encodeURIComponent(firstPropValue))).toBeDefined();

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"
   >