@eeacms/volto-clms-theme 1.1.177 → 1.1.179

package/CHANGELOG.md

@@ -4,6 +4,51 @@ All notable changes to this project will be documented in this file. Dates are d
 
 Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
+### [1.1.179](https://github.com/eea/volto-clms-theme/compare/1.1.178...1.1.179) - 26 August 2024
+
+#### :house: Internal changes
+
+- style: Automated code fix [eea-jenkins - [`c668e51`](https://github.com/eea/volto-clms-theme/commit/c668e51c7592ed244b8fa486e785ced43ca5cb5f)]
+
+#### :hammer_and_wrench: Others
+
+- Code cleanup [Tiberiu Ichim - [`4b3d00f`](https://github.com/eea/volto-clms-theme/commit/4b3d00fa7e02a422a7be14e95c2ddc23f07a60cf)]
+- Fix parenting [Tiberiu Ichim - [`bf536b8`](https://github.com/eea/volto-clms-theme/commit/bf536b85715471db0f373315a8bca84cbde2aec1)]
+- Expand context navigation on /en/faq [Tiberiu Ichim - [`37b8eb1`](https://github.com/eea/volto-clms-theme/commit/37b8eb129651e781e0ced8c79237bdf7b0bb55e1)]
+- WIP [Tiberiu Ichim - [`dbf9e58`](https://github.com/eea/volto-clms-theme/commit/dbf9e58a74442005933356e875965ad8f6dd9cd0)]
+- Rewrite for lisibility [Tiberiu Ichim - [`e8c8a20`](https://github.com/eea/volto-clms-theme/commit/e8c8a2037a81832ae901892120e74c11757ebf55)]
+- Rewrite for lisibility [Tiberiu Ichim - [`9fe7896`](https://github.com/eea/volto-clms-theme/commit/9fe78963411c231cbf8271a29209d51c5b7c4345)]
+### [1.1.178](https://github.com/eea/volto-clms-theme/compare/1.1.177...1.1.178) - 26 August 2024
+
+#### :house: Internal changes
+
+- style: Automated code fix [eea-jenkins - [`d4de906`](https://github.com/eea/volto-clms-theme/commit/d4de906dce029f4b12382c624d399a93b5cea458)]
+- style: Automated code fix [eea-jenkins - [`3cdad9f`](https://github.com/eea/volto-clms-theme/commit/3cdad9f14e176ff8b1bd2f60ae73f074cddcae6d)]
+
+#### :hammer_and_wrench: Others
+
+- More test fixes [Tiberiu Ichim - [`6d0ee04`](https://github.com/eea/volto-clms-theme/commit/6d0ee04c08b40c1630db96f4e3265873a3e674d5)]
+- Fix one test [Tiberiu Ichim - [`7a63d96`](https://github.com/eea/volto-clms-theme/commit/7a63d9613a439b880eb340b1bd44aef46bb2817f)]
+- Refs #273992 - Fix BoundingBoxComponent.test.jsx. [GhitaB - [`e84220f`](https://github.com/eea/volto-clms-theme/commit/e84220f0bea3105a9ee218f17f3a70e180abdea6)]
+- Refs #273992 - Fix DistributionInfoComponent.test.jsx. [GhitaB - [`f96ef4f`](https://github.com/eea/volto-clms-theme/commit/f96ef4f43a06314e3089123afcd97403671638fa)]
+- Refs #273992 - Fix CclExpandableFilter.test.jsx - fix eslint. [GhitaB - [`92efa96`](https://github.com/eea/volto-clms-theme/commit/92efa9610539aba1cd0ba421e9e33b90a042dfee)]
+- Refs #273992 - Fix CclExpandableFilter.test.jsx. [GhitaB - [`65e6b83`](https://github.com/eea/volto-clms-theme/commit/65e6b830c4c7242f1220a88cb1901e789f0dbfec)]
+- Refs #273992 - Fix ContactComponent.test.jsx. [GhitaB - [`d695b38`](https://github.com/eea/volto-clms-theme/commit/d695b38a82ef4a9a87302295de06f9beda5083f7)]
+- Refs #273992 - Fix CartIconCounter.test.jsx. [GhitaB - [`1f191e5`](https://github.com/eea/volto-clms-theme/commit/1f191e552ad85f9d8c0ab942c64fd39813c55cf1)]
+- Refs #273992 - Fix CartIconCounter.test.jsx. [GhitaB - [`20984cc`](https://github.com/eea/volto-clms-theme/commit/20984ccfe404038500ecdaf7866f2512d1358469)]
+- Refs #273992 - Fix CclCard.test.jsx. [GhitaB - [`706c490`](https://github.com/eea/volto-clms-theme/commit/706c490efac2b7c3c56d1a404c7d102288c979f3)]
+- Refs #273992 - CclContextNavigationBlockView.test.jsx - Enzyme -> RTL. [GhitaB - [`e091a63`](https://github.com/eea/volto-clms-theme/commit/e091a631b0b79ccb1ef05a3375e566e34520964e)]
+- Refs #273992 - CclContextNavigationBlockView.test.jsx - Enzyme -> RTL. [GhitaB - [`aba30b9`](https://github.com/eea/volto-clms-theme/commit/aba30b9d7cceba6dd8e9ad0e5313ccc143ea0615)]
+- Refs #273992 - CclContextNavigationBlockView.test.jsx - Enzyme -> RTL. [GhitaB - [`6e88a6e`](https://github.com/eea/volto-clms-theme/commit/6e88a6ef2205401def8120ce4feab7f120ad2733)]
+- Refs #273992 - CclButtonBlockEdit.test.jsx - Enzyme -> RTL - remove obsolete snapshot. [GhitaB - [`c5d917d`](https://github.com/eea/volto-clms-theme/commit/c5d917d72242e7a4dff16a9a0d001c7210ab5f8f)]
+- Refs #273992 - CclButtonBlockEdit.test.jsx - Enzyme -> RTL. [GhitaB - [`dd3ebb3`](https://github.com/eea/volto-clms-theme/commit/dd3ebb3f9f6db8635d316016ceba627161d072b8)]
+- Refs #273992 - CclButtonBlockEdit.test.jsx - Enzyme -> RTL. [GhitaB - [`1c31699`](https://github.com/eea/volto-clms-theme/commit/1c3169940832127cb1cd76b52bd7b2482174ff96)]
+- Refs #273992 - CclModal.test.jsx - Enzyme -> RTL. [GhitaB - [`bab4c3e`](https://github.com/eea/volto-clms-theme/commit/bab4c3ea43321e5447366a2712053544cb204a4f)]
+- Refs #273992 - CclModal.test.jsx - Enzyme -> RTL. [GhitaB - [`97b5078`](https://github.com/eea/volto-clms-theme/commit/97b507870639e0725f7d936edda26897efe5d54d)]
+- Refs #273992 - CclModal.test.jsx - Enzyme -> RTL. [GhitaB - [`b2f064e`](https://github.com/eea/volto-clms-theme/commit/b2f064ec64f7beaf313b13891f78d58c302c547f)]
+- Refs #273992 - CclListingCards.test.jsx - Enzyme -> RTL. [GhitaB - [`ca6ac5f`](https://github.com/eea/volto-clms-theme/commit/ca6ac5f1e56ce01154e1969969142f6432d6f5db)]
+- Refs #273992 - CclListingCards.test.jsx - Enzyme -> RTL. [GhitaB - [`68364ab`](https://github.com/eea/volto-clms-theme/commit/68364ab9110a8d3a8a38ae99d67ae8c47b25aeba)]
+- Refs #273992 - Update README.md (retry tests) [Ghiță Bizău - [`323a348`](https://github.com/eea/volto-clms-theme/commit/323a348092275af300784271ae44997b6b0f39ab)]
 ### [1.1.177](https://github.com/eea/volto-clms-theme/compare/1.1.176...1.1.177) - 8 August 2024
 
 ### [1.1.176](https://github.com/eea/volto-clms-theme/compare/1.1.175...1.1.176) - 8 August 2024

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-clms-theme",
-  "version": "1.1.177",
+  "version": "1.1.179",
   "description": "volto-clms-theme: Volto theme for CLMS site",
   "main": "src/index.js",
   "author": "CodeSyntax for the European Environment Agency",

package/src/components/Blocks/CclButtonBlock/CclButtonBlockEdit.test.jsx

@@ -1,16 +1,9 @@
-import Enzyme, { mount } from 'enzyme';
-
-import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
 import CclButtonBlockEdit from './CclButtonBlockEdit';
 import { MemoryRouter } from 'react-router-dom';
 import { Provider } from 'react-intl-redux';
 import React from 'react';
 import configureStore from 'redux-mock-store';
-import renderer from 'react-test-renderer';
-
-Enzyme.configure({ adapter: new Adapter() });
-
-global.__SERVER__ = true; // eslint-disable-line no-underscore-dangle
+import { render, fireEvent } from '@testing-library/react';
 
 const mockStore = configureStore();
 
@@ -26,6 +19,7 @@ describe('CclButtonBlockEdit', () => {
         messages: {},
       },
     });
+
     const data = {
       href: 'https://www.google.com',
       disabled: false,
@@ -33,29 +27,26 @@ describe('CclButtonBlockEdit', () => {
       download: false,
     };
 
-    // const component = shallow(
-    const component = mount(
+    const { container } = render(
       <Provider store={store}>
         <MemoryRouter>
           <CclButtonBlockEdit
             data={data}
             selected={false}
             block="1234"
-            onChangeBlock={() => {
-              return 'test';
-            }}
-            setSidebarTab={() => {
-              return 'test';
-            }}
+            onChangeBlock={() => 'test'}
+            setSidebarTab={() => 'test'}
           />
         </MemoryRouter>
       </Provider>,
     );
-    const legend = component.find('.ccl-block-editor-header legend');
-    legend.simulate('click');
-    expect(legend).toBeDefined();
+
+    const legend = container.querySelector('.ccl-block-editor-header legend');
+    fireEvent.click(legend);
+    expect(legend).not.toBeNull();
   });
-  it('renders an CclButtonBlockEdit block component', () => {
+
+  it('renders a CclButtonBlockEdit block component', () => {
     const store = mockStore({
       content: {
         create: {},
@@ -66,38 +57,34 @@ describe('CclButtonBlockEdit', () => {
         messages: {},
       },
     });
+
     const data = {
       href: ['https://www.google.com', 'https://www.google.com'],
       disabled: true,
     };
-    const component = renderer.create(
+
+    const { container } = render(
       <Provider store={store}>
         <MemoryRouter>
           <CclButtonBlockEdit
             data={data}
             selected={false}
             block="1234"
-            onChangeBlock={() => {
-              return 'test';
-            }}
-            onSelectBlock={() => {
-              return 'test';
-            }}
-            onChangeField={() => {
-              return 'test';
-            }}
-            setSidebarTab={() => {
-              return 'test';
-            }}
+            onChangeBlock={() => 'test'}
+            onSelectBlock={() => 'test'}
+            onChangeField={() => 'test'}
+            setSidebarTab={() => 'test'}
           />
         </MemoryRouter>
       </Provider>,
     );
 
-    const json = component.toJSON();
-    expect(json).toMatchSnapshot();
+    const button = container.querySelector('.ccl-button.ccl-button--default');
+    expect(button).not.toBeNull();
+    expect(button.getAttribute('href')).toBe('/');
+    expect(button.classList.contains('ccl-button--default')).toBe(true);
   });
-  //jest test for CclButtonBlockEdit onChangeBlock statement
+
   it('CclButtonBlockEdit onChangeBlock', () => {
     const store = mockStore({
       content: {
@@ -109,34 +96,30 @@ describe('CclButtonBlockEdit', () => {
         messages: {},
       },
     });
+
     const data = {
       href: ['https://www.google.com', 'https://www.google.com'],
       disabled: true,
     };
-    const component = mount(
+
+    const { container } = render(
       <Provider store={store}>
         <MemoryRouter>
           <CclButtonBlockEdit
             data={data}
             selected={false}
             block="1234"
-            onChangeBlock={() => {
-              return 'test';
-            }}
-            onSelectBlock={() => {
-              return 'test';
-            }}
-            onChangeField={() => {
-              return 'test';
-            }}
-            setSidebarTab={() => {
-              return 'test';
-            }}
+            onChangeBlock={() => 'test'}
+            onSelectBlock={() => 'test'}
+            onChangeField={() => 'test'}
+            setSidebarTab={() => 'test'}
           />
         </MemoryRouter>
       </Provider>,
     );
-    const legend = component.find('.ccl-block-editor-header');
-    legend.simulate('click');
+
+    const legend = container.querySelector('.ccl-block-editor-header legend');
+    fireEvent.click(legend);
+    expect(legend).not.toBeNull();
   });
 });

package/src/components/Blocks/CclContextNavigationBlock/CclContextNavigationBlockEdit.test.jsx

@@ -4,10 +4,6 @@ import configureStore from 'redux-mock-store';
 import { Provider } from 'react-intl-redux';
 import CclContextNavigationBlockEdit from './CclContextNavigationBlockEdit';
 import { MemoryRouter } from 'react-router-dom';
-import Enzyme from 'enzyme';
-import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
-
-Enzyme.configure({ adapter: new Adapter() });
 
 global.__SERVER__ = true; // eslint-disable-line no-underscore-dangle
 

package/src/components/Blocks/CclContextNavigationBlock/CclContextNavigationBlockView.test.jsx

@@ -1,20 +1,14 @@
 import React from 'react';
-import renderer from 'react-test-renderer';
+import { render } from '@testing-library/react';
 import configureStore from 'redux-mock-store';
 import { Provider } from 'react-intl-redux';
 import CclContextNavigationBlockView from './CclContextNavigationBlockView';
 import { MemoryRouter } from 'react-router-dom';
-import Enzyme from 'enzyme';
-import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
-
-Enzyme.configure({ adapter: new Adapter() });
-
-global.__SERVER__ = true; // eslint-disable-line no-underscore-dangle
 
 const mockStore = configureStore();
 
 describe('CclContextNavigationBlockView', () => {
-  it('Check context navigation view', () => {
+  it('renders CclContextNavigationBlockView correctly', () => {
     const store = mockStore({
       content: {
         create: {},
@@ -27,7 +21,7 @@ describe('CclContextNavigationBlockView', () => {
     });
     const pathname = '/example';
 
-    const ContextNavigationBlockView = renderer.create(
+    const { container } = render(
       <Provider store={store}>
         <MemoryRouter>
           <CclContextNavigationBlockView pathname={pathname}>
@@ -36,7 +30,10 @@ describe('CclContextNavigationBlockView', () => {
         </MemoryRouter>
       </Provider>,
     );
-    const json = ContextNavigationBlockView.toJSON();
-    expect(json).toMatchSnapshot();
+
+    const contextNavigationBlock = container.querySelector(
+      '.ccl-context-navigation-block',
+    );
+    expect(contextNavigationBlock).toBeNull();
   });
 });

package/src/components/Blocks/CclFAQBlock/CclFAQBlockEdit.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import CclFAQBlockView from './CclFAQBlockView';
 
 const CclFAQBlockEdit = (props) => {
-  return <CclFAQBlockView props={props} isEditMode={true} />;
+  return <CclFAQBlockView {...props} isEditMode={true} />;
 };
 
 export default CclFAQBlockEdit;

package/src/components/Blocks/CclFAQBlock/CclFAQBlockView.jsx

@@ -1,3 +1,4 @@
+import cx from 'classnames';
 import React, { useState } from 'react';
 import AnimateHeight from 'react-animate-height';
 import { useDispatch, useSelector } from 'react-redux';
@@ -6,18 +7,46 @@ import { Accordion, Segment } from 'semantic-ui-react';
 import { getContextNavigation } from '@plone/volto/actions';
 import { Icon, UniversalLink } from '@plone/volto/components';
 import RenderBlocks from '@plone/volto/components/theme/View/RenderBlocks';
-import { hasBlocksData } from '@plone/volto/helpers';
+import { hasBlocksData, getBaseUrl } from '@plone/volto/helpers';
+
+import { CclTabs } from '@eeacms/volto-clms-theme/components/CclTab';
+
 import penSVG from '@plone/volto/icons/pen.svg';
 import config from '@plone/volto/registry';
-import { CclTabs } from '@eeacms/volto-clms-theme/components/CclTab';
-// import { StringToHTML } from '@eeacms/volto-clms-theme/components/CclUtils';
+
+const flattenCN = (cn_items) =>
+  cn_items.reduce(
+    (acc, curr) => [
+      ...acc,
+      curr,
+      ...curr.items
+        .filter((i) => i.type === 'document')
+        .map((item) => ({ ...item, isSubtab: true })),
+    ],
+    [],
+  );
+
+// this is just to highlight that the way CclTabs is working is misleading
+// It reads random properties from <div> children, which is unexpected
+function Tab(props) {
+  return <div {...props} />;
+}
 
 const CclFAQBlockView = (props) => {
-  const { isEditMode } = props;
+  const { isEditMode, content } = props;
+  const pathname = getBaseUrl(props.pathname || props.path);
+  const cn_key = `${pathname}/@contextnavigation`;
+
+  // this are the accordions that are opened
+  const [activeIndex, setActiveIndex] = useState([]);
+
   const dispatch = useDispatch();
-  const path = useSelector((state) => state.router.location.pathname);
-  const contextNavigation = useSelector((state) => state.contextNavigation);
-  const cn_key = `${path.replace('/edit', '')}/@contextnavigation`;
+  const contextNavigationItems = useSelector(
+    (state) =>
+      state.contextNavigation?.[cn_key]?.data?.items ||
+      content['@components']?.['contextnavigation']?.items,
+  );
+
   const handleClick = ({ index }) => {
     const newIndex =
       activeIndex.indexOf(index) === -1
@@ -27,128 +56,93 @@ const CclFAQBlockView = (props) => {
     setActiveIndex(newIndex);
   };
 
-  const flattenCN = (cn_items) => {
-    return cn_items.reduce((prev, curr) => {
-      prev.push(curr);
-      if (curr.items.filter((i) => i.type === 'document').length > 0) {
-        curr.items
-          .filter((i) => i.type === 'document')
-          .forEach((i_i) => prev.push({ ...i_i, isSubtab: true }));
-      }
-      return prev;
-    }, []);
-  };
   const flatCN = flattenCN(
-    contextNavigation?.[cn_key]?.data?.items
-      ? contextNavigation?.[cn_key]?.data?.items.filter(
-          (i) => i.type === 'document',
-        )
-      : [],
+    contextNavigationItems?.filter((i) => i.type === 'document') || [],
   );
-  const [activeIndex, setActiveIndex] = useState([]);
+
   React.useEffect(() => {
-    dispatch(getContextNavigation(path.replace('/edit', '')));
-  }, [path, dispatch]);
+    isEditMode && dispatch(getContextNavigation(pathname));
+  }, [pathname, dispatch, isEditMode]);
+
   React.useEffect(() => {
-    let indexes = [];
-    // eslint-disable-next-line no-unused-expressions
-    contextNavigation?.[cn_key]?.data?.items &&
-      contextNavigation?.[cn_key]?.data?.items.forEach((i) => {
-        if (i.items.length > 0) {
-          indexes.push(i.items[0].normalized_id);
-        }
-        if (i.type === 'document') {
-          i.items.forEach((i_i) => {
-            if (i_i.items.length > 0) {
-              indexes.push(i_i.items[0].normalized_id);
-            }
-          });
-        }
-      });
+    let indexes = (contextNavigationItems || []).reduce(
+      (acc, cur) => [
+        ...acc,
+        ...(cur.items?.length ? [cur.items[0].normalized_id] : []),
+        ...cur.items
+          ?.map((item) => item.items?.[0]?.normalized_id)
+          .filter((id) => !!id),
+      ],
+      [],
+    );
     setActiveIndex(indexes);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [contextNavigation?.[cn_key]?.data?.items]);
+  }, [contextNavigationItems]);
 
   const titleIcons = config.blocks?.blocksConfig?.accordion?.titleIcons;
 
   return (
     <div id="faq-listing" className="ccl-container tab-container">
-      {contextNavigation?.[cn_key]?.loaded ? (
-        contextNavigation?.[cn_key]?.data?.items?.length > 0 && (
-          <CclTabs routing={true}>
-            {flatCN
-              .filter((cn) => cn.type === 'document')
-              .map((cn, key) => (
-                <div
-                  key={key}
-                  tabTitle={cn.title}
-                  className={
-                    cn.isSubtab
-                      ? 'subcard'
-                      : cn.items.filter((i) => i.type === 'document').length > 0
-                  }
-                  parent={
-                    cn.items.filter((i) => i.type === 'document').length > 0
-                  }
-                >
-                  <div className="accordion-block">
-                    {cn.items
-                      .filter((item) => item.type === 'faq')
-                      .map((item, item_key) => {
-                        return (
-                          <Accordion fluid styled key={item_key}>
-                            <Accordion.Title
-                              as={'h2'}
-                              onClick={() =>
-                                handleClick({ index: item.normalized_id })
-                              }
-                              className={'accordion-title align-arrow-right'}
-                            >
-                              {activeIndex.includes(item.normalized_id) ? (
-                                <Icon name={titleIcons.opened.rightPosition} />
-                              ) : (
-                                <Icon name={titleIcons.closed.rightPosition} />
-                              )}
-                              {isEditMode && (
-                                <UniversalLink
-                                  openLinkInNewTab={true}
-                                  href={`${item['@id']}/edit`}
-                                >
-                                  <Icon
-                                    name={penSVG}
-                                    className="circled"
-                                    title={'Edit'}
-                                  />
-                                </UniversalLink>
-                              )}
-                              <span>{item.title}</span>
-                            </Accordion.Title>
-                            <Accordion.Content
-                              active={activeIndex.includes(item.normalized_id)}
-                            >
-                              <AnimateHeight
-                                animateOpacity
-                                duration={500}
-                                height={'auto'}
-                              >
-                                {/* <StringToHTML
-                                  string={item.text ? item.text.data : ''}
-                                /> */}
-                                {hasBlocksData(item) && (
-                                  <RenderBlocks content={item} />
-                                )}
-                              </AnimateHeight>
-                            </Accordion.Content>
-                          </Accordion>
-                        );
-                      })}
-                  </div>
-                </div>
-              ))}
-          </CclTabs>
-        )
+      {contextNavigationItems?.length > 0 ? (
+        <CclTabs routing={true}>
+          {flatCN.map((cn, key) => (
+            <Tab
+              key={key}
+              tabTitle={cn.title}
+              className={cx({ subcard: cn.isSubtab })}
+              isParent={!!cn.items.filter((i) => i.type === 'document').length}
+            >
+              <div className="accordion-block">
+                {cn.items
+                  .filter((item) => item.type === 'faq')
+                  .map((item, item_key) => (
+                    <Accordion fluid styled key={item_key}>
+                      <Accordion.Title
+                        as={'h2'}
+                        onClick={() =>
+                          handleClick({ index: item.normalized_id })
+                        }
+                        className={'accordion-title align-arrow-right'}
+                      >
+                        {activeIndex.includes(item.normalized_id) ? (
+                          <Icon name={titleIcons.opened.rightPosition} />
+                        ) : (
+                          <Icon name={titleIcons.closed.rightPosition} />
+                        )}
+                        {isEditMode && (
+                          <UniversalLink
+                            openLinkInNewTab={true}
+                            href={`${item['@id']}/edit`}
+                          >
+                            <Icon
+                              name={penSVG}
+                              className="circled"
+                              title={'Edit'}
+                            />
+                          </UniversalLink>
+                        )}
+                        <span>{item.title}</span>
+                      </Accordion.Title>
+                      <Accordion.Content
+                        active={activeIndex.includes(item.normalized_id)}
+                      >
+                        <AnimateHeight
+                          animateOpacity
+                          duration={500}
+                          height={'auto'}
+                        >
+                          {hasBlocksData(item) && (
+                            <RenderBlocks content={item} />
+                          )}
+                        </AnimateHeight>
+                      </Accordion.Content>
+                    </Accordion>
+                  ))}
+              </div>
+            </Tab>
+          ))}
+        </CclTabs>
       ) : (
-        <Segment loading={contextNavigation?.[cn_key]?.loading}></Segment>
+        <Segment loading={true}></Segment>
       )}
     </div>
   );