@plone/volto 18.11.1 → 18.12.1

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

@@ -9,9 +9,13 @@ import Aliases from './Aliases';
 const middlewares = [thunk];
 const mockStore = configureMockStore(middlewares);
 
-jest.mock('../Toolbar/Toolbar', () => jest.fn(() => <div id="Portal" />));
+vi.mock('../Toolbar/Toolbar', () => ({
+  default: vi.fn(() => <div id="Portal" />),
+}));
 
-jest.mock('../Toolbar/More', () => jest.fn(() => <div className="More" />));
+vi.mock('../Toolbar/More', () => ({
+  default: vi.fn(() => <div className="More" />),
+}));
 
 describe('Aliases', () => {
   it('renders aliases object control', () => {
@@ -27,11 +31,7 @@ describe('Aliases', () => {
           loading: false,
           error: null,
         },
-        get: {
-          loading: false,
-          loaded: true,
-          error: null,
-        },
+        get: { __esModule: true, loading: false, loaded: true, error: null },
         items: [],
       },
       content: {

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

@@ -142,7 +142,7 @@ const BlocksForm = (props) => {
   };
 
   const onMutateBlock = (id, value) => {
-    const newFormData = mutateBlock(properties, id, value, {}, intl);
+    const newFormData = mutateBlock(properties, id, value, null, intl);
     onChangeFormData(newFormData);
   };
 
@@ -153,7 +153,7 @@ const BlocksForm = (props) => {
       value,
       current,
       config.experimental.addBlockButton.enabled ? 1 : 0,
-      {},
+      null,
       intl,
     );
 
@@ -172,7 +172,7 @@ const BlocksForm = (props) => {
 
   const onAddBlock = (type, index) => {
     if (editable) {
-      const [id, newFormData] = addBlock(properties, type, index, {}, intl);
+      const [id, newFormData] = addBlock(properties, type, index, null, intl);
       const blocksFieldname = getBlocksFieldname(newFormData);
       const blockData = newFormData[blocksFieldname][id];
       newFormData[blocksFieldname][id] = applyBlockDefaults({

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

@@ -3,25 +3,46 @@ import { Provider } from 'react-intl-redux';
 import configureStore from 'redux-mock-store';
 import BlocksForm from './BlocksForm';
 import { render } from '@testing-library/react';
-
 import config from '@plone/volto/registry';
 
 config.experimental = { addBlockButton: { enabled: false } };
 
-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();
+});
 
 let mockSerial = 0;
-
-jest.mock('uuid', () => {
+vi.mock('uuid', () => {
   return {
-    v4: jest.fn().mockImplementation(() => `id-${mockSerial++}`),
+    v4: vi.fn().mockImplementation(() => `id-${mockSerial++}`),
   };
 });
 
+vi.mock('react-beautiful-dnd', () => ({
+  DragDropContext: ({ children }) => <div>{children}</div>,
+  Droppable: ({ children }) =>
+    children({
+      innerRef: () => {},
+      droppableProps: {},
+      placeholder: <div />,
+    }),
+  Draggable: ({ children }) =>
+    children({
+      innerRef: () => {},
+      draggableProps: {},
+      dragHandleProps: {},
+    }),
+}));
+
+vi.mock('./Order/Order', () => ({
+  __esModule: true,
+  default: () => <div>Order Component</div>,
+}));
+
 const mockStore = configureStore();
 
 test('Allow override of blocksConfig', () => {
@@ -70,10 +91,13 @@ test('Allow override of blocksConfig', () => {
 
   const { container } = render(
     <Provider store={store}>
-      <BlocksForm {...data} />
-      <div id="sidebar-order"></div>
+      <div>
+        <BlocksForm {...data} />
+        <div id="sidebar-order"></div>
+      </div>
     </Provider>,
   );
+
   expect(container).toMatchSnapshot();
 });
 
@@ -88,7 +112,7 @@ test('Removes invalid blocks on saving', () => {
     },
   });
 
-  const onChangeFormData = jest.fn(() => {});
+  const onChangeFormData = vi.fn(() => {});
 
   const data = {
     pathname: '/test',
@@ -126,18 +150,22 @@ test('Removes invalid blocks on saving', () => {
 
   render(
     <Provider store={store}>
-      <BlocksForm {...data} />
-      <div id="sidebar-order"></div>
+      <div>
+        <BlocksForm {...data} />
+        <div id="sidebar-order"></div>
+      </div>
     </Provider>,
   );
-  expect(onChangeFormData).toBeCalledWith({
+
+  expect(onChangeFormData).toHaveBeenCalledWith({
     blocks: {
       a: { '@type': 'custom', text: 'a' },
       b: { '@type': 'custom', text: 'b' },
     },
     blocks_layout: { items: ['a', 'b', 'MISSING-YOU-1'] },
   });
-  expect(onChangeFormData).toBeCalledWith({
+
+  expect(onChangeFormData).toHaveBeenCalledWith({
     blocks: {
       a: { '@type': 'custom', text: 'a' },
       b: { '@type': 'custom', text: 'b' },

package/src/components/manage/Blocks/Block/Settings.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/Blocks/Description/View.test.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import renderer from 'react-test-renderer';
 import View from './View';
 
-test('renders a view description component', () => {
+it('renders a view description component', () => {
   const component = renderer.create(
     <View properties={{ description: 'My Description' }} />,
   );

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

@@ -7,11 +7,13 @@ import Edit from './Edit';
 
 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 an edit html block component', async () => {
   const store = mockStore({

package/src/components/manage/Blocks/HTML/View.test.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import renderer from 'react-test-renderer';
 import View from './View';
 
-test('renders a view html component', () => {
+it('renders a view html component', () => {
   const component = renderer.create(<View data={{ html: '<h1></h1>' }} />);
   const json = component.toJSON();
   expect(json).toMatchSnapshot();

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

@@ -5,11 +5,11 @@ import { Provider } from 'react-intl-redux';
 
 import ImageSidebar from './ImageSidebar';
 
-jest.mock('@plone/volto/components/manage/Form');
+vi.mock('@plone/volto/components/manage/Form');
 
 const mockStore = configureStore();
 
-test('renders an Image Block Sidebar component', () => {
+it('renders an Image Block Sidebar component', () => {
   const store = mockStore({
     content: {
       create: {},

package/src/components/manage/Blocks/LeadImage/LeadImageSidebar.test.jsx

@@ -5,7 +5,7 @@ import { Provider } from 'react-intl-redux';
 
 import LeadImageSidebar from './LeadImageSidebar';
 
-jest.mock('@plone/volto/components/manage/Widgets');
+vi.mock('@plone/volto/components/manage/Widgets');
 
 const mockStore = configureStore();
 
@@ -16,6 +16,7 @@ test('renders a Lead Image block Sidebar component', () => {
       messages: {},
     },
   });
+
   const component = renderer.create(
     <Provider store={store}>
       <LeadImageSidebar
@@ -45,6 +46,7 @@ test('renders a Lead Image block Sidebar component', () => {
       />
     </Provider>,
   );
+
   const json = component.toJSON();
   expect(json).toMatchSnapshot();
 });

package/src/components/manage/Blocks/Listing/View.test.jsx

@@ -2,7 +2,9 @@ import React from 'react';
 import renderer from 'react-test-renderer';
 import View from './View';
 
-jest.mock('./ListingBody', () => jest.fn(() => <div className="theblock" />));
+vi.mock('./ListingBody', () => ({
+  default: () => <div className="theblock" />,
+}));
 
 test('renders a view image component for the listing block', () => {
   const component = renderer.create(

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

@@ -5,7 +5,7 @@ import { Provider } from 'react-intl-redux';
 
 import MapsSidebar from './MapsSidebar';
 
-jest.mock('@plone/volto/components/manage/Form');
+vi.mock('@plone/volto/components/manage/Form');
 
 const mockStore = configureStore();
 

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

@@ -2,18 +2,19 @@ import React from 'react';
 import configureStore from 'redux-mock-store';
 import { Provider } from 'react-intl-redux';
 import { waitFor, render, screen } from '@testing-library/react';
-
 import DateRangeFacet from './DateRangeFacet';
 
 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();
+});
 
-describe('DateRangeFaceg', () => {
+describe('DateRangeFacet', () => {
   it('renders a facet component with a date range widget', async () => {
     const store = mockStore({
       userSession: { token: null },

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

@@ -2,16 +2,17 @@ import React from 'react';
 import configureStore from 'redux-mock-store';
 import { Provider } from 'react-intl-redux';
 import { waitFor, render, screen } from '@testing-library/react';
-
 import SelectFacet from './SelectFacet';
 
 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();
+});
 
 describe('SelectFacet', () => {
   it('renders a facet component with select dropdown', async () => {

package/src/components/manage/Blocks/ToC/variations/DefaultTocRenderer.test.jsx

@@ -8,6 +8,12 @@ const mockStore = configureStore();
 
 const data = { '@type': 'toc', variation: 'default' };
 
+const properties = {
+  title: 'Table of Contents',
+  hide_title: false,
+  ordered: true,
+};
+
 const tocEntries = [
   {
     level: 2,
@@ -35,7 +41,11 @@ test('renders a default toc renderer component', () => {
   const component = renderer.create(
     <Provider store={store}>
       <MemoryRouter>
-        <DefaultTocRenderer data={data} tocEntries={tocEntries} />
+        <DefaultTocRenderer
+          properties={properties}
+          data={data}
+          tocEntries={tocEntries}
+        />
       </MemoryRouter>
     </Provider>,
   );

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

@@ -5,7 +5,7 @@ import { Provider } from 'react-intl-redux';
 
 import VideoSidebar from './VideoSidebar';
 
-jest.mock('@plone/volto/components/manage/Form');
+vi.mock('@plone/volto/components/manage/Form');
 
 const mockStore = configureStore();
 

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

@@ -8,20 +8,24 @@ import { __test__ as Contents } from './Contents';
 
 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();
+});
 
-jest.mock('../Toolbar/Toolbar', () => jest.fn(() => <div id="Portal" />));
+vi.mock('../Toolbar/Toolbar', () => ({
+  default: vi.fn(() => <div id="Portal" />),
+}));
 
-jest.mock('../../theme/Pagination/Pagination', () =>
-  jest.fn(() => <div className="Pagination" />),
-);
-jest.mock('./ContentsUploadModal', () =>
-  jest.fn(() => <div className="UploadModal" />),
-);
+vi.mock('../../theme/Pagination/Pagination', () => ({
+  default: vi.fn(() => <div className="Pagination" />),
+}));
+vi.mock('./ContentsUploadModal', () => ({
+  default: vi.fn(() => <div className="UploadModal" />),
+}));
 
 describe('Contents', () => {
   it('renders a folder contents view component', () => {
@@ -87,7 +91,14 @@ describe('Contents', () => {
       },
       intl: {
         locale: 'en',
-        messages: {},
+        messages: {
+          ID: 'ID',
+          Title: 'Title',
+          'Publication date': 'Publication date',
+          'Created on': 'Created on',
+          'Last modified': 'Last modified',
+          Type: 'Type',
+        },
       },
     });
     const { container } = render(

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

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

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

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

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

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

package/src/components/manage/Contents/ContentsUploadModal.jsx

@@ -6,7 +6,6 @@ import {
   Dimmer,
   Header,
   Icon,
-  Image,
   Modal,
   Table,
   Segment,
@@ -24,6 +23,7 @@ import FormattedRelativeDate from '@plone/volto/components/theme/FormattedDate/F
 import { createContent } from '@plone/volto/actions/content/content';
 import { validateFileUploadSize } from '@plone/volto/helpers/FormValidation/FormValidation';
 import { usePrevious } from '@plone/volto/helpers/Utils/usePrevious';
+import Image from '@plone/volto/components/theme/Image/Image';
 
 const Dropzone = loadable(() => import('react-dropzone'));
 
@@ -259,7 +259,11 @@ const ContentsUploadModal = (props) => {
                     <Table.Cell>{filesize(file.size, { round: 0 })}</Table.Cell>
                     <Table.Cell>
                       {file.type.split('/')[0] === 'image' && (
-                        <Image src={file.preview} height={60} />
+                        <Image
+                          src={file.preview}
+                          height={60}
+                          className="ui image"
+                        />
                       )}
                     </Table.Cell>
                     <Table.Cell>

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

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

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

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

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

@@ -7,7 +7,9 @@ import AddonsControlpanel from './AddonsControlpanel';
 
 const mockStore = configureStore();
 
-jest.mock('../Toolbar/Toolbar', () => jest.fn(() => <div id="Portal" />));
+vi.mock('../../Toolbar/Toolbar', () => ({
+  default: vi.fn(() => <div id="Portal" />),
+}));
 
 describe('AddonsControlpanel', () => {
   it('renders an addon control component', () => {
@@ -54,11 +56,34 @@ describe('AddonsControlpanel', () => {
         locale: 'en',
         messages: {},
       },
+      actions: {
+        actions: {},
+      },
+      userSession: {
+        token: null,
+      },
+      content: {
+        data: {},
+        get: {
+          loading: false,
+          loaded: true,
+        },
+      },
+      types: {
+        types: [],
+        get: {
+          loading: false,
+          loaded: true,
+        },
+      },
     });
+    store.dispatch = vi.fn(() => Promise.resolve());
     const { container } = render(
       <Provider store={store}>
-        <AddonsControlpanel location={{ pathname: '/blog' }} />
-        <div id="toolbar"></div>
+        <div>
+          <AddonsControlpanel location={{ pathname: '/blog' }} />
+          <div id="toolbar"></div>
+        </div>
       </Provider>,
     );
 

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

@@ -10,8 +10,10 @@ import { MemoryRouter } from 'react-router';
 const middlewares = [thunk];
 const mockStore = configureMockStore(middlewares);
 
-jest.mock('@plone/volto/components/manage/Widgets');
-jest.mock('../Toolbar/Toolbar', () => jest.fn(() => <div id="Portal" />));
+vi.mock('@plone/volto/components/manage/Widgets');
+vi.mock('../../Toolbar/Toolbar', () => ({
+  default: vi.fn(() => <div id="Portal" />),
+}));
 
 describe('Aliases', () => {
   it('renders an aliases control component', () => {
@@ -55,7 +57,11 @@ describe('Aliases', () => {
       },
       intl: {
         locale: 'en',
-        messages: {},
+        messages: {
+          Both: 'Both',
+          Automatically: 'Automatically',
+          Manually: 'Manually',
+        },
       },
       site: {
         data: {
@@ -64,7 +70,28 @@ describe('Aliases', () => {
           },
         },
       },
+      actions: {
+        actions: {},
+      },
+      userSession: {
+        token: null,
+      },
+      content: {
+        data: {},
+        get: {
+          loading: false,
+          loaded: true,
+        },
+      },
+      types: {
+        types: [],
+        get: {
+          loading: false,
+          loaded: true,
+        },
+      },
     });
+    store.dispatch = vi.fn(() => Promise.resolve());
     const { container } = render(
       <Provider store={store}>
         <MemoryRouter>

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

@@ -8,8 +8,10 @@ import ContentType from './ContentType';
 
 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('ContentType', () => {
   it('renders dexterity content-type component', () => {
@@ -32,8 +34,28 @@ describe('ContentType', () => {
         locale: 'en',
         messages: {},
       },
+      actions: {
+        actions: {},
+      },
+      userSession: {
+        token: null,
+      },
+      content: {
+        data: {},
+        get: {
+          loading: false,
+          loaded: true,
+        },
+      },
+      types: {
+        types: [],
+        get: {
+          loading: false,
+          loaded: true,
+        },
+      },
     });
-
+    store.dispatch = vi.fn(() => Promise.resolve());
     const { container } = render(
       <Provider store={store}>
         <MemoryRouter

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

@@ -8,9 +8,11 @@ import ContentTypeLayout from './ContentTypeLayout';
 
 const mockStore = configureStore();
 
-jest.mock('../Toolbar/Toolbar', () => jest.fn(() => <div id="Portal" />));
+vi.mock('../../Toolbar/Toolbar', () => ({
+  default: vi.fn(() => <div id="Portal" />),
+}));
 
-jest.mock('../Form/Form', () => jest.fn(() => <div id="form" />));
+vi.mock('../Form/Form', () => ({ default: vi.fn(() => <div id="form" />) }));
 
 describe('ContentTypeLayout', () => {
   it('renders dexterity content-type layout component', () => {