diff --git a/CHANGELOG.md b/CHANGELOG.md index 813bd3fba0..057a0aa7aa 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -62,7 +62,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)) 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..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 @@ -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', @@ -35,6 +36,14 @@ describe('', () => { }, }; + beforeAll(() => { + jasmine.getEnv().allowRespy(true); + }); + + afterAll(() => { + jasmine.getEnv().allowRespy(false); + }); + beforeEach(() => { TestBed.configureTestingModule({ declarations: [TestComponent, EditingScriptsComponent], @@ -44,6 +53,7 @@ describe('', () => { { provide: DOCUMENT, useValue: document.implementation.createHTMLDocument() }, ], }).compileComponents(); + spyOnProperty(utils, 'isServer').and.returnValue(() => true); fixture = TestBed.createComponent(TestComponent); }); @@ -111,6 +121,42 @@ describe('', () => { } )); + 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({ + sitecore: { + context: { + editMode: EditMode.Metadata, + pageState: LayoutServicePageState.Edit, + ...sharedData, + }, + route: null, + }, + }); + + 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(); + 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 add editing scripts and client data when edit mode is Metadata', inject( [JssStateService, DOCUMENT], (stateService: JssStateService, _document: Document) => { 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; }