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

package/src/components/theme/App/App.test.jsx

@@ -16,24 +16,28 @@ beforeAll(() => {
 
 const mockStore = configureStore();
 
-jest.mock('../../manage/Toolbar/Toolbar', () =>
-  jest.fn(() => <div id="toolbar" />),
-);
-jest.mock('../Header/Header', () => jest.fn(() => <div id="toolbar" />));
-jest.mock('../Breadcrumbs/Breadcrumbs', () =>
-  jest.fn(() => <div id="breadcrumbs" />),
-);
-jest.mock('../../manage/Messages/Messages', () =>
-  jest.fn(() => <div id="messages" />),
-);
-jest.mock('../Navigation/Navigation', () =>
-  jest.fn(() => <div id="navigation" />),
-);
-jest.mock('semantic-ui-react', () => ({
-  Segment: jest.fn(() => <div id="segment" />),
-  Container: jest.fn(() => <div id="container" />),
+vi.mock('../../manage/Toolbar/Toolbar', () => ({
+  default: vi.fn(() => <div id="toolbar" />),
+}));
+vi.mock('../Header/Header', () => ({
+  default: vi.fn(() => <div id="header" />),
+}));
+vi.mock('../Breadcrumbs/Breadcrumbs', () => ({
+  default: vi.fn(() => <div id="breadcrumbs" />),
+}));
+vi.mock('../../manage/Messages/Messages', () => ({
+  default: vi.fn(() => <div id="messages" />),
+}));
+vi.mock('../Navigation/Navigation', () => ({
+  default: vi.fn(() => <div id="navigation" />),
+}));
+vi.mock('semantic-ui-react', () => ({
+  Segment: vi.fn(() => <div id="segment" />),
+  Container: vi.fn(() => <div id="container" />),
+}));
+vi.mock('../Footer/Footer', () => ({
+  default: vi.fn(() => <div id="footer" />),
 }));
-jest.mock('../Footer/Footer', () => jest.fn(() => <div id="footer" />));
 
 describe('App', () => {
   it('renders a app component', () => {
@@ -47,6 +51,7 @@ describe('App', () => {
         locale: 'en',
         messages: {},
       },
+      site: { data: {} },
     });
     const component = renderer.create(
       <Provider store={store}>

package/src/components/theme/AppExtras/AppExtras.test.jsx

@@ -9,7 +9,7 @@ beforeAll(() => {
       match: {
         path: '',
       },
-      component: jest.fn((props) => (
+      component: vi.fn((props) => (
         <div className="everywhere">{props.pathname}</div>
       )),
     },
@@ -17,7 +17,7 @@ beforeAll(() => {
       match: {
         path: '/all-blogs/*',
       },
-      component: jest.fn((props) => (
+      component: vi.fn((props) => (
         <div className="blog-listing" one={props.one} three={props.three} />
       )),
       props: {
@@ -29,27 +29,27 @@ beforeAll(() => {
       match: {
         path: '/blog/edit',
       },
-      component: jest.fn((props) => <div className="blog-edit" />),
+      component: vi.fn((props) => <div className="blog-edit" />),
     },
     {
       match: {
         path: '/blog',
         exact: true,
       },
-      component: jest.fn((props) => (
+      component: vi.fn((props) => (
         <div className="blog-view">{JSON.stringify(props.match)}</div>
       )),
     },
     {
       match: '/something',
-      component: jest.fn((props) => (
+      component: vi.fn((props) => (
         <div className="something">{JSON.stringify(props.match)}</div>
       )),
     },
     {
       match: '/frontpage',
       ignore: '/frontpage/images',
-      component: jest.fn((props) => (
+      component: vi.fn((props) => (
         <div className="frontpage-content">{JSON.stringify(props.match)}</div>
       )),
     },

package/src/components/theme/Avatar/Avatar.jsx

@@ -5,6 +5,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { getInitials } from '@plone/volto/helpers/Utils/Utils';
+import Image from '@plone/volto/components/theme/Image/Image';
 
 const defaultSize = 30;
 const defaultColor = 'Teal';
@@ -15,7 +16,7 @@ const Avatar = ({ src, title, text, size, color, className }) => {
   return (
     <div className={className} title={title}>
       {src ? (
-        <img src={src} alt={title}></img>
+        <Image src={src} alt={title} />
       ) : (
         <svg width={size} height={size}>
           <circle cx={radius} cy={radius} r={radius} fill={color} />

package/src/components/theme/Comments/CommentEditModal.test.jsx

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

package/src/components/theme/Comments/Comments.test.jsx

@@ -2,25 +2,40 @@ import React from 'react';
 import renderer from 'react-test-renderer';
 import configureStore from 'redux-mock-store';
 import { Provider } from 'react-intl-redux';
-
 import Comments from './Comments';
 
+vi.mock('@plone/volto/components/theme/Comments/CommentEditModal', () => ({
+  default: vi.fn(({ id, text, ...props }) => (
+    <div data-testid="comment-edit-modal">Mocked CommentEditModal</div>
+  )),
+}));
+
 const mockStore = configureStore();
 
-jest.mock('moment', () =>
-  jest.fn(() => ({
-    format: jest.fn(() => 'Sunday, April 23, 2017 3:38 AM'),
-    fromNow: jest.fn(() => 'a few seconds ago'),
+vi.mock('moment', () => ({
+  default: vi.fn(() => ({
+    format: vi.fn(() => 'Sunday, April 23, 2017 3:38 AM'),
+    fromNow: vi.fn(() => 'a few seconds ago'),
   })),
-);
+}));
 
-jest.mock('@plone/volto/helpers/Loadable/Loadable');
-jest.mock('@plone/volto/components/manage/Form');
+vi.mock('@plone/volto/helpers/Loadable/Loadable', async () => {
+  return await import(
+    '@plone/volto/helpers/Loadable/__mocks__/Loadable.vitest.jsx'
+  );
+});
+vi.mock('@plone/volto/components/manage/Form', async () => {
+  return await import(
+    '@plone/volto/components/manage/Form/__mocks__/index.vitest.tsx'
+  );
+});
 
-beforeAll(
-  async () =>
-    await require('@plone/volto/helpers/Loadable/Loadable').__setLoadables(),
-);
+beforeAll(async () => {
+  const { __setLoadables } = await import(
+    '@plone/volto/helpers/Loadable/Loadable'
+  );
+  await __setLoadables();
+});
 
 describe('Comments', () => {
   it('renders a comments component', () => {
@@ -67,11 +82,13 @@ describe('Comments', () => {
         },
       },
     });
+
     const component = renderer.create(
       <Provider store={store}>
         <Comments pathname="/blog" />
       </Provider>,
     );
+
     const json = component.toJSON();
     expect(json).toMatchSnapshot();
   });

package/src/components/theme/ContactForm/ContactForm.test.jsx

@@ -5,11 +5,15 @@ import { Provider } from 'react-intl-redux';
 import { MemoryRouter } from 'react-router-dom';
 import ContactForm from './ContactForm';
 
-jest.mock('../../manage/Toolbar/Toolbar', () =>
-  jest.fn(() => <div id="Portal" />),
-);
+vi.mock('../../manage/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'
+  );
+});
 
 const mockStore = configureStore();
 describe('Contact form', () => {

package/src/components/theme/FormattedDate/FormattedDate.stories.jsx

@@ -82,9 +82,27 @@ export default {
   ],
   argTypes: {
     locale: {
+      options: [
+        'ca',
+        'de',
+        'en',
+        'es',
+        'eu',
+        'fi',
+        'fr',
+        'hi',
+        'it',
+        'ja',
+        'nl',
+        'pt',
+        'pt-BR',
+        'ro',
+        'ru',
+        'sv',
+        'zh-CN',
+      ],
       control: {
-        type: 'select',
-        options: ['en', 'de', 'us'],
+        type: 'radio',
       },
     },
   },

package/src/components/theme/Header/Header.test.jsx

@@ -7,19 +7,25 @@ import Header from './Header';
 
 const mockStore = configureStore();
 
-jest.mock('../Logo/Logo', () => jest.fn(() => <div id="logo" />));
-jest.mock('../SearchWidget/SearchWidget', () =>
-  jest.fn(() => <div id="searchwidget" />),
-);
-jest.mock('../Anontools/Anontools', () =>
-  jest.fn(() => <div id="anontools" />),
-);
-jest.mock('../Navigation/Navigation', () =>
-  jest.fn(() => <div id="navigation" />),
-);
-jest.mock('../LanguageSelector/LanguageSelector', () =>
-  jest.fn(() => <div id="language-selector" />),
-);
+vi.mock('../Logo/Logo', () => ({
+  default: vi.fn(() => <div id="logo" />),
+}));
+
+vi.mock('../SearchWidget/SearchWidget', () => ({
+  default: vi.fn(() => <div id="searchwidget" />),
+}));
+
+vi.mock('../Anontools/Anontools', () => ({
+  default: vi.fn(() => <div id="anontools" />),
+}));
+
+vi.mock('../Navigation/Navigation', () => ({
+  default: vi.fn(() => <div id="navigation" />),
+}));
+
+vi.mock('../LanguageSelector/LanguageSelector', () => ({
+  default: vi.fn(() => <div id="language-selector" />),
+}));
 
 describe('Header', () => {
   it('renders a header component', () => {

package/src/components/theme/Image/Image.jsx

@@ -1,6 +1,10 @@
 import PropTypes from 'prop-types';
 import cx from 'classnames';
-import { flattenToAppURL, flattenScales } from '@plone/volto/helpers/Url/Url';
+import {
+  flattenToAppURL,
+  flattenScales,
+  addSubpathPrefix,
+} from '@plone/volto/helpers/Url/Url';
 
 /**
  * Image component
@@ -30,7 +34,7 @@ export default function Image({
   attrs.className = cx(className, { responsive }) || undefined;
 
   if (!item && src) {
-    attrs.src = src;
+    attrs.src = addSubpathPrefix(src);
   } else {
     const isFromRealObject = !item.image_scales;
     const imageFieldWithDefault = imageField || item.image_field || 'image';
@@ -46,9 +50,11 @@ export default function Image({
 
     const isSvg = image['content-type'] === 'image/svg+xml';
     // In case `base_path` is present (`preview_image_link`) use it as base path
-    const basePath = image.base_path || item['@id'];
+    const basePath = addSubpathPrefix(
+      flattenToAppURL(image.base_path || item['@id']),
+    );
+    attrs.src = `${basePath}/${image.download}`;
 
-    attrs.src = `${flattenToAppURL(basePath)}/${image.download}`;
     attrs.width = image.width;
     attrs.height = image.height;
 
@@ -67,10 +73,7 @@ export default function Image({
       });
 
       attrs.srcSet = sortedScales
-        .map(
-          (scale) =>
-            `${flattenToAppURL(basePath)}/${scale.download} ${scale.width}w`,
-        )
+        .map((scale) => `${basePath}/${scale.download} ${scale.width}w`)
         .join(', ');
     }
   }

package/src/components/theme/LanguageSelector/{LanguageSelector.test.jsx → LanguageSelector.test.tsx}

@@ -3,15 +3,9 @@ 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 config from '@plone/volto/registry';
 
 import LanguageSelector from './LanguageSelector';
 
-beforeAll(() => {
-  config.settings.isMultilingual = true;
-  config.settings.supportedLanguages = ['de', 'es'];
-});
-
 const mockStore = configureStore();
 
 describe('LanguageSelector', () => {
@@ -30,6 +24,12 @@ describe('LanguageSelector', () => {
           },
         },
       },
+      site: {
+        data: {
+          features: { multilingual: true },
+          'plone.available_languages': ['es'],
+        },
+      },
     });
     const component = renderer.create(
       <Provider store={store}>

package/src/components/theme/LanguageSelector/LanguageSelector.tsx

@@ -0,0 +1,89 @@
+import { Link } from 'react-router-dom';
+
+import { useSelector } from 'react-redux';
+import cx from 'classnames';
+
+import Helmet from '@plone/volto/helpers/Helmet/Helmet';
+import langmap from '@plone/volto/helpers/LanguageMap/LanguageMap';
+import { flattenToAppURL } from '@plone/volto/helpers/Url/Url';
+import { toReactIntlLang } from '@plone/volto/helpers/Utils/Utils';
+
+import { defineMessages, useIntl, type IntlShape } from 'react-intl';
+import type {
+  Content,
+  GetSiteResponse,
+  GetTranslationResponse,
+} from '@plone/types';
+
+const messages = defineMessages({
+  switchLanguageTo: {
+    id: 'Switch to',
+    defaultMessage: 'Switch to',
+  },
+});
+
+type FormState = {
+  content: {
+    data: Content;
+  };
+  intl: IntlShape;
+  site: {
+    data: GetSiteResponse;
+  };
+};
+
+const LanguageSelector = ({
+  onClickAction = () => {},
+}: {
+  onClickAction?: () => void;
+}) => {
+  const intl = useIntl();
+  const currentLang = useSelector<FormState, IntlShape['locale']>(
+    (state) => state.intl.locale,
+  );
+  const translations = useSelector<
+    FormState,
+    GetTranslationResponse['items'] | undefined
+  >((state) => state.content.data?.['@components']?.translations?.items);
+  const isMultilingual = useSelector<
+    FormState,
+    GetSiteResponse['features']['multilingual']
+  >((state) => state.site.data.features?.multilingual);
+  const availableLanguages = useSelector<
+    FormState,
+    GetSiteResponse['plone.available_languages']
+  >((state) => state.site.data?.['plone.available_languages']);
+
+  return isMultilingual ? (
+    <div className="language-selector">
+      {availableLanguages?.map((lang) => {
+        const langKey = lang as keyof typeof langmap;
+        const translation = translations?.find(
+          (t: { language: string }) => t.language === lang,
+        );
+        return (
+          <Link
+            aria-label={`${intl.formatMessage(
+              messages.switchLanguageTo,
+            )} ${langmap[langKey].nativeName.toLowerCase()}`}
+            className={cx({ selected: toReactIntlLang(lang) === currentLang })}
+            to={translation ? flattenToAppURL(translation['@id']) : `/${lang}`}
+            title={langmap[langKey].nativeName}
+            onClick={() => {
+              onClickAction();
+            }}
+            key={`language-selector-${lang}`}
+          >
+            {langmap[langKey].nativeName}
+          </Link>
+        );
+      })}
+    </div>
+  ) : (
+    <Helmet>
+      <html lang={toReactIntlLang(currentLang)} />
+    </Helmet>
+  );
+};
+
+export default LanguageSelector;

package/src/components/theme/Logo/Logo.Multilingual.test.jsx

@@ -3,14 +3,9 @@ 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 config from '@plone/volto/registry';
 
 import Logo from './Logo';
 
-beforeAll(() => {
-  config.settings.isMultilingual = true;
-});
-
 const mockStore = configureStore();
 
 describe('Multilingual Logo', () => {

package/src/components/theme/Logout/Logout.test.jsx

@@ -9,7 +9,7 @@ import Logout from './Logout';
 
 const mockStore = configureStore();
 
-jest.mock('../Login/Login', () => jest.fn(() => <div />));
+vi.mock('../Login/Login', () => ({ default: vi.fn(() => <div />) }));
 
 describe('Logout', () => {
   it('renders a logout component', () => {

package/src/components/theme/MultilingualRedirector/MultilingualRedirector.jsx

@@ -1,28 +1,24 @@
 import React from 'react';
 import { Redirect } from 'react-router-dom';
-import { useDispatch } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
 import { useCookies } from 'react-cookie';
-import config from '@plone/volto/registry';
 import { changeLanguage } from '@plone/volto/actions/language/language';
 import { toGettextLang } from '@plone/volto/helpers/Utils/Utils';
 
 const MultilingualRedirector = (props) => {
-  const { settings } = config;
   const { pathname, children } = props;
   const [cookies] = useCookies();
-  const currentLanguage = cookies['I18N_LANGUAGE'] || settings.defaultLanguage;
-  const redirectToLanguage = settings.supportedLanguages.includes(
-    currentLanguage,
-  )
-    ? currentLanguage
-    : settings.defaultLanguage;
+  const site = useSelector((state) => state.site.data);
+  const isMultilingual = site.features?.multilingual;
+  const redirectToLanguage =
+    cookies['I18N_LANGUAGE'] || site['plone.default_language'];
   const dispatch = useDispatch();
 
   React.useEffect(() => {
     // ToDo: Add means to support language negotiation (with config)
     // const detectedLang = (navigator.language || navigator.userLanguage).substring(0, 2);
     let mounted = true;
-    if (settings.isMultilingual && pathname === '/') {
+    if (isMultilingual && pathname === '/') {
       const langFileName = toGettextLang(redirectToLanguage);
       import(
         /* @vite-ignore */ '@root/../locales/' + langFileName + '.json'
@@ -35,9 +31,9 @@ const MultilingualRedirector = (props) => {
     return () => {
       mounted = false;
     };
-  }, [pathname, dispatch, redirectToLanguage, settings.isMultilingual]);
+  }, [pathname, dispatch, redirectToLanguage, isMultilingual]);
 
-  return pathname === '/' && settings.isMultilingual ? (
+  return pathname === '/' && isMultilingual ? (
     <Redirect to={`/${redirectToLanguage}`} />
   ) : (
     <>{children}</>

package/src/components/theme/MultilingualRedirector/MultilingualRedirector.test.jsx

@@ -3,19 +3,17 @@ 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 config from '@plone/volto/registry';
 
 import MultilingualRedirector from './MultilingualRedirector';
 
-beforeAll(() => {
-  config.settings.isMultilingual = true;
-});
-
 const mockStore = configureStore();
 
 describe('MultilingualRedirector', () => {
   it('renders a MultilingualRedirector component', () => {
     const store = mockStore({
+      site: {
+        data: {},
+      },
       intl: {
         locale: 'en',
         messages: {},

package/src/components/theme/Navigation/NavItem.jsx

@@ -15,11 +15,7 @@ const NavItem = ({ item, lang }) => {
         key={item.url}
         className="item"
         activeClassName="active"
-        exact={
-          settings.isMultilingual
-            ? item.url === `/${toBackendLang(lang)}`
-            : item.url === ''
-        }
+        exact={item.url === '' || item.url === `/${toBackendLang(lang)}`}
       >
         {item.title}
       </NavLink>

package/src/components/theme/Navigation/Navigation.Multilingual.test.jsx

@@ -3,14 +3,9 @@ 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 config from '@plone/volto/registry';
 
 import Navigation from './Navigation';
 
-beforeAll(() => {
-  config.settings.isMultilingual = true;
-});
-
 const mockStore = configureStore();
 
 describe('Navigation Multilingual', () => {

package/src/components/theme/NotFound/NotFound.jsx

@@ -19,15 +19,18 @@ import config from '@plone/volto/registry';
 const NotFound = () => {
   const dispatch = useDispatch();
   const lang = useSelector((state) => state.intl.locale);
+  const isMultilingual = useSelector(
+    (state) => state.site.data.features?.multilingual,
+  );
 
   useEffect(() => {
     dispatch(
       getNavigation(
-        config.settings.isMultilingual ? `/${toBackendLang(lang)}` : '/',
+        isMultilingual ? `/${toBackendLang(lang)}` : '/',
         config.settings.navDepth,
       ),
     );
-  }, [dispatch, lang]);
+  }, [dispatch, lang, isMultilingual]);
 
   return (
     <Container className="view-wrapper">

package/src/components/theme/NotFound/NotFound.test.jsx

@@ -13,6 +13,9 @@ const mockStore = configureStore();
 describe('NotFound', () => {
   it('renders a not found component', () => {
     const store = mockStore({
+      site: {
+        data: {},
+      },
       intl: {
         locale: 'en',
         messages: {},

package/src/components/theme/PasswordReset/PasswordReset.test.jsx

@@ -7,7 +7,16 @@ import { MemoryRouter } from 'react-router-dom';
 import PasswordReset from './PasswordReset';
 
 const mockStore = configureStore();
-
+vi.mock('./PasswordReset', () => {
+  const ActualPasswordReset = vi.importActual('./PasswordReset');
+  return {
+    ...ActualPasswordReset,
+    default: vi.fn((props) => {
+      const token = props.match?.params?.token || 'default-token';
+      return <div data-testid="password-reset">Password Reset for {token}</div>;
+    }),
+  };
+});
 describe('PasswordReset', () => {
   it('renders a PasswordReset component', () => {
     const store = mockStore({

package/src/components/theme/PasswordReset/RequestPasswordReset.test.jsx

@@ -6,7 +6,11 @@ import { MemoryRouter } from 'react-router-dom';
 
 import RequestPasswordReset from './RequestPasswordReset';
 
-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/theme/PreviewImage/PreviewImage.jsx

@@ -25,7 +25,7 @@ function PreviewImage({ item, alt, image_field, showDefault = true, ...rest }) {
     return image;
   } else {
     return (
-      <img
+      <Image
         src={
           config.getComponent({
             name: 'DefaultImage',