fix: use default values for componentValue properties

contentful · Apr 24, 2024 · 53d9f79 · 53d9f79
1 parent c1e88fc
commit 53d9f79
Show file tree

Hide file tree

Showing 5 changed files with 160 additions and 1 deletion.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/visual-editor/package.json b/packages/visual-editor/package.json
@@ -45,6 +45,7 @@
     "@rollup/plugin-node-resolve": "^15.2.1",
     "@rollup/plugin-terser": "^0.4.3",
     "@rollup/plugin-typescript": "^11.1.3",
+    "@testing-library/react": "^15.0.4",
     "@types/lodash-es": "^4.17.12",
     "@types/react": "^18.2.15",
     "@types/react-dom": "^18.2.7",

diff --git a/packages/visual-editor/src/components/Dropzone/useComponentProps.spec.ts b/packages/visual-editor/src/components/Dropzone/useComponentProps.spec.ts
@@ -0,0 +1,95 @@
+import { ASSEMBLY_NODE_TYPE } from '@contentful/experiences-core/constants';
+import { useComponentProps } from './useComponentProps';
+import { ComponentDefinition, ExperienceTreeNode } from '@contentful/experiences-core/types';
+import { vi } from 'vitest';
+import { renderHook } from '@testing-library/react';
+
+const definition: ComponentDefinition = {
+  id: 'button',
+  name: 'Button',
+  variables: {
+    label: {
+      type: 'Text',
+      defaultValue: 'Click here',
+    },
+  },
+};
+const node: ExperienceTreeNode = {
+  data: {
+    id: 'id',
+    props: {},
+    unboundValues: {},
+    dataSource: {},
+    breakpoints: [],
+  },
+  children: [],
+  type: 'block',
+};
+const resolveDesignValue = vi.fn();
+const renderDropzone = vi.fn();
+const areEntitiesFetched = true;
+const userIsDragging = false;
+
+describe('useComponentProps', () => {
+  it('should return empty object when node type is ASSEMBLY_NODE_TYPE', () => {
+    const areEntitiesFetched = true;
+    const userIsDragging = false;
+
+    const { result } = renderHook(() =>
+      useComponentProps({
+        node: { ...node, type: ASSEMBLY_NODE_TYPE },
+        areEntitiesFetched,
+        resolveDesignValue,
+        renderDropzone,
+        definition,
+        userIsDragging,
+      }),
+    );
+
+    expect(Object.keys(result.current.componentProps)).not.toContain('label');
+  });
+
+  it('should return props with default values when variableMapping is falsy', () => {
+    const { result } = renderHook(() =>
+      useComponentProps({
+        node,
+        areEntitiesFetched,
+        resolveDesignValue,
+        renderDropzone,
+        definition,
+        userIsDragging,
+      }),
+    );
+
+    expect(result.current.componentProps.label).toEqual('Click here');
+  });
+
+  it('should return definition default value when type is ComponentValue', () => {
+    const areEntitiesFetched = true;
+    const userIsDragging = false;
+
+    const { result } = renderHook(() =>
+      useComponentProps({
+        node: {
+          ...node,
+          data: {
+            ...node.data,
+            props: {
+              label: {
+                key: 'random-uuid',
+                type: 'ComponentValue',
+              },
+            },
+          },
+        },
+        areEntitiesFetched,
+        resolveDesignValue,
+        renderDropzone,
+        definition,
+        userIsDragging,
+      }),
+    );
+
+    expect(result.current.componentProps.label).toEqual('Click here');
+  });
+});
diff --git a/packages/visual-editor/src/components/Dropzone/useComponentProps.ts b/packages/visual-editor/src/components/Dropzone/useComponentProps.ts
@@ -34,6 +34,14 @@ import { HYPERLINK_DEFAULT_PATTERN } from '@contentful/experiences-core/constant
 
 type ComponentProps = StyleProps | Record<string, PrimitiveValue | Link<'Entry'> | Link<'Asset'>>;
 
+type ResolvedComponentProps = ComponentProps & {
+  children?: React.JSX.Element | undefined;
+  className: string;
+  editorMode: boolean;
+  node: ExperienceTreeNode;
+  renderDropzone: RenderDropzoneFunction;
+};
+
 type UseComponentProps = {
   node: ExperienceTreeNode;
   resolveDesignValue: ResolveDesignValueType;
@@ -151,6 +159,13 @@ export const useComponentProps = ({
             ...acc,
             [variableName]: value,
           };
+        } else if (variableMapping.type === 'ComponentValue') {
+          // We are rendering a pattern (assembly) entry. Content properties cannot be edited in this,
+          // so we always render the default value
+          return {
+            ...acc,
+            [variableName]: variableDefinition.defaultValue,
+          };
         } else {
           return { ...acc };
         }
@@ -225,7 +240,7 @@ export const useComponentProps = ({
   const stylesToKeep = ['cfImageAsset'];
   const stylesToRemove = CF_STYLE_ATTRIBUTES.filter((style) => !stylesToKeep.includes(style));
 
-  const componentProps = {
+  const componentProps: ResolvedComponentProps = {
     className: componentClass,
     editorMode: true,
     node,

diff --git a/packages/visual-editor/vitest.config.ts b/packages/visual-editor/vitest.config.ts
@@ -6,6 +6,7 @@ export default defineConfig({
   //@ts-expect-error ignore
   plugins: [tsconfigPaths()],
   test: {
+    globals: true,
     coverage: {
       reporter: ['text', 'json', 'html'],
       reportsDirectory: 'reports',