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

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
@@ -64,12 +64,26 @@ exports[`Carousel component should render image fetching data from relation 1`]
         <div
           class="carousel__slide"
         >
-          <span />
+          <span>
+            <img
+              alt="Carousel image"
+              aria-label="View Image"
+              role="button"
+              src="test-url"
+            />
+          </span>
         </div>
         <div
           class="carousel__slide"
         >
-          <span />
+          <span>
+            <img
+              alt="Carousel image"
+              aria-label="View Image"
+              role="button"
+              src="test-url"
+            />
+          </span>
         </div>
       </div>
       <div

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>',

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

@@ -1,13 +1,15 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`EmailConfirm component should render children if token is in url and mutation is successfull 1`] = `<DocumentFragment />`;
 
 exports[`EmailConfirm component should render with error if no token is in url 1`] = `
 <DocumentFragment>
-  <span
-    class="error-modifier"
-  >
-    something went wrong
-  </span>
+  <div>
+    <span
+      class="error-modifier"
+    >
+      something went wrong
+    </span>
+  </div>
 </DocumentFragment>
 `;

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

@@ -19,6 +19,11 @@ jest.mock('next/router', () => ({
   useRouter: () => ({ asPath: '/' })
 }));
 
+// todo: add extra tests to support this util
+jest.mock('../../../../../src/components/MenuItem/helpers/has-active-child', () =>
+  jest.fn(() => false)
+);
+
 const componentProps = {
   id: 'id',
   name: 'mock name',

package/tests/unit/src/components/MenuItem/MenuItemRender.test.js

@@ -11,14 +11,22 @@ const MENU_ITEM_CHILDREN_CLASS = 'menu--item-children';
 
 let mockAsPathValue = '/';
 
-jest.mock('next/router', () => ({
-  useRouter: () => ({ asPath: mockAsPathValue })
-}));
+jest.mock('next/router', () => {
+  const router = { asPath: mockAsPathValue };
+  return {
+    useRouter: () => router
+  };
+});
 
 jest.mock('@blaze-cms/utils-handlebars', () => ({
   useStringTemplate: jest.fn((parent, [title]) => ({ loading: false, data: [title] }))
 }));
 
+// todo: add extra tests to support this util
+jest.mock('../../../../../src/components/MenuItem/helpers/has-active-child', () =>
+  jest.fn(() => false)
+);
+
 describe('MenuRender component', () => {
   it('renders menu item with link when URL is provided', () => {
     const { getByText } = render(<MenuRender eventType="click" text="Home" url="/home" />);
@@ -95,11 +103,11 @@ describe('MenuRender component', () => {
     const chevronIcon = container.querySelector('.menu--item--link--icon');
     expect(chevronIcon).toBeInTheDocument();
 
-    chevronIcon.click();
+    fireEvent.click(chevronIcon);
     childContainer = container.querySelector(`.${MENU_ITEM_CHILDREN_CLASS}`);
     expect(childContainer).not.toHaveClass('hidden');
 
-    chevronIcon.click();
+    fireEvent.click(chevronIcon);
     childContainer = container.querySelector(`.${MENU_ITEM_CHILDREN_CLASS}`);
     expect(childContainer).toHaveClass('hidden');
   });

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

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`MenuItem component should render a MenuItem based on passed parameters 1`] = `
 <DocumentFragment>
@@ -39,7 +39,7 @@ exports[`MenuItem component should render a MenuItem based on passed parameters
     >
       <div
         class="child_1"
-        component="[object Object]"
+        data-component="{\\"type\\":\\"menuitem\\"}"
       >
         menu child
       </div>

package/tests/unit/src/components/MenuItem/helpers/constants.js

@@ -0,0 +1,73 @@
+export const mockMenuProps = {
+  props: {
+    children: [
+      false,
+      [
+        {
+          props: {
+            component: {
+              items: [
+                {
+                  type: 'menuitem',
+                  settings: {
+                    name: 'menuitem-card',
+                    url: 'card',
+                    text: 'Card'
+                  },
+                  id: 'menuitem-card-1',
+                  items: [],
+                  name: 'menuitem-card-1'
+                },
+                {
+                  type: 'menuitem',
+                  settings: {
+                    name: 'menuitem-Card',
+
+                    url: 'card',
+                    text: 'Card'
+                  },
+                  id: 'menuitem-Card-1',
+                  items: [],
+                  name: 'menuitem-Card-1'
+                },
+                {
+                  type: 'menuitem',
+                  settings: {
+                    name: 'menuitem-card-Carousel',
+                    url: 'card-carousel',
+                    text: 'Card Carousel'
+                  },
+                  id: 'menuitem-card-carousel-1',
+                  items: [],
+                  name: 'menuitem-card-carousel-1'
+                },
+                {
+                  type: 'menuitem',
+                  settings: {
+                    eventType: 'hover',
+                    name: 'menuitem-Content-Group',
+                    modifier: null,
+                    url: 'content-group',
+                    text: 'Content Group',
+                    variant: null,
+                    gtmClassName: null,
+                    entities: [],
+                    filterByProperty: [],
+                    filterByFeatured: 'off',
+                    filterBySponsored: 'off',
+                    operator: 'AND',
+                    filterBy: [],
+                    sortProperties: []
+                  },
+                  id: 'menuitem-Content-Group-1',
+                  items: [],
+                  name: 'menuitem-Content-Group-1'
+                }
+              ]
+            }
+          }
+        }
+      ]
+    ]
+  }
+};

package/tests/unit/src/components/MenuItem/helpers/has-active-child.test.js

@@ -0,0 +1,35 @@
+/* eslint-disable no-unused-vars */
+import '@testing-library/jest-dom/extend-expect';
+import { hasActiveChild } from '../../../../../../src/components/MenuItem/helpers';
+import { mockMenuProps } from './constants';
+
+describe('hasActiveChild', () => {
+  const structuredClone = val => JSON.parse(JSON.stringify(val));
+
+  it('should return true for finding active menu-item child', () => {
+    const activePath = '/card';
+    const menuProps = mockMenuProps;
+    const result = !!hasActiveChild(activePath, menuProps);
+    expect(result).toBe(true);
+  });
+
+  it('shoul return false for findng no exact match', () => {
+    const activePath = '/carousel';
+    const menuProps = mockMenuProps;
+
+    const result = !!hasActiveChild(activePath, menuProps);
+    expect(result).toBe(false);
+  });
+
+  it('should return false for empty children-items', () => {
+    const activePath = '/carousel';
+    const menuWithNoChildrenProps = (() => {
+      const obj = structuredClone(mockMenuProps);
+      obj.props.children[1][0].props.component.items = [];
+      return obj;
+    }).call();
+
+    const result = !!hasActiveChild(activePath, menuWithNoChildrenProps);
+    expect(result).toBe(false);
+  });
+});

package/tests/unit/src/components/MenuItem/helpers/is-url-path-match.test.js

@@ -0,0 +1,53 @@
+import '@testing-library/jest-dom/extend-expect';
+import { isUrlPathMatch } from '../../../../../../src/components/MenuItem/helpers';
+
+describe('isUrlPathMatch', () => {
+  it('should return true since path and itemUrl match', () => {
+    const path = '/button';
+    const itemUrl = 'button';
+    const result = isUrlPathMatch(path, itemUrl);
+    expect(result).toBeTruthy();
+  });
+
+  it('should match since path and itemUrl do not match', () => {
+    const path = '/card';
+    const itemUrl = 'button';
+    const result = isUrlPathMatch(path, itemUrl);
+    expect(result).toBeFalsy();
+  });
+
+  it('should not match since path and itemUrl is a partial match', () => {
+    const path = '/button-card';
+    const itemUrl = 'button';
+    const result = isUrlPathMatch(path, itemUrl);
+    expect(result).toBeFalsy();
+  });
+
+  it('should not match since nested path and itemUrl is a partial match', () => {
+    const path = '/button/child';
+    const itemUrl = 'button';
+    const result = isUrlPathMatch(path, itemUrl);
+    expect(result).toBeFalsy();
+  });
+
+  it('should match with uri-with-fragment', () => {
+    const path = '/button#dark';
+    const itemUrl = 'button';
+    const result = isUrlPathMatch(path, itemUrl);
+    expect(result).toBeTruthy();
+  });
+
+  it('should match with uri-with-parameters', () => {
+    const path = '/button?paramater=value';
+    const itemUrl = 'button';
+    const result = isUrlPathMatch(path, itemUrl);
+    expect(result).toBeTruthy();
+  });
+
+  it('should not match with empty itemUrl', () => {
+    const path = '/';
+    const itemUrl = null;
+    const result = isUrlPathMatch(path, itemUrl);
+    expect(result).toBeFalsy();
+  });
+});

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

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`TextBlock component With wrapper flag should render with wrapper and legacy class and modifier 1`] = `
 <DocumentFragment>
@@ -14,9 +14,6 @@ exports[`TextBlock component With wrapper flag should render with wrapper and le
       <a
         aria-label="link"
         href="/"
-      />
-      <a
-        href="/"
       >
         link
       </a>
@@ -40,9 +37,6 @@ exports[`TextBlock component With wrapper flag should render with wrapper and le
       <a
         aria-label="link"
         href="/"
-      />
-      <a
-        href="/"
       >
         link
       </a>
@@ -66,9 +60,6 @@ exports[`TextBlock component should match snapshot 1`] = `
       <a
         aria-label="link"
         href="/"
-      />
-      <a
-        href="/"
       >
         link
       </a>
@@ -89,9 +80,6 @@ exports[`TextBlock component should not render wrapper if no modifier 1`] = `
     <a
       aria-label="link"
       href="/"
-    />
-    <a
-      href="/"
     >
       link
     </a>

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

@@ -7,9 +7,6 @@ exports[`Parse textBlock it should match snapshot 1`] = `
     <a
       aria-label="link"
       href="/"
-    />
-    <a
-      href="/"
     >
       link
     </a>

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

@@ -42,7 +42,10 @@ describe('getCustomHtmlProperties function', () => {
   });
 
   it('should return an empty object when all entries are invalid', () => {
-    const customHtmlProps = [{ name: '', value: 'foo' }, { name: 'bar', value: 'null' }];
+    const customHtmlProps = [
+      { name: '', value: 'foo' },
+      { name: 'bar', value: 'null' }
+    ];
     expect(getCustomHtmlProperties({ customHtmlProps })).toEqual({});
   });
 });

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/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/variants/Infographic/Infographic.test.js

@@ -1,6 +1,6 @@
 /*
-* @jest-environment jsdom
-*/
+ * @jest-environment jsdom
+ */
 
 import React from 'react';
 import { render } from '@testing-library/react';