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

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

@@ -3,25 +3,50 @@ 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', async () => {
+  return await import(
+    '@plone/volto/helpers/Loadable/__mocks__/Loadable.vitest.jsx'
+  );
+});
 
-let mockSerial = 0;
+beforeAll(async () => {
+  const { __setLoadables } = await import(
+    '@plone/volto/helpers/Loadable/Loadable'
+  );
+  await __setLoadables();
+});
 
-jest.mock('uuid', () => {
+let mockSerial = 0;
+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', () => ({
+  default: () => <div>Order Component</div>,
+}));
+
 const mockStore = configureStore();
 
 test('Allow override of blocksConfig', () => {
@@ -70,10 +95,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 +116,7 @@ test('Removes invalid blocks on saving', () => {
     },
   });
 
-  const onChangeFormData = jest.fn(() => {});
+  const onChangeFormData = vi.fn(() => {});
 
   const data = {
     pathname: '/test',
@@ -126,18 +154,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/Edit.jsx

@@ -122,7 +122,7 @@ export class Edit extends Component {
    */
   render() {
     const { blocksConfig = config.blocks.blocksConfig } = this.props;
-    const { editable, type } = this.props;
+    const { editable, type, isContainer: parentIsContainer } = this.props;
 
     const disableNewBlocks = this.props.data?.disableNewBlocks;
 
@@ -198,6 +198,7 @@ export class Edit extends Component {
               {...this.props}
               blockNode={this.blockNode}
               data={this.props.data}
+              className={cx({ contained: parentIsContainer })}
             />
             {this.props.manage && (
               <SidebarPortal

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

@@ -9,7 +9,13 @@ import {
 const StyleWrapper = (props) => {
   let classNames,
     style = [];
-  const { block, children, content, data = {}, isContainer } = props;
+  const {
+    block,
+    children,
+    content,
+    data = {},
+    isContainer: parentIsContainer,
+  } = props;
   classNames = buildStyleClassNamesFromData(data.styles);
 
   classNames = buildStyleClassNamesExtenders({
@@ -24,14 +30,16 @@ const StyleWrapper = (props) => {
     '',
     // If we are rendering blocks inside a container, then pass also the data from the container
     // This is needed in order to calculate properly the styles for the blocks inside the container
-    isContainer && content.blocks ? content : {},
+    parentIsContainer && content.blocks ? content : {},
   );
 
   const rewrittenChildren = React.Children.map(children, (child) => {
     if (React.isValidElement(child)) {
       const childProps = {
         ...props,
-        className: cx([child.props.className, ...classNames]),
+        className: cx([child.props.className, ...classNames], {
+          contained: parentIsContainer,
+        }),
         style: { ...child.props.style, ...style },
       };
       return React.cloneElement(child, childProps);

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,18 @@ 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', 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();
+});
 
 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,15 @@ import { Provider } from 'react-intl-redux';
 
 import ImageSidebar from './ImageSidebar';
 
-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();
 
-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,12 @@ import { Provider } from 'react-intl-redux';
 
 import LeadImageSidebar from './LeadImageSidebar';
 
-jest.mock('@plone/volto/components/manage/Widgets');
+vi.mock('@plone/volto/components/manage/Widgets');
+vi.mock('@plone/volto/components/manage/Widgets', async () => {
+  return await import(
+    '@plone/volto/components/manage/Widgets/__mocks__/index.vitest.tsx'
+  );
+});
 
 const mockStore = configureStore();
 
@@ -16,6 +21,7 @@ test('renders a Lead Image block Sidebar component', () => {
       messages: {},
     },
   });
+
   const component = renderer.create(
     <Provider store={store}>
       <LeadImageSidebar
@@ -45,6 +51,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,11 @@ import { Provider } from 'react-intl-redux';
 
 import MapsSidebar from './MapsSidebar';
 
-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/Blocks/Search/components/DateRangeFacet.test.jsx

@@ -2,18 +2,24 @@ 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', 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('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,22 @@ 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', 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('SelectFacet', () => {
   it('renders a facet component with select dropdown', async () => {

package/src/components/manage/Blocks/Title/Edit.jsx

@@ -77,8 +77,14 @@ export const TitleBlockEdit = (props) => {
         ReactEditor.focus(editor);
       } else {
         // nothing is selected, move focus to end
-        ReactEditor.focus(editor);
-        Transforms.select(editor, Editor.end(editor, []));
+        // make sure that the editor is focused
+        setTimeout(() => {
+          const focused = ReactEditor.focus(editor);
+          if (!focused) {
+            ReactEditor.focus(editor);
+            Transforms.select(editor, Editor.end(editor, []));
+          }
+        }, 0);
       }
     }
   }, [prevSelected, selected, editor]);

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,11 @@ import { Provider } from 'react-intl-redux';
 
 import VideoSidebar from './VideoSidebar';
 
-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/ConditionalLink/ConditionalLink.test.tsx

@@ -0,0 +1,109 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { MemoryRouter } from 'react-router-dom';
+import { Provider } from 'react-intl-redux';
+import configureStore from 'redux-mock-store';
+import '@testing-library/jest-dom';
+
+import ConditionalLink from './ConditionalLink';
+
+const mockStore = configureStore();
+const store = mockStore({
+  userSession: {
+    token: null,
+  },
+  intl: {
+    locale: 'en',
+    messages: {},
+  },
+});
+
+describe('ConditionalLink', () => {
+  it('renders a link when condition is true', () => {
+    render(
+      <Provider store={store}>
+        <MemoryRouter>
+          <ConditionalLink to="/test" condition={true}>
+            Link Text
+          </ConditionalLink>
+        </MemoryRouter>
+      </Provider>,
+    );
+
+    const link = screen.getByText('Link Text');
+    expect(link.tagName).toBe('A');
+    expect(link).toHaveAttribute('href', '/test');
+  });
+
+  it('renders a link when condition is true', () => {
+    render(
+      <Provider store={store}>
+        <MemoryRouter>
+          <ConditionalLink href="/test" condition={true}>
+            Link Text
+          </ConditionalLink>
+        </MemoryRouter>
+      </Provider>,
+    );
+
+    const link = screen.getByText('Link Text');
+    expect(link.tagName).toBe('A');
+    expect(link).toHaveAttribute('href', '/test');
+  });
+
+  it('renders a span when condition is false', () => {
+    render(
+      <Provider store={store}>
+        <MemoryRouter>
+          <ConditionalLink to="/test" condition={false}>
+            Link Text
+          </ConditionalLink>
+        </MemoryRouter>
+      </Provider>,
+    );
+
+    const span = screen.getByText('Link Text');
+    expect(span.tagName).toBe('DIV');
+  });
+
+  it('passes additional props when rendering a link', () => {
+    render(
+      <Provider store={store}>
+        <MemoryRouter>
+          <ConditionalLink
+            to="/test"
+            condition={true}
+            className="custom-class"
+            data-test="test-id"
+          >
+            Link Text
+          </ConditionalLink>
+        </MemoryRouter>
+      </Provider>,
+    );
+
+    const link = screen.getByText('Link Text');
+    expect(link).toHaveClass('custom-class');
+    expect(link).toHaveAttribute('data-test', 'test-id');
+  });
+
+  it('renders a component if no external (href) link is passed', () => {
+    render(
+      <Provider store={store}>
+        <MemoryRouter>
+          <ConditionalLink
+            condition={true}
+            item={{
+              '@id': 'http://localhost:3000/en/welcome-to-volto',
+            }}
+          >
+            <h1>Title</h1>
+          </ConditionalLink>
+        </MemoryRouter>
+      </Provider>,
+    );
+
+    const title = screen.getByText('Title');
+    expect(title.tagName).toBe('H1');
+  });
+});

package/src/components/manage/ConditionalLink/ConditionalLink.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import UniversalLink from '@plone/volto/components/manage/UniversalLink/UniversalLink';
+import type { UniversalLinkProps } from '@plone/volto/components/manage/UniversalLink/UniversalLink';
+
+type ConditionalLinkProps = {
+  condition?: boolean;
+  to?: string; // Alias for href
+  children: React.ReactNode;
+} & Omit<UniversalLinkProps, 'href' | 'item'> & {
+    href?: string;
+    item?: UniversalLinkProps['item'];
+  };
+
+const ConditionalLink = React.forwardRef<
+  HTMLAnchorElement | HTMLDivElement,
+  ConditionalLinkProps
+>(function ConditionalLink(
+  { condition = true, to, href, item, children, ...rest },
+  ref,
+) {
+  if (!condition) {
+    return <>{children}</>;
+  }
+
+  // Normalize: prefer explicit href over "to"
+  const finalHref = href ?? to;
+
+  // Rebuild props safely to satisfy UniversalLinkProps union
+  const universalLinkProps: UniversalLinkProps = finalHref
+    ? { ...rest, href: finalHref, children }
+    : { ...rest, item: item!, children }; // assume item is defined if href isn't
+
+  return <UniversalLink ref={ref} {...universalLinkProps} />;
+});
+
+export default React.memo(ConditionalLink);

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

@@ -8,20 +8,29 @@ 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', 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();
+});
 
-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 +96,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,11 @@ import ContentsPropertiesModal from './ContentsPropertiesModal';
 
 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('ContentsPropertiesModal', () => {
   it('renders a contents properties modal component', () => {

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

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

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