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

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

@@ -2,19 +2,21 @@ import { render, waitFor, screen } from '@testing-library/react';
 import configureStore from 'redux-mock-store';
 import { Provider } from 'react-intl-redux';
 import { MemoryRouter, Route } from 'react-router-dom';
-
 import Controlpanel from './Controlpanel';
 
 const mockStore = configureStore();
 
-jest.mock('../Form/Form', () =>
-  jest.fn(({ requestError }) => (
+vi.mock('../Form/Form', () => ({
+  default: vi.fn(({ requestError }) => (
     <div id="form">
-      {requestError ? `requestError : ${requestError}` : null}
+      {requestError ? `requestError: ${requestError}` : 'Form rendered'}
     </div>
   )),
-);
-jest.mock('../Toolbar/Toolbar', () => jest.fn(() => <div id="Portal" />));
+}));
+
+vi.mock('../../Toolbar/Toolbar', () => ({
+  default: vi.fn(() => <div id="Portal">Toolbar Component</div>),
+}));
 
 const store = mockStore({
   controlpanels: {
@@ -37,10 +39,35 @@ const store = mockStore({
     locale: 'en',
     messages: {},
   },
+  actions: {
+    actions: {},
+  },
+  userSession: {
+    token: null,
+  },
+  content: {
+    data: {},
+    unlock: {
+      loading: false,
+      loaded: true,
+    },
+    get: {
+      loading: false,
+      loaded: true,
+    },
+  },
+  types: {
+    types: [],
+    get: {
+      loading: false,
+      loaded: true,
+    },
+  },
 });
 
 describe('Controlpanel', () => {
   it('renders a controlpanel component', () => {
+    store.dispatch = vi.fn(() => Promise.resolve());
     const { container } = render(
       <Provider store={store}>
         <MemoryRouter initialEntries={['/controlpanel/date-and-time']}>
@@ -52,6 +79,7 @@ describe('Controlpanel', () => {
 
     expect(container).toMatchSnapshot();
   });
+
   it('renders a controlpanel component with error', async () => {
     const { container, rerender } = render(
       <Provider store={store}>
@@ -61,9 +89,11 @@ describe('Controlpanel', () => {
         </MemoryRouter>
       </Provider>,
     );
+
     store.getState().controlpanels.update.loading = true;
     store.getState().controlpanels.update.error.response.body.message =
       "[{'message': 'Twitter username should not include the \"@\" prefix character.', 'field': 'twitter_username', 'error': 'ValidationError'}]";
+    store.dispatch = vi.fn(() => Promise.resolve());
 
     rerender(
       <Provider store={store}>
@@ -73,6 +103,7 @@ describe('Controlpanel', () => {
         </MemoryRouter>
       </Provider>,
     );
+
     await waitFor(() => screen.findByText(/Twitter/i));
     expect(container).toMatchSnapshot();
   });

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

@@ -9,10 +9,12 @@ import Controlpanels from './Controlpanels';
 
 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/Controlpanels', () => ({
-  VersionOverview: jest.fn(() => <div className="VersionOverview" />),
+vi.mock('@plone/volto/components/manage/Controlpanels', () => ({
+  VersionOverview: vi.fn(() => <div className="VersionOverview" />),
 }));
 
 describe('Controlpanels', () => {
@@ -72,7 +74,28 @@ describe('Controlpanels', () => {
         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>
@@ -111,6 +134,26 @@ describe('Controlpanels', () => {
         locale: 'en',
         messages: {},
       },
+      actions: {
+        actions: {},
+      },
+      userSession: {
+        token: null,
+      },
+      content: {
+        data: {},
+        get: {
+          loading: false,
+          loaded: true,
+        },
+      },
+      types: {
+        types: [],
+        get: {
+          loading: false,
+          loaded: true,
+        },
+      },
     });
 
     const FooComponent = () => {
@@ -130,6 +173,7 @@ describe('Controlpanels', () => {
         component: FooComponent,
       },
     ];
+    store.dispatch = vi.fn(() => Promise.resolve());
     const { container } = render(
       <Provider store={store}>
         <MemoryRouter>

package/src/components/manage/Controlpanels/Groups/GroupsControlpanel.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 GroupsControlpanel from './GroupsControlpanel';
 
 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}>
-        <GroupsControlpanel location={{ pathname: '/blog' }} />
-        <div id="toolbar"></div>
-      </Provider>,
-    );
+    const { container } = await act(async () => {
+      return render(
+        <Provider store={store}>
+          <>
+            <GroupsControlpanel location={{ pathname: '/blog' }} />
+            <div id="toolbar"></div>
+          </>
+        </Provider>,
+      );
+    });
 
     expect(container).toMatchSnapshot();
   });

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

@@ -2,13 +2,14 @@ import React from 'react';
 import { render } from '@testing-library/react';
 import configureStore from 'redux-mock-store';
 import { Provider } from 'react-intl-redux';
-
 import ModerateComments from './ModerateComments';
 
 const mockStore = configureStore();
 
-jest.mock('@plone/volto/components/theme/Comments');
-jest.mock('../Toolbar/Toolbar', () => jest.fn(() => <div id="Portal" />));
+vi.mock('@plone/volto/components/theme/Comments');
+vi.mock('../../Toolbar/Toolbar', () => ({
+  default: vi.fn(() => <div id="Portal" />),
+}));
 
 describe('ModerateComments', () => {
   it('renders a moderate comments component', () => {
@@ -26,11 +27,36 @@ describe('ModerateComments', () => {
         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}>
-        <ModerateComments location={{ pathname: '/blog' }} />
-        <div id="toolbar"></div>
+        <div>
+          <ModerateComments location={{ pathname: '/blog' }} />
+          <div id="toolbar"></div>
+        </div>
       </Provider>,
     );
 

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

@@ -9,8 +9,15 @@ import AddRule from './AddRule';
 const middlewares = [thunk];
 const mockStore = configureMockStore(middlewares);
 
-jest.mock('@plone/volto/components/manage/Form');
-jest.mock('../../Toolbar/Toolbar', () => jest.fn(() => <div id="Toolbar" />));
+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" />),
+}));
 
 describe('AddRule', () => {
   it('renders rules add interface', () => {
@@ -22,8 +29,10 @@ describe('AddRule', () => {
     });
     const { container } = render(
       <Provider store={store}>
-        <AddRule location={{ pathname: '/controlpanel/rules/add' }} />
-        <div id="toolbar"></div>
+        <>
+          <AddRule location={{ pathname: '/controlpanel/rules/add' }} />
+          <div id="toolbar"></div>
+        </>
       </Provider>,
     );
 

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

@@ -9,7 +9,9 @@ import ConfigureRule from './ConfigureRule';
 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" />),
+}));
 
 describe('ConfigureRule', () => {
   it('renders rules configure interface', () => {
@@ -21,10 +23,12 @@ describe('ConfigureRule', () => {
     });
     const { container } = render(
       <Provider store={store}>
-        <ConfigureRule
-          location={{ pathname: '/controlpanel/rules/:id/configure' }}
-        />
-        <div id="toolbar"></div>
+        <>
+          <ConfigureRule
+            location={{ pathname: '/controlpanel/rules/:id/configure' }}
+          />
+          <div id="toolbar"></div>
+        </>
       </Provider>,
     );
 

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

@@ -9,9 +9,15 @@ import EditRule from './EditRule';
 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('@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', () => {
@@ -23,8 +29,10 @@ describe('EditRule', () => {
     });
     const { container } = render(
       <Provider store={store}>
-        <EditRule location={{ pathname: '/controlpanel/rules/:id/edit' }} />
-        <div id="toolbar"></div>
+        <>
+          <EditRule location={{ pathname: '/controlpanel/rules/:id/edit' }} />
+          <div id="toolbar"></div>
+        </>
       </Provider>,
     );
 

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

@@ -9,7 +9,9 @@ import Rules from './Rules';
 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" />),
+}));
 
 describe('Rules', () => {
   it('renders rules control panel control', () => {
@@ -64,8 +66,10 @@ describe('Rules', () => {
     });
     const { container } = render(
       <Provider store={store}>
-        <Rules location={{ pathname: '/controlpanel/rules' }} />
-        <div id="toolbar"></div>
+        <>
+          <Rules location={{ pathname: '/controlpanel/rules' }} />
+          <div id="toolbar"></div>
+        </>
       </Provider>,
     );
 

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