From 88ed1e3acf186d5197296bb31eeaeb1a62a525b7 Mon Sep 17 00:00:00 2001 From: illiakovalenko Date: Fri, 21 Jun 2024 08:18:48 +0300 Subject: [PATCH 1/3] [sitecore-jss-react] [ErrorBoundaries] Added unit tests to cover withPlaceholder HOC --- .../src/enhancers/withPlaceholder.test.tsx | 140 ++++++++--- .../src/test-data/ee-data.ts | 220 ++---------------- .../src/test-data/non-ee-data.ts | 72 ++---- 3 files changed, 138 insertions(+), 294 deletions(-) diff --git a/packages/sitecore-jss-react/src/enhancers/withPlaceholder.test.tsx b/packages/sitecore-jss-react/src/enhancers/withPlaceholder.test.tsx index e25b22bd48..d68100d150 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'; @@ -66,11 +64,28 @@ const ErrorMessageComponent: React.FC = () => (
Your error has been... dealt with.
); +const delay = (timeout, promise?) => { + return new Promise((resolve) => { + setTimeout(resolve, timeout); + }).then(() => promise); +}; + const componentFactory: ComponentFactory = (componentName: string) => { const components = new Map>(); components.set('DownloadCallout', DownloadCallout); components.set('Jumbotron', () =>
); + 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 +95,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 = { @@ -123,12 +138,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 = { + name: phKey, + rendering: component, + }; + const Element = withPlaceholder(phKey)(Home); + const renderedComponent = mount( + + + + ); + + 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('

Loading component...

'); + }); + + 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 = { + name: phKey, + rendering: component, + errorComponent: ErrorMessageComponent, + componentLoadingMessage: 'Custom loading message...', + }; + const Element = withPlaceholder(phKey)(Home); + const renderedComponent = mount( + + + + ); + + 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('

Custom loading message...

'); + }); + + 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 = { + name: phKey, + rendering: component, + }; + const Element = withPlaceholder(phKey)(Home); + const renderedComponent = mount( + + + + ); + + 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('

Loading component...

'); + }); + }); }); 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 +247,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 +273,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 +305,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 = { - name: phKey, - rendering: component, - }; - const Element = withPlaceholder(phKey)(Home); - const renderedComponent = mount( - - - - ); - 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: - '{"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}This is a some sample <p>field data</p> o'boy! "wow"', - }, - }, - }, - }, -}; - -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: - '{"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}Your Favorite Source of Free Bootstrap Themes!', - }, - body: { - value: - '

Start Bootstrap can help you build better websites using the Bootstrap CSS framework! Just download your template and start going, no strings attached!

', - editable: - '{"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}

Start Bootstrap can help you build better websites using the Bootstrap CSS framework! Just download your template and start going, no strings attached!

', - }, - }, + 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: - '{"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}Download', - }, - }, + componentName: 'DynamicComponent', + fields: {}, params: {}, }, - { - name: 'div', - type: '', - contents: - '
', - 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 <p>field data</p> o'boy! "wow"', - }, - }, - }, -}; - -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: - '

Start Bootstrap can help you build better websites using the Bootstrap CSS framework! Just download your template and start going, no strings attached!

', - }, - }, - 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 <p>field data</p> o'boy! "wow"', + key: { + value: 'This is a some sample <p>field data</p> o'boy! "wow"', + }, }, }, }, From f3de831f24bd1051067a97150fe96398be060932 Mon Sep 17 00:00:00 2001 From: illiakovalenko Date: Fri, 21 Jun 2024 08:23:51 +0300 Subject: [PATCH 2/3] Updated CHANGELOG --- CHANGELOG.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index b62a5c55aa..5e618d69bc 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)) From ee9c9817e331b2d04edcc7afb1d232c734f25a13 Mon Sep 17 00:00:00 2001 From: illiakovalenko Date: Mon, 1 Jul 2024 10:11:40 +0300 Subject: [PATCH 3/3] Removed unused import --- .../sitecore-jss-react/src/enhancers/withPlaceholder.test.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/sitecore-jss-react/src/enhancers/withPlaceholder.test.tsx b/packages/sitecore-jss-react/src/enhancers/withPlaceholder.test.tsx index 6de7e7f8cd..425afe397c 100644 --- a/packages/sitecore-jss-react/src/enhancers/withPlaceholder.test.tsx +++ b/packages/sitecore-jss-react/src/enhancers/withPlaceholder.test.tsx @@ -15,7 +15,6 @@ import PropTypes from 'prop-types'; import { ComponentFactory } from '../components/sharedTypes'; import { ComponentRendering, - EditMode, LayoutServiceData, RouteData, } from '@sitecore-jss/sitecore-jss/layout';