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

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

@@ -7,8 +7,14 @@ import UndoControlpanel from './UndoControlpanel';
 
 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('UndoControlpanel', () => {
   it('renders undo controlpanel component', () => {
@@ -81,11 +87,34 @@ describe('UndoControlpanel', () => {
         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}>
-        <UndoControlpanel location={{ pathname: '/blog' }} />
-        <div id="toolbar"></div>
+        <div>
+          <UndoControlpanel location={{ pathname: '/blog' }} />
+          <div id="toolbar"></div>
+        </div>
       </Provider>,
     );
 

package/src/components/manage/Controlpanels/Users/UserGroupMembershipControlPanel.test.jsx

@@ -7,7 +7,9 @@ import { MemoryRouter } from 'react-router-dom';
 import UserGroupMembershipControlPanel from './UserGroupMembershipControlPanel';
 
 const mockStore = configureStore();
-jest.mock('../../Toolbar/Toolbar', () => jest.fn(() => <div id="Portal" />));
+vi.mock('../../Toolbar/Toolbar', () => ({
+  default: vi.fn(() => <div id="Portal" />),
+}));
 
 describe('UserGroupMembershipControlPanel', () => {
   it('renders a user group membership control component', () => {

package/src/components/manage/Controlpanels/Users/UsersControlpanel.test.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { render } from '@testing-library/react';
+import { render, act } from '@testing-library/react';
 import configureStore from 'redux-mock-store';
 import { Provider } from 'react-intl-redux';
 import jwt from 'jsonwebtoken';
@@ -7,10 +7,12 @@ import jwt from 'jsonwebtoken';
 import UsersControlpanel from './UsersControlpanel';
 
 const mockStore = configureStore();
-jest.mock('../../Toolbar/Toolbar', () => jest.fn(() => <div id="Portal" />));
+vi.mock('../../Toolbar/Toolbar', () => ({
+  default: vi.fn(() => <div id="Portal" />),
+}));
 
 describe('UsersControlpanel', () => {
-  it('renders a user control component', () => {
+  it('renders a user control component', async () => {
     const store = mockStore({
       userSession: {
         token: jwt.sign({ sub: 'john' }, 'secret'),
@@ -36,12 +38,16 @@ describe('UsersControlpanel', () => {
         messages: {},
       },
     });
-    const { container } = render(
-      <Provider store={store}>
-        <UsersControlpanel location={{ pathname: '/blog' }} />
-        <div id="toolbar"></div>
-      </Provider>,
-    );
+    const { container } = await act(async () => {
+      return render(
+        <Provider store={store}>
+          <>
+            <UsersControlpanel location={{ pathname: '/blog' }} />
+            <div id="toolbar"></div>
+          </>
+        </Provider>,
+      );
+    });
 
     expect(container).toMatchSnapshot();
   });

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

@@ -3,12 +3,13 @@ import { render } from '@testing-library/react';
 import configureStore from 'redux-mock-store';
 import { Provider } from 'react-intl-redux';
 import { MemoryRouter } from 'react-router-dom';
-
 import Delete from './Delete';
 
 const mockStore = configureStore();
 
-jest.mock('../Toolbar/Toolbar', () => jest.fn(() => <div id="Portal" />));
+vi.mock('../../Toolbar/Toolbar', () => ({
+  default: vi.fn(() => <div id="Portal" />),
+}));
 
 describe('Delete', () => {
   it('renders an empty delete component', () => {
@@ -19,16 +20,36 @@ describe('Delete', () => {
           loading: false,
           loaded: true,
         },
+        get: {
+          loading: false,
+          loaded: true,
+        },
       },
       intl: {
         locale: 'en',
         messages: {},
       },
+      actions: {
+        actions: {},
+      },
+      userSession: {
+        token: null,
+      },
+      types: {
+        types: [],
+        get: {
+          loading: false,
+          loaded: true,
+        },
+      },
     });
+
+    store.dispatch = vi.fn(() => Promise.resolve());
+
     const { container } = render(
       <Provider store={store}>
         <MemoryRouter>
-          <Delete location={{ pathname: '/blog', search: {} }} />
+          <Delete location={{ pathname: '/blog', search: '' }} />
           <div id="toolbar"></div>
         </MemoryRouter>
       </Provider>,
@@ -47,16 +68,36 @@ describe('Delete', () => {
           loading: false,
           loaded: true,
         },
+        get: {
+          loading: false,
+          loaded: true,
+        },
       },
       intl: {
         locale: 'en',
         messages: {},
       },
+      actions: {
+        actions: {},
+      },
+      userSession: {
+        token: null,
+      },
+      types: {
+        types: [],
+        get: {
+          loading: false,
+          loaded: true,
+        },
+      },
     });
+
+    store.dispatch = vi.fn(() => Promise.resolve());
+
     const { container } = render(
       <Provider store={store}>
         <MemoryRouter>
-          <Delete location={{ pathname: '/blog', search: {} }} />
+          <Delete location={{ pathname: '/blog', search: '' }} />
           <div id="toolbar"></div>
         </MemoryRouter>
       </Provider>,

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

@@ -8,13 +8,22 @@ import Diff from './Diff';
 
 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/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();
+});
 
 describe('Diff', () => {
   it('renders a diff component', async () => {

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

@@ -2,14 +2,20 @@ 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 DiffField from './DiffField';
 
-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();
+});
 
 const mockStore = configureStore();
 

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.jsx

@@ -9,6 +9,7 @@ import { Field, BlocksForm } from '@plone/volto/components/manage/Form';
 import BlocksToolbar from '@plone/volto/components/manage/Form/BlocksToolbar';
 import UndoToolbar from '@plone/volto/components/manage/Form/UndoToolbar';
 import { difference } from '@plone/volto/helpers/Utils/Utils';
+import withSaveAsDraft from '@plone/volto/helpers/Utils/withSaveAsDraft';
 import FormValidation from '@plone/volto/helpers/FormValidation/FormValidation';
 import {
   getBlocksFieldname,
@@ -265,6 +266,18 @@ class Form extends Component {
     this.onBlurField = this.onBlurField.bind(this);
     this.onClickInput = this.onClickInput.bind(this);
     this.onToggleMetadataFieldset = this.onToggleMetadataFieldset.bind(this);
+    this.updateFormDataWithSaved = this.updateFormDataWithSaved.bind(this);
+  }
+
+  /**
+   * Function sent as callback to saveAsDraft when user
+   * choses to load local data
+   * @param {Object} savedFormData
+   */
+  updateFormDataWithSaved(savedFormData) {
+    if (savedFormData) {
+      this.setState({ formData: savedFormData });
+    }
   }
 
   /**
@@ -278,6 +291,12 @@ class Form extends Component {
     let errors = {};
     let activeIndex = 0;
 
+    if (!prevProps.schema && this.props.schema) {
+      this.props.checkSavedDraft(
+        this.state.formData,
+        this.updateFormDataWithSaved,
+      );
+    }
     if (!this.props.isFormSelected && prevProps.isFormSelected) {
       this.props.setUIState({
         selected: null,
@@ -303,6 +322,10 @@ class Form extends Component {
         this.props.onChangeFormData(this.state.formData);
       }
     }
+    // on each formData update it will save the form to the localStorage
+    if (!isEqual(prevState?.formData, this.state.formData)) {
+      this.props.onSaveDraft(this.state.formData);
+    }
     if (
       this.props.global &&
       !isEqual(this.props.globalData, prevProps.globalData)
@@ -395,6 +418,13 @@ class Form extends Component {
    */
   componentDidMount() {
     this.setState({ isClient: true });
+    if (this.props.schema) {
+      this.props.checkSavedDraft(
+        this.state.formData,
+        this.updateFormDataWithSaved,
+      );
+      return;
+    }
   }
 
   /**
@@ -653,6 +683,7 @@ class Form extends Component {
           this.props.setFormData(this.props.formData);
         }
       }
+      this.props.onCancelDraft();
     }
   }
 
@@ -1136,4 +1167,5 @@ export default compose(
     null,
     { forwardRef: true },
   ),
+  withSaveAsDraft({ forwardRef: true }),
 )(FormIntl);

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

@@ -2,14 +2,18 @@ import React from 'react';
 import renderer from 'react-test-renderer';
 import configureStore from 'redux-mock-store';
 import { Provider } from 'react-intl-redux';
-
+import { MemoryRouter } from 'react-router-dom';
 import Form from './Form';
 
 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', () => {
@@ -26,26 +30,30 @@ describe('Form', () => {
         },
       },
     });
+    const route = '/some-route';
     const component = renderer.create(
       <Provider store={store}>
-        <Form
-          schema={{
-            fieldsets: [
-              {
-                id: 'default',
-                title: 'Default',
-                fields: ['title'],
+        <MemoryRouter initialEntries={[route]}>
+          <Form
+            schema={{
+              fieldsets: [
+                {
+                  id: 'default',
+                  title: 'Default',
+                  fields: ['title'],
+                },
+              ],
+              properties: {
+                title: {},
               },
-            ],
-            properties: {
-              title: {},
-            },
-            required: [],
-          }}
-          requestError={errorMessage}
-          onSubmit={() => {}}
-          onCancel={() => {}}
-        />
+              required: [],
+            }}
+            requestError={errorMessage}
+            onSubmit={() => {}}
+            onCancel={() => {}}
+          />
+        </MemoryRouter>
+        ,
       </Provider>,
     );
     const json = component.toJSON();

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();