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

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

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

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

@@ -1,8 +1,7 @@
 import React from 'react';
-import renderer from 'react-test-renderer';
+import { render } from '@testing-library/react';
 import configureStore from 'redux-mock-store';
 import { Provider } from 'react-intl-redux';
-import { waitFor } from '@testing-library/react';
 import ContentsUploadModal from './ContentsUploadModal';
 
 const mockStore = configureStore();
@@ -21,19 +20,17 @@ describe('ContentsUploadModal', () => {
         messages: {},
       },
     });
-    const component = renderer.create(
+    const { baseElement } = render(
       <Provider store={store}>
         <ContentsUploadModal
           pathname="/blog"
-          open={false}
+          open={true}
           onOk={() => {}}
           onCancel={() => {}}
         />
       </Provider>,
     );
-    const json = component.toJSON();
-    await waitFor(() => {});
-    expect(json).toMatchSnapshot();
+    expect(baseElement).toMatchSnapshot();
   });
 
   it('renders a contents upload modal component that only allows images', async () => {
@@ -49,20 +46,18 @@ describe('ContentsUploadModal', () => {
         messages: {},
       },
     });
-    const component = renderer.create(
+    const { baseElement } = render(
       <Provider store={store}>
         <ContentsUploadModal
           pathname="/blog"
-          open={false}
+          open={true}
           onOk={() => {}}
           onCancel={() => {}}
           accept={['image/*']}
         />
       </Provider>,
     );
-    const json = component.toJSON();
-    await waitFor(() => {});
-    expect(json).toMatchSnapshot();
+    expect(baseElement).toMatchSnapshot();
   });
   it('renders a contents upload modal component that only allows 10MB files', async () => {
     const store = mockStore({
@@ -77,20 +72,18 @@ describe('ContentsUploadModal', () => {
         messages: {},
       },
     });
-    const component = renderer.create(
+    const { baseElement } = render(
       <Provider store={store}>
         <ContentsUploadModal
           pathname="/blog"
-          open={false}
+          open={true}
           onOk={() => {}}
           onCancel={() => {}}
           maxSize={1000000}
         />
       </Provider>,
     );
-    const json = component.toJSON();
-    await waitFor(() => {});
-    expect(json).toMatchSnapshot();
+    expect(baseElement).toMatchSnapshot();
   });
   it('renders a contents upload modal component that only allows 1 file', async () => {
     const store = mockStore({
@@ -105,19 +98,17 @@ describe('ContentsUploadModal', () => {
         messages: {},
       },
     });
-    const component = renderer.create(
+    const { baseElement } = render(
       <Provider store={store}>
         <ContentsUploadModal
           pathname="/blog"
-          open={false}
+          open={true}
           onOk={() => {}}
           onCancel={() => {}}
           multiple={false}
         />
       </Provider>,
     );
-    const json = component.toJSON();
-    await waitFor(() => {});
-    expect(json).toMatchSnapshot();
+    expect(baseElement).toMatchSnapshot();
   });
 });

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

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

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

@@ -1,3 +1,19 @@
+/* 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/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(() => (

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/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,15 @@ 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', async () => {
+  return await import(
+    '@plone/volto/components/manage/Widgets/__mocks__/index.vitest.tsx'
+  );
+});
+
+vi.mock('../../Toolbar/Toolbar', () => ({
+  default: vi.fn(() => <div id="Portal" />),
+}));
 
 describe('Aliases', () => {
   it('renders an aliases control component', () => {
@@ -55,7 +62,11 @@ describe('Aliases', () => {
       },
       intl: {
         locale: 'en',
-        messages: {},
+        messages: {
+          Both: 'Both',
+          Automatically: 'Automatically',
+          Manually: 'Manually',
+        },
       },
       site: {
         data: {
@@ -64,7 +75,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.jsx

@@ -182,7 +182,7 @@ class ContentType extends Component {
       return <Error error={this.state.error} />;
     }
 
-    if (this.props.controlpanel) {
+    if (this.props.controlpanel?.data) {
       let controlpanel = this.props.controlpanel;
       if (controlpanel?.data?.filter_content_types === false) {
         controlpanel.data.filter_content_types = { title: 'all', token: 'all' };

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

@@ -8,8 +8,14 @@ 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', async () => {
+  return await import(
+    '@plone/volto/components/manage/Form/__mocks__/index.vitest.tsx'
+  );
+});
+vi.mock('../../Toolbar/Toolbar', () => ({
+  default: vi.fn(() => <div id="Portal" />),
+}));
 
 describe('ContentType', () => {
   it('renders dexterity content-type component', () => {
@@ -32,8 +38,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', () => {

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

@@ -8,9 +8,11 @@ import ContentTypes from './ContentTypes';
 
 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('ContentTypes', () => {
   it('renders dexterity content-types controlpanel component', () => {
@@ -58,7 +60,28 @@ describe('ContentTypes', () => {
         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 initialEntries={['/controlpanel/dexterity-types']}>

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

@@ -494,8 +494,9 @@ class GroupsControlpanel extends Component {
                       messages.addGroupsFormGroupNameTitle,
                     ),
                     type: 'string',
-                    description:
-                      'A unique identifier for the group. Can not be changed after creation.',
+                    description: this.props.intl.formatMessage(
+                      messages.addGroupsFormGroupNameDescription,
+                    ),
                   },
                   email: {
                     title: this.props.intl.formatMessage(

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