@plone/volto 19.0.0-alpha.9 → 19.0.0

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

@@ -1,165 +1,266 @@
 import React from 'react';
-import renderer from 'react-test-renderer';
+import configureStore from 'redux-mock-store';
+import { Provider } from 'react-intl-redux';
+import { render, screen } from '@testing-library/react';
+
 import Image from './Image';
 
-test('renders an image component with fetchpriority high', () => {
-  const component = renderer.create(
-    <Image
-      item={{
-        '@id': 'http://localhost:3000/image',
-        image: {
-          download: 'http://localhost:3000/image/@@images/image.png',
-          width: 400,
-          height: 400,
-          scales: {
-            preview: {
-              download: 'http://localhost:3000/image/@@images/image-400.png',
-              width: 400,
-              height: 400,
-            },
+const mockStore = configureStore();
+
+const defaultSiteData = {
+  'plone.image_scales': { preview: {}, listing: {} },
+};
+
+const itemWithImage = {
+  '@id': 'http://localhost:3000/image',
+  image: {
+    download: 'http://localhost:3000/image/@@images/image.png',
+    width: 1080,
+    height: 920,
+    scales: {
+      preview: {
+        download: 'http://localhost:3000/image/@@images/image-400.png',
+        width: 400,
+        height: 400,
+      },
+    },
+  },
+};
+
+const catalogBrain = {
+  '@id': 'http://localhost:3000/image',
+  image_field: 'image',
+  image_scales: {
+    image: [
+      {
+        download: '@@images/image.png',
+        width: 400,
+        height: 400,
+        scales: {
+          preview: {
+            download: '@@images/image-400.png',
+            width: 400,
+            height: 400,
           },
         },
-      }}
-      imageField="image"
-      alt="alt text"
-    />,
-  );
-  const json = component.toJSON();
-  expect(json).toMatchSnapshot();
-});
+      },
+    ],
+  },
+};
 
-test('renders an image component with lazy loading', () => {
-  const component = renderer.create(
-    <Image
-      item={{
-        '@id': 'http://localhost:3000/image',
-        image: {
-          download: 'http://localhost:3000/image/@@images/image.png',
-          width: 400,
-          height: 400,
-          scales: {
-            preview: {
-              download: 'http://localhost:3000/image/@@images/image-400.png',
-              width: 400,
-              height: 400,
-            },
+const previewImageLink = {
+  '@id': 'http://localhost:3000/blog/blog-post',
+  image_field: 'preview_image_link',
+  image_scales: {
+    preview_image_link: [
+      {
+        base_path: '/image.png',
+        download: '@@images/image.png',
+        width: 400,
+        height: 400,
+        scales: {
+          preview: {
+            download: '@@images/image-400.png',
+            width: 400,
+            height: 400,
           },
         },
-      }}
-      imageField="image"
-      alt="alt text"
-      loading="lazy"
-    />,
+      },
+    ],
+  },
+};
+
+const renderImage = (props, { siteData = defaultSiteData } = {}) => {
+  const store = mockStore({
+    intl: { locale: 'en', messages: {} },
+    site: { data: siteData },
+  });
+
+  return render(
+    <Provider store={store}>
+      <Image {...props} />
+    </Provider>,
   );
-  const json = component.toJSON();
-  expect(json).toMatchSnapshot();
-});
+};
+
+describe('Image', () => {
+  it('renders an image component with fetchpriority high', () => {
+    renderImage({ item: itemWithImage, imageField: 'image', alt: 'alt text' });
+
+    const img = screen.getByAltText('alt text');
+
+    expect(img).toHaveAttribute('fetchpriority', 'high');
+    expect(img).toHaveAttribute('width', '1080');
+    expect(img).toHaveAttribute('height', '920');
+    expect(img).toHaveAttribute('src', '/image/@@images/image.png');
+    expect(img).toHaveAttribute(
+      'srcset',
+      '/image/@@images/image-400.png 400w, /image/@@images/image.png 1080w',
+    );
+  });
 
-test('renders an image component with responsive class', () => {
-  const component = renderer.create(
-    <Image
-      item={{
-        '@id': 'http://localhost:3000/image',
+  it('renders an image component with lazy loading', () => {
+    renderImage({
+      item: itemWithImage,
+      imageField: 'image',
+      alt: 'alt text',
+      loading: 'lazy',
+    });
+
+    const img = screen.getByAltText('alt text');
+
+    expect(img).toHaveAttribute('loading', 'lazy');
+    expect(img).toHaveAttribute('decoding', 'async');
+    expect(img).not.toHaveAttribute('fetchpriority');
+  });
+
+  it('renders an image component with responsive class', () => {
+    renderImage({
+      item: {
+        ...itemWithImage,
         image: {
+          ...itemWithImage.image,
           download: 'http://localhost:3000/image/@@images/image-1200.png',
-          width: 400,
-          height: 400,
-          scales: {
-            preview: {
-              download: 'http://localhost:3000/image/@@images/image-400.png',
-              width: 400,
-              height: 400,
-            },
-          },
         },
-      }}
-      imageField="image"
-      alt="alt text"
-      responsive={true}
-    />,
-  );
-  const json = component.toJSON();
-  expect(json).toMatchSnapshot();
-});
+      },
+      imageField: 'image',
+      alt: 'alt text',
+      responsive: true,
+    });
 
-test('renders an image component from a catalog brain', () => {
-  const component = renderer.create(
-    <Image
-      item={{
-        '@id': 'http://localhost:3000/image',
-        image_field: 'image',
-        image_scales: {
-          image: [
-            {
-              download: '@@images/image.png',
-              width: 400,
-              height: 400,
-              scales: {
-                preview: {
-                  download: '@@images/image-400.png',
-                  width: 400,
-                  height: 400,
-                },
-              },
-            },
-          ],
-        },
-      }}
-      imageField="image"
-      alt="alt text"
-    />,
-  );
-  const json = component.toJSON();
-  expect(json).toMatchSnapshot();
-});
+    const img = screen.getByAltText('alt text');
+
+    expect(img).toHaveClass('responsive');
+    expect(img).toHaveAttribute('fetchpriority', 'high');
+  });
+
+  it('renders an image component from a catalog brain', () => {
+    renderImage({ item: catalogBrain, imageField: 'image', alt: 'alt text' });
+
+    const img = screen.getByAltText('alt text');
+
+    expect(img).toHaveAttribute('src', '/image/@@images/image.png');
+    expect(img).toHaveAttribute(
+      'srcset',
+      '/image/@@images/image-400.png 400w, /image/@@images/image.png 400w',
+    );
+  });
 
-test('renders an image component from a catalog brain using `preview_image_link`', () => {
-  const component = renderer.create(
-    <Image
-      item={{
-        '@id': 'http://localhost:3000/blog/blog-post',
-        image_field: 'preview_image_link',
-        image_scales: {
-          preview_image_link: [
-            {
-              base_path: '/image.png',
-              download: '@@images/image.png',
-              width: 400,
-              height: 400,
-              scales: {
-                preview: {
-                  download: '@@images/image-400.png',
-                  width: 400,
-                  height: 400,
-                },
-              },
-            },
-          ],
+  it('renders an image component from a catalog brain using `preview_image_link`', () => {
+    renderImage({
+      item: previewImageLink,
+      imageField: 'preview_image_link',
+      alt: 'alt text',
+    });
+
+    const img = screen.getByAltText('alt text');
+
+    expect(img).toHaveAttribute('src', '/image.png/@@images/image.png');
+    expect(img).toHaveAttribute(
+      'srcset',
+      '/image.png/@@images/image-400.png 400w, /image.png/@@images/image.png 400w',
+    );
+  });
+
+  it('includes the original scale in srcset when site defines more scales than the image', () => {
+    renderImage(
+      {
+        item: previewImageLink,
+        imageField: 'preview_image_link',
+        alt: 'alt text',
+      },
+      { siteData: { 'plone.image_scales': { preview: {}, listing: {} } } },
+    );
+
+    const img = screen.getByAltText('alt text');
+
+    expect(img).toHaveAttribute(
+      'srcset',
+      '/image.png/@@images/image-400.png 400w, /image.png/@@images/image.png 400w',
+    );
+  });
+
+  it('does not include the original scale when site scales are not greater than the image scales', () => {
+    renderImage(
+      {
+        item: previewImageLink,
+        imageField: 'preview_image_link',
+        alt: 'alt text',
+      },
+      { siteData: { 'plone.image_scales': { preview: {} } } },
+    );
+
+    const img = screen.getByAltText('alt text');
+
+    expect(img).toHaveAttribute(
+      'srcset',
+      '/image.png/@@images/image-400.png 400w',
+    );
+  });
+
+  it('does not render when no item or src is provided', () => {
+    const { container } = renderImage(
+      { alt: 'missing image' },
+      { siteData: {} },
+    );
+
+    expect(container).toBeEmptyDOMElement();
+  });
+
+  it('renders an svg image without srcset', () => {
+    renderImage({
+      item: {
+        ...itemWithImage,
+        image: {
+          ...itemWithImage.image,
+          'content-type': 'image/svg+xml',
         },
-      }}
-      imageField="preview_image_link"
-      alt="alt text"
-    />,
-  );
-  const json = component.toJSON();
-  expect(json).toMatchSnapshot();
-});
+      },
+      imageField: 'image',
+      alt: 'svg image',
+    });
 
-test('renders an image component from a string src', () => {
-  const component = renderer.create(
-    <Image
-      src="http://localhost:3000/image/@@images/image/image.png"
-      alt="alt text"
-    />,
-  );
-  const json = component.toJSON();
-  expect(json).toMatchSnapshot();
-});
+    const img = screen.getByAltText('svg image');
 
-test('should not render empty class attribute in img tag', () => {
-  const component = renderer.create(
-    <Image src="/image.png" alt="no class attribute" />,
-  );
-  const json = component.toJSON();
-  expect(json).toMatchSnapshot();
+    expect(img).not.toHaveAttribute('srcset');
+    expect(img).toHaveAttribute('src', '/image/@@images/image.png');
+  });
+
+  it('merges custom className with responsive flag', () => {
+    renderImage({
+      item: itemWithImage,
+      imageField: 'image',
+      alt: 'with class',
+      responsive: true,
+      className: 'custom-class',
+    });
+
+    const img = screen.getByAltText('with class');
+
+    expect(img).toHaveClass('custom-class');
+    expect(img).toHaveClass('responsive');
+  });
+
+  it('renders an image component from a string src', () => {
+    renderImage({
+      src: 'http://localhost:3000/image/@@images/image/image.png',
+      alt: 'alt text',
+    });
+
+    const img = screen.getByAltText('alt text');
+
+    expect(img).toHaveAttribute(
+      'src',
+      'http://localhost:3000/image/@@images/image/image.png',
+    );
+    expect(img).toHaveAttribute('fetchpriority', 'high');
+  });
+
+  it('should not render empty class attribute in img tag', () => {
+    renderImage({ src: '/image.png', alt: 'no class attribute' });
+
+    const img = screen.getByAltText('no class attribute');
+
+    expect(img).not.toHaveAttribute('class');
+  });
 });

package/src/components/theme/InjectPloneComponentsCSS/InjectPloneComponentsCSS.tsx

@@ -0,0 +1,7 @@
+import '@plone/components/dist/basic.css';
+
+const InjectPloneComponentsCSS = () => {
+  return null;
+};
+
+export default InjectPloneComponentsCSS;

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

@@ -65,16 +65,16 @@ const LanguageSelector = ({
           <Link
             aria-label={`${intl.formatMessage(
               messages.switchLanguageTo,
-            )} ${langmap[langKey].nativeName.toLowerCase()}`}
+            )} ${(langmap[langKey]?.nativeName || langKey).toLowerCase()}`}
             className={cx({ selected: toReactIntlLang(lang) === currentLang })}
             to={translation ? flattenToAppURL(translation['@id']) : `/${lang}`}
-            title={langmap[langKey].nativeName}
+            title={langmap[langKey]?.nativeName || langKey}
             onClick={() => {
               onClickAction();
             }}
             key={`language-selector-${lang}`}
           >
-            {langmap[langKey].nativeName}
+            {langmap[langKey]?.nativeName || langKey}
           </Link>
         );
       })}

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

@@ -3,13 +3,17 @@ import { Redirect } from 'react-router-dom';
 import { useDispatch, useSelector } from 'react-redux';
 import { useCookies } from 'react-cookie';
 import { changeLanguage } from '@plone/volto/actions/language/language';
-import { toGettextLang } from '@plone/volto/helpers/Utils/Utils';
+import { toGettextLang, toBackendLang } from '@plone/volto/helpers/Utils/Utils';
 
 const MultilingualRedirector = (props) => {
   const { pathname, children } = props;
   const [cookies] = useCookies();
   const site = useSelector((state) => state.site.data);
   const isMultilingual = site.features?.multilingual;
+  const availableLanguages = useSelector(
+    (state) => state.site?.data?.['plone.available_languages'],
+  );
+  const currentLanguage = useSelector((state) => state.intl.locale);
   const redirectToLanguage =
     cookies['I18N_LANGUAGE'] || site['plone.default_language'];
   const dispatch = useDispatch();
@@ -18,23 +22,49 @@ const MultilingualRedirector = (props) => {
     // ToDo: Add means to support language negotiation (with config)
     // const detectedLang = (navigator.language || navigator.userLanguage).substring(0, 2);
     let mounted = true;
-    if (isMultilingual && pathname === '/') {
-      const langFileName = toGettextLang(redirectToLanguage);
-      import(
-        /* @vite-ignore */ '@root/../locales/' + langFileName + '.json'
-      ).then((locale) => {
-        if (mounted) {
-          dispatch(changeLanguage(redirectToLanguage, locale.default));
+
+    const performLanguageSwitch = (targetLang) => {
+      const langFileName = toGettextLang(targetLang);
+      import(/* @vite-ignore */ '@root/../locales/' + langFileName + '.json')
+        .then((locale) => {
+          if (mounted) {
+            dispatch(changeLanguage(targetLang, locale.default));
+          }
+        })
+        .catch(() => {
+          // If locale file doesn't exist, still switch language with empty locale
+          if (mounted) {
+            dispatch(changeLanguage(targetLang, {}));
+          }
+        });
+    };
+
+    if (isMultilingual) {
+      if (pathname === '/') {
+        performLanguageSwitch(redirectToLanguage);
+      } else {
+        const lang = pathname.split('/')[1];
+        if (
+          availableLanguages?.includes(lang) &&
+          lang !== toBackendLang(currentLanguage)
+        ) {
+          performLanguageSwitch(lang);
         }
-      });
+      }
     }
     return () => {
       mounted = false;
     };
-  }, [pathname, dispatch, redirectToLanguage, isMultilingual]);
-
+  }, [
+    pathname,
+    dispatch,
+    redirectToLanguage,
+    isMultilingual,
+    availableLanguages,
+    currentLanguage,
+  ]);
   return pathname === '/' && isMultilingual ? (
-    <Redirect to={`/${redirectToLanguage}`} />
+    <Redirect to={`/${toBackendLang(redirectToLanguage)}`} />
   ) : (
     <>{children}</>
   );

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

@@ -3,6 +3,7 @@ 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 { CookiesProvider } from 'react-cookie';
 
 import MultilingualRedirector from './MultilingualRedirector';
 
@@ -21,9 +22,11 @@ describe('MultilingualRedirector', () => {
     });
     const component = renderer.create(
       <Provider store={store}>
-        <MemoryRouter>
-          <MultilingualRedirector pathname={'/'} />
-        </MemoryRouter>
+        <CookiesProvider>
+          <MemoryRouter>
+            <MultilingualRedirector pathname={'/'} />
+          </MemoryRouter>
+        </CookiesProvider>
       </Provider>,
     );
     const json = component.toJSON();