chore: test design components render [SPA-1583] (#158)

* chore: add test for composition block * chore: add visual editor block test * chore: add test for design component utils * chore: test deserialize function * chore: add component registry test --------- Co-authored-by: Chidinma orajiaku <corajiaku96@gmail.com>
contentful · Nov 9, 2023 · 34da8ee · 34da8ee
1 parent 4153a19
commit 34da8ee
Show file tree

Hide file tree

Showing 13 changed files with 638 additions and 47 deletions.
diff --git a/packages/experience-builder-sdk/src/blocks/CompositionBlock.spec.tsx b/packages/experience-builder-sdk/src/blocks/CompositionBlock.spec.tsx
@@ -4,8 +4,12 @@ import { render } from '@testing-library/react';
 
 import { CONTENTFUL_CONTAINER_ID, CONTENTFUL_SECTION_ID } from '../constants';
 import { defineComponents, resetComponentRegistry } from '../core/componentRegistry';
-import { CompositionNode } from '../types';
+import { CompositionNode, ExperienceEntry } from '../types';
 import { CompositionBlock } from './CompositionBlock';
+import type { Entry } from 'contentful';
+import { compositionEntry, createDesignComponentEntry } from '../../test/__fixtures__/composition';
+import { EntityStore } from '../core/EntityStore';
+import { assets, entries } from '../../test/__fixtures__/entities';
 
 const TestComponent = (props: any) => {
   return <div {...props}>{props.text}</div>;
@@ -73,7 +77,7 @@ describe('CompositionBlock', () => {
       children: [],
     };
 
-    render(
+    const { getByTestId } = render(
       <CompositionBlock
         node={sectionNode}
         dataSource={{}}
@@ -86,7 +90,7 @@ describe('CompositionBlock', () => {
       />
     );
 
-    expect(document.getElementById('ContentfulContainer')).toBeDefined();
+    expect(getByTestId('contentful-container')).toBeInTheDocument();
   });
 
   it('renders container node', () => {
@@ -96,7 +100,7 @@ describe('CompositionBlock', () => {
       children: [],
     };
 
-    render(
+    const { getByTestId } = render(
       <CompositionBlock
         node={containerNode}
         dataSource={{}}
@@ -109,6 +113,48 @@ describe('CompositionBlock', () => {
       />
     );
 
-    expect(document.getElementById('ContentfulContainer')).toBeDefined();
+    expect(getByTestId('contentful-container')).toBeInTheDocument();
+  });
+
+  it('renders design component node', () => {
+    const designComponentEntry = createDesignComponentEntry({
+      id: 'design-component-id',
+      schemaVersion: '2023-09-28',
+    });
+
+    const entityStore = new EntityStore({
+      experienceEntry: {
+        ...compositionEntry,
+        fields: {
+          ...compositionEntry.fields,
+          usedComponents: [designComponentEntry],
+        },
+      } as unknown as Entry,
+      entities: [...entries, ...assets],
+      locale: 'en-US',
+    });
+
+    const designComponentNode: CompositionNode = {
+      definitionId: 'design-component-id',
+      variables: {},
+      children: [],
+    };
+
+    const { getByTestId, getByText } = render(
+      <CompositionBlock
+        node={designComponentNode}
+        dataSource={{}}
+        locale="en-US"
+        breakpoints={[]}
+        entityStore={entityStore}
+        usedComponents={[designComponentEntry] as ExperienceEntry[]}
+        unboundValues={{}}
+        resolveDesignValue={jest.fn()}
+      />
+    );
+
+    expect(getByTestId('design-component')).toBeInTheDocument();
+    expect(getByTestId('contentful-container')).toBeInTheDocument();
+    expect(getByText('custom component title')).toBeInTheDocument();
   });
 });
diff --git a/packages/experience-builder-sdk/src/blocks/ContentfulContainer.tsx b/packages/experience-builder-sdk/src/blocks/ContentfulContainer.tsx
@@ -27,7 +27,10 @@ export const ContentfulContainer = (sectionProps: ContentfulContainerProps) => {
 
   if (editorMode === false) {
     return (
-      <Flex id="ContentfulContainer" className={classNames(className, 'defaultStyles')}>
+      <Flex
+        id="ContentfulContainer"
+        data-test-id="contentful-container"
+        className={classNames(className, 'defaultStyles')}>
         {children}
       </Flex>
     );
@@ -39,6 +42,7 @@ export const ContentfulContainer = (sectionProps: ContentfulContainerProps) => {
   return (
     <Flex
       id="ContentfulContainer"
+      data-test-id="contentful-container"
       data-cf-node-id={node.data.id}
       data-cf-node-block-id={node.data.blockId}
       data-cf-node-block-type={node.type}

diff --git a/packages/experience-builder-sdk/src/blocks/DesignComponent.tsx b/packages/experience-builder-sdk/src/blocks/DesignComponent.tsx
@@ -7,5 +7,5 @@ const designComponentStyle = { display: 'contents' };
 export const DesignComponent = ({ ...props }) => {
   // Using a display contents so design component content/children
   // can appear as if they are direct children of the div wrapper's parent
-  return <div {...props} style={designComponentStyle} />;
+  return <div data-test-id="design-component" {...props} style={designComponentStyle} />;
 };
diff --git a/packages/experience-builder-sdk/src/blocks/VisualEditorBlock.test.tsx b/packages/experience-builder-sdk/src/blocks/VisualEditorBlock.test.tsx
@@ -1,18 +1,32 @@
 import React from 'react';
 
 import type { EntityStore } from '../core/EntityStore';
-import { render } from '@testing-library/react';
+import { fireEvent, render } from '@testing-library/react';
 
 import { sendMessage } from '../communication/sendMessage';
-import { CONTENTFUL_CONTAINER_ID, CONTENTFUL_SECTION_ID } from '../constants';
+import {
+  CONTENTFUL_CONTAINER_ID,
+  CONTENTFUL_SECTION_ID,
+  DESIGN_COMPONENT_NODE_TYPE,
+} from '../constants';
 import { defineComponents, resetComponentRegistry } from '../core/componentRegistry';
 import { CompositionComponentNode } from '../types';
 import { VisualEditorBlock } from './VisualEditorBlock';
+import { createDesignComponentEntry } from '../../test/__fixtures__/composition';
+import { EditorModeEntityStore } from '../core/EditorModeEntityStore';
+import { assets } from '../../test/__fixtures__/entities';
+import { Asset, Entry } from 'contentful';
+import { designComponentsRegistry } from './VisualEditorContext';
 
 const TestComponent = (props: any) => {
   return <div {...props}>{props.text}</div>;
 };
 
+const designComponentEntry = createDesignComponentEntry({
+  id: 'design-component-id',
+  schemaVersion: '2023-09-28',
+});
+
 jest.mock('../communication/sendMessage', () => ({
   sendMessage: jest.fn(),
 }));
@@ -45,10 +59,15 @@ describe('VisualEditorBlock', () => {
         },
       },
     ]);
+
+    designComponentsRegistry.set(designComponentEntry.sys.id, {
+      sys: { id: designComponentEntry.sys.id, type: 'Link', linkType: 'Entry' },
+    });
   });
 
   afterEach(() => {
     resetComponentRegistry();
+    designComponentsRegistry.clear();
   });
 
   it('renders with initial text and updates when prop changes', () => {
@@ -114,7 +133,7 @@ describe('VisualEditorBlock', () => {
       children: [],
     };
 
-    render(
+    const { getByTestId } = render(
       <VisualEditorBlock
         node={sectionNode}
         dataSource={{}}
@@ -125,7 +144,7 @@ describe('VisualEditorBlock', () => {
       />
     );
 
-    expect(document.getElementById('ContentfulContainer')).toBeDefined();
+    expect(getByTestId('contentful-container')).toBeDefined();
   });
 
   it('renders container node', () => {
@@ -142,7 +161,7 @@ describe('VisualEditorBlock', () => {
       children: [],
     };
 
-    render(
+    const { getByTestId } = render(
       <VisualEditorBlock
         node={containerNode}
         dataSource={{}}
@@ -153,6 +172,51 @@ describe('VisualEditorBlock', () => {
       />
     );
 
-    expect(document.getElementById('ContentfulContainer')).toBeDefined();
+    expect(getByTestId('contentful-container')).toBeDefined();
+  });
+
+  it('renders design component node', () => {
+    const designComponentEntry = createDesignComponentEntry({
+      id: 'design-component-id',
+      schemaVersion: '2023-09-28',
+    });
+
+    const entityStore = new EditorModeEntityStore({
+      entities: [designComponentEntry, ...assets] as Array<Entry | Asset>,
+      locale: 'en-US',
+    });
+
+    const designComponentNode: CompositionComponentNode = {
+      type: DESIGN_COMPONENT_NODE_TYPE,
+      data: {
+        id: 'random-design-component-id',
+        blockId: designComponentEntry.sys.id,
+        props: {},
+        dataSource: {},
+        unboundValues: designComponentEntry.fields.unboundValues,
+        breakpoints: [],
+      },
+      children: [],
+    };
+
+    const { getByTestId, getByText } = render(
+      <VisualEditorBlock
+        node={designComponentNode}
+        dataSource={{}}
+        areEntitiesFetched={true}
+        entityStore={{ current: entityStore }}
+        unboundValues={designComponentNode.data.unboundValues}
+        resolveDesignValue={jest.fn()}
+      />
+    );
+
+    expect(getByTestId('design-component')).toBeInTheDocument();
+    expect(getByTestId('contentful-container')).toBeInTheDocument();
+    expect(getByText('custom component title')).toBeInTheDocument();
+
+    fireEvent.mouseDown(getByText('custom component title'));
+    expect(sendMessage).toHaveBeenCalledWith('componentSelected', {
+      nodeId: designComponentNode.data.id,
+    });
   });
 });