@plone/volto 18.13.0 → 18.14.1

package/CHANGELOG.md

@@ -17,6 +17,18 @@ myst:
 
 <!-- towncrier release notes start -->
 
+## 18.14.1 (2025-04-25)
+
+### Bugfix
+
+- Add support for both Vitest and Jest in `__mocks__` folders of Volto core. Add-on tests using Jest relies on them. @Abhishek-17h [#7000](https://github.com/plone/volto/issues/7000)
+
+## 18.14.0 (2025-04-23)
+
+### Feature
+
+- Added current evaluated `querystring` as a parameter in expander's `querystring` key when it's a function. @sneridagh [#7012](https://github.com/plone/volto/issues/7012)
+
 ## 18.13.0 (2025-04-22)
 
 ### Feature

package/package.json

@@ -9,7 +9,7 @@
     }
   ],
   "license": "MIT",
-  "version": "18.13.0",
+  "version": "18.14.1",
   "repository": {
     "type": "git",
     "url": "git@github.com:plone/volto.git"
@@ -236,9 +236,9 @@
     "url": "^0.11.3",
     "use-deep-compare-effect": "1.8.1",
     "uuid": "^8.3.2",
-    "@plone/volto-slate": "18.3.0",
     "@plone/scripts": "3.9.0",
-    "@plone/registry": "2.5.1"
+    "@plone/volto-slate": "18.3.0",
+    "@plone/registry": "2.5.2"
   },
   "devDependencies": {
     "@babel/core": "^7.0.0",
@@ -363,7 +363,7 @@
     "webpack-dev-server": "4.11.1",
     "webpack-node-externals": "3.0.0",
     "why": "0.6.2",
-    "@plone/types": "1.4.0",
+    "@plone/types": "1.4.1",
     "@plone/volto-coresandbox": "1.0.0"
   },
   "volta": {

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

@@ -8,7 +8,11 @@ import Actions from './Actions';
 
 const mockStore = configureStore();
 
-vi.mock('@plone/volto/components/manage/Contents');
+vi.mock('@plone/volto/components/manage/Contents', async () => {
+  return await import(
+    '@plone/volto/components/manage/Contents/__mocks__/index.vitest.tsx'
+  );
+});
 
 describe('Actions', () => {
   it('renders an actions component', () => {

package/src/components/manage/Blocks/Block/BlocksForm.test.jsx

@@ -7,7 +7,12 @@ import config from '@plone/volto/registry';
 
 config.experimental = { addBlockButton: { enabled: false } };
 
-vi.mock('@plone/volto/helpers/Loadable/Loadable');
+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'
@@ -39,7 +44,6 @@ vi.mock('react-beautiful-dnd', () => ({
 }));
 
 vi.mock('./Order/Order', () => ({
-  __esModule: true,
   default: () => <div>Order Component</div>,
 }));
 

package/src/components/manage/Blocks/Block/Settings.test.jsx

@@ -5,7 +5,11 @@ import configureStore from 'redux-mock-store';
 import config from '@plone/volto/registry';
 import { Provider } from 'react-intl-redux';
 
-vi.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/Blocks/HTML/Edit.test.jsx

@@ -7,7 +7,12 @@ import Edit from './Edit';
 
 const mockStore = configureStore();
 
-vi.mock('@plone/volto/helpers/Loadable/Loadable');
+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'

package/src/components/manage/Blocks/Image/ImageSidebar.test.jsx

@@ -5,7 +5,11 @@ import { Provider } from 'react-intl-redux';
 
 import ImageSidebar from './ImageSidebar';
 
-vi.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/Blocks/LeadImage/LeadImageSidebar.test.jsx

@@ -6,6 +6,11 @@ import { Provider } from 'react-intl-redux';
 import LeadImageSidebar from './LeadImageSidebar';
 
 vi.mock('@plone/volto/components/manage/Widgets');
+vi.mock('@plone/volto/components/manage/Widgets', async () => {
+  return await import(
+    '@plone/volto/components/manage/Widgets/__mocks__/index.vitest.tsx'
+  );
+});
 
 const mockStore = configureStore();
 

package/src/components/manage/Blocks/Maps/MapsSidebar.test.jsx

@@ -5,7 +5,11 @@ import { Provider } from 'react-intl-redux';
 
 import MapsSidebar from './MapsSidebar';
 
-vi.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/Blocks/Search/components/DateRangeFacet.test.jsx

@@ -6,7 +6,12 @@ import DateRangeFacet from './DateRangeFacet';
 
 const mockStore = configureStore();
 
-vi.mock('@plone/volto/helpers/Loadable/Loadable');
+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'

package/src/components/manage/Blocks/Search/components/SelectFacet.test.jsx

@@ -6,7 +6,12 @@ import SelectFacet from './SelectFacet';
 
 const mockStore = configureStore();
 
-vi.mock('@plone/volto/helpers/Loadable/Loadable');
+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'

package/src/components/manage/Blocks/Video/VideoSidebar.test.jsx

@@ -5,7 +5,11 @@ import { Provider } from 'react-intl-redux';
 
 import VideoSidebar from './VideoSidebar';
 
-vi.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/Contents/Contents.test.jsx

@@ -8,7 +8,12 @@ import { __test__ as Contents } from './Contents';
 
 const mockStore = configureStore();
 
-vi.mock('@plone/volto/helpers/Loadable/Loadable');
+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'

package/src/components/manage/Contents/ContentsPropertiesModal.test.jsx

@@ -7,7 +7,11 @@ import ContentsPropertiesModal from './ContentsPropertiesModal';
 
 const mockStore = configureStore();
 
-vi.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('ContentsPropertiesModal', () => {
   it('renders a contents properties modal component', () => {

package/src/components/manage/Contents/ContentsRenameModal.test.jsx

@@ -7,7 +7,11 @@ import ContentsRenameModal from './ContentsRenameModal';
 
 const mockStore = configureStore();
 
-vi.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('ContentsRenameModal', () => {
   it('renders a contents rename modal component', () => {

package/src/components/manage/Contents/ContentsTagsModal.test.jsx

@@ -7,7 +7,11 @@ import ContentsTagsModal from './ContentsTagsModal';
 
 const mockStore = configureStore();
 
-vi.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('ContentsTagsModal', () => {
   it('renders a contents tags modal component', () => {

package/src/components/manage/Contents/ContentsWorkflowModal.test.jsx

@@ -7,7 +7,11 @@ import ContentsWorkflowModal from './ContentsWorkflowModal';
 
 const mockStore = configureStore();
 
-vi.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('ContentsWorkflowModal', () => {
   it('renders a contents workflow modal component', () => {

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

@@ -1,5 +1,21 @@
-export const Contents = vi.fn(() => <div className="Contents" />);
+/* 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:
 
-export const ContentsRenameModal = vi.fn(() => (
+vi.mock('@plone/volto/components/manage/Contents', async () => {
+  return await import(
+    '@plone/volto/components/manage/Contents/__mocks__/index.vitest.tsx'
+  );
+});
+
+with the following:
+
+vi.mock('@plone/volto/components/manage/Contents');
+
+Finally, remove this comment.
+*/
+
+export const Contents = jest.fn(() => <div className="Contents" />);
+
+export const ContentsRenameModal = jest.fn(() => (
   <div className="ContentsRenameModal" />
 ));

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

@@ -0,0 +1,5 @@
+export const Contents = vi.fn(() => <div className="Contents" />);
+
+export const ContentsRenameModal = vi.fn(() => (
+  <div className="ContentsRenameModal" />
+));

package/src/components/manage/Controlpanels/Aliases.test.jsx

@@ -10,7 +10,12 @@ import { MemoryRouter } from 'react-router';
 const middlewares = [thunk];
 const mockStore = configureMockStore(middlewares);
 
-vi.mock('@plone/volto/components/manage/Widgets');
+vi.mock('@plone/volto/components/manage/Widgets', async () => {
+  return await import(
+    '@plone/volto/components/manage/Widgets/__mocks__/index.vitest.tsx'
+  );
+});
+
 vi.mock('../../Toolbar/Toolbar', () => ({
   default: vi.fn(() => <div id="Portal" />),
 }));

package/src/components/manage/Controlpanels/ContentType.test.jsx

@@ -8,7 +8,11 @@ import ContentType from './ContentType';
 
 const mockStore = configureStore();
 
-vi.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'
+  );
+});
 vi.mock('../../Toolbar/Toolbar', () => ({
   default: vi.fn(() => <div id="Portal" />),
 }));

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

@@ -9,7 +9,12 @@ import AddRule from './AddRule';
 const middlewares = [thunk];
 const mockStore = configureMockStore(middlewares);
 
-vi.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'
+  );
+});
+
 vi.mock('../../Toolbar/Toolbar', () => ({
   default: vi.fn(() => <div id="Toolbar" />),
 }));

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

@@ -13,7 +13,11 @@ vi.mock('../../Toolbar/Toolbar', () => ({
   default: vi.fn(() => <div id="Portal" />),
 }));
 
-vi.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('EditRule', () => {
   it('renders rules edit interface', () => {

package/src/components/manage/Controlpanels/UndoControlpanel.test.jsx

@@ -7,7 +7,11 @@ import UndoControlpanel from './UndoControlpanel';
 
 const mockStore = configureStore();
 
-vi.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'
+  );
+});
 vi.mock('../../Toolbar/Toolbar', () => ({
   default: vi.fn(() => <div id="Portal" />),
 }));

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

@@ -12,7 +12,12 @@ vi.mock('../Toolbar/Toolbar', () => ({
   default: vi.fn(() => <div id="Portal" />),
 }));
 
-vi.mock('@plone/volto/helpers/Loadable/Loadable');
+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'

package/src/components/manage/Diff/DiffField.test.jsx

@@ -4,7 +4,12 @@ import { Provider } from 'react-intl-redux';
 import { waitFor, render, screen } from '@testing-library/react';
 import DiffField from './DiffField';
 
-vi.mock('@plone/volto/helpers/Loadable/Loadable');
+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'

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

@@ -8,8 +8,17 @@ import Display from './Display';
 
 const mockStore = configureStore();
 
-vi.mock('@plone/volto/components/manage/Widgets');
-vi.mock('@plone/volto/helpers/Loadable/Loadable');
+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'

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

@@ -8,7 +8,11 @@ import { __test__ as Edit } from './Edit';
 
 const mockStore = configureStore();
 
-vi.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'
+  );
+});
 vi.mock('../Toolbar/Toolbar', () => ({
   default: vi.fn(() => <div id="Portal" />),
 }));

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';
 
-vi.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'}";
 
-vi.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';
 
-vi.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();
 
-vi.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,7 +1,25 @@
+/* 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';
-import { forwardRef } from 'react';
+const { forwardRef } = jest.requireActual('react');
 
+// Field descriptions can contain react elements and those are not JSON stringifiable
 const cleanupSchema = (schema: JSONSchema | null): JSONSchema | null => {
   if (!schema || !schema.properties) return schema;
   return {
@@ -22,38 +40,38 @@ const cleanupSchema = (schema: JSONSchema | null): JSONSchema | null => {
   };
 };
 
-export const Field = vi.fn((props) => (
+export const Field = jest.fn((props) => (
   <div className="Field" id={props.id}>
     {props.title}
   </div>
 ));
 
-export const InlineForm = vi.fn((props) => (
+export const InlineForm = jest.fn((props) => (
   <div
     id="InlineForm"
     data-schema={JSON.stringify(cleanupSchema(props.schema), null, 2)}
   />
 ));
 
-export const ModalForm = vi.fn((props) => (
+export const ModalForm = jest.fn((props) => (
   <div
     id="ModalForm"
     data-schema={JSON.stringify(cleanupSchema(props.schema), null, 2)}
   />
 ));
 
-export const UndoToolbar = vi.fn(() => <div id="UndoToolbar" />);
+export const UndoToolbar = jest.fn(() => <div id="UndoToolbar" />);
 
-export const BlocksToolbar = vi.fn(() => <div id="BlocksToolbar" />);
+export const BlocksToolbar = jest.fn(() => <div id="BlocksToolbar" />);
 
-export const BlockDataForm = vi.fn((props) => (
+export const BlockDataForm = jest.fn((props) => (
   <div
     id="BlockDataForm"
     data-schema={JSON.stringify(cleanupSchema(props.schema), null, 2)}
   />
 ));
 
-export const BlocksForm = vi.fn((props) => (
+export const BlocksForm = jest.fn((props) => (
   <div
     id="BlocksForm"
     data-schema={JSON.stringify(cleanupSchema(props.schema), null, 2)}
@@ -70,4 +88,4 @@ const MockForm = forwardRef(
   ),
 );
 
-export const Form = vi.fn((props) => <MockForm {...props} />);
+export const Form = jest.fn((props) => <MockForm {...props} />);

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