@plone/volto 16.8.0 → 16.9.0

package/src/reducers/types/types.test.js

@@ -1,5 +1,6 @@
 import types from './types';
-import { GET_TYPES } from '@plone/volto/constants/ActionTypes';
+import { GET_CONTENT, GET_TYPES } from '@plone/volto/constants/ActionTypes';
+import config from '@plone/volto/registry';
 
 describe('Types reducer', () => {
   it('should return the initial state', () => {
@@ -52,3 +53,32 @@ describe('Types reducer', () => {
     });
   });
 });
+
+describe('Types reducer - (TYPES)GET_CONTENT_SUCCESS', () => {
+  beforeEach(() => {
+    config.settings.apiExpanders = [
+      {
+        match: '',
+        GET_CONTENT: ['types'],
+      },
+    ];
+  });
+
+  it('should handle (TYPES)GET_CONTENT_SUCCESS', () => {
+    expect(
+      types(undefined, {
+        type: `${GET_CONTENT}_SUCCESS`,
+        result: {
+          '@components': {
+            types: 'My types',
+          },
+        },
+      }),
+    ).toEqual({
+      error: null,
+      loaded: true,
+      loading: false,
+      types: 'My types',
+    });
+  });
+});

package/src/registry.js

@@ -120,6 +120,24 @@ class Config {
       const componentName = `${name}${depsString ? `|${depsString}` : ''}`;
 
       this._data.components[componentName] = { component };
+      // Try to set a displayName (useful for React dev tools) for the registered component
+      // Only if it's a function and it's not set previously
+      try {
+        const displayName = this._data.components[componentName].component
+          .displayName;
+
+        if (
+          !displayName &&
+          typeof this._data.components[componentName].component === 'function'
+        ) {
+          this._data.components[componentName].component.displayName = name;
+        }
+      } catch (error) {
+        // eslint-disable-next-line no-console
+        console.warning(
+          `Not setting the component displayName because ${error}`,
+        );
+      }
     }
   }
 }

package/src/registry.test.js

@@ -50,6 +50,40 @@ describe('registry', () => {
       'this is a Bar component',
     );
   });
+  it('registers and gets a component by name (as an object) - check displayName', () => {
+    config.registerComponent({
+      name: 'Toolbar.Bar',
+      component: (props) => <div>Hello</div>,
+    });
+    expect(config.getComponent('Toolbar.Bar').component.displayName).toEqual(
+      'Toolbar.Bar',
+    );
+  });
+  it('registers and gets a component by name (as an object) - check displayName if it has already one, it does not overwrite it', () => {
+    const TestComponent = (props) => <div>Hello</div>;
+    TestComponent.displayName = 'DisplayNameAlreadySet';
+    config.registerComponent({
+      name: 'Toolbar.Bar',
+      component: TestComponent,
+    });
+
+    expect(config.getComponent('Toolbar.Bar').component.displayName).toEqual(
+      'DisplayNameAlreadySet',
+    );
+  });
+  it('registers and gets a component by name (as an object) - check displayName - do not break if it is a normal function', () => {
+    function myFunction() {
+      return 'true';
+    }
+
+    config.registerComponent({
+      name: 'Toolbar.Bar',
+      component: myFunction,
+    });
+    expect(config.getComponent('Toolbar.Bar').component.displayName).toEqual(
+      'Toolbar.Bar',
+    );
+  });
   it('registers a component by name with dependencies', () => {
     config.registerComponent({
       name: 'Toolbar.Bar',

package/test-setup-config.js

@@ -31,6 +31,8 @@ import {
   filterControlPanelsSchema,
 } from '@plone/volto/config/ControlPanels';
 
+import ListingBlockSchema from '@plone/volto/components/manage/Blocks/Listing/schema';
+
 // we need to do a redefinition here because of circular import issues
 // because draftjs-based components are not really tested, this is basically
 // dummy code.
@@ -84,6 +86,7 @@ config.set('settings', {
 config.set('blocks', {
   blocksConfig: {
     listing: {
+      blockSchema: ListingBlockSchema,
       variations: [
         {
           id: 'default',