add unit test for placeholder to cover error boundary component wrapp…

…ing; add 'type' prop in ErrorBoundary to cover case when renderEach function is being used
Sitecore · Apr 26, 2024 · 855df13 · 855df13
1 parent 45b2bbb
commit 855df13
Show file tree

Hide file tree

Showing 3 changed files with 55 additions and 9 deletions.
diff --git a/packages/sitecore-jss-react/src/components/ErrorBoundary.tsx b/packages/sitecore-jss-react/src/components/ErrorBoundary.tsx
@@ -14,6 +14,7 @@ export type ErrorBoundaryProps = {
     | React.FC<CustomErrorComponentProps>;
   rendering?: ComponentRendering;
   sitecoreContext: SitecoreContextValue;
+  type: string;
 };
 
 class ErrorBoundary extends React.Component<ErrorBoundaryProps> {

diff --git a/packages/sitecore-jss-react/src/components/Placeholder.test.tsx b/packages/sitecore-jss-react/src/components/Placeholder.test.tsx
@@ -534,6 +534,46 @@ describe('<Placeholder />', () => {
     expect(renderedComponent.find('.sc-jss-placeholder-error').length).to.equal(1);
   });
 
+  it('should render error message on error, only for the errored component', () => {
+    const componentFactory: ComponentFactory = (componentName: string) => {
+      const components = new Map<string, React.FC>();
+
+      const Home: React.FC<{ rendering?: RouteData }> = ({ rendering }) => (
+        <div className="home-mock">
+          <Placeholder name="main" rendering={rendering} />
+        </div>
+      );
+
+      components.set('Home', Home);
+      components.set('ThrowError', () => {
+        throw Error('an error occured');
+      });
+      components.set('Foo', () => <div className="foo-class">foo</div>);
+
+      return components.get(componentName) || null;
+    };
+
+    const route = ({
+      placeholders: {
+        main: [
+          {
+            componentName: 'ThrowError',
+          },
+          {
+            componentName: 'Foo',
+          },
+        ],
+      },
+    } as unknown) as RouteData;
+    const phKey = 'main';
+
+    const renderedComponent = mount(
+      <Placeholder name={phKey} rendering={route} componentFactory={componentFactory} />
+    );
+    expect(renderedComponent.find('.sc-jss-placeholder-error').length).to.equal(1);
+    expect(renderedComponent.find('div.foo-class').length).to.equal(1);
+  });
+
   it('should render custom errorComponent on error, if provided', () => {
     const componentFactory: ComponentFactory = (componentName: string) => {
       const components = new Map<string, React.FC<{ [key: string]: unknown }>>();

diff --git a/packages/sitecore-jss-react/src/components/PlaceholderCommon.tsx b/packages/sitecore-jss-react/src/components/PlaceholderCommon.tsx
@@ -258,15 +258,20 @@ export class PlaceholderCommon<T extends PlaceholderProps> extends React.Compone
         );
       })
       .filter((element) => element)
-      .map((element, id) => (
-        <ErrorBoundary
-          key={element.type + '-' + id}
-          customErrorComponent={this.props.errorComponent}
-          rendering={element.props.rendering as ComponentRendering}
-        >
-          {element}
-        </ErrorBoundary>
-      ));
+      .map((element, id) => {
+        // assign type based on passed element - type='text/sitecore' should be ignored when renderEach Placeholder prop function is being used
+        const type = element.props.type === 'text/sitecore' ? element.props.type : '';
+        return (
+          <ErrorBoundary
+            key={element.type + '-' + id}
+            customErrorComponent={this.props.errorComponent}
+            rendering={element.props.rendering as ComponentRendering}
+            type={type}
+          >
+            {element}
+          </ErrorBoundary>
+        );
+      });
   }
 
   getComponentForRendering(renderingDefinition: ComponentRendering): ComponentType | null {