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

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

@@ -8,12 +8,23 @@ import Display from './Display';
 
 const mockStore = configureStore();
 
-jest.mock('@plone/volto/components/manage/Widgets');
-jest.mock('@plone/volto/helpers/Loadable/Loadable');
-beforeAll(
-  async () =>
-    await require('@plone/volto/helpers/Loadable/Loadable').__setLoadables(),
-);
+vi.mock('@plone/volto/components/manage/Widgets', async () => {
+  return await import(
+    '@plone/volto/components/manage/Widgets/__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();
+});
 
 beforeEach(() => {
   config.views.layoutViewsNamesMapping = {

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

@@ -8,9 +8,17 @@ import { __test__ as Edit } from './Edit';
 
 const mockStore = configureStore();
 
-jest.mock('@plone/volto/components/manage/Form');
-jest.mock('../Toolbar/Toolbar', () => jest.fn(() => <div id="Portal" />));
-jest.mock('../Sidebar/Sidebar', () => jest.fn(() => <div id="Sidebar" />));
+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" />),
+}));
+vi.mock('../Sidebar/Sidebar', () => ({
+  default: vi.fn(() => <div id="Sidebar" />),
+}));
 
 describe('Edit', () => {
   it('renders an empty edit component', () => {

package/src/components/manage/Form/BlockDataForm.test.jsx

@@ -5,7 +5,11 @@ import configureStore from 'redux-mock-store';
 import config from '@plone/volto/registry';
 import { Provider } from 'react-intl-redux';
 
-jest.mock('@plone/volto/components/manage/Form');
+vi.mock('@plone/volto/components/manage/Form', async () => {
+  return await import(
+    '@plone/volto/components/manage/Form/__mocks__/index.vitest.tsx'
+  );
+});
 
 const mockStore = configureStore();
 

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

@@ -9,7 +9,11 @@ const mockStore = configureStore();
 const errorMessage =
   "[{'message': 'The specified email is not valid.', 'field': 'contact_email', 'error': 'ValidationError'}";
 
-jest.mock('@plone/volto/components/manage/Form');
+vi.mock('@plone/volto/components/manage/Form', async () => {
+  return await import(
+    '@plone/volto/components/manage/Form/__mocks__/index.vitest.tsx'
+  );
+});
 
 describe('Form', () => {
   it('renders a form component', () => {

package/src/components/manage/Form/InlineForm.test.jsx

@@ -6,7 +6,11 @@ import config from '@plone/volto/registry';
 
 import InlineForm from './InlineForm';
 
-jest.mock('@plone/volto/components/manage/Form');
+vi.mock('@plone/volto/components/manage/Form', async () => {
+  return await import(
+    '@plone/volto/components/manage/Form/__mocks__/index.vitest.tsx'
+  );
+});
 
 const mockStore = configureStore();
 

package/src/components/manage/Form/ModalForm.test.jsx

@@ -8,7 +8,11 @@ import ModalForm from './ModalForm';
 
 const mockStore = configureStore();
 
-jest.mock('@plone/volto/components/manage/Form');
+vi.mock('@plone/volto/components/manage/Form', async () => {
+  return await import(
+    '@plone/volto/components/manage/Form/__mocks__/index.vitest.tsx'
+  );
+});
 
 describe('ModalForm', () => {
   it('renders a modal form component', () => {

package/src/components/manage/Form/__mocks__/index.tsx

@@ -1,3 +1,20 @@
+/* TODO: When the Volto Team removes Jest configuration support from Volto core, update this file with the Vitest version of the mock.
+Then, in the tests, we need to replace:
+
+vi.mock('@plone/volto/components/manage/Form', async () => {
+  return await import(
+    '@plone/volto/components/manage/Form/__mocks__/index.vitest.tsx'
+  );
+});
+
+
+with the following:
+
+vi.mock('@plone/volto/components/manage/Form');
+
+Finally, remove this comment.
+*/
+
 import type { JSONSchema } from '@plone/types';
 import type { Ref } from 'react';
 const { forwardRef } = jest.requireActual('react');

package/src/components/manage/Form/__mocks__/index.vitest.tsx

@@ -0,0 +1,73 @@
+import type { JSONSchema } from '@plone/types';
+import type { Ref } from 'react';
+import { forwardRef } from 'react';
+
+const cleanupSchema = (schema: JSONSchema | null): JSONSchema | null => {
+  if (!schema || !schema.properties) return schema;
+  return {
+    ...schema,
+    properties: Object.entries(schema.properties).reduce<Record<string, any>>(
+      (acc, [key, value]) => {
+        acc[key] = {
+          ...value,
+          description:
+            typeof value.description === 'string'
+              ? value.description
+              : undefined,
+        };
+        return acc;
+      },
+      {},
+    ),
+  };
+};
+
+export const Field = vi.fn((props) => (
+  <div className="Field" id={props.id}>
+    {props.title}
+  </div>
+));
+
+export const InlineForm = vi.fn((props) => (
+  <div
+    id="InlineForm"
+    data-schema={JSON.stringify(cleanupSchema(props.schema), null, 2)}
+  />
+));
+
+export const ModalForm = vi.fn((props) => (
+  <div
+    id="ModalForm"
+    data-schema={JSON.stringify(cleanupSchema(props.schema), null, 2)}
+  />
+));
+
+export const UndoToolbar = vi.fn(() => <div id="UndoToolbar" />);
+
+export const BlocksToolbar = vi.fn(() => <div id="BlocksToolbar" />);
+
+export const BlockDataForm = vi.fn((props) => (
+  <div
+    id="BlockDataForm"
+    data-schema={JSON.stringify(cleanupSchema(props.schema), null, 2)}
+  />
+));
+
+export const BlocksForm = vi.fn((props) => (
+  <div
+    id="BlocksForm"
+    data-schema={JSON.stringify(cleanupSchema(props.schema), null, 2)}
+  />
+));
+
+const MockForm = forwardRef(
+  (props: { schema: JSONSchema | null }, ref: Ref<any>) => (
+    <div
+      id="Form"
+      data-schema={JSON.stringify(cleanupSchema(props.schema), null, 2)}
+      ref={ref}
+    />
+  ),
+);
+
+export const Form = vi.fn((props) => <MockForm {...props} />);

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

@@ -9,7 +9,9 @@ import FakeTimers from '@sinonjs/fake-timers';
 import History from './History';
 
 const mockStore = configureStore();
-jest.mock('../Toolbar/Toolbar', () => jest.fn(() => <div id="Portal" />));
+vi.mock('../Toolbar/Toolbar', () => ({
+  default: vi.fn(() => <div id="Portal" />),
+}));
 
 const FIXED_SYSTEM_TIME = '2017-04-23T15:38:00.000Z';
 

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

@@ -10,10 +10,12 @@ import { __test__ as LinksToItem } from './LinksToItem';
 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('LinksToItem', () => {
   it('renders "links and references" view', () => {
     const store = mockStore({

package/src/components/manage/MaybeWrap/MaybeWrap.tsx

@@ -0,0 +1,15 @@
+import React, { ComponentPropsWithoutRef } from 'react';
+
+type MaybeWrapProps<T extends React.ElementType> = {
+  condition: boolean;
+  as: T;
+} & ComponentPropsWithoutRef<React.ElementType extends T ? 'div' : T>;
+
+function MaybeWrap<T extends React.ElementType = 'div'>(
+  props: MaybeWrapProps<T>,
+) {
+  const { as: Component = 'div', condition, ...rest } = props;
+  return condition ? <Component {...rest} /> : props.children;
+}
+
+export default MaybeWrap;

package/src/components/manage/Multilingual/ManageTranslations.test.jsx

@@ -11,8 +11,9 @@ beforeAll(() => {
   config.settings.isMultilingual = true;
   config.settings.supportedLanguages = ['de', 'es'];
 });
-
-jest.mock('../Toolbar/Toolbar', () => jest.fn(() => <div id="Portal" />));
+vi.mock('../Toolbar/Toolbar', () => ({
+  default: vi.fn(() => <div id="Portal" />),
+}));
 
 const mockStore = configureStore();
 

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);
+  });
 });