From 5224ba8952882b4b86cf8db51df6cce6cea10585 Mon Sep 17 00:00:00 2001 From: yavorsk Date: Fri, 11 Oct 2024 11:42:27 +0300 Subject: [PATCH 1/5] add additional condition for rendering client scripts - do not render on client --- .../src/components/editing-scripts.component.ts | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/packages/sitecore-jss-angular/src/components/editing-scripts.component.ts b/packages/sitecore-jss-angular/src/components/editing-scripts.component.ts index 9113ae3a1c..51408b50ff 100644 --- a/packages/sitecore-jss-angular/src/components/editing-scripts.component.ts +++ b/packages/sitecore-jss-angular/src/components/editing-scripts.component.ts @@ -3,6 +3,7 @@ import { getJssPagesClientData } from '@sitecore-jss/sitecore-jss/editing'; import { JssStateService } from '../services/jss-state.service'; import { DOCUMENT } from '@angular/common'; import { EditMode, LayoutServicePageState } from '@sitecore-jss/sitecore-jss/layout'; +import { isServer } from '@sitecore-jss/sitecore-jss/utils'; /** * Component that renders editing scripts and client data for the current page in Sitecore Editor. @@ -23,10 +24,11 @@ export class EditingScriptsComponent implements OnInit { const state = this.stateService.stateValue; const { pageState, editMode, clientData, clientScripts } = state.sitecore?.context || {}; - // Don't render anything if not in editing mode + // Don't render anything if not in editing mode or not server side if ( pageState === LayoutServicePageState.Normal || - pageState === LayoutServicePageState.Preview + pageState === LayoutServicePageState.Preview || + !isServer() ) { return; } From 2ea2851b36490de007a73c47e09a002d9e4e319f Mon Sep 17 00:00:00 2001 From: yavorsk Date: Fri, 11 Oct 2024 14:22:52 +0300 Subject: [PATCH 2/5] add unit test and modify existing ones --- .../editing-scripts.component.spec.ts | 43 +++++++++++++++++++ 1 file changed, 43 insertions(+) diff --git a/packages/sitecore-jss-angular/src/components/editing-scripts.component.spec.ts b/packages/sitecore-jss-angular/src/components/editing-scripts.component.spec.ts index 2f002d0304..d60dfe3951 100644 --- a/packages/sitecore-jss-angular/src/components/editing-scripts.component.spec.ts +++ b/packages/sitecore-jss-angular/src/components/editing-scripts.component.spec.ts @@ -6,6 +6,7 @@ import { PAGES_EDITING_MARKER } from '@sitecore-jss/sitecore-jss/editing'; import { inject } from '@angular/core/testing'; import { JssStateService } from '../services/jss-state.service'; import { EditingScriptsComponent } from './editing-scripts.component'; +import * as utils from '@sitecore-jss/sitecore-jss/utils'; @Component({ selector: 'test-component', @@ -61,6 +62,8 @@ describe('', () => { }, }); + spyOnProperty(utils, 'isServer').and.returnValue(() => true); + fixture.detectChanges(); expect(_document.body.querySelector(`#${PAGES_EDITING_MARKER}`)).toBeNull(); @@ -93,6 +96,42 @@ describe('', () => { }, }); + spyOnProperty(utils, 'isServer').and.returnValue(() => true); + + fixture.detectChanges(); + + expect(_document.body.querySelector(`#${PAGES_EDITING_MARKER}`)).toBeNull(); + expect(_document.body.querySelector('#hrz-canvas-state')).toBeNull(); + expect(_document.body.querySelector('#hrz-canvas-verification-token')).toBeNull(); + expect( + _document.body.querySelector( + 'script[src="https://test.com/packages/page-extension/latest/page.js"]' + ) + ).toBeNull(); + expect( + _document.body.querySelector( + 'script[src="https://test.com/horizon/canvas/horizon.canvas.js"]' + ) + ).toBeNull(); + } + )); + + it('should not add editing scripts and client data when edit mode is Metadata and not serverside rendering', inject( + [JssStateService, DOCUMENT], + (stateService: JssStateService, _document: Document) => { + stateService.setState({ + sitecore: { + context: { + editMode: EditMode.Metadata, + pageState: LayoutServicePageState.Edit, + ...sharedData, + }, + route: null, + }, + }); + + spyOnProperty(utils, 'isServer').and.returnValue(() => false); + fixture.detectChanges(); expect(_document.body.querySelector(`#${PAGES_EDITING_MARKER}`)).toBeNull(); @@ -125,6 +164,8 @@ describe('', () => { }, }); + spyOnProperty(utils, 'isServer').and.returnValue(() => true); + fixture.detectChanges(); expect(_document.body.querySelector(`#${PAGES_EDITING_MARKER}`)).toBeDefined(); @@ -161,6 +202,8 @@ describe('', () => { }, }); + spyOnProperty(utils, 'isServer').and.returnValue(() => true); + fixture.detectChanges(); expect(_document.body.querySelector(`#${PAGES_EDITING_MARKER}`)).toBeNull(); From e7698959bc431f58b5eb9784e1f27a567b640a11 Mon Sep 17 00:00:00 2001 From: yavorsk Date: Fri, 11 Oct 2024 15:05:51 +0300 Subject: [PATCH 3/5] update wording --- .../src/components/editing-scripts.component.spec.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/sitecore-jss-angular/src/components/editing-scripts.component.spec.ts b/packages/sitecore-jss-angular/src/components/editing-scripts.component.spec.ts index d60dfe3951..1ffe601b73 100644 --- a/packages/sitecore-jss-angular/src/components/editing-scripts.component.spec.ts +++ b/packages/sitecore-jss-angular/src/components/editing-scripts.component.spec.ts @@ -116,7 +116,7 @@ describe('', () => { } )); - it('should not add editing scripts and client data when edit mode is Metadata and not serverside rendering', inject( + it('should not add editing scripts and client data when edit mode is Metadata and rendering is not server side', inject( [JssStateService, DOCUMENT], (stateService: JssStateService, _document: Document) => { stateService.setState({ From 7c785d23452a7b3afda76aae3c2bc7eeeed100c4 Mon Sep 17 00:00:00 2001 From: yavorsk Date: Fri, 11 Oct 2024 15:08:35 +0300 Subject: [PATCH 4/5] update changelog --- CHANGELOG.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index ac78458a35..561d00aee5 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -61,7 +61,7 @@ Our versioning strategy is as follows: - `scRichTextEmptyFieldEditingTemplate` for _scRichText_ - `scRouterLinkEmptyFieldEditingTemplate` for _scRouterLink_ - `scTextEmptyFieldEditingTemplate` for _scText_ -* `[sitecore-jss-angular]` `[templates/angular-xmcloud]` Render clientScripts / clientData. The new `sc-editing-scripts` component is exposed from `sitecore-jss-angular` package and required to be rendered on the page to enable Metadata Edit mode. ([#1924](https://github.com/Sitecore/jss/pull/1924)) +* `[sitecore-jss-angular]` `[templates/angular-xmcloud]` Render clientScripts / clientData. The new `sc-editing-scripts` component is exposed from `sitecore-jss-angular` package and required to be rendered on the page to enable Metadata Edit mode. ([#1924](https://github.com/Sitecore/jss/pull/1924))([#1948](https://github.com/Sitecore/jss/pull/1948)) * `[sitecore-jss]` GenericFieldValue model is updated to accept Date type ([#1916](https://github.com/Sitecore/jss/pull/1916)) * `[template/node-xmcloud-proxy]` `[sitecore-jss-proxy]` Introduced /api/healthz endpoint ([#1928](https://github.com/Sitecore/jss/pull/1928)) * `[sitecore-jss]` `[sitecore-jss-angular]` Render field metdata chromes in editMode metadata - in edit mode metadata in Pages, angular package field directives will render wrapping `code` elements with field metadata required for editing; ([#1926](https://github.com/Sitecore/jss/pull/1926)) From 9da94797b979835011e65413db725a43d4f5333c Mon Sep 17 00:00:00 2001 From: Artem Alexeyenko Date: Fri, 11 Oct 2024 14:56:27 -0400 Subject: [PATCH 5/5] have less spy assignments for isServer in unit test --- .../editing-scripts.component.spec.ts | 19 +++++++++++-------- 1 file changed, 11 insertions(+), 8 deletions(-) diff --git a/packages/sitecore-jss-angular/src/components/editing-scripts.component.spec.ts b/packages/sitecore-jss-angular/src/components/editing-scripts.component.spec.ts index 1ffe601b73..7c3c6e8e2e 100644 --- a/packages/sitecore-jss-angular/src/components/editing-scripts.component.spec.ts +++ b/packages/sitecore-jss-angular/src/components/editing-scripts.component.spec.ts @@ -36,6 +36,14 @@ describe('', () => { }, }; + beforeAll(() => { + jasmine.getEnv().allowRespy(true); + }); + + afterAll(() => { + jasmine.getEnv().allowRespy(false); + }); + beforeEach(() => { TestBed.configureTestingModule({ declarations: [TestComponent, EditingScriptsComponent], @@ -45,6 +53,7 @@ describe('', () => { { provide: DOCUMENT, useValue: document.implementation.createHTMLDocument() }, ], }).compileComponents(); + spyOnProperty(utils, 'isServer').and.returnValue(() => true); fixture = TestBed.createComponent(TestComponent); }); @@ -62,8 +71,6 @@ describe('', () => { }, }); - spyOnProperty(utils, 'isServer').and.returnValue(() => true); - fixture.detectChanges(); expect(_document.body.querySelector(`#${PAGES_EDITING_MARKER}`)).toBeNull(); @@ -96,8 +103,6 @@ describe('', () => { }, }); - spyOnProperty(utils, 'isServer').and.returnValue(() => true); - fixture.detectChanges(); expect(_document.body.querySelector(`#${PAGES_EDITING_MARKER}`)).toBeNull(); @@ -133,6 +138,8 @@ describe('', () => { spyOnProperty(utils, 'isServer').and.returnValue(() => false); fixture.detectChanges(); + // reset spy state + spyOnProperty(utils, 'isServer').and.returnValue(() => true); expect(_document.body.querySelector(`#${PAGES_EDITING_MARKER}`)).toBeNull(); expect(_document.body.querySelector('#hrz-canvas-state')).toBeNull(); @@ -164,8 +171,6 @@ describe('', () => { }, }); - spyOnProperty(utils, 'isServer').and.returnValue(() => true); - fixture.detectChanges(); expect(_document.body.querySelector(`#${PAGES_EDITING_MARKER}`)).toBeDefined(); @@ -202,8 +207,6 @@ describe('', () => { }, }); - spyOnProperty(utils, 'isServer').and.returnValue(() => true); - fixture.detectChanges(); expect(_document.body.querySelector(`#${PAGES_EDITING_MARKER}`)).toBeNull();