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

package/src/helpers/Html/Html.test.jsx

@@ -3,36 +3,40 @@ import renderer from 'react-test-renderer';
 import config from '@plone/volto/registry';
 import Html from './Html';
 
-jest.mock('../Helmet/Helmet', () => ({
-  rewind: () => ({
-    base: {
-      toComponent: () => '',
-    },
-    title: {
-      toComponent: () => '',
-    },
-    meta: {
-      toComponent: () => '',
-    },
-    link: {
-      toComponent: () => '',
-    },
-    script: {
-      toComponent: () => '',
-    },
-    style: {
-      toComponent: () => '',
-    },
-    htmlAttributes: {
-      toComponent: () => ({
-        lang: 'en',
-      }),
-    },
-  }),
+vi.mock('../Helmet/Helmet', () => ({
+  default: {
+    rewind: () => ({
+      base: {
+        toComponent: () => '',
+      },
+      title: {
+        toComponent: () => '',
+      },
+      meta: {
+        toComponent: () => '',
+      },
+      link: {
+        toComponent: () => '',
+      },
+      script: {
+        toComponent: () => '',
+      },
+      style: {
+        toComponent: () => '',
+      },
+      htmlAttributes: {
+        toComponent: () => ({
+          lang: 'en',
+        }),
+      },
+    }),
+  },
 }));
 
-jest.mock('../BodyClass/BodyClass', () => ({
-  rewind: () => ['class1', 'class2'],
+vi.mock('../BodyClass/BodyClass', () => ({
+  default: {
+    rewind: () => ['class1', 'class2'],
+  },
 }));
 
 config.settings = {};

package/src/helpers/Loadable/__mocks__/Loadable.jsx

@@ -1,4 +1,19 @@
-import React from 'react';
+/* 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/helpers/Loadable/Loadable', async () => {
+  return await import(
+    '@plone/volto/helpers/Loadable/__mocks__/Loadable.vitest.jsx'
+  );
+});
+
+with the following:
+
+vi.mock('@plone/volto/helpers/Loadable/Loadable');
+
+Finally, remove this comment.
+*/
+
 import config from '@plone/volto/registry';
 const loadables = config.settings.loadables;
 

package/src/helpers/Loadable/__mocks__/Loadable.vitest.jsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import config from '@plone/volto/registry';
+const loadables = config.settings.loadables;
+
+let mockAllLoadables = Object.create(null);
+
+export const __setLoadables = async () => {
+  if (Object.keys(mockAllLoadables).length > 0) return;
+  const resolved = await Promise.all(
+    Object.keys(loadables).map(async (n) => {
+      const lib = await Promise.resolve(loadables[n].load());
+      return [n, { current: lib }];
+    }),
+  );
+  resolved.forEach(([name, { current }]) => {
+    mockAllLoadables[name] = current;
+  });
+};
+
+// TODO: filter mockAllLoadables
+export const injectLazyLibs = vi.fn().mockImplementation(function ([
+  libraries,
+]) {
+  return vi.fn((WrappedComponent) =>
+    vi.fn((props) => {
+      return <WrappedComponent {...props} {...mockAllLoadables} />;
+    }),
+  );
+});
+
+export const preloadLazyLibs = vi.fn().mockImplementation(function ([
+  libraries,
+]) {
+  return vi.fn((WrappedComponent) =>
+    vi.fn((props) => {
+      return <WrappedComponent {...props} />;
+    }),
+  );
+});

package/src/middleware/Api.test.js

@@ -282,4 +282,51 @@ describe('api middleware helpers', () => {
       '/de/mypage?expand=navigation&expand.navigation.coolness=1&expand.navigation.depth=3&someotherquery=1&someotherquery=2',
     );
   });
+
+  it('addExpandersToPath - inherit expander merged using querystring as a function', () => {
+    config.settings.apiExpanders = [
+      {
+        match: '/',
+        GET_CONTENT: ['navigation'],
+        querystring: {
+          'expand.navigation.depth': 3,
+          'expand.navigation.coolness': 1,
+        },
+      },
+      {
+        match: '/',
+        GET_CONTENT: ['inherit'],
+        querystring: {
+          'expand.inherit.behaviors':
+            'voltolighttheme.header,voltolighttheme.theme,voltolighttheme.footer',
+        },
+      },
+      {
+        match: '/',
+        GET_CONTENT: ['inherit'],
+        querystring: (config, querystring) => {
+          if (querystring['expand.inherit.behaviors']) {
+            return {
+              'expand.inherit.behaviors': querystring[
+                'expand.inherit.behaviors'
+              ].concat(',', 'plonegovbr.socialmedia.settings'),
+            };
+          } else {
+            return {
+              'expand.inherit.behaviors': 'plonegovbr.socialmedia.settings',
+            };
+          }
+        },
+      },
+    ];
+
+    const result = addExpandersToPath(
+      '/de/mypage?someotherquery=1&someotherquery=2',
+      GET_CONTENT,
+    );
+
+    expect(result).toEqual(
+      '/de/mypage?expand=navigation,inherit&expand.inherit.behaviors=voltolighttheme.header,voltolighttheme.theme,voltolighttheme.footer,plonegovbr.socialmedia.settings&expand.navigation.coolness=1&expand.navigation.depth=3&someotherquery=1&someotherquery=2',
+    );
+  });
 });

package/src/middleware/api.js

@@ -75,7 +75,7 @@ export function addExpandersToPath(path, type, isAnonymous) {
       // The querystring accepts being a function to be able to take other
       // config parameters
       if (typeof querystring === 'function') {
-        querystring = querystring(config);
+        querystring = querystring(config, acc);
       }
       return { ...acc, ...querystring };
     }, {});

package/src/middleware/storeProtectLoadUtils.test.js

@@ -6,76 +6,81 @@ import {
 import * as Url from '../helpers/Url/Url';
 
 const tick = async () => new Promise((resolve) => setTimeout(resolve, 0));
+Object.defineProperty(Url, 'isCmsUi', {
+  value: vi.fn((path) => locationMap[path]),
+  writable: true,
+});
+let locationMap;
 
 describe('storeProtectLoadUtils', () => {
   describe('protectLoadStart middleware', () => {
     test('idle', () => {
-      const dispatch = jest.fn();
-      const getState = jest.fn(() => ({
+      const dispatch = vi.fn();
+      const getState = vi.fn(() => ({
         router: {
           location: {
             pathname: '/PATH',
           },
         },
       }));
-      const next = jest.fn(() => 'NEXT');
+      const next = vi.fn(() => 'NEXT');
       const action = { type: 'ANY' };
       const result = protectLoadStart({ dispatch, getState })(next)(action);
-      expect(dispatch).toBeCalledTimes(0);
-      expect(next).toBeCalledWith(action);
+      expect(dispatch).toHaveBeenCalledTimes(0);
+      expect(next).toHaveBeenCalledWith(action);
       expect(result).toBe('NEXT');
     });
 
     const testLocationChange =
       ({ locationMap, resetBeforeFetch }) =>
       () => {
-        const dispatch = jest.fn();
-        const getState = jest.fn(() => ({
+        const dispatch = vi.fn();
+        const getState = vi.fn(() => ({
           router: {
             location: {
               pathname: '/PATH',
             },
           },
         }));
-        const next = jest.fn(() => 'NEXT');
+        const next = vi.fn(() => 'NEXT');
         const action = {
           type: '@@router/LOCATION_CHANGE',
           payload: { location: { pathname: '/NEW-PATH' } },
         };
-        Url.isCmsUi = jest.fn((path) => locationMap[path]);
+        Url.isCmsUi = vi.fn((path) => locationMap[path]);
         const result = protectLoadStart({ dispatch, getState })(next)(action);
-        expect(dispatch).toBeCalledWith({
+        expect(dispatch).toHaveBeenCalledWith({
           type: '@@loadProtector/START',
           location: { pathname: '/NEW-PATH' },
           resetBeforeFetch,
         });
-        expect(next).toBeCalledWith(action);
+        expect(next).toHaveBeenCalledWith(action);
         expect(result).toBe('NEXT');
       };
 
     const testLocationSkipped =
       ({ locationMap }) =>
       () => {
-        const dispatch = jest.fn();
-        const getState = jest.fn(() => ({
+        const dispatch = vi.fn();
+        const getState = vi.fn(() => ({
           router: {
             location: {
               pathname: '/PATH',
             },
           },
         }));
-        const next = jest.fn(() => 'NEXT');
+        const next = vi.fn(() => 'NEXT');
         const action = {
           type: '@@router/LOCATION_CHANGE',
           payload: { location: { pathname: '/NEW-PATH' } },
         };
-        Url.isCmsUi = jest.fn((path) => locationMap[path]);
+        Url.isCmsUi = vi.fn((path) => locationMap[path]);
         const result = protectLoadStart({ dispatch, getState })(next)(action);
-        expect(dispatch).toBeCalledWith({
+        expect(dispatch).toHaveBeenCalledWith({
           type: '@@loadProtector/SKIPPED',
           location: { pathname: '/NEW-PATH' },
         });
-        expect(next).toBeCalledWith(action);
+        expect(next).toHaveBeenCalledWith(action);
         expect(result).toBe('NEXT');
       };
 
@@ -109,182 +114,182 @@ describe('storeProtectLoadUtils', () => {
     });
 
     test('skips functional actions', () => {
-      const dispatch = jest.fn();
-      const getState = jest.fn(() => ({
+      const dispatch = vi.fn();
+      const getState = vi.fn(() => ({
         router: {
           location: {
             pathname: '/PATH',
           },
         },
       }));
-      const next = jest.fn(() => 'NEXT');
+      const next = vi.fn(() => 'NEXT');
       const action = () => {};
       const result = protectLoadStart({ dispatch, getState })(next)(action);
-      expect(dispatch).toBeCalledTimes(0);
-      expect(next).toBeCalledWith(action);
+      expect(dispatch).toHaveBeenCalledTimes(0);
+      expect(next).toHaveBeenCalledWith(action);
       expect(result).toBe('NEXT');
     });
   });
 
   describe('protectLoadEnd middleware', () => {
     test('idle', async () => {
-      const dispatch = jest.fn();
-      const getState = jest.fn(() => ({
+      const dispatch = vi.fn();
+      const getState = vi.fn(() => ({
         loadProtector: {
           isCounting: false,
         },
       }));
-      const next = jest.fn(() => 'NEXT');
+      const next = vi.fn(() => 'NEXT');
       const action = { type: 'ANY' };
       const result = protectLoadEnd({ dispatch, getState })(next)(action);
-      expect(dispatch).toBeCalledTimes(0);
-      expect(next).toBeCalledWith(action);
+      expect(dispatch).toHaveBeenCalledTimes(0);
+      expect(next).toHaveBeenCalledWith(action);
       expect(result).toBe('NEXT');
       await tick();
-      expect(dispatch).toBeCalledTimes(0);
+      expect(dispatch).toHaveBeenCalledTimes(0);
     });
 
     test('not dispatching', async () => {
-      const dispatch = jest.fn();
-      const getState = jest.fn(() => ({
+      const dispatch = vi.fn();
+      const getState = vi.fn(() => ({
         loadProtector: {
           isCounting: true,
         },
       }));
-      const next = jest.fn(() => 'NEXT');
+      const next = vi.fn(() => 'NEXT');
       const action = { type: 'ANY' };
       const result = protectLoadEnd({ dispatch, getState })(next)(action);
-      expect(dispatch).toBeCalledTimes(0);
-      expect(next).toBeCalledWith(action);
+      expect(dispatch).toHaveBeenCalledTimes(0);
+      expect(next).toHaveBeenCalledWith(action);
       expect(result).toBe('NEXT');
       await tick();
-      expect(dispatch).toBeCalledTimes(0);
+      expect(dispatch).toHaveBeenCalledTimes(0);
     });
 
     test('skip functional actions', async () => {
-      const dispatch = jest.fn();
-      const getState = jest.fn(() => ({
+      const dispatch = vi.fn();
+      const getState = vi.fn(() => ({
         loadProtector: {
           isCounting: true,
         },
       }));
-      const next = jest.fn(() => 'NEXT');
+      const next = vi.fn(() => 'NEXT');
       const action = () => {};
       const result = protectLoadEnd({ dispatch, getState })(next)(action);
-      expect(dispatch).toBeCalledTimes(0);
-      expect(next).toBeCalledWith(action);
+      expect(dispatch).toHaveBeenCalledTimes(0);
+      expect(next).toHaveBeenCalledWith(action);
       expect(result).toBe('NEXT');
       await tick();
-      expect(dispatch).toBeCalledTimes(0);
+      expect(dispatch).toHaveBeenCalledTimes(0);
     });
 
     test('resetting', async () => {
-      const dispatch = jest.fn();
-      const getState = jest.fn(() => ({
+      const dispatch = vi.fn();
+      const getState = vi.fn(() => ({
         loadProtector: {
           resetBeforeFetch: true,
         },
       }));
-      const next = jest.fn(() => 'NEXT');
+      const next = vi.fn(() => 'NEXT');
       const action = { type: 'GET_CONTENT_PENDING' };
       const result = protectLoadEnd({ dispatch, getState })(next)(action);
-      expect(dispatch).toBeCalledWith({ type: 'RESET_CONTENT' });
-      expect(next).toBeCalledWith(action);
+      expect(dispatch).toHaveBeenCalledWith({ type: 'RESET_CONTENT' });
+      expect(next).toHaveBeenCalledWith(action);
       expect(result).toBe('NEXT');
       await tick();
-      expect(dispatch).toBeCalledTimes(1);
+      expect(dispatch).toHaveBeenCalledTimes(1);
     });
 
     test('not resetting on content-content transition ', async () => {
-      const dispatch = jest.fn();
-      const getState = jest.fn(() => ({
+      const dispatch = vi.fn();
+      const getState = vi.fn(() => ({
         loadProtector: {
           isCounting: true,
           resetBeforeFetch: false,
         },
       }));
-      const next = jest.fn(() => 'NEXT');
+      const next = vi.fn(() => 'NEXT');
       const action = { type: 'GET_CONTENT_PENDING' };
       const result = protectLoadEnd({ dispatch, getState })(next)(action);
-      expect(dispatch).toBeCalledTimes(0);
-      expect(next).toBeCalledWith(action);
+      expect(dispatch).toHaveBeenCalledTimes(0);
+      expect(next).toHaveBeenCalledWith(action);
       expect(result).toBe('NEXT');
       await tick();
-      expect(dispatch).toBeCalledTimes(0);
+      expect(dispatch).toHaveBeenCalledTimes(0);
     });
 
     test('counting down when success', async () => {
-      const dispatch = jest.fn();
-      const getState = jest.fn(() => ({
+      const dispatch = vi.fn();
+      const getState = vi.fn(() => ({
         loadProtector: {
           isCounting: true,
           requestCount: 2,
         },
       }));
-      const next = jest.fn(() => 'NEXT');
+      const next = vi.fn(() => 'NEXT');
       const action = { type: 'ANY_SUCCESS' };
       const result = protectLoadEnd({ dispatch, getState })(next)(action);
-      expect(dispatch).toBeCalledTimes(0);
-      expect(next).toBeCalledWith(action);
+      expect(dispatch).toHaveBeenCalledTimes(0);
+      expect(next).toHaveBeenCalledWith(action);
       expect(result).toBe('NEXT');
       await tick();
-      expect(dispatch).toBeCalledTimes(0);
+      expect(dispatch).toHaveBeenCalledTimes(0);
     });
 
     test('counting down when failure', async () => {
-      const dispatch = jest.fn();
-      const getState = jest.fn(() => ({
+      const dispatch = vi.fn();
+      const getState = vi.fn(() => ({
         loadProtector: {
           isCounting: true,
           requestCount: 2,
         },
       }));
-      const next = jest.fn(() => 'NEXT');
+      const next = vi.fn(() => 'NEXT');
       const action = { type: 'ANY_FAIL' };
       const result = protectLoadEnd({ dispatch, getState })(next)(action);
-      expect(dispatch).toBeCalledTimes(0);
-      expect(next).toBeCalledWith(action);
+      expect(dispatch).toHaveBeenCalledTimes(0);
+      expect(next).toHaveBeenCalledWith(action);
       expect(result).toBe('NEXT');
       await tick();
-      expect(dispatch).toBeCalledTimes(0);
+      expect(dispatch).toHaveBeenCalledTimes(0);
     });
 
     test('ending protect when success', async () => {
-      const dispatch = jest.fn();
-      const getState = jest.fn(() => ({
+      const dispatch = vi.fn();
+      const getState = vi.fn(() => ({
         loadProtector: {
           isCounting: true,
           requestCount: 1,
         },
       }));
-      const next = jest.fn(() => 'NEXT');
+      const next = vi.fn(() => 'NEXT');
       const action = { type: 'ANY_SUCCESS' };
       const result = protectLoadEnd({ dispatch, getState })(next)(action);
-      expect(dispatch).toBeCalledTimes(0);
-      expect(next).toBeCalledWith(action);
+      expect(dispatch).toHaveBeenCalledTimes(0);
+      expect(next).toHaveBeenCalledWith(action);
       expect(result).toBe('NEXT');
       await tick();
-      expect(dispatch).toBeCalledTimes(1);
-      expect(dispatch).toBeCalledWith({ type: '@@loadProtector/END' });
+      expect(dispatch).toHaveBeenCalledTimes(1);
+      expect(dispatch).toHaveBeenCalledWith({ type: '@@loadProtector/END' });
     });
 
     test('ending protect when failure', async () => {
-      const dispatch = jest.fn();
-      const getState = jest.fn(() => ({
+      const dispatch = vi.fn();
+      const getState = vi.fn(() => ({
         loadProtector: {
           isCounting: true,
           requestCount: 1,
         },
       }));
-      const next = jest.fn(() => 'NEXT');
+      const next = vi.fn(() => 'NEXT');
       const action = { type: 'ANY_FAIL' };
       const result = protectLoadEnd({ dispatch, getState })(next)(action);
-      expect(dispatch).toBeCalledTimes(0);
-      expect(next).toBeCalledWith(action);
+      expect(dispatch).toHaveBeenCalledTimes(0);
+      expect(next).toHaveBeenCalledWith(action);
       expect(result).toBe('NEXT');
       await tick();
-      expect(dispatch).toBeCalledTimes(1);
-      expect(dispatch).toBeCalledWith({ type: '@@loadProtector/END' });
+      expect(dispatch).toHaveBeenCalledTimes(1);
+      expect(dispatch).toHaveBeenCalledWith({ type: '@@loadProtector/END' });
     });
   });
 
@@ -302,6 +307,7 @@ describe('storeProtectLoadUtils', () => {
         isCounting: true,
       });
     });
+
     test('PROTECT_END', () => {
       const state = {
         foo: 'BAR',
@@ -318,6 +324,7 @@ describe('storeProtectLoadUtils', () => {
         resetBeforeFetch: false,
       });
     });
+
     test('PROTECT_SKIPPED', () => {
       const state = {
         foo: 'BAR',
@@ -339,6 +346,7 @@ describe('storeProtectLoadUtils', () => {
         location: { pathname: '/NEW-PATH' },
       });
     });
+
     test('GET_CONTENT_SUCCESS pass when not counting', () => {
       const state = {
         foo: 'BAR',
@@ -353,6 +361,7 @@ describe('storeProtectLoadUtils', () => {
         isCounting: false,
       });
     });
+
     test('GET_CONTENT_FAIL pass when not counting', () => {
       const state = {
         foo: 'BAR',
@@ -367,6 +376,7 @@ describe('storeProtectLoadUtils', () => {
         isCounting: false,
       });
     });
+
     test('GET_CONTENT_SUCCESS when counting', () => {
       const state = {
         foo: 'BAR',
@@ -386,6 +396,7 @@ describe('storeProtectLoadUtils', () => {
         location: { pathname: '/NEW-PATH' },
       });
     });
+
     test('GET_CONTENT_FAIL when counting', () => {
       const state = {
         foo: 'BAR',
@@ -405,6 +416,7 @@ describe('storeProtectLoadUtils', () => {
         location: { pathname: '/NEW-PATH' },
       });
     });
+
     test('RESET_CONTENT will remove the reset condition', () => {
       const state = {
         foo: 'BAR',

package/test-setup-globals-vitest.js

@@ -0,0 +1,46 @@
+import '@testing-library/jest-dom';
+import { expect, describe, it, vi } from 'vitest';
+
+global.describe = describe;
+global.it = it;
+global.expect = expect;
+global.vi = vi;
+
+global.__CLIENT__ = true;
+global.__DEVELOPMENT__ = false;
+global.__SERVER__ = false;
+global.__TEST__ = true;
+
+window.matchMedia =
+  window.matchMedia ||
+  function (query) {
+    return {
+      matches: query === '(min-width: 1024px)',
+      addListener: function () {},
+      removeListener: function () {},
+    };
+  };
+
+vi.stubGlobal(
+  'fetch',
+  vi.fn(() =>
+    Promise.resolve({
+      json: () => Promise.resolve({}),
+      text: () => Promise.resolve(''),
+    }),
+  ),
+);
+
+vi.stubGlobal('localStorage', {
+  getItem: vi.fn(),
+  setItem: vi.fn(),
+  removeItem: vi.fn(),
+  clear: vi.fn(),
+});
+
+vi.stubGlobal('sessionStorage', {
+  getItem: vi.fn(),
+  setItem: vi.fn(),
+  removeItem: vi.fn(),
+  clear: vi.fn(),
+});

package/tsconfig.declarations.json

@@ -10,11 +10,22 @@
     "jsx": "react-jsx",
     "preserveSymlinks": true,
     "downlevelIteration": true,
+    "types": ["vitest/globals", "jest"],
     "paths": {
       "@plone/volto/*": ["./src/*"],
       "react": ["./node_modules/@types/react"],
       "react-dom": ["./node_modules/@types/react-dom"]
     }
   },
-  "include": ["src/**/*.js", "src/**/*.jsx", "src/**/*.tsx"]
+  "include": ["src/**/*.js", "src/**/*.jsx", "src/**/*.tsx"],
+  "exclude": [
+    "node_modules",
+    "build",
+    "coverage",
+    "dist",
+    "types",
+    "**/*.test.js",
+    "**/*.test.tsx",
+    "**/*.test.ts"
+  ]
 }

package/tsconfig.json

@@ -2,6 +2,7 @@
   "compilerOptions": {
     "target": "ESNext",
     "lib": ["DOM", "DOM.Iterable", "ESNext"],
+    "types": ["vitest/globals", "jest"],
     "module": "commonjs",
     "allowJs": true,
     "skipLibCheck": true,
@@ -21,7 +22,7 @@
       "@root/*": ["./src/*"]
     }
   },
-  "include": ["src", "packages"],
+  "include": ["src", "packages", "types", "vitest.config.ts"],
   "exclude": [
     "node_modules",
     "build",