From 0df68678f742fe7f79c71bfd3499d56465ecd092 Mon Sep 17 00:00:00 2001
From: Illia Kovalenko <23364749+illiakovalenko@users.noreply.github.com>
Date: Mon, 1 Jul 2024 10:12:05 +0300
Subject: [PATCH] [sitecore-jss-react] [ErrorBoundaries] Added unit tests to
 cover withPlaceholder HOC (#1829)

* [sitecore-jss-react] [ErrorBoundaries] Added unit tests to cover withPlaceholder HOC

* Updated CHANGELOG

* Removed unused import
---
 CHANGELOG.md                                  |   2 +-
 .../src/enhancers/withPlaceholder.test.tsx    | 141 ++++++++---
 .../src/test-data/ee-data.ts                  | 220 ++----------------
 .../src/test-data/non-ee-data.ts              |  72 ++----
 4 files changed, 139 insertions(+), 296 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 8f8bbdfbfc..18072712d0 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -18,7 +18,7 @@ Our versioning strategy is as follows:
 
 ### 🎉 New Features & Improvements
 
-* `[sitecore-jss-react]` Introduce ErrorBoundary component. All rendered components are wrapped with it and it will catch client or server side errors from any of its children, display appropriate message and prevent the rest of the application from failing. It accepts and can display custom error component and loading message if it is passed as a prop to parent Placeholder. ([#1786](https://github.com/Sitecore/jss/pull/1786))([#1790](https://github.com/Sitecore/jss/pull/1790))([#1793](https://github.com/Sitecore/jss/pull/1793))([#1794](https://github.com/Sitecore/jss/pull/1794))([#1799](https://github.com/Sitecore/jss/pull/1799))([#1807](https://github.com/Sitecore/jss/pull/1807))
+* `[sitecore-jss-react]` Introduce ErrorBoundary component. All rendered components are wrapped with it and it will catch client or server side errors from any of its children, display appropriate message and prevent the rest of the application from failing. It accepts and can display custom error component and loading message if it is passed as a prop to parent Placeholder. ([#1786](https://github.com/Sitecore/jss/pull/1786))([#1790](https://github.com/Sitecore/jss/pull/1790))([#1793](https://github.com/Sitecore/jss/pull/1793))([#1794](https://github.com/Sitecore/jss/pull/1794))([#1799](https://github.com/Sitecore/jss/pull/1799))([#1807](https://github.com/Sitecore/jss/pull/1807))([#1829](https://github.com/Sitecore/jss/pull/1829))
 * `[sitecore-jss-nextjs]` Enforce CORS policy that matches Sitecore Pages domains for editing middleware API endpoints ([#1798](https://github.com/Sitecore/jss/pull/1798)[#1801](https://github.com/Sitecore/jss/pull/1801))
 * `[sitecore-jss]` _GraphQLRequestClient_ now can accept custom 'headers' in the constructor or via _createClientFactory_ ([#1806](https://github.com/Sitecore/jss/pull/1806))
 * `[templates/nextjs]` Removed cors header for API endpoints from _lib/next-config/plugins/cors-header_ plugin since cors is handled by API handlers / middlewares ([#1806](https://github.com/Sitecore/jss/pull/1806))
diff --git a/packages/sitecore-jss-react/src/enhancers/withPlaceholder.test.tsx b/packages/sitecore-jss-react/src/enhancers/withPlaceholder.test.tsx
index 8b9c5695cb..425afe397c 100644
--- a/packages/sitecore-jss-react/src/enhancers/withPlaceholder.test.tsx
+++ b/packages/sitecore-jss-react/src/enhancers/withPlaceholder.test.tsx
@@ -6,8 +6,6 @@ import React, { ReactElement, ReactNode } from 'react';
 import { expect } from 'chai';
 import { mount } from 'enzyme';
 import { convertedDevData as nonEeDevData } from '../test-data/non-ee-data';
-import { convertedDevDataWithoutParams as nonEeDevDataWithoutParams } from '../test-data/non-ee-data';
-import { convertedDataWithoutParams as eeDataWithoutParams } from '../test-data/ee-data';
 import { convertedData as eeData } from '../test-data/ee-data';
 import * as metadataData from '../test-data/metadata-data';
 import { withPlaceholder } from '../enhancers/withPlaceholder';
@@ -17,7 +15,6 @@ import PropTypes from 'prop-types';
 import { ComponentFactory } from '../components/sharedTypes';
 import {
   ComponentRendering,
-  EditMode,
   LayoutServiceData,
   RouteData,
 } from '@sitecore-jss/sitecore-jss/layout';
@@ -66,11 +63,28 @@ const ErrorMessageComponent: React.FC = () => (
   <div className="error-handled">Your error has been... dealt with.</div>
 );
 
+const delay = (timeout, promise?) => {
+  return new Promise((resolve) => {
+    setTimeout(resolve, timeout);
+  }).then(() => promise);
+};
+
 const componentFactory: ComponentFactory = (componentName: string) => {
   const components = new Map<string, React.FC<any>>();
 
   components.set('DownloadCallout', DownloadCallout);
   components.set('Jumbotron', () => <div className="jumbotron-mock"></div>);
+  components.set('BrokenComponent', () => {
+    throw new Error('BrokenComponent error');
+  });
+  components.set(
+    'DynamicComponent',
+    React.lazy(() =>
+      delay(500, () => {
+        throw new Error('DynamicComponent error');
+      })
+    )
+  );
 
   return components.get(componentName) || null;
 };
@@ -80,13 +94,13 @@ const testData = [
   { label: 'LayoutService data - EE on', data: eeData },
 ];
 
-const testDataWithoutParams = [
-  { label: 'Dev data without params', data: nonEeDevDataWithoutParams },
-  { label: 'LayoutService data - EE on without params', data: eeDataWithoutParams },
-];
-
 describe('withPlaceholder HOC', () => {
   describe('Error handling', () => {
+    before(() => {
+      // Set to development mode to show error details
+      process.env.NODE_ENV = 'development';
+    });
+
     it('should render default error component on wrapped component error', () => {
       const phKey = 'page-content';
       const props: EnhancedOmit<PlaceholderProps, 'sitecoreContext'> = {
@@ -123,12 +137,94 @@ describe('withPlaceholder HOC', () => {
       );
       expect(renderedComponent.find('.error-handled').length).to.equal(1);
     });
+
+    it('should render nested broken component', () => {
+      const component = (nonEeDevData.sitecore.route?.placeholders.main as (
+        | ComponentRendering
+        | RouteData
+      )[]).find((c) => (c as ComponentRendering).componentName) as ComponentRendering;
+      const phKey = 'page-content';
+      const props: EnhancedOmit<PlaceholderProps, 'sitecoreContext'> = {
+        name: phKey,
+        rendering: component,
+      };
+      const Element = withPlaceholder(phKey)(Home);
+      const renderedComponent = mount(
+        <SitecoreContext layoutData={nonEeDevData} componentFactory={componentFactory}>
+          <Element {...props} />
+        </SitecoreContext>
+      );
+
+      expect(renderedComponent.find('.download-callout-mock').length).to.equal(1);
+      expect(renderedComponent.find('.sc-jss-placeholder-error').length).to.equal(1);
+      expect(renderedComponent.find('h4').length).to.equal(1);
+      expect(renderedComponent.find('h4').html()).to.equal('<h4>Loading component...</h4>');
+    });
+
+    it('should render nested components using custom error component', () => {
+      const component = (nonEeDevData.sitecore.route?.placeholders.main as (
+        | ComponentRendering
+        | RouteData
+      )[]).find((c) => (c as ComponentRendering).componentName) as ComponentRendering;
+      const phKey = 'page-content';
+      const props: EnhancedOmit<PlaceholderProps, 'sitecoreContext'> = {
+        name: phKey,
+        rendering: component,
+        errorComponent: ErrorMessageComponent,
+        componentLoadingMessage: 'Custom loading message...',
+      };
+      const Element = withPlaceholder(phKey)(Home);
+      const renderedComponent = mount(
+        <SitecoreContext layoutData={nonEeDevData} componentFactory={componentFactory}>
+          <Element {...props} />
+        </SitecoreContext>
+      );
+
+      expect(renderedComponent.find('.download-callout-mock').length).to.equal(1);
+      expect(renderedComponent.find('.error-handled').length).to.equal(1);
+      expect(renderedComponent.find('h4').length).to.equal(1);
+      expect(renderedComponent.find('h4').html()).to.equal('<h4>Custom loading message...</h4>');
+    });
+
+    describe('Edit mode', () => {
+      const component = (eeData.sitecore.route?.placeholders.main as (
+        | ComponentRendering
+        | RouteData
+      )[]).find((c) => (c as ComponentRendering).componentName) as ComponentRendering;
+      const phKey = 'page-content';
+      const props: EnhancedOmit<PlaceholderProps, 'sitecoreContext'> = {
+        name: phKey,
+        rendering: component,
+      };
+      const Element = withPlaceholder(phKey)(Home);
+      const renderedComponent = mount(
+        <SitecoreContext
+          layoutData={eeData as LayoutServiceData}
+          componentFactory={componentFactory}
+        >
+          <Element {...props} />
+        </SitecoreContext>
+      );
+
+      it('should render normal component', () => {
+        expect(renderedComponent.find('.download-callout-mock').length).to.equal(1);
+      });
+
+      it('should render nested broken component', () => {
+        expect(renderedComponent.find('.sc-jss-placeholder-error').length).to.equal(1);
+      });
+
+      it('should render nested dynamic broken component', () => {
+        expect(renderedComponent.find('h4').length).to.equal(1);
+        expect(renderedComponent.find('h4').html()).to.equal('<h4>Loading component...</h4>');
+      });
+    });
   });
 
   testData.forEach((dataSet) => {
     describe(`with ${dataSet.label}`, () => {
       it('should render a placeholder with given key', () => {
-        const component = (dataSet.data.sitecore.route.placeholders.main as (
+        const component = (dataSet.data.sitecore.route?.placeholders.main as (
           | ComponentRendering
           | RouteData
         )[]).find((c) => (c as ComponentRendering).componentName) as ComponentRendering;
@@ -150,7 +246,7 @@ describe('withPlaceholder HOC', () => {
       });
 
       it('should render a placeholder with given key and prop', () => {
-        const component = (dataSet.data.sitecore.route.placeholders.main as (
+        const component = (dataSet.data.sitecore.route?.placeholders.main as (
           | ComponentRendering
           | RouteData
         )[]).find((c) => (c as ComponentRendering).componentName) as ComponentRendering;
@@ -176,7 +272,7 @@ describe('withPlaceholder HOC', () => {
       });
 
       it('should use propsTransformer method when provided', () => {
-        const component = (dataSet.data.sitecore.route.placeholders.main as (
+        const component = (dataSet.data.sitecore.route?.placeholders.main as (
           | ComponentRendering
           | RouteData
         )[]).find((c) => (c as ComponentRendering).componentName) as ComponentRendering;
@@ -208,29 +304,6 @@ describe('withPlaceholder HOC', () => {
     });
   });
 
-  testDataWithoutParams.forEach((dataSet) => {
-    describe(`with ${dataSet.label}`, () => {
-      it('should render a placeholder with given key when params are not passed', () => {
-        const component = (dataSet.data.sitecore.route.placeholders.main as (
-          | ComponentRendering
-          | RouteData
-        )[]).find((c) => (c as ComponentRendering).componentName) as ComponentRendering;
-        const phKey = 'page-content';
-        const props: EnhancedOmit<PlaceholderProps, 'sitecoreContext'> = {
-          name: phKey,
-          rendering: component,
-        };
-        const Element = withPlaceholder(phKey)(Home);
-        const renderedComponent = mount(
-          <SitecoreContext componentFactory={componentFactory}>
-            <Element {...props} />
-          </SitecoreContext>
-        );
-        expect(renderedComponent.find('.download-callout-mock').length).to.equal(1);
-      });
-    });
-  });
-
   describe('Metadata Mode', () => {
     const {
       layoutData,
diff --git a/packages/sitecore-jss-react/src/test-data/ee-data.ts b/packages/sitecore-jss-react/src/test-data/ee-data.ts
index 3898e49ece..6eba274e57 100644
--- a/packages/sitecore-jss-react/src/test-data/ee-data.ts
+++ b/packages/sitecore-jss-react/src/test-data/ee-data.ts
@@ -1,7 +1,10 @@
+import { LayoutServicePageState } from '@sitecore-jss/sitecore-jss/layout';
+
 export const convertedData = {
   sitecore: {
     context: {
       pageEditing: true,
+      pageState: LayoutServicePageState.Edit,
     },
     route: {
       name: 'home',
@@ -205,167 +208,26 @@ export const convertedData = {
                     class: 'scpm',
                   },
                 },
-                {
-                  name: 'code',
-                  type: 'text/sitecore',
-                  contents: '',
-                  attributes: {
-                    type: 'text/sitecore',
-                    id: 'scEnclosingTag_',
-                    chrometype: 'placeholder',
-                    kind: 'close',
-                    hintname: 'page-content',
-                    class: 'scpm',
-                  },
-                },
-              ],
-            },
-          },
-          {
-            name: 'code',
-            type: 'text/sitecore',
-            contents: '',
-            attributes: {
-              type: 'text/sitecore',
-              id: 'scEnclosingTag_r_',
-              chrometype: 'rendering',
-              kind: 'close',
-              hintkey: 'HomeRendering',
-              class: 'scpm',
-            },
-          },
-          {
-            name: 'code',
-            type: 'text/sitecore',
-            contents: '',
-            attributes: {
-              type: 'text/sitecore',
-              id: 'scEnclosingTag_',
-              chrometype: 'placeholder',
-              kind: 'close',
-              hintname: 'main',
-              class: 'scpm',
-            },
-          },
-        ],
-      },
-      fields: {
-        key: {
-          value: '',
-          editable:
-            '<input id=\'fld_9BCF4A172EC7416095045ABD096B46AE_30F5C2ACE7C842418AD031434E4E96CF_en_1_a95ded857429473e8ced62dee49d6747_15\' class=\'scFieldValue\' name=\'fld_9BCF4A172EC7416095045ABD096B46AE_30F5C2ACE7C842418AD031434E4E96CF_en_1_a95ded857429473e8ced62dee49d6747_15\' type=\'hidden\' value="This is a some sample &lt;p&gt;field data&lt;/p&gt; o&#39;boy! &quot;wow&quot;" /><span class="scChromeData">{"commands":[{"click":"chrome:common:edititem({command:\\"webedit:open\\"})","header":"Edit the related item","icon":"/temp/iconcache/office/16x16/cubes.png","disabledIcon":"/temp/cubes_disabled16x16.png","isDivider":false,"tooltip":"Edit the related item in the Content Editor.","type":"common"},{"click":"chrome:rendering:personalize({command:\\"webedit:personalize\\"})","header":"Personalize","icon":"/temp/iconcache/office/16x16/users_family.png","disabledIcon":"/temp/users_family_disabled16x16.png","isDivider":false,"tooltip":"Create or edit personalization for this component.","type":"sticky"},{"click":"chrome:rendering:editvariations({command:\\"webedit:editvariations\\"})","header":"Edit variations","icon":"/temp/iconcache/office/16x16/windows.png","disabledIcon":"/temp/windows_disabled16x16.png","isDivider":false,"tooltip":"Edit the variations.","type":"sticky"}],"contextItemUri":"sitecore://master/{9BCF4A17-2EC7-4160-9504-5ABD096B46AE}?lang=en&ver=1","custom":{},"displayName":"Key","expandedDisplayName":null}</span><span id="fld_9BCF4A172EC7416095045ABD096B46AE_30F5C2ACE7C842418AD031434E4E96CF_en_1_a95ded857429473e8ced62dee49d6747_15_edit" sc_parameters="prevent-line-break=true" contenteditable="true" class="scWebEditInput" scFieldType="single-line text" scDefaultText="[No text in field]">This is a some sample &lt;p&gt;field data&lt;/p&gt; o&#39;boy! &quot;wow&quot;</span>',
-        },
-      },
-    },
-  },
-};
-
-export const convertedDataWithoutParams = {
-  sitecore: {
-    context: {
-      pageEditing: true,
-    },
-    route: {
-      name: 'home',
-      displayName: 'Home',
-      placeholders: {
-        main: [
-          {
-            name: 'code',
-            type: 'text/sitecore',
-            contents:
-              '{"commands":[{"click":"chrome:placeholder:addControl","header":"Add to here","icon":"/temp/iconcache/office/16x16/add.png","disabledIcon":"/temp/add_disabled16x16.png","isDivider":false,"tooltip":"Add a new rendering to the \'{0}\' placeholder.","type":""},{"click":"chrome:placeholder:editSettings","header":"","icon":"/temp/iconcache/office/16x16/window_gear.png","disabledIcon":"/temp/window_gear_disabled16x16.png","isDivider":false,"tooltip":"Edit the placeholder settings.","type":""}],"contextItemUri":"sitecore://master/{9BCF4A17-2EC7-4160-9504-5ABD096B46AE}?lang=en&ver=1","custom":{"allowedRenderings":[],"editable":"true"},"displayName":"main","expandedDisplayName":null}',
-            attributes: {
-              type: 'text/sitecore',
-              chrometype: 'placeholder',
-              kind: 'open',
-              id: 'main',
-              key: 'main',
-              class: 'scpm',
-              'data-selectable': 'true',
-            },
-          },
-          {
-            name: 'code',
-            type: 'text/sitecore',
-            contents:
-              '{"commands":[{"click":"chrome:rendering:sort","header":"Change position","icon":"/temp/iconcache/office/16x16/document_size.png","disabledIcon":"/temp/document_size_disabled16x16.png","isDivider":false,"tooltip":"Move component.","type":""},{"click":"javascript:Sitecore.PageModes.PageEditor.postRequest(\'webedit:componentoptions(referenceId={2339622D-093B-4258-8334-95979E41EFA6},renderingId={6CAAAD00-D87A-4B71-BA0E-763BA7003FE5},id={F142E1B0-EFD1-4730-BBC5-C30064AD19D9})\',null,false)","header":"Edit Experience Editor Options","icon":"/temp/iconcache/office/16x16/clipboard_check_edit.png","disabledIcon":"/temp/clipboard_check_edit_disabled16x16.png","isDivider":false,"tooltip":"Edit the Experience Editor options for the component.","type":"common"},{"click":"chrome:rendering:properties","header":"Edit component properties","icon":"/temp/iconcache/office/16x16/elements_branch.png","disabledIcon":"/temp/elements_branch_disabled16x16.png","isDivider":false,"tooltip":"Edit the properties for the component.","type":"common"},{"click":"javascript:Sitecore.PageModes.PageEditor.postRequest(\'webedit:setdatasource(referenceId={2339622D-093B-4258-8334-95979E41EFA6},renderingId={6CAAAD00-D87A-4B71-BA0E-763BA7003FE5},id={F142E1B0-EFD1-4730-BBC5-C30064AD19D9})\',null,false)","header":"{dsHeader}","icon":"/temp/iconcache/office/16x16/data.png","disabledIcon":"/temp/data_disabled16x16.png","isDivider":false,"tooltip":"{dsTooltip}","type":"datasourcesmenu"},{"click":"chrome:rendering:personalize({command:\\"webedit:personalize\\"})","header":"Personalize","icon":"/temp/iconcache/office/16x16/users_family.png","disabledIcon":"/temp/users_family_disabled16x16.png","isDivider":false,"tooltip":"Create or edit personalization for this component.","type":"sticky"},{"click":"chrome:rendering:editvariations({command:\\"webedit:editvariations\\"})","header":"Edit variations","icon":"/temp/iconcache/office/16x16/windows.png","disabledIcon":"/temp/windows_disabled16x16.png","isDivider":false,"tooltip":"Test the component.","type":"sticky"},{"click":"chrome:common:edititem({command:\\"webedit:open\\"})","header":"Edit the related item","icon":"/temp/iconcache/office/16x16/cubes.png","disabledIcon":"/temp/cubes_disabled16x16.png","isDivider":false,"tooltip":"Edit the related item in the Content Editor.","type":"datasourcesmenu"},{"click":"chrome:rendering:delete","header":"Delete","icon":"/temp/iconcache/office/16x16/delete.png","disabledIcon":"/temp/delete_disabled16x16.png","isDivider":false,"tooltip":"Remove component.","type":"sticky"}],"contextItemUri":"sitecore://master/{F142E1B0-EFD1-4730-BBC5-C30064AD19D9}?lang=en&ver=1","custom":{"renderingID":"6CAAAD00D87A4B71BA0E763BA7003FE5","editable":"true"},"displayName":"HomeRendering","expandedDisplayName":null}',
-            attributes: {
-              type: 'text/sitecore',
-              chrometype: 'rendering',
-              kind: 'open',
-              hintname: 'HomeRendering',
-              id: 'r_2339622D093B4258833495979E41EFA6',
-              class: 'scpm',
-              'data-selectable': 'true',
-            },
-          },
-          {
-            uid: '2339622d-093b-4258-8334-95979e41efa6',
-            componentName: 'Home',
-            fields: {
-              message: {
-                value: 'JavaScript all the things!',
-                editable: 'JavaScript all the things!',
-              },
-            },
-            params: {},
-            placeholders: {
-              'page-header': [
-                {
-                  name: 'img',
-                  type: 'text/sitecore',
-                  contents: '',
-                  attributes: {
-                    src: '/test.png',
-                  },
-                },
-                {
-                  name: 'code',
-                  type: 'text/sitecore',
-                  contents:
-                    '{"commands":[{"click":"chrome:placeholder:addControl","header":"Add to here","icon":"/temp/iconcache/office/16x16/add.png","disabledIcon":"/temp/add_disabled16x16.png","isDivider":false,"tooltip":"Add a new rendering to the \'{0}\' placeholder.","type":""},{"click":"chrome:placeholder:editSettings","header":"","icon":"/temp/iconcache/office/16x16/window_gear.png","disabledIcon":"/temp/window_gear_disabled16x16.png","isDivider":false,"tooltip":"Edit the placeholder settings.","type":""}],"contextItemUri":"sitecore://master/{9BCF4A17-2EC7-4160-9504-5ABD096B46AE}?lang=en&ver=1","custom":{"allowedRenderings":[],"editable":"true"},"displayName":"page-header","expandedDisplayName":null}',
-                  attributes: {
-                    type: 'text/sitecore',
-                    chrometype: 'placeholder',
-                    kind: 'open',
-                    id: 'page_header',
-                    key: 'page-header',
-                    class: 'scpm',
-                    'data-selectable': 'true',
-                  },
-                },
                 {
                   name: 'code',
                   type: 'text/sitecore',
                   contents:
-                    '{"commands":[{"click":"chrome:rendering:sort","header":"Change position","icon":"/temp/iconcache/office/16x16/document_size.png","disabledIcon":"/temp/document_size_disabled16x16.png","isDivider":false,"tooltip":"Move component.","type":""},{"click":"javascript:Sitecore.PageModes.PageEditor.postRequest(\'webedit:componentoptions(referenceId={53C31A2A-75D5-43C6-A0B8-66B7C7859C30},renderingId={A46171E9-0E6E-4F4C-ABFD-0B2A642A2C11},id={362C0651-3686-429C-BB70-6113EDD6ECBD})\',null,false)","header":"Edit Experience Editor Options","icon":"/temp/iconcache/office/16x16/clipboard_check_edit.png","disabledIcon":"/temp/clipboard_check_edit_disabled16x16.png","isDivider":false,"tooltip":"Edit the Experience Editor options for the component.","type":"common"},{"click":"chrome:rendering:properties","header":"Edit component properties","icon":"/temp/iconcache/office/16x16/elements_branch.png","disabledIcon":"/temp/elements_branch_disabled16x16.png","isDivider":false,"tooltip":"Edit the properties for the component.","type":"common"},{"click":"javascript:Sitecore.PageModes.PageEditor.postRequest(\'webedit:setdatasource(referenceId={53C31A2A-75D5-43C6-A0B8-66B7C7859C30},renderingId={A46171E9-0E6E-4F4C-ABFD-0B2A642A2C11},id={362C0651-3686-429C-BB70-6113EDD6ECBD})\',null,false)","header":"{dsHeader}","icon":"/temp/iconcache/office/16x16/data.png","disabledIcon":"/temp/data_disabled16x16.png","isDivider":false,"tooltip":"{dsTooltip}","type":"datasourcesmenu"},{"click":"chrome:rendering:personalize({command:\\"webedit:personalize\\"})","header":"Personalize","icon":"/temp/iconcache/office/16x16/users_family.png","disabledIcon":"/temp/users_family_disabled16x16.png","isDivider":false,"tooltip":"Create or edit personalization for this component.","type":"sticky"},{"click":"chrome:rendering:editvariations({command:\\"webedit:editvariations\\"})","header":"Edit variations","icon":"/temp/iconcache/office/16x16/windows.png","disabledIcon":"/temp/windows_disabled16x16.png","isDivider":false,"tooltip":"Test the component.","type":"sticky"},{"click":"chrome:common:edititem({command:\\"webedit:open\\"})","header":"Edit the related item","icon":"/temp/iconcache/office/16x16/cubes.png","disabledIcon":"/temp/cubes_disabled16x16.png","isDivider":false,"tooltip":"Edit the related item in the Content Editor.","type":"datasourcesmenu"},{"click":"chrome:rendering:delete","header":"Delete","icon":"/temp/iconcache/office/16x16/delete.png","disabledIcon":"/temp/delete_disabled16x16.png","isDivider":false,"tooltip":"Remove component.","type":"sticky"}],"contextItemUri":"sitecore://master/{362C0651-3686-429C-BB70-6113EDD6ECBD}?lang=en&ver=1","custom":{"renderingID":"A46171E90E6E4F4CABFD0B2A642A2C11","editable":"true"},"displayName":"JumbotronRendering","expandedDisplayName":null}',
+                    '{"commands":[{"click":"chrome:rendering:sort","header":"Change position","icon":"/temp/iconcache/office/16x16/document_size.png","disabledIcon":"/temp/document_size_disabled16x16.png","isDivider":false,"tooltip":"Move component.","type":""},{"click":"javascript:Sitecore.PageModes.PageEditor.postRequest(\'webedit:componentoptions(referenceId={6701AC71-845D-4DE4-BF8E-1F4FEDDF8908},renderingId={6C254609-5347-4768-9FFB-1FF620320CE9},id={199C8794-311F-4B50-9BDC-88AEFB3EE172})\',null,false)","header":"Edit Experience Editor Options","icon":"/temp/iconcache/office/16x16/clipboard_check_edit.png","disabledIcon":"/temp/clipboard_check_edit_disabled16x16.png","isDivider":false,"tooltip":"Edit the Experience Editor options for the component.","type":"common"},{"click":"chrome:rendering:properties","header":"Edit component properties","icon":"/temp/iconcache/office/16x16/elements_branch.png","disabledIcon":"/temp/elements_branch_disabled16x16.png","isDivider":false,"tooltip":"Edit the properties for the component.","type":"common"},{"click":"javascript:Sitecore.PageModes.PageEditor.postRequest(\'webedit:setdatasource(referenceId={6701AC71-845D-4DE4-BF8E-1F4FEDDF8908},renderingId={6C254609-5347-4768-9FFB-1FF620320CE9},id={199C8794-311F-4B50-9BDC-88AEFB3EE172})\',null,false)","header":"{dsHeader}","icon":"/temp/iconcache/office/16x16/data.png","disabledIcon":"/temp/data_disabled16x16.png","isDivider":false,"tooltip":"{dsTooltip}","type":"datasourcesmenu"},{"click":"chrome:rendering:personalize({command:\\"webedit:personalize\\"})","header":"Personalize","icon":"/temp/iconcache/office/16x16/users_family.png","disabledIcon":"/temp/users_family_disabled16x16.png","isDivider":false,"tooltip":"Create or edit personalization for this component.","type":"sticky"},{"click":"chrome:rendering:editvariations({command:\\"webedit:editvariations\\"})","header":"Edit variations","icon":"/temp/iconcache/office/16x16/windows.png","disabledIcon":"/temp/windows_disabled16x16.png","isDivider":false,"tooltip":"Test the component.","type":"sticky"},{"click":"chrome:common:edititem({command:\\"webedit:open\\"})","header":"Edit the related item","icon":"/temp/iconcache/office/16x16/cubes.png","disabledIcon":"/temp/cubes_disabled16x16.png","isDivider":false,"tooltip":"Edit the related item in the Content Editor.","type":"datasourcesmenu"},{"click":"chrome:rendering:delete","header":"Delete","icon":"/temp/iconcache/office/16x16/delete.png","disabledIcon":"/temp/delete_disabled16x16.png","isDivider":false,"tooltip":"Remove component.","type":"sticky"}],"contextItemUri":"sitecore://master/{199C8794-311F-4B50-9BDC-88AEFB3EE172}?lang=en&ver=1","custom":{"renderingID":"6C254609534747689FFB1FF620320CE9","editable":"true"},"displayName":"BrokenComponentRendering","expandedDisplayName":null}',
                   attributes: {
                     type: 'text/sitecore',
                     chrometype: 'rendering',
                     kind: 'open',
-                    hintname: 'JumbotronRendering',
-                    id: 'r_53C31A2A75D543C6A0B866B7C7859C30',
+                    hintname: 'BrokenComponentRendering',
+                    id: 'r_6701AC71845D4DE4BF8E1F4FEDDF8908',
                     class: 'scpm',
                     'data-selectable': 'true',
                   },
                 },
                 {
-                  uid: '53c31a2a-75d5-43c6-a0b8-66b7c7859c30',
-                  componentName: 'Jumbotron',
-                  fields: {
-                    titleText: {
-                      value: 'Your Favorite Source of Free Bootstrap Themes!',
-                      editable:
-                        '<input id=\'fld_362C06513686429CBB706113EDD6ECBD_D094753D077B41BA91CAE1BD228AB249_en_1_b8fbac87effe4fe0923ddcc61a0617fc_17\' class=\'scFieldValue\' name=\'fld_362C06513686429CBB706113EDD6ECBD_D094753D077B41BA91CAE1BD228AB249_en_1_b8fbac87effe4fe0923ddcc61a0617fc_17\' type=\'hidden\' value="Your Favorite Source of Free Bootstrap Themes!" /><span class="scChromeData">{"commands":[{"click":"chrome:common:edititem({command:\\"webedit:open\\"})","header":"Edit the related item","icon":"/temp/iconcache/office/16x16/cubes.png","disabledIcon":"/temp/cubes_disabled16x16.png","isDivider":false,"tooltip":"Edit the related item in the Content Editor.","type":"common"},{"click":"chrome:rendering:personalize({command:\\"webedit:personalize\\"})","header":"Personalize","icon":"/temp/iconcache/office/16x16/users_family.png","disabledIcon":"/temp/users_family_disabled16x16.png","isDivider":false,"tooltip":"Create or edit personalization for this component.","type":"sticky"},{"click":"chrome:rendering:editvariations({command:\\"webedit:editvariations\\"})","header":"Edit variations","icon":"/temp/iconcache/office/16x16/windows.png","disabledIcon":"/temp/windows_disabled16x16.png","isDivider":false,"tooltip":"Edit the variations.","type":"sticky"}],"contextItemUri":"sitecore://master/{362C0651-3686-429C-BB70-6113EDD6ECBD}?lang=en&ver=1","custom":{},"displayName":"TitleText","expandedDisplayName":null}</span><span id="fld_362C06513686429CBB706113EDD6ECBD_D094753D077B41BA91CAE1BD228AB249_en_1_b8fbac87effe4fe0923ddcc61a0617fc_17_edit" sc_parameters="prevent-line-break=true" contenteditable="true" class="scWebEditInput" scFieldType="single-line text" scDefaultText="[No text in field]">Your Favorite Source of Free Bootstrap Themes!</span>',
-                    },
-                    body: {
-                      value:
-                        '<p>Start Bootstrap can help you build better websites using the Bootstrap CSS framework! Just download your template and start going, no strings attached!</p>',
-                      editable:
-                        '<input id=\'fld_362C06513686429CBB706113EDD6ECBD_F5431BB1D50245B0A007FD141266DA0D_en_1_b8fbac87effe4fe0923ddcc61a0617fc_19\' class=\'scFieldValue\' name=\'fld_362C06513686429CBB706113EDD6ECBD_F5431BB1D50245B0A007FD141266DA0D_en_1_b8fbac87effe4fe0923ddcc61a0617fc_19\' type=\'hidden\' value="&lt;p&gt;Start Bootstrap can help you build better websites using the Bootstrap CSS framework! Just download your template and start going, no strings attached!&lt;/p&gt;" /><span class="scChromeData">{"commands":[{"click":"chrome:field:editcontrol({command:\\"webedit:edithtml\\"})","header":"Edit Text","icon":"/temp/iconcache/office/16x16/pencil.png","disabledIcon":"/temp/pencil_disabled16x16.png","isDivider":false,"tooltip":"Edit the text","type":null},{"click":"chrome:field:execute({command:\\"bold\\", userInterface:true, value:true})","header":"","icon":"/temp/iconcache/office/16x16/font_style_bold.png","disabledIcon":"/temp/font_style_bold_disabled16x16.png","isDivider":false,"tooltip":"Bold","type":null},{"click":"chrome:field:execute({command:\\"Italic\\", userInterface:true, value:true})","header":"","icon":"/temp/iconcache/office/16x16/font_style_italics.png","disabledIcon":"/temp/font_style_italics_disabled16x16.png","isDivider":false,"tooltip":"Italic","type":null},{"click":"chrome:field:execute({command:\\"Underline\\", userInterface:true, value:true})","header":"","icon":"/temp/iconcache/office/16x16/font_style_underline.png","disabledIcon":"/temp/font_style_underline_disabled16x16.png","isDivider":false,"tooltip":"Underline","type":null},{"click":"chrome:field:insertlink","header":"","icon":"/temp/iconcache/office/16x16/link.png","disabledIcon":"/temp/link_disabled16x16.png","isDivider":false,"tooltip":"Insert a link into the text field.","type":null},{"click":"chrome:field:insertimage","header":"Insert image","icon":"/temp/iconcache/office/16x16/photo_landscape.png","disabledIcon":"/temp/photo_landscape_disabled16x16.png","isDivider":false,"tooltip":"Insert an image into the text field.","type":null},{"click":"chrome:common:edititem({command:\\"webedit:open\\"})","header":"Edit the related item","icon":"/temp/iconcache/office/16x16/cubes.png","disabledIcon":"/temp/cubes_disabled16x16.png","isDivider":false,"tooltip":"Edit the related item in the Content Editor.","type":"common"},{"click":"chrome:rendering:personalize({command:\\"webedit:personalize\\"})","header":"Personalize","icon":"/temp/iconcache/office/16x16/users_family.png","disabledIcon":"/temp/users_family_disabled16x16.png","isDivider":false,"tooltip":"Create or edit personalization for this component.","type":"sticky"},{"click":"chrome:rendering:editvariations({command:\\"webedit:editvariations\\"})","header":"Edit variations","icon":"/temp/iconcache/office/16x16/windows.png","disabledIcon":"/temp/windows_disabled16x16.png","isDivider":false,"tooltip":"Edit the variations.","type":"sticky"}],"contextItemUri":"sitecore://master/{362C0651-3686-429C-BB70-6113EDD6ECBD}?lang=en&ver=1","custom":{},"displayName":"Body","expandedDisplayName":null}</span><span scFieldType="rich text" scDefaultText="[No text in field]" contenteditable="true" class="scWebEditInput" id="fld_362C06513686429CBB706113EDD6ECBD_F5431BB1D50245B0A007FD141266DA0D_en_1_b8fbac87effe4fe0923ddcc61a0617fc_19_edit"><p>Start Bootstrap can help you build better websites using the Bootstrap CSS framework! Just download your template and start going, no strings attached!</p></span>',
-                    },
-                  },
+                  uid: '6701ac71-845d-4de4-bf8e-1f4feddf8908',
+                  componentName: 'BrokenComponent',
+                  fields: {},
+                  params: {},
                 },
                 {
                   name: 'code',
@@ -376,50 +238,20 @@ export const convertedDataWithoutParams = {
                     id: 'scEnclosingTag_r_',
                     chrometype: 'rendering',
                     kind: 'close',
-                    hintkey: 'JumbotronRendering',
+                    hintkey: 'BrokenComponentRendering',
                     class: 'scpm',
                   },
                 },
-                {
-                  name: 'code',
-                  type: 'text/sitecore',
-                  contents: '',
-                  attributes: {
-                    type: 'text/sitecore',
-                    id: 'scEnclosingTag_',
-                    chrometype: 'placeholder',
-                    kind: 'close',
-                    hintname: 'page-header',
-                    class: 'scpm',
-                  },
-                },
-              ],
-              'page-content': [
                 {
                   name: 'code',
                   type: 'text/sitecore',
                   contents:
-                    '{"commands":[{"click":"chrome:placeholder:addControl","header":"Add to here","icon":"/temp/iconcache/office/16x16/add.png","disabledIcon":"/temp/add_disabled16x16.png","isDivider":false,"tooltip":"Add a new rendering to the \'{0}\' placeholder.","type":""},{"click":"chrome:placeholder:editSettings","header":"","icon":"/temp/iconcache/office/16x16/window_gear.png","disabledIcon":"/temp/window_gear_disabled16x16.png","isDivider":false,"tooltip":"Edit the placeholder settings.","type":""}],"contextItemUri":"sitecore://master/{9BCF4A17-2EC7-4160-9504-5ABD096B46AE}?lang=en&ver=1","custom":{"allowedRenderings":[],"editable":"true"},"displayName":"page-content","expandedDisplayName":null}',
-                  attributes: {
-                    type: 'text/sitecore',
-                    chrometype: 'placeholder',
-                    kind: 'open',
-                    id: 'page_content',
-                    key: 'page-content',
-                    class: 'scpm',
-                    'data-selectable': 'true',
-                  },
-                },
-                {
-                  name: 'code',
-                  type: 'text/sitecore',
-                  contents:
-                    '{"commands":[{"click":"chrome:rendering:sort","header":"Change position","icon":"/temp/iconcache/office/16x16/document_size.png","disabledIcon":"/temp/document_size_disabled16x16.png","isDivider":false,"tooltip":"Move component.","type":""},{"click":"javascript:Sitecore.PageModes.PageEditor.postRequest(\'webedit:componentoptions(referenceId={6701AC71-845D-4DE4-BF8E-1F4FEDDF8908},renderingId={6C254609-5347-4768-9FFB-1FF620320CE9},id={199C8794-311F-4B50-9BDC-88AEFB3EE172})\',null,false)","header":"Edit Experience Editor Options","icon":"/temp/iconcache/office/16x16/clipboard_check_edit.png","disabledIcon":"/temp/clipboard_check_edit_disabled16x16.png","isDivider":false,"tooltip":"Edit the Experience Editor options for the component.","type":"common"},{"click":"chrome:rendering:properties","header":"Edit component properties","icon":"/temp/iconcache/office/16x16/elements_branch.png","disabledIcon":"/temp/elements_branch_disabled16x16.png","isDivider":false,"tooltip":"Edit the properties for the component.","type":"common"},{"click":"javascript:Sitecore.PageModes.PageEditor.postRequest(\'webedit:setdatasource(referenceId={6701AC71-845D-4DE4-BF8E-1F4FEDDF8908},renderingId={6C254609-5347-4768-9FFB-1FF620320CE9},id={199C8794-311F-4B50-9BDC-88AEFB3EE172})\',null,false)","header":"{dsHeader}","icon":"/temp/iconcache/office/16x16/data.png","disabledIcon":"/temp/data_disabled16x16.png","isDivider":false,"tooltip":"{dsTooltip}","type":"datasourcesmenu"},{"click":"chrome:rendering:personalize({command:\\"webedit:personalize\\"})","header":"Personalize","icon":"/temp/iconcache/office/16x16/users_family.png","disabledIcon":"/temp/users_family_disabled16x16.png","isDivider":false,"tooltip":"Create or edit personalization for this component.","type":"sticky"},{"click":"chrome:rendering:editvariations({command:\\"webedit:editvariations\\"})","header":"Edit variations","icon":"/temp/iconcache/office/16x16/windows.png","disabledIcon":"/temp/windows_disabled16x16.png","isDivider":false,"tooltip":"Test the component.","type":"sticky"},{"click":"chrome:common:edititem({command:\\"webedit:open\\"})","header":"Edit the related item","icon":"/temp/iconcache/office/16x16/cubes.png","disabledIcon":"/temp/cubes_disabled16x16.png","isDivider":false,"tooltip":"Edit the related item in the Content Editor.","type":"datasourcesmenu"},{"click":"chrome:rendering:delete","header":"Delete","icon":"/temp/iconcache/office/16x16/delete.png","disabledIcon":"/temp/delete_disabled16x16.png","isDivider":false,"tooltip":"Remove component.","type":"sticky"}],"contextItemUri":"sitecore://master/{199C8794-311F-4B50-9BDC-88AEFB3EE172}?lang=en&ver=1","custom":{"renderingID":"6C254609534747689FFB1FF620320CE9","editable":"true"},"displayName":"DownloadCalloutRendering","expandedDisplayName":null}',
+                    '{"commands":[{"click":"chrome:rendering:sort","header":"Change position","icon":"/temp/iconcache/office/16x16/document_size.png","disabledIcon":"/temp/document_size_disabled16x16.png","isDivider":false,"tooltip":"Move component.","type":""},{"click":"javascript:Sitecore.PageModes.PageEditor.postRequest(\'webedit:componentoptions(referenceId={6701AC71-845D-4DE4-BF8E-1F4FEDDF8908},renderingId={6C254609-5347-4768-9FFB-1FF620320CE9},id={199C8794-311F-4B50-9BDC-88AEFB3EE172})\',null,false)","header":"Edit Experience Editor Options","icon":"/temp/iconcache/office/16x16/clipboard_check_edit.png","disabledIcon":"/temp/clipboard_check_edit_disabled16x16.png","isDivider":false,"tooltip":"Edit the Experience Editor options for the component.","type":"common"},{"click":"chrome:rendering:properties","header":"Edit component properties","icon":"/temp/iconcache/office/16x16/elements_branch.png","disabledIcon":"/temp/elements_branch_disabled16x16.png","isDivider":false,"tooltip":"Edit the properties for the component.","type":"common"},{"click":"javascript:Sitecore.PageModes.PageEditor.postRequest(\'webedit:setdatasource(referenceId={6701AC71-845D-4DE4-BF8E-1F4FEDDF8908},renderingId={6C254609-5347-4768-9FFB-1FF620320CE9},id={199C8794-311F-4B50-9BDC-88AEFB3EE172})\',null,false)","header":"{dsHeader}","icon":"/temp/iconcache/office/16x16/data.png","disabledIcon":"/temp/data_disabled16x16.png","isDivider":false,"tooltip":"{dsTooltip}","type":"datasourcesmenu"},{"click":"chrome:rendering:personalize({command:\\"webedit:personalize\\"})","header":"Personalize","icon":"/temp/iconcache/office/16x16/users_family.png","disabledIcon":"/temp/users_family_disabled16x16.png","isDivider":false,"tooltip":"Create or edit personalization for this component.","type":"sticky"},{"click":"chrome:rendering:editvariations({command:\\"webedit:editvariations\\"})","header":"Edit variations","icon":"/temp/iconcache/office/16x16/windows.png","disabledIcon":"/temp/windows_disabled16x16.png","isDivider":false,"tooltip":"Test the component.","type":"sticky"},{"click":"chrome:common:edititem({command:\\"webedit:open\\"})","header":"Edit the related item","icon":"/temp/iconcache/office/16x16/cubes.png","disabledIcon":"/temp/cubes_disabled16x16.png","isDivider":false,"tooltip":"Edit the related item in the Content Editor.","type":"datasourcesmenu"},{"click":"chrome:rendering:delete","header":"Delete","icon":"/temp/iconcache/office/16x16/delete.png","disabledIcon":"/temp/delete_disabled16x16.png","isDivider":false,"tooltip":"Remove component.","type":"sticky"}],"contextItemUri":"sitecore://master/{199C8794-311F-4B50-9BDC-88AEFB3EE172}?lang=en&ver=1","custom":{"renderingID":"6C254609534747689FFB1FF620320CE9","editable":"true"},"displayName":"BrokenComponentRendering","expandedDisplayName":null}',
                   attributes: {
                     type: 'text/sitecore',
                     chrometype: 'rendering',
                     kind: 'open',
-                    hintname: 'DownloadCalloutRendering',
+                    hintname: 'DynamicComponentRendering',
                     id: 'r_6701AC71845D4DE4BF8E1F4FEDDF8908',
                     class: 'scpm',
                     'data-selectable': 'true',
@@ -427,29 +259,10 @@ export const convertedDataWithoutParams = {
                 },
                 {
                   uid: '6701ac71-845d-4de4-bf8e-1f4feddf8908',
-                  componentName: 'DownloadCallout',
-                  fields: {
-                    linkText: {
-                      value: 'Download',
-                      editable:
-                        '<input id=\'fld_199C8794311F4B509BDC88AEFB3EE172_B752EEA49E994A239012CD5DE3F9191E_en_1_600c022f8135451ebff5d4f98fa36a8e_20\' class=\'scFieldValue\' name=\'fld_199C8794311F4B509BDC88AEFB3EE172_B752EEA49E994A239012CD5DE3F9191E_en_1_600c022f8135451ebff5d4f98fa36a8e_20\' type=\'hidden\' value="Download" /><span class="scChromeData">{"commands":[{"click":"chrome:common:edititem({command:\\"webedit:open\\"})","header":"Edit the related item","icon":"/temp/iconcache/office/16x16/cubes.png","disabledIcon":"/temp/cubes_disabled16x16.png","isDivider":false,"tooltip":"Edit the related item in the Content Editor.","type":"common"},{"click":"chrome:rendering:personalize({command:\\"webedit:personalize\\"})","header":"Personalize","icon":"/temp/iconcache/office/16x16/users_family.png","disabledIcon":"/temp/users_family_disabled16x16.png","isDivider":false,"tooltip":"Create or edit personalization for this component.","type":"sticky"},{"click":"chrome:rendering:editvariations({command:\\"webedit:editvariations\\"})","header":"Edit variations","icon":"/temp/iconcache/office/16x16/windows.png","disabledIcon":"/temp/windows_disabled16x16.png","isDivider":false,"tooltip":"Edit the variations.","type":"sticky"}],"contextItemUri":"sitecore://master/{199C8794-311F-4B50-9BDC-88AEFB3EE172}?lang=en&ver=1","custom":{},"displayName":"LinkText","expandedDisplayName":null}</span><span id="fld_199C8794311F4B509BDC88AEFB3EE172_B752EEA49E994A239012CD5DE3F9191E_en_1_600c022f8135451ebff5d4f98fa36a8e_20_edit" sc_parameters="prevent-line-break=true" contenteditable="true" class="scWebEditInput" scFieldType="single-line text" scDefaultText="[No text in field]">Download</span>',
-                    },
-                  },
+                  componentName: 'DynamicComponent',
+                  fields: {},
                   params: {},
                 },
-                {
-                  name: 'div',
-                  type: '',
-                  contents:
-                    '<div style="height:50px;background: transparent url(\'/sitecore/shell/themes/standard/images/pageeditor/bg_hidden_rendering.png\') repeat;"></div>',
-                  attributes: {
-                    style: {
-                      backgroundColor: 'white',
-                      opacity: 0.35,
-                      filter: 'alpha(opacity=35)',
-                    },
-                  },
-                },
                 {
                   name: 'code',
                   type: 'text/sitecore',
@@ -459,7 +272,7 @@ export const convertedDataWithoutParams = {
                     id: 'scEnclosingTag_r_',
                     chrometype: 'rendering',
                     kind: 'close',
-                    hintkey: 'DownloadCalloutRendering',
+                    hintkey: 'DynamicComponentRendering',
                     class: 'scpm',
                   },
                 },
@@ -522,6 +335,7 @@ export const emptyPlaceholderData = {
   sitecore: {
     context: {
       pageEditing: true,
+      pageState: LayoutServicePageState.Edit,
     },
     route: {
       name: 'home',
diff --git a/packages/sitecore-jss-react/src/test-data/non-ee-data.ts b/packages/sitecore-jss-react/src/test-data/non-ee-data.ts
index 508bd7cf6d..93d2cb9126 100644
--- a/packages/sitecore-jss-react/src/test-data/non-ee-data.ts
+++ b/packages/sitecore-jss-react/src/test-data/non-ee-data.ts
@@ -1,4 +1,6 @@
-export const convertedDevData = {
+import { LayoutServiceData } from '@sitecore-jss/sitecore-jss/layout';
+
+export const convertedDevData: LayoutServiceData = {
   sitecore: {
     context: {
       pageEditing: false,
@@ -16,7 +18,6 @@ export const convertedDevData = {
               },
             },
             uid: '2339622d-093b-4258-8334-95979e41efa6',
-            renderingParams: [] as { [key: string]: unknown }[],
             placeholders: {
               'page-header': [
                 {
@@ -46,68 +47,21 @@ export const convertedDevData = {
                     },
                   },
                   uid: '6701ac71-845d-4de4-bf8e-1f4feddf8908',
-                  params: [] as { [key: string]: unknown }[],
+                  params: {},
                 },
-              ],
-            },
-          },
-        ],
-      },
-      fields: {
-        key: 'This is a some sample &lt;p&gt;field data&lt;/p&gt; o&#39;boy! &quot;wow&quot;',
-      },
-    },
-  },
-};
-
-export const convertedDevDataWithoutParams = {
-  sitecore: {
-    context: {
-      pageEditing: false,
-    },
-    route: {
-      name: 'home',
-      displayName: 'Home',
-      placeholders: {
-        main: [
-          {
-            componentName: 'Home',
-            fields: {
-              message: {
-                value: 'JavaScript all the things!',
-              },
-            },
-            uid: '2339622d-093b-4258-8334-95979e41efa6',
-            renderingParams: [] as { [key: string]: unknown }[],
-            placeholders: {
-              'page-header': [
                 {
-                  componentName: 'Jumbotron',
-                  params: {
-                    shade: 'dark',
-                    titleSize: '1',
-                  },
-                  fields: {
-                    titleText: {
-                      value: 'Your Favorite Source of Free Bootstrap Themes!',
-                    },
-                    body: {
-                      value:
-                        '<p>Start Bootstrap can help you build better websites using the Bootstrap CSS framework! Just download your template and start going, no strings attached!</p>',
-                    },
-                  },
-                  uid: '53c31a2a-75d5-43c6-a0b8-66b7c7859c30',
+                  uid: '55555555-845d-4de4-bf8e-1f4feddf8908',
+                  componentName: 'BrokenComponent',
+                  fields: {},
                 },
-              ],
-              'page-content': [
                 {
-                  componentName: 'DownloadCallout',
+                  uid: '77777777-845d-4de4-bf8e-1f4feddf8908',
+                  componentName: 'DynamicComponent',
                   fields: {
-                    linkText: {
-                      value: 'Download',
+                    title: {
+                      value: 'Dynamic Component',
                     },
                   },
-                  uid: '6701ac71-845d-4de4-bf8e-1f4feddf8908',
                 },
               ],
             },
@@ -115,7 +69,9 @@ export const convertedDevDataWithoutParams = {
         ],
       },
       fields: {
-        key: 'This is a some sample &lt;p&gt;field data&lt;/p&gt; o&#39;boy! &quot;wow&quot;',
+        key: {
+          value: 'This is a some sample &lt;p&gt;field data&lt;/p&gt; o&#39;boy! &quot;wow&quot;',
+        },
       },
     },
   },