@plone/volto 19.0.0-alpha.0 → 19.0.0-alpha.2

package/src/components/manage/Preferences/ChangePassword.test.jsx

@@ -9,8 +9,15 @@ import ChangePassword from './ChangePassword';
 
 const mockStore = configureStore();
 
-jest.mock('@plone/volto/components/manage/Form');
-jest.mock('../Toolbar/Toolbar', () => jest.fn(() => <div id="Portal" />));
+vi.mock('@plone/volto/components/manage/Form', async () => {
+  return await import(
+    '@plone/volto/components/manage/Form/__mocks__/index.vitest.tsx'
+  );
+});
+
+vi.mock('../Toolbar/Toolbar', () => ({
+  default: vi.fn(() => <div id="Portal" />),
+}));
 
 describe('ChangePassword', () => {
   it('renders a change password component', () => {

package/src/components/manage/Preferences/PersonalInformation.test.jsx

@@ -18,7 +18,9 @@ const userSchema = {
   loading: false,
 };
 
-jest.mock('../Toolbar/Toolbar', () => jest.fn(() => <div id="Portal" />));
+vi.mock('../Toolbar/Toolbar', () => ({
+  default: vi.fn(() => <div id="Portal" />),
+}));
 
 describe('PersonalInformation', () => {
   it('renders a personal information component', async () => {

package/src/components/manage/Preferences/PersonalPreferences.test.jsx

@@ -8,14 +8,27 @@ import PersonalPreferences from './PersonalPreferences';
 
 const mockStore = configureStore();
 
-jest.mock('../Toolbar/Toolbar', () => jest.fn(() => <div id="Portal" />));
+vi.mock('../Toolbar/Toolbar', () => ({
+  default: vi.fn(() => <div id="Portal" />),
+}));
 
-jest.mock('@plone/volto/components/manage/Form');
-jest.mock('@plone/volto/helpers/Loadable/Loadable');
-beforeAll(
-  async () =>
-    await require('@plone/volto/helpers/Loadable/Loadable').__setLoadables(),
-);
+vi.mock('@plone/volto/components/manage/Form', async () => {
+  return await import(
+    '@plone/volto/components/manage/Form/__mocks__/index.vitest.tsx'
+  );
+});
+vi.mock('@plone/volto/helpers/Loadable/Loadable', async () => {
+  return await import(
+    '@plone/volto/helpers/Loadable/__mocks__/Loadable.vitest.jsx'
+  );
+});
+
+beforeAll(async () => {
+  const { __setLoadables } = await import(
+    '@plone/volto/helpers/Loadable/Loadable'
+  );
+  await __setLoadables();
+});
 
 describe('PersonalPreferences', () => {
   it('renders a personal preferences component', () => {

package/src/components/manage/Rules/Rules.test.jsx

@@ -9,9 +9,12 @@ import Rules from './Rules';
 const middlewares = [thunk];
 const mockStore = configureMockStore(middlewares);
 
-jest.mock('../Toolbar/Toolbar', () => jest.fn(() => <div id="Portal" />));
-
-jest.mock('../Toolbar/More', () => jest.fn(() => <div className="More" />));
+vi.mock('../Toolbar/Toolbar', () => ({
+  default: vi.fn(() => <div id="Portal" />),
+}));
+vi.mock('../Toolbar/More', () => ({
+  default: vi.fn(() => <div className="More" />),
+}));
 
 describe('Rules', () => {
   it('renders rules object control', () => {

package/src/components/manage/Sharing/Sharing.test.jsx

@@ -10,7 +10,9 @@ import Sharing from './Sharing';
 
 const mockStore = configureStore();
 
-jest.mock('../Toolbar/Toolbar', () => jest.fn(() => <div id="Portal" />));
+vi.mock('../Toolbar/Toolbar', () => ({
+  default: vi.fn(() => <div id="Portal" />),
+}));
 
 describe('Sharing', () => {
   it('renders a sharing component', () => {

package/src/components/manage/Sidebar/ObjectBrowserNav.test.jsx

@@ -110,11 +110,11 @@ describe('ObjectBrowserNav', () => {
   const baseProps = {
     currentSearchResults,
     isSelectable: () => true,
-    handleClickOnItem: jest.fn(),
-    handleDoubleClickOnItem: jest.fn(),
+    handleClickOnItem: vi.fn(),
+    handleDoubleClickOnItem: vi.fn(),
     mode: 'link',
     view: 'list',
-    navigateTo: jest.fn(),
+    navigateTo: vi.fn(),
   };
 
   it('renders a view image component', () => {

package/src/components/manage/Toolbar/More.test.jsx

@@ -6,13 +6,12 @@ import { waitFor, render } from '@testing-library/react';
 
 import More from './More';
 
-jest.mock('../../manage/Display/Display', () =>
-  jest.fn(() => <div id="display-select" />),
-);
-
-jest.mock('../../manage/Workflow/Workflow', () =>
-  jest.fn(() => <div id="state-select" />),
-);
+vi.mock('../../manage/Display/Display', () => ({
+  default: vi.fn(() => <div id="display-select" />),
+}));
+vi.mock('../../manage/Workflow/Workflow', () => ({
+  default: vi.fn(() => <div id="state-select" />),
+}));
 
 const mockStore = configureStore();
 

package/src/components/manage/UniversalLink/UniversalLink.test.jsx

@@ -4,7 +4,7 @@ import { Provider } from 'react-intl-redux';
 import configureStore from 'redux-mock-store';
 import { render } from '@testing-library/react';
 import { MemoryRouter } from 'react-router-dom';
-import UniversalLink from './UniversalLink';
+import UniversalLink, { __test } from './UniversalLink';
 import config from '@plone/volto/registry';
 
 const mockStore = configureStore();
@@ -18,7 +18,7 @@ const store = mockStore({
   },
 });
 
-global.console.error = jest.fn();
+global.console.error = vi.fn();
 
 describe('UniversalLink', () => {
   it('renders a UniversalLink component with internal link', () => {
@@ -39,7 +39,10 @@ describe('UniversalLink', () => {
     const component = renderer.create(
       <Provider store={store}>
         <MemoryRouter>
-          <UniversalLink href="https://github.com/plone/volto">
+          <UniversalLink
+            href="https://github.com/plone/volto"
+            className="custom-link"
+          >
             <h1>Title</h1>
           </UniversalLink>
         </MemoryRouter>
@@ -213,18 +216,197 @@ describe('UniversalLink', () => {
     expect(json).toMatchSnapshot();
     expect(global.console.error).toHaveBeenCalled();
   });
-});
 
-it('renders a UniversalLink component when url ends with @@display-file', () => {
-  const component = renderer.create(
-    <Provider store={store}>
-      <MemoryRouter>
-        <UniversalLink href="http://localhost:3000/en/welcome-to-volto/@@display-file">
+  it('renders a UniversalLink component when url ends with @@display-file', () => {
+    const component = renderer.create(
+      <Provider store={store}>
+        <MemoryRouter>
+          <UniversalLink href="http://localhost:3000/en/welcome-to-volto/@@display-file">
+            <h1>Title</h1>
+          </UniversalLink>
+        </MemoryRouter>
+      </Provider>,
+    );
+    const json = component.toJSON();
+    expect(json).toMatchSnapshot();
+  });
+
+  test('only one UniversalLink re-renders when prop changes (stable references)', () => {
+    const renderCounter = vi.fn();
+    __test.renderCounter = renderCounter;
+
+    const itemA = { '@id': '/en/a' };
+    const itemB = { '@id': '/en/b' };
+    const itemC = { '@id': '/en/c' };
+
+    const Wrapper = ({ children }) => (
+      <Provider store={store}>
+        <MemoryRouter>{children}</MemoryRouter>
+      </Provider>
+    );
+
+    const { rerender } = render(
+      <>
+        <UniversalLink item={itemA} />
+        <UniversalLink item={itemB} />
+        <UniversalLink item={itemC} />
+      </>,
+      { wrapper: Wrapper },
+    );
+
+    // expect 3 renders
+    expect(renderCounter).toHaveBeenCalledTimes(3);
+
+    const updatedItemB = { '@id': '/en/b-updated' };
+
+    rerender(
+      <>
+        <UniversalLink item={itemA} />
+        <UniversalLink item={updatedItemB} />
+        <UniversalLink item={itemC} />
+      </>,
+    );
+
+    // expect 4 renders (only one UniversalLink re-renders)
+    expect(renderCounter).toHaveBeenCalledTimes(4);
+  });
+
+  test('only one UniversalLink re-renders when prop changes (with children - stable references)', () => {
+    const renderCounter = vi.fn();
+    __test.renderCounter = renderCounter;
+
+    const itemA = { '@id': '/en/a' };
+    const itemB = { '@id': '/en/b' };
+    const itemC = { '@id': '/en/c' };
+    const title = 'Title';
+
+    const Wrapper = ({ children }) => (
+      <Provider store={store}>
+        <MemoryRouter>{children}</MemoryRouter>
+      </Provider>
+    );
+
+    const { rerender } = render(
+      <>
+        <UniversalLink item={itemA}>{title}</UniversalLink>
+        <UniversalLink item={itemB}>{title}</UniversalLink>
+        <UniversalLink item={itemC}>{title}</UniversalLink>
+      </>,
+      { wrapper: Wrapper },
+    );
+
+    // expect 3 renders
+    expect(renderCounter).toHaveBeenCalledTimes(3);
+
+    const updatedItemB = { '@id': '/en/b-updated' };
+
+    rerender(
+      <>
+        <UniversalLink item={itemA}>{title}</UniversalLink>
+        <UniversalLink item={updatedItemB}>{title}</UniversalLink>
+        <UniversalLink item={itemC}>{title}</UniversalLink>
+      </>,
+    );
+
+    // expect 4 renders (only one UniversalLink re-renders)
+    expect(renderCounter).toHaveBeenCalledTimes(4);
+  });
+
+  test('[NEGATIVE TEST] UniversalLink re-renders all instances when children are inline JSX (React.memo ineffective)', () => {
+    // NEGATIVE TEST:
+    // This test demonstrates that React.memo does NOT prevent re-renders
+    // when props like `children` are passed as inline JSX.
+    // This is expected behavior due to unstable object references.
+    // Do NOT use inline props if render optimization is required.
+    const renderCounter = vi.fn();
+    __test.renderCounter = renderCounter;
+
+    const itemA = { '@id': '/en/a' };
+    const itemB = { '@id': '/en/b' };
+    const itemC = { '@id': '/en/c' };
+
+    const Wrapper = ({ children }) => (
+      <Provider store={store}>
+        <MemoryRouter>{children}</MemoryRouter>
+      </Provider>
+    );
+
+    const { rerender } = render(
+      <>
+        <UniversalLink item={itemA}>
+          <h1>Title</h1>
+        </UniversalLink>
+        <UniversalLink item={itemB}>
+          <h1>Title</h1>
+        </UniversalLink>
+        <UniversalLink item={itemC}>
+          <h1>Title</h1>
+        </UniversalLink>
+      </>,
+      { wrapper: Wrapper },
+    );
+
+    // expect 3 renders
+    expect(renderCounter).toHaveBeenCalledTimes(3);
+
+    const updatedItemB = { '@id': '/en/b-updated' };
+
+    rerender(
+      <>
+        <UniversalLink item={itemA}>
           <h1>Title</h1>
         </UniversalLink>
-      </MemoryRouter>
-    </Provider>,
-  );
-  const json = component.toJSON();
-  expect(json).toMatchSnapshot();
+        <UniversalLink item={updatedItemB}>
+          <h1>Title</h1>
+        </UniversalLink>
+        <UniversalLink item={itemC}>
+          <h1>Title</h1>
+        </UniversalLink>
+      </>,
+    );
+
+    // expect 6 renders (React.memo does NOT prevent re-renders when props like `children` are passed as inline JSX.)
+    expect(renderCounter).toHaveBeenCalledTimes(6);
+  });
+
+  test('[NEGATIVE TEST] UniversalLink re-renders all instances when props are inline JSX (React.memo ineffective)', () => {
+    // NEGATIVE TEST:
+    // This test demonstrates that React.memo does NOT prevent re-renders
+    // when props like `item` are passed as inline object.
+    // This is expected behavior due to unstable object references.
+    // Do NOT use inline props if render optimization is required.
+    const renderCounter = vi.fn();
+    __test.renderCounter = renderCounter;
+
+    const title = 'Title';
+
+    const Wrapper = ({ children }) => (
+      <Provider store={store}>
+        <MemoryRouter>{children}</MemoryRouter>
+      </Provider>
+    );
+
+    const { rerender } = render(
+      <>
+        <UniversalLink item={{ '@id': '/en/a' }}>{title}</UniversalLink>
+        <UniversalLink item={{ '@id': '/en/b' }}>{title}</UniversalLink>
+        <UniversalLink item={{ '@id': '/en/c' }}>{title}</UniversalLink>
+      </>,
+      { wrapper: Wrapper },
+    );
+
+    // expect 3 renders
+    expect(renderCounter).toHaveBeenCalledTimes(3);
+
+    rerender(
+      <>
+        <UniversalLink item={{ '@id': '/en/a' }}>{title}</UniversalLink>
+        <UniversalLink item={{ '@id': '/en/b' }}>{title}</UniversalLink>
+        <UniversalLink item={{ '@id': '/en/c' }}>{title}</UniversalLink>
+      </>,
+    );
+
+    // expect 6 renders (React.memo does NOT prevent re-renders when props like `children` are passed as inline JSX.)
+    expect(renderCounter).toHaveBeenCalledTimes(6);
+  });
 });

package/src/components/manage/UniversalLink/UniversalLink.tsx

@@ -0,0 +1,214 @@
+import React from 'react';
+import { HashLink as Link } from 'react-router-hash-link';
+import { useSelector } from 'react-redux';
+import {
+  flattenToAppURL,
+  isInternalURL,
+  URLUtils,
+} from '@plone/volto/helpers/Url/Url';
+import config from '@plone/volto/registry';
+import cx from 'classnames';
+import type { ObjectBrowserItem } from '@plone/types';
+
+type BaseProps = {
+  openLinkInNewTab?: boolean;
+  download?: boolean;
+  children: React.ReactNode;
+  className?: string;
+  title?: string;
+  smooth?: boolean;
+  onClick?: (e: React.MouseEvent) => void;
+  onKeyDown?: (e: React.KeyboardEvent) => void;
+};
+
+type HrefOnly = {
+  href: string;
+  item?: never;
+} & BaseProps;
+
+type ItemOnly = {
+  href?: never;
+  item: Partial<ObjectBrowserItem> & { remoteUrl?: string };
+} & BaseProps;
+
+export type UniversalLinkProps = HrefOnly | ItemOnly;
+export interface AppState {
+  content: {
+    data?: {
+      '@components'?: {
+        translations?: {
+          items?: { language: string; '@id': string }[];
+        };
+      };
+    };
+  };
+  navroot: {
+    data: {
+      navroot: {
+        id: string;
+      };
+    };
+  };
+  intl: {
+    locale: string;
+  };
+  userSession: {
+    token: string | null;
+  };
+}
+
+export const __test = {
+  renderCounter: () => {},
+};
+
+export function getUrl(
+  props: UniversalLinkProps,
+  token: string | null,
+  item: UniversalLinkProps['item'],
+  children: React.ReactNode,
+): string {
+  if ('href' in props && typeof props.href === 'string') {
+    return props.href;
+  }
+
+  if (!item || item['@id'] === '') return config.settings.publicURL;
+  if (!item['@id']) {
+    // eslint-disable-next-line no-console
+    console.error(
+      'Invalid item passed to UniversalLink',
+      item,
+      props,
+      children,
+    );
+    return '#';
+  }
+
+  let url = flattenToAppURL(item['@id']);
+  const remoteUrl = item.remoteUrl || item.getRemoteUrl;
+
+  if (!token && remoteUrl) {
+    url = remoteUrl;
+  }
+
+  if (
+    !token &&
+    item['@type'] &&
+    config.settings.downloadableObjects.includes(item['@type'])
+  ) {
+    url = `${url}/@@download/file`;
+  }
+
+  if (
+    !token &&
+    item['@type'] &&
+    config.settings.viewableInBrowserObjects.includes(item['@type'])
+  ) {
+    url = `${url}/@@display-file/file`;
+  }
+
+  return url;
+}
+
+const UniversalLink = React.memo(
+  React.forwardRef<HTMLAnchorElement | HTMLDivElement, UniversalLinkProps>(
+    function UniversalLink(props, ref) {
+      const {
+        openLinkInNewTab,
+        download,
+        children,
+        className,
+        title,
+        smooth,
+        onClick,
+        onKeyDown,
+        item,
+        ...rest
+      } = props;
+      __test.renderCounter();
+
+      const token = useSelector<AppState, string | null>(
+        (state) => state.userSession?.token,
+      );
+
+      let url = getUrl(props, token, item, children);
+
+      const isExternal = !isInternalURL(url);
+
+      const isDownload =
+        (!isExternal && url.includes('@@download')) || download;
+      const isDisplayFile =
+        (!isExternal && url.includes('@@display-file')) || false;
+
+      const checkedURL = URLUtils.checkAndNormalizeUrl(url);
+
+      url = checkedURL.url;
+      let tag = (
+        <Link
+          to={flattenToAppURL(url)}
+          target={openLinkInNewTab ?? false ? '_blank' : undefined}
+          title={title}
+          className={className}
+          smooth={smooth ?? config.settings.hashLinkSmoothScroll}
+          // @ts-ignore
+          ref={ref}
+          {...rest}
+        >
+          {children}
+        </Link>
+      );
+
+      if (isExternal) {
+        const isTelephoneOrMail = checkedURL.isMail || checkedURL.isTelephone;
+        const getClassName = cx({ external: !isTelephoneOrMail }, className);
+
+        tag = (
+          <a
+            href={url}
+            title={title}
+            target={
+              !isTelephoneOrMail && !(openLinkInNewTab === false)
+                ? '_blank'
+                : undefined
+            }
+            rel="noopener noreferrer"
+            {...rest}
+            className={getClassName}
+            ref={ref as React.Ref<HTMLAnchorElement>}
+          >
+            {children}
+          </a>
+        );
+      } else if (isDownload) {
+        tag = (
+          <a
+            href={flattenToAppURL(url)}
+            download
+            title={title}
+            {...rest}
+            className={className}
+            ref={ref as React.Ref<HTMLAnchorElement>}
+          >
+            {children}
+          </a>
+        );
+      } else if (isDisplayFile) {
+        tag = (
+          <a
+            title={title}
+            target="_blank"
+            rel="noopener noreferrer"
+            {...rest}
+            href={flattenToAppURL(url)}
+            className={className}
+            ref={ref as React.Ref<HTMLAnchorElement>}
+          >
+            {children}
+          </a>
+        );
+      }
+      return tag;
+    },
+  ),
+);
+
+export default UniversalLink;

package/src/components/manage/Widgets/ArrayWidget.test.jsx

@@ -8,11 +8,25 @@ import ArrayWidget from './ArrayWidget';
 
 const mockStore = configureStore();
 
-jest.mock('@plone/volto/helpers/Loadable/Loadable');
-beforeAll(
-  async () =>
-    await require('@plone/volto/helpers/Loadable/Loadable').__setLoadables(),
-);
+vi.mock('@plone/volto/helpers/Loadable/Loadable', async () => {
+  return await import(
+    '@plone/volto/helpers/Loadable/__mocks__/Loadable.vitest.jsx'
+  );
+});
+
+// Mock react-sortable-hoc to prevent the container error
+vi.mock('react-sortable-hoc', () => ({
+  ...vi.importActual('react-sortable-hoc'),
+  SortableContainer: (component) => component,
+  SortableElement: (component) => component,
+}));
+
+beforeAll(async () => {
+  const { __setLoadables } = await import(
+    '@plone/volto/helpers/Loadable/Loadable'
+  );
+  await __setLoadables();
+});
 
 test('renders an array widget component', async () => {
   const store = mockStore({
@@ -27,6 +41,7 @@ test('renders an array widget component', async () => {
       },
     },
   });
+
   const component = renderer.create(
     <Provider store={store}>
       <ArrayWidget
@@ -38,6 +53,7 @@ test('renders an array widget component', async () => {
       />
     </Provider>,
   );
+
   await waitFor(() => {});
   expect(component.toJSON()).toMatchSnapshot();
 });
@@ -83,5 +99,6 @@ test("No 'No value' option when default value is 0", async () => {
     container.querySelector('.react-select__dropdown-indicator'),
     { button: 0 },
   );
+
   expect(container).toMatchSnapshot();
 });

package/src/components/manage/Widgets/CheckboxGroupWidget.test.jsx

@@ -7,11 +7,18 @@ import CheckboxGroupWidget from './CheckboxGroupWidget';
 
 const mockStore = configureStore();
 
-jest.mock('@plone/volto/helpers/Loadable/Loadable');
-beforeAll(
-  async () =>
-    await require('@plone/volto/helpers/Loadable/Loadable').__setLoadables(),
-);
+vi.mock('@plone/volto/helpers/Loadable/Loadable', async () => {
+  return await import(
+    '@plone/volto/helpers/Loadable/__mocks__/Loadable.vitest.jsx'
+  );
+});
+
+beforeAll(async () => {
+  const { __setLoadables } = await import(
+    '@plone/volto/helpers/Loadable/Loadable'
+  );
+  await __setLoadables();
+});
 
 test('renders a checkbox group widget component', async () => {
   const store = mockStore({