@plone/volto 18.11.0 → 18.12.0

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

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

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

@@ -9,7 +9,7 @@ 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');
 
 describe('Form', () => {
   it('renders a form component', () => {

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

@@ -6,7 +6,7 @@ import config from '@plone/volto/registry';
 
 import InlineForm from './InlineForm';
 
-jest.mock('@plone/volto/components/manage/Form');
+vi.mock('@plone/volto/components/manage/Form');
 
 const mockStore = configureStore();
 

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

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

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

@@ -1,8 +1,8 @@
 import type { JSONSchema } from '@plone/types';
 import type { Ref } from 'react';
-const { forwardRef } = jest.requireActual('react');
+import { vi } from 'vitest';
+import { forwardRef } from '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 {
@@ -23,38 +23,38 @@ const cleanupSchema = (schema: JSONSchema | null): JSONSchema | null => {
   };
 };
 
-export const Field = jest.fn((props) => (
+export const Field = vi.fn((props) => (
   <div className="Field" id={props.id}>
     {props.title}
   </div>
 ));
 
-export const InlineForm = jest.fn((props) => (
+export const InlineForm = vi.fn((props) => (
   <div
     id="InlineForm"
     data-schema={JSON.stringify(cleanupSchema(props.schema), null, 2)}
   />
 ));
 
-export const ModalForm = jest.fn((props) => (
+export const ModalForm = vi.fn((props) => (
   <div
     id="ModalForm"
     data-schema={JSON.stringify(cleanupSchema(props.schema), null, 2)}
   />
 ));
 
-export const UndoToolbar = jest.fn(() => <div id="UndoToolbar" />);
+export const UndoToolbar = vi.fn(() => <div id="UndoToolbar" />);
 
-export const BlocksToolbar = jest.fn(() => <div id="BlocksToolbar" />);
+export const BlocksToolbar = vi.fn(() => <div id="BlocksToolbar" />);
 
-export const BlockDataForm = jest.fn((props) => (
+export const BlockDataForm = vi.fn((props) => (
   <div
     id="BlockDataForm"
     data-schema={JSON.stringify(cleanupSchema(props.schema), null, 2)}
   />
 ));
 
-export const BlocksForm = jest.fn((props) => (
+export const BlocksForm = vi.fn((props) => (
   <div
     id="BlocksForm"
     data-schema={JSON.stringify(cleanupSchema(props.schema), null, 2)}
@@ -71,4 +71,4 @@ const MockForm = forwardRef(
   ),
 );
 
-export const Form = jest.fn((props) => <MockForm {...props} />);
+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/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,10 @@ 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');
+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,18 @@ 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');
+vi.mock('@plone/volto/helpers/Loadable/Loadable');
+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

@@ -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', () => {

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

@@ -8,11 +8,21 @@ 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');
+
+// 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 +37,7 @@ test('renders an array widget component', async () => {
       },
     },
   });
+
   const component = renderer.create(
     <Provider store={store}>
       <ArrayWidget
@@ -38,6 +49,7 @@ test('renders an array widget component', async () => {
       />
     </Provider>,
   );
+
   await waitFor(() => {});
   expect(component.toJSON()).toMatchSnapshot();
 });
@@ -83,5 +95,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,13 @@ 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');
+beforeAll(async () => {
+  const { __setLoadables } = await import(
+    '@plone/volto/helpers/Loadable/Loadable'
+  );
+  await __setLoadables();
+});
 
 test('renders a checkbox group widget component', async () => {
   const store = mockStore({

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

@@ -6,11 +6,14 @@ import { waitFor, render, screen } from '@testing-library/react';
 
 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');
+
+beforeAll(async () => {
+  const { __setLoadables } = await import(
+    '@plone/volto/helpers/Loadable/Loadable'
+  );
+  await __setLoadables();
+});
 
 test('renders a datetime widget component', async () => {
   const store = mockStore({
@@ -19,6 +22,7 @@ test('renders a datetime widget component', async () => {
       messages: {},
     },
   });
+
   const isoDate = new Date('2019-10-21').toISOString();
   const { container } = render(
     <Provider store={store}>
@@ -28,20 +32,24 @@ test('renders a datetime widget component', async () => {
         fieldSet="default"
         onChange={() => {}}
         value={isoDate}
+        showTime={true}
       />
     </Provider>,
   );
+
   await waitFor(() => screen.getByText(/My field/));
+  await waitFor(() => screen.getByPlaceholderText('Time'));
   expect(container).toMatchSnapshot();
 });
 
-test('datetime widget converts UTC date and adapt to local datetime', async () => {
+test('datetime widget converts UTC date and adapts to local datetime', async () => {
   const store = mockStore({
     intl: {
       locale: 'en',
       messages: {},
     },
   });
+
   const date = '2020-02-10T15:01:00.000Z';
   const { container } = render(
     <Provider store={store}>
@@ -50,9 +58,12 @@ test('datetime widget converts UTC date and adapt to local datetime', async () =
         title="My field"
         onChange={() => {}}
         value={date}
+        showTime={true}
       />
     </Provider>,
   );
+
   await waitFor(() => screen.getByText(/My field/));
+  await waitFor(() => screen.getByPlaceholderText('Time'));
   expect(container).toMatchSnapshot();
 });

package/src/components/manage/Widgets/FileWidget.jsx

@@ -5,7 +5,7 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Button, Image, Dimmer } from 'semantic-ui-react';
+import { Button, Dimmer } from 'semantic-ui-react';
 import { readAsDataURL } from 'promise-file-reader';
 import { injectIntl } from 'react-intl';
 import deleteSVG from '@plone/volto/icons/delete.svg';
@@ -13,6 +13,7 @@ import Icon from '@plone/volto/components/theme/Icon/Icon';
 import Toast from '@plone/volto/components/manage/Toast/Toast';
 import UniversalLink from '@plone/volto/components/manage/UniversalLink/UniversalLink';
 import FormFieldWrapper from '@plone/volto/components/manage/Widgets/FormFieldWrapper';
+import Image from '@plone/volto/components/theme/Image/Image';
 import loadable from '@loadable/component';
 import { flattenToAppURL } from '@plone/volto/helpers/Url/Url';
 import { validateFileUploadSize } from '@plone/volto/helpers/FormValidation/FormValidation';
@@ -172,9 +173,8 @@ const FileWidget = (props) => {
             {isDragActive && <Dimmer active></Dimmer>}
             {fileType ? (
               <Image
-                className="image-preview"
+                className="image-preview small ui image"
                 id={`field-${id}-image`}
-                size="small"
                 src={imgsrc}
               />
             ) : (

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

@@ -2,21 +2,36 @@ import React from 'react';
 import { Provider } from 'react-intl-redux';
 import { render, waitFor } from '@testing-library/react';
 import configureStore from 'redux-mock-store';
-
 import FileWidget from './FileWidget';
 
-jest.spyOn(global.Date, 'now').mockImplementation(() => '0');
+vi.spyOn(global.Date, 'now').mockImplementation(() => 1234567890);
 
 const mockStore = configureStore();
 
+const createStore = () =>
+  mockStore({
+    intl: {
+      locale: 'en',
+      messages: {},
+    },
+  });
+
 describe('FileWidget', () => {
-  test('renders an empty file widget component', async () => {
-    const store = mockStore({
-      intl: {
-        locale: 'en',
-        messages: {},
+  beforeEach(() => {
+    vi.clearAllTimers();
+    Object.defineProperty(global.Image.prototype, 'complete', {
+      get() {
+        return true;
       },
     });
+  });
+
+  afterEach(() => {
+    vi.clearAllMocks();
+  });
+
+  test('renders an empty file widget component', async () => {
+    const store = createStore();
 
     const { container } = render(
       <Provider store={store}>
@@ -29,16 +44,18 @@ describe('FileWidget', () => {
       </Provider>,
     );
 
-    await waitFor(() => {});
+    await waitFor(
+      () => {
+        expect(container.querySelector('.file-widget-dropzone')).toBeTruthy();
+      },
+      { timeout: 1000 },
+    );
+
     expect(container).toMatchSnapshot();
   });
+
   test('renders a file widget component with value', async () => {
-    const store = mockStore({
-      intl: {
-        locale: 'en',
-        messages: {},
-      },
-    });
+    const store = createStore();
 
     const { container } = render(
       <Provider store={store}>
@@ -57,16 +74,22 @@ describe('FileWidget', () => {
       </Provider>,
     );
 
-    await waitFor(() => {});
+    await waitFor(
+      () => {
+        const dropzone = container.querySelector('.file-widget-dropzone');
+        const preview = container.querySelector('.image-preview');
+        const filename = container.querySelector('.field-file-name');
+
+        return dropzone && preview && filename;
+      },
+      { timeout: 1000 },
+    );
+
     expect(container).toMatchSnapshot();
   });
+
   test('renders a file widget component with value in raw data', async () => {
-    const store = mockStore({
-      intl: {
-        locale: 'en',
-        messages: {},
-      },
-    });
+    const store = createStore();
 
     const { container } = render(
       <Provider store={store}>
@@ -85,7 +108,16 @@ describe('FileWidget', () => {
       </Provider>,
     );
 
-    await waitFor(() => {});
+    await waitFor(
+      () => {
+        const dropzone = container.querySelector('.file-widget-dropzone');
+        const filename = container.querySelector('.field-file-name');
+
+        return dropzone && filename;
+      },
+      { timeout: 1000 },
+    );
+
     expect(container).toMatchSnapshot();
   });
 });

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

@@ -16,13 +16,14 @@ test('renders a number widget component', () => {
   });
   const component = renderer.create(
     <Provider store={store}>
-      <NumberWidget
-        id="my-field"
-        title="My field"
-        fieldSet="default"
-        onChange={() => {}}
-      />
-      ,
+      <>
+        <NumberWidget
+          id="my-field"
+          title="My field"
+          fieldSet="default"
+          onChange={() => {}}
+        />
+      </>
     </Provider>,
   );
   const json = component.toJSON();

package/src/components/manage/Widgets/ObjectBrowserWidget.jsx

@@ -12,7 +12,7 @@ import isArray from 'lodash/isArray';
 import isEmpty from 'lodash/isEmpty';
 import remove from 'lodash/remove';
 import { connect } from 'react-redux';
-import { Image, Label, Popup, Button } from 'semantic-ui-react';
+import { Label, Popup, Button } from 'semantic-ui-react';
 import {
   flattenToAppURL,
   isInternalURL,
@@ -33,6 +33,7 @@ import homeSVG from '@plone/volto/icons/home.svg';
 import aheadSVG from '@plone/volto/icons/ahead.svg';
 import blankSVG from '@plone/volto/icons/blank.svg';
 import { withRouter } from 'react-router';
+import Image from '@plone/volto/components/theme/Image/Image';
 
 const messages = defineMessages({
   placeholder: {
@@ -131,7 +132,7 @@ export class ObjectBrowserWidgetComponent extends Component {
             <div className="item-title">
               {includes(config.settings.imageObjects, item['@type']) ? (
                 <Image
-                  size="small"
+                  className="small ui image"
                   src={`${item['@id']}/@@images/image/thumb`}
                 />
               ) : (