@eeacms/volto-eea-website-theme 3.19.1 → 4.0.1

package/src/customizations/volto/components/manage/Blocks/Image/Edit.test.jsx

@@ -1,22 +1,104 @@
+/**
+ * Image block Edit — unit tests
+ *
+ * Volto 17 / 18 dual-support notes
+ * ---------------------------------
+ * Importing `@plone/volto/components` (the full barrel) triggers the chain:
+ *   TranslationObject.jsx → store.js → `@root/reducers`
+ * which Jest cannot resolve in this project's test environment.
+ * We therefore stub the entire barrel and provide minimal fakes for the
+ * components that Edit.jsx actually uses.  `@eeacms/volto-eea-design-system/ui`
+ * is mocked for the same reason (external design-system package not present in
+ * the test runner).
+ *
+ * Both mocks are version-agnostic — they expose the same API on V17 and V18.
+ *
+ * IMPORTANT: jest.mock() factories cannot reference out-of-scope variables
+ * (including React imported via ESM). Use require() inside the factory instead.
+ */
+
+// jest.mock() calls are hoisted above all imports by babel-jest.
+/* eslint-disable no-undef */
+
+/* eslint-enable no-undef */
+
 import config from '@plone/volto/registry';
-import '@testing-library/jest-dom/extend-expect';
+import '@testing-library/jest-dom';
 import { render } from '@testing-library/react';
 import React from 'react';
 import { Provider } from 'react-intl-redux';
 import configureMockStore from 'redux-mock-store';
-import Edit from './Edit';
-import { Image } from '@plone/volto/components';
-import { getImageBlockSizes } from './Edit';
+import Edit, { getImageBlockSizes } from './Edit';
+
+jest.mock('@plone/volto/components', () => {
+  const React = require('react');
+
+  const MockImage = (props) =>
+    React.createElement('img', {
+      src: props.src,
+      alt: props.alt,
+      className: props.className,
+      loading: props.loading,
+      'data-testid': 'volto-image',
+    });
+
+  return {
+    // Volto SVG icon wrapper — renders nothing in tests
+    Icon: () => null,
+    // Image sidebar form rendered inside SidebarPortal — not under test here
+    ImageSidebar: () => null,
+    // Portal that makes sidebar visible only when `selected` is true
+    SidebarPortal: (props) =>
+      props.selected
+        ? React.createElement(
+            'div',
+            { 'data-testid': 'sidebar-portal' },
+            props.children,
+          )
+        : null,
+    // Volto responsive image component
+    Image: MockImage,
+  };
+});
 
+jest.mock('@eeacms/volto-eea-design-system/ui/Copyright/Copyright', () => {
+  const React = require('react');
+
+  const Copyright = (props) =>
+    React.createElement(
+      'div',
+      { 'data-testid': 'eea-copyright' },
+      props.children,
+    );
+  Copyright.Icon = (props) =>
+    React.createElement(
+      'span',
+      { 'data-testid': 'eea-copyright-icon' },
+      props.children,
+    );
+  Copyright.Text = (props) =>
+    React.createElement(
+      'span',
+      { 'data-testid': 'eea-copyright-text' },
+      props.children,
+    );
+
+  return {
+    __esModule: true,
+    default: Copyright,
+  };
+});
+
+// Register our mock Image component so config.getComponent({ name: 'Image' })
+// returns something renderable during tests.
+const MockImage = jest.requireMock('@plone/volto/components').Image;
 config.set('components', {
-  Image: { component: Image },
+  Image: { component: MockImage },
 });
 
 const mockStore = configureMockStore();
 const { settings } = config;
 
-let store;
-
 config.blocks.blocksConfig = {
   image: {
     id: 'image',
@@ -34,286 +116,202 @@ config.blocks.blocksConfig = {
     getSizes: getImageBlockSizes,
   },
 };
+
 const blockId = '1234';
 
-describe('Edit', () => {
-  beforeEach(() => {
-    store = mockStore({
-      content: {
-        create: {},
-        data: {},
-        subrequests: {
-          [blockId]: {},
-        },
-      },
-      intl: {
-        locale: 'en',
-        messages: {},
-      },
-    });
+/**
+ * Helper: render Edit wrapped in Redux + intl Provider.
+ */
+const renderEdit = (data, extraProps = {}) => {
+  settings.internalApiPath = 'http://localhost:8080/Plone';
+  const store = mockStore({
+    content: {
+      create: {},
+      data: {},
+      subrequests: { [blockId]: {} },
+    },
+    intl: { locale: 'en', messages: {} },
   });
 
-  it('should render without errors', () => {
-    const { container } = render(
-      <Provider store={store}>
-        <Edit
-          data={{
-            url: 'http://localhost:8080/Plone/image',
-            '@type': 'image',
-            align: 'full',
-          }}
-          selected={false}
-          block={blockId}
-          content={{}}
-          request={{
-            loading: false,
-            loaded: false,
-          }}
-          pathname="/news"
-          onChangeBlock={() => {}}
-          onSelectBlock={() => {}}
-          onDeleteBlock={() => {}}
-          createContent={() => {}}
-          onFocusPreviousBlock={() => {}}
-          onFocusNextBlock={() => {}}
-          handleKeyDown={() => {}}
-          index={1}
-          openObjectBrowser={() => {}}
-        />
-      </Provider>,
-    );
+  return render(
+    <Provider store={store}>
+      <Edit
+        data={{ '@type': 'image', ...data }}
+        selected={false}
+        block={blockId}
+        content={{}}
+        request={{ loading: false, loaded: false }}
+        pathname="/news"
+        onChangeBlock={() => {}}
+        onSelectBlock={() => {}}
+        onDeleteBlock={() => {}}
+        createContent={() => {}}
+        onFocusPreviousBlock={() => {}}
+        onFocusNextBlock={() => {}}
+        handleKeyDown={() => {}}
+        index={1}
+        openObjectBrowser={() => {}}
+        {...extraProps}
+      />
+    </Provider>,
+  );
+};
 
-    settings.internalApiPath = 'http://localhost:8080/Plone';
+// ---------------------------------------------------------------------------
+// getImageBlockSizes — pure-function export used by blocksConfig.getSizes
+// ---------------------------------------------------------------------------
 
-    expect(container.querySelector('.block.image.align')).toBeInTheDocument();
-    expect(
-      container.querySelector('.image-block-container'),
-    ).toBeInTheDocument();
-    expect(container.querySelector('.copyright-wrapper')).toBeInTheDocument();
+describe('getImageBlockSizes', () => {
+  it('returns 100vw for full-width alignment', () => {
+    expect(getImageBlockSizes({ align: 'full' })).toBe('100vw');
   });
 
-  it('should render without errors', () => {
-    const { container } = render(
-      <Provider store={store}>
-        <Edit
-          data={{
-            url: 'http://localhost:8080/Plone/image',
-            '@type': 'image',
-            size: 'l',
-            copyright: 'Copyright',
-          }}
-          selected={false}
-          block={blockId}
-          content={{}}
-          request={{
-            loading: false,
-            loaded: false,
-          }}
-          pathname="/news"
-          onChangeBlock={() => {}}
-          onSelectBlock={() => {}}
-          onDeleteBlock={() => {}}
-          createContent={() => {}}
-          onFocusPreviousBlock={() => {}}
-          onFocusNextBlock={() => {}}
-          handleKeyDown={() => {}}
-          index={1}
-          openObjectBrowser={() => {}}
-        />
-      </Provider>,
-    );
+  it('returns correct sizes for centered alignment', () => {
+    expect(getImageBlockSizes({ align: 'center', size: 'l' })).toBe('100vw');
+    expect(getImageBlockSizes({ align: 'center', size: 'm' })).toBe('50vw');
+    expect(getImageBlockSizes({ align: 'center', size: 's' })).toBe('25vw');
+  });
 
-    settings.internalApiPath = 'http://localhost:8080/Plone';
+  it('returns correct sizes for left / right alignment', () => {
+    expect(getImageBlockSizes({ align: 'left', size: 'l' })).toBe('50vw');
+    expect(getImageBlockSizes({ align: 'left', size: 'm' })).toBe('25vw');
+    expect(getImageBlockSizes({ align: 'right', size: 's' })).toBe('15vw');
+  });
 
-    expect(container.querySelector('.block.image.align')).toBeInTheDocument();
-    expect(
-      container.querySelector('.image-block-container'),
-    ).toBeInTheDocument();
-    expect(container.querySelector('.copyright-wrapper')).toBeInTheDocument();
+  it('returns undefined for unknown alignment', () => {
+    expect(getImageBlockSizes({})).toBeUndefined();
   });
+});
 
-  it('should render without errors', () => {
-    const { container } = render(
-      <Provider store={store}>
-        <Edit
-          data={{
-            url: 'http://localhost:8080/Plone/image',
-            '@type': 'image',
-            size: 'm',
-          }}
-          selected={false}
-          block={blockId}
-          content={{}}
-          request={{
-            loading: false,
-            loaded: false,
-          }}
-          pathname="/news"
-          onChangeBlock={() => {}}
-          onSelectBlock={() => {}}
-          onDeleteBlock={() => {}}
-          createContent={() => {}}
-          onFocusPreviousBlock={() => {}}
-          onFocusNextBlock={() => {}}
-          handleKeyDown={() => {}}
-          index={1}
-          openObjectBrowser={() => {}}
-        />
-      </Provider>,
-    );
+// ---------------------------------------------------------------------------
+// Edit rendering — EEA structural requirements (image-block-container, etc.)
+// ---------------------------------------------------------------------------
 
-    settings.internalApiPath = 'http://localhost:8080/Plone';
+describe('Edit', () => {
+  it('renders the EEA wrapper structure when a URL is provided (full align)', () => {
+    const { container } = renderEdit({
+      url: 'http://localhost:8080/Plone/image',
+      align: 'full',
+    });
 
     expect(container.querySelector('.block.image.align')).toBeInTheDocument();
     expect(
       container.querySelector('.image-block-container'),
     ).toBeInTheDocument();
+    // copyright-wrapper is always rendered when there is a URL
     expect(container.querySelector('.copyright-wrapper')).toBeInTheDocument();
   });
 
-  it('should render without errors', () => {
-    const { container } = render(
-      <Provider store={store}>
-        <Edit
-          data={{
-            url: 'http://localhost:8080/Plone/image',
-            '@type': 'image',
-            size: 's',
-          }}
-          selected={false}
-          block={blockId}
-          content={{}}
-          request={{
-            loading: false,
-            loaded: false,
-          }}
-          pathname="/news"
-          onChangeBlock={() => {}}
-          onSelectBlock={() => {}}
-          onDeleteBlock={() => {}}
-          createContent={() => {}}
-          onFocusPreviousBlock={() => {}}
-          onFocusNextBlock={() => {}}
-          handleKeyDown={() => {}}
-          index={1}
-          openObjectBrowser={() => {}}
-        />
-      </Provider>,
+  it('shows the copyright overlay when copyright text is set and size is l', () => {
+    const { getByTestId } = renderEdit({
+      url: 'http://localhost:8080/Plone/image',
+      size: 'l',
+      copyright: 'EEA Copyright',
+      copyrightIcon: 'ri-copyright-line',
+      copyrightPosition: 'left',
+    });
+
+    expect(getByTestId('eea-copyright')).toBeInTheDocument();
+    expect(getByTestId('eea-copyright-text')).toHaveTextContent(
+      'EEA Copyright',
     );
+  });
+
+  it('shows the copyright overlay when no size is specified (defaults to showing)', () => {
+    const { getByTestId } = renderEdit({
+      url: 'http://localhost:8080/Plone/image',
+      copyright: 'EEA Copyright',
+    });
+    // showCopyright is true when size is undefined
+    expect(getByTestId('eea-copyright')).toBeInTheDocument();
+  });
 
-    settings.internalApiPath = 'http://localhost:8080/Plone';
+  it('hides the copyright overlay when size is m', () => {
+    const { queryByTestId } = renderEdit({
+      url: 'http://localhost:8080/Plone/image',
+      size: 'm',
+      copyright: 'EEA Copyright',
+    });
+
+    // showCopyright is false for size !== 'l' and size !== undefined
+    expect(queryByTestId('eea-copyright')).not.toBeInTheDocument();
+  });
+
+  it('hides the copyright overlay when size is s', () => {
+    const { queryByTestId } = renderEdit({
+      url: 'http://localhost:8080/Plone/image',
+      size: 's',
+      copyright: 'EEA Copyright',
+    });
+    expect(queryByTestId('eea-copyright')).not.toBeInTheDocument();
+  });
+
+  it('renders without copyright when no copyright text is provided', () => {
+    const { container, queryByTestId } = renderEdit({
+      url: 'http://localhost:8080/Plone/image',
+      size: 'l',
+    });
 
-    expect(container.querySelector('.block.image.align')).toBeInTheDocument();
     expect(
       container.querySelector('.image-block-container'),
     ).toBeInTheDocument();
-    expect(container.querySelector('.copyright-wrapper')).toBeInTheDocument();
+    expect(queryByTestId('eea-copyright')).not.toBeInTheDocument();
   });
 
-  it('should render without errors', () => {
-    const { container } = render(
-      <Provider store={store}>
-        <Edit
-          data={{
-            url: 'http://localhost:8080/Plone/image',
-            '@type': 'image',
-          }}
-          selected={false}
-          block={blockId}
-          content={{}}
-          request={{
-            loading: false,
-            loaded: false,
-          }}
-          pathname="/news"
-          onChangeBlock={() => {}}
-          onSelectBlock={() => {}}
-          onDeleteBlock={() => {}}
-          createContent={() => {}}
-          onFocusPreviousBlock={() => {}}
-          onFocusNextBlock={() => {}}
-          handleKeyDown={() => {}}
-          index={1}
-          openObjectBrowser={() => {}}
-        />
-      </Provider>,
-    );
-
-    settings.internalApiPath = 'http://localhost:8080/Plone';
+  it('renders without a URL — shows the dropzone upload UI', () => {
+    const { container } = renderEdit({ url: undefined }, { editable: true });
 
     expect(container.querySelector('.block.image.align')).toBeInTheDocument();
     expect(
       container.querySelector('.image-block-container'),
     ).toBeInTheDocument();
-    expect(container.querySelector('.copyright-wrapper')).toBeInTheDocument();
+    // No copyright-wrapper when there is no image URL
+    expect(
+      container.querySelector('.copyright-wrapper'),
+    ).not.toBeInTheDocument();
   });
 
-  it('should render without errors', () => {
-    const { container } = render(
-      <Provider store={store}>
-        <Edit
-          data={{
-            url: 'http://localhost:80801/Plone/image',
-            '@type': 'image',
-          }}
-          selected={false}
-          block={blockId}
-          content={{}}
-          request={{
-            loading: false,
-            loaded: false,
-          }}
-          pathname="/news"
-          onChangeBlock={() => {}}
-          onSelectBlock={() => {}}
-          onDeleteBlock={() => {}}
-          createContent={() => {}}
-          onFocusPreviousBlock={() => {}}
-          onFocusNextBlock={() => {}}
-          handleKeyDown={() => {}}
-          index={1}
-          openObjectBrowser={() => {}}
-        />
-      </Provider>,
-    );
+  it('applies align class to both the outer block and the EEA container', () => {
+    const { container } = renderEdit({
+      url: 'http://localhost:8080/Plone/image',
+      align: 'left',
+    });
+
+    const outer = container.querySelector('.block.image.align');
+    expect(outer).toHaveClass('left');
+    const inner = container.querySelector('.image-block-container');
+    expect(inner).toHaveClass('left');
+  });
 
-    settings.internalApiPath = 'http://localhost:8080/Plone';
+  it('applies center class when no align is provided', () => {
+    const { container } = renderEdit({
+      url: 'http://localhost:8080/Plone/image',
+    });
+
+    const outer = container.querySelector('.block.image.align');
+    expect(outer).toHaveClass('center');
+  });
+
+  it('applies size class to the EEA container and the image', () => {
+    const { container } = renderEdit({
+      url: 'http://localhost:8080/Plone/image',
+      size: 'l',
+    });
+
+    const inner = container.querySelector('.image-block-container');
+    expect(inner).toHaveClass('large');
+    const img = container.querySelector('[data-testid="volto-image"]');
+    expect(img).toHaveClass('large');
+  });
+
+  it('renders with an external URL', () => {
+    const { container } = renderEdit({
+      url: 'https://example.com/image.png',
+    });
 
     expect(container.querySelector('.block.image.align')).toBeInTheDocument();
     expect(
       container.querySelector('.image-block-container'),
     ).toBeInTheDocument();
-    expect(container.querySelector('.copyright-wrapper')).toBeInTheDocument();
-  });
-
-  it('should render without errors', () => {
-    render(
-      <Provider store={store}>
-        <Edit
-          data={{
-            url: undefined,
-            '@type': 'image',
-          }}
-          selected={false}
-          block={blockId}
-          content={{}}
-          request={{
-            loading: false,
-            loaded: false,
-          }}
-          editable={true}
-          pathname="/news"
-          onChangeBlock={() => {}}
-          onSelectBlock={() => {}}
-          onDeleteBlock={() => {}}
-          createContent={() => {}}
-          onFocusPreviousBlock={() => {}}
-          onFocusNextBlock={() => {}}
-          handleKeyDown={() => {}}
-          index={1}
-          openObjectBrowser={() => {}}
-        />
-      </Provider>,
-    );
   });
 });

package/src/customizations/volto/components/manage/Blocks/Image/View.jsx

@@ -6,16 +6,13 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import { UniversalLink } from '@plone/volto/components';
+import UniversalLink from '@plone/volto/components/manage/UniversalLink/UniversalLink';
 import { Icon } from 'semantic-ui-react';
 import cx from 'classnames';
-import {
-  flattenToAppURL,
-  isInternalURL,
-  withBlockExtensions,
-} from '@plone/volto/helpers';
+import { flattenToAppURL, isInternalURL } from '@plone/volto/helpers/Url/Url';
+import { withBlockExtensions } from '@plone/volto/helpers//Extensions';
 import config from '@plone/volto/registry';
-import { Copyright } from '@eeacms/volto-eea-design-system/ui';
+import Copyright from '@eeacms/volto-eea-design-system/ui/Copyright/Copyright';
 
 /**
  * View image block class.
@@ -25,7 +22,8 @@ import { Copyright } from '@eeacms/volto-eea-design-system/ui';
 export const View = (props) => {
   const { className, data, detached, style } = props;
   const { copyright, copyrightIcon, copyrightPosition } = data;
-  const href = data?.href?.[0]?.['@id'] || '';
+  const hrefItem = data?.href?.[0];
+  const href = hrefItem?.['@id'] || '';
   const showCopyright = data?.size === 'l' || !data.size;
 
   const Image = config.getComponent({ name: 'Image' }).component;
@@ -84,25 +82,25 @@ export const View = (props) => {
                         data.image_scales
                           ? undefined
                           : isInternalURL(data.url)
-                          ? // Backwards compat in the case that the block is storing the full server URL
-                            (() => {
-                              if (data.size === 'l')
+                            ? // Backwards compat in the case that the block is storing the full server URL
+                              (() => {
+                                if (data.size === 'l')
+                                  return `${flattenToAppURL(
+                                    data.url,
+                                  )}/@@images/image/large`;
+                                if (data.size === 'm')
+                                  return `${flattenToAppURL(
+                                    data.url,
+                                  )}/@@images/image/preview`;
+                                if (data.size === 's')
+                                  return `${flattenToAppURL(
+                                    data.url,
+                                  )}/@@images/image/mini`;
                                 return `${flattenToAppURL(
                                   data.url,
                                 )}/@@images/image/large`;
-                              if (data.size === 'm')
-                                return `${flattenToAppURL(
-                                  data.url,
-                                )}/@@images/image/preview`;
-                              if (data.size === 's')
-                                return `${flattenToAppURL(
-                                  data.url,
-                                )}/@@images/image/mini`;
-                              return `${flattenToAppURL(
-                                data.url,
-                              )}/@@images/image/large`;
-                            })()
-                          : data.url
+                              })()
+                            : data.url
                       }
                       sizes={config.blocks.blocksConfig.image.getSizes(data)}
                       alt={data.alt || ''}
@@ -130,7 +128,7 @@ export const View = (props) => {
                 if (href) {
                   return (
                     <UniversalLink
-                      href={href}
+                      item={hrefItem}
                       openLinkInNewTab={data.openLinkInNewTab}
                     >
                       {image}

package/src/customizations/volto/components/manage/Blocks/LeadImage/Edit.jsx

@@ -2,18 +2,18 @@
  * Edit image block.
  * @module components/manage/Blocks/Image/Edit
  */
-
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { compose } from 'redux';
 import { defineMessages, injectIntl } from 'react-intl';
 import cx from 'classnames';
 import { Message } from 'semantic-ui-react';
-import { isEqual } from 'lodash';
+import isEqual from 'lodash/isEqual';
 
-import { Copyright } from '@eeacms/volto-eea-design-system/ui';
+import Copyright from '@eeacms/volto-eea-design-system/ui/Copyright/Copyright';
 import { Icon } from 'semantic-ui-react';
-import { LeadImageSidebar, SidebarPortal } from '@plone/volto/components';
+import LeadImageSidebar from '@plone/volto/components/manage/Blocks/LeadImage/LeadImageSidebar';
+import SidebarPortal from '@plone/volto/components/manage/Sidebar/SidebarPortal';
 import config from '@plone/volto/registry';
 
 import imageBlockSVG from '@plone/volto/components/manage/Blocks/Image/block-image.svg';
@@ -111,6 +111,7 @@ class Edit extends Component {
           {!hasImage && (
             <Message>
               <center>
+                {/* eslint-disable-next-line no-restricted-syntax */}
                 <img src={imageBlockSVG} alt="" />
                 <div className="message-text">{placeholder}</div>
               </center>
@@ -118,6 +119,7 @@ class Edit extends Component {
           )}
           {hasImage && hasImageData && (
             <div className="image-block">
+              {/* eslint-disable-next-line no-restricted-syntax */}
               <img
                 className={(className, data?.styles?.objectPosition)}
                 src={`data:${properties.image['content-type']};base64,${properties.image.data}`}