@blaze-cms/react-page-builder 0.146.0-node18-tooltips.32 → 0.146.0-node18-core-styles-tooltips.41

package/src/components/MenuItem/MenuItemRender.js

@@ -1,17 +1,23 @@
+/* eslint-disable jsx-a11y/no-static-element-interactions */
 import React, { useState, useContext, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import { FaChevronDown, FaChevronUp } from 'react-icons/fa';
+import classnames from 'classnames';
 import { useRouter } from 'next/router';
 import { useStringTemplate } from '@blaze-cms/utils-handlebars';
-import { HOVER, MOUSE_ENTER, MOUSE_LEAVE, HIDDEN } from '../../constants';
+import { HOVER, MOUSE_ENTER, MOUSE_LEAVE, HIDDEN, CLICK } from '../../constants';
 import { hasChildren } from '../../helpers';
 import BlazeLink from '../BlazeLink';
 import MenuContext from '../Menu/MenuContext';
-import { injectHelperIntoTemplate } from './helpers';
+import { injectHelperIntoTemplate, isUrlPathMatch, hasActiveChild } from './helpers';
 
 const MenuItemRender = ({ children, eventType, text, modifier, url, parent }) => {
-  const [displayChildren, setDisplayChildren] = useState(false);
-  const { showMobileMenu } = useContext(MenuContext);
+  const router = useRouter();
+  const { showMobileMenu, openActiveSubmenus } = useContext(MenuContext);
+
+  const isHoverEvent = eventType === HOVER;
+  const isClickEvent = eventType === CLICK;
+
   const {
     loading: loadingText,
     data: [textToUse]
@@ -21,14 +27,24 @@ const MenuItemRender = ({ children, eventType, text, modifier, url, parent }) =>
     data: [urlToUse]
   } = useStringTemplate(parent, [injectHelperIntoTemplate(url, 'url_encode')]);
 
-  const router = useRouter();
-  const isHoverEvent = eventType === HOVER;
-  const childrenDisplayClass = displayChildren ? '' : HIDDEN;
+  const isActive = router ? isUrlPathMatch(router.asPath, urlToUse) : false;
+  const isActiveParent = router ? hasActiveChild(router.asPath, children) : false;
+  const shouldPreOpen = openActiveSubmenus && isActiveParent && isClickEvent;
   const hasValidChildren = hasChildren(children);
 
+  const [displayChildren, setDisplayChildren] = useState(shouldPreOpen);
+
   useEffect(() => {
-    if (!showMobileMenu) setDisplayChildren(false);
-  }, [showMobileMenu]);
+    if (!showMobileMenu && !shouldPreOpen) setDisplayChildren(false);
+  }, [
+    children,
+    isClickEvent,
+    loadingUrl,
+    openActiveSubmenus,
+    router,
+    shouldPreOpen,
+    showMobileMenu
+  ]);
 
   useEffect(() => {
     if (isHoverEvent) {
@@ -38,6 +54,8 @@ const MenuItemRender = ({ children, eventType, text, modifier, url, parent }) =>
 
   if (loadingUrl || loadingText) return '';
 
+  const childrenDisplayClass = displayChildren ? '' : HIDDEN;
+
   const handleItemEvent = ({ type }) => {
     if (isHoverEvent) {
       if (type === MOUSE_ENTER) {
@@ -55,15 +73,25 @@ const MenuItemRender = ({ children, eventType, text, modifier, url, parent }) =>
     }
   };
 
+  const menuItemLinkClassname = classnames('menu--item--link', {
+    'menu--item--link--active': isActive,
+    'menu--item--link--active-parent': isActiveParent
+  });
+
   return (
     <li className={modifier} onMouseEnter={handleItemEvent} onMouseLeave={handleItemEvent}>
       <div
-        className="menu--item--link"
+        className={menuItemLinkClassname}
         onClick={handleMobileClick}
         role={!urlToUse && hasValidChildren ? 'button' : undefined}
         tabIndex={!urlToUse && hasValidChildren ? 0 : undefined}>
-        {urlToUse ? <BlazeLink href={urlToUse}>{textToUse}</BlazeLink> : <span>{textToUse}</span>}
-
+        {urlToUse ? (
+          <BlazeLink href={urlToUse}>{textToUse}</BlazeLink>
+        ) : (
+          <span role="button" onClick={handleItemEvent}>
+            {textToUse}
+          </span>
+        )}
         {hasValidChildren && (
           <i
             role="button"

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

@@ -0,0 +1,10 @@
+import isUrlPathMatch from './isUrlPathMatch';
+import { hasChildren } from '../../../helpers';
+
+const hasActiveChild = (path, children) =>
+  hasChildren(children) &&
+  children.props.children[1][0].props.component.items.find(menuItem =>
+    isUrlPathMatch(path, menuItem.settings.url)
+  );
+
+export default hasActiveChild;

package/src/components/MenuItem/helpers/index.js

@@ -1,3 +1,5 @@
 import injectHelperIntoTemplate from './inject-helper-into-template';
+import isUrlPathMatch from './isUrlPathMatch';
+import hasActiveChild from './has-active-child';
 
-export { injectHelperIntoTemplate };
+export { injectHelperIntoTemplate, isUrlPathMatch, hasActiveChild };

package/src/components/MenuItem/helpers/isUrlPathMatch.js

@@ -0,0 +1,10 @@
+const isUrlPathMatch = (path, itemUrl) => {
+  if (!itemUrl || !path) return false;
+
+  const reg = new RegExp(/^[^#?]+/);
+  const _path = reg.exec(path)[0];
+
+  return _path === itemUrl || _path === `/${itemUrl}`;
+};
+
+export default isUrlPathMatch;

package/src/components/SearchContent/SearchContent.js

@@ -121,9 +121,15 @@ const SearchContent = props => {
               name="search"
               placeholder={placeholder}
               value={searchTerm}
-              onChange={e => setSearchTerm(e.target.value)}
+              onChange={e => {
+                setSearchTerm(e.target.value);
+                setShowResults(true);
+              }}
               onKeyDown={handleKeyDown}
-              onFocus={() => setShowResults(true)}
+              onFocus={() => {
+                setShowResults(true);
+                if (collapsedSearch) setCollapsed(false);
+              }}
               data-testid="search-content-input"
             />
           )}

package/src/components/SearchContent/SearchContentResults.js

@@ -6,7 +6,7 @@ const SearchContentResults = ({ results, debouncedSearchTerm, onClick }) => {
   if (!debouncedSearchTerm) return null;
   const hasResults = results.length > 0;
   return (
-    <div className="search-content--results__wrapper">
+    <div className="search-content--results__wrapper" data-testid="search-content-results">
       <div className="search-content--results__wrapper--message">
         <div className="search-content--results__content">
           {hasResults ? (

package/src/hooks/use-get-image-id-from-relation.js

@@ -10,6 +10,7 @@ function useGetImageIdFromRelation(
   hasImgSrc
 ) {
   const skip =
+    !actions ||
     !id ||
     hasImgSrc ||
     typeof id !== 'string' ||
@@ -18,7 +19,7 @@ function useGetImageIdFromRelation(
 
   const [imageRelationData = ''] = imageRelation;
   const [relationName = '', relationProp = ''] = imageRelationData.split('.');
-  const { getPublished, get } = actions;
+  const { getPublished, get } = actions || {};
   const getAction = isPreview ? get : getPublished || get;
 
   const props = imageRelationData ? `${relationName} { ${relationProp} }` : 'id';

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

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

@@ -43,6 +43,54 @@ exports[`Carousel component should render carousel and match snapshot 1`] = `
 </DocumentFragment>
 `;
 
+exports[`Carousel component should render image fetching data from relation 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
+          class="carousel__slide"
+        >
+          <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
@@ -64,14 +112,7 @@ exports[`Carousel component should render priority images and match snapshot 1`]
         <div
           class="carousel__slide"
         >
-          <span>
-            <img
-              alt="Carousel image"
-              aria-label="View Image"
-              role="button"
-              src="test-url"
-            />
-          </span>
+          <span />
         </div>
       </div>
       <div

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" />);

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

@@ -12,8 +12,16 @@ jest.mock('@apollo/client', () => ({
   useQuery: jest.fn(() => ({ data: {}, loading: false, error: null }))
 }));
 
+const mockPush = jest.fn();
+const mockOn = jest.fn();
+const mockOff = jest.fn();
+
 jest.mock('next/router', () => ({
-  useRouter: jest.fn(() => ({ asPath: 'test-url', events: { on: jest.fn(), off: jest.fn() } }))
+  useRouter: jest.fn(() => ({
+    asPath: 'test-url',
+    push: mockPush,
+    events: { on: mockOn, off: mockOff }
+  }))
 }));
 
 const SEARCH_INPUT_TEST_ID = 'search-content-input';
@@ -54,4 +62,27 @@ describe('SearchContent', () => {
     fireEvent.click(closeIcon);
     await waitFor(() => expect(queryByTestId(SEARCH_INPUT_TEST_ID)).toBeNull());
   });
+
+  it('should trigger autosuggest again after navigation and typing', async () => {
+    const { getByTestId, queryByTestId } = render(
+      <MockedProvider mocks={[]} addTypename={false}>
+        <SearchContent entities={entities} />
+      </MockedProvider>
+    );
+
+    const input = getByTestId(SEARCH_INPUT_TEST_ID);
+
+    fireEvent.change(input, { target: { value: 'novartis' } });
+
+    await waitFor(() => expect(queryByTestId('search-content-results')).toBeTruthy());
+
+    fireEvent.keyDown(input, { key: 'Enter', code: 'Enter' });
+
+    const routeChangeHandler = mockOn.mock.calls[0][1];
+    routeChangeHandler();
+
+    fireEvent.change(input, { target: { value: 'blaze' } });
+
+    await waitFor(() => expect(queryByTestId('search-content-results')).toBeTruthy());
+  });
 });