[sitecore-jss-proxy] Ensure page variants can be switched in Pages

Sitecore · Nov 13, 2024 · 0a608e2 · 0a608e2
1 parent 1a21473
commit 0a608e2
Show file tree

Hide file tree

Showing 2 changed files with 62 additions and 0 deletions.
diff --git a/packages/sitecore-jss-proxy/src/middleware/editing/render.test.ts b/packages/sitecore-jss-proxy/src/middleware/editing/render.test.ts
@@ -4,6 +4,7 @@ import sinon from 'sinon';
 import express from 'express';
 import request from 'supertest';
 import { editingRouter, EditingRouterConfig } from './index';
+import { getPersonalizeLayoutData } from '../../personalize/test-data/personalizeData';
 import { debug, GraphQLRequestClient } from '@sitecore-jss/sitecore-jss';
 import {
   GraphQLEditingService,
@@ -328,6 +329,49 @@ describe('editingRouter - /editing/render', () => {
       .end(done);
   });
 
+  it('should response 200 status code when layout is personalized and renderView returns result', (done) => {
+    const layoutData = getPersonalizeLayoutData('default');
+    const dictionary = {};
+    const personalizeQs = {
+      ...validQS,
+      sc_variant: 'mountain-bike-audience',
+    };
+    fetchEditingDataStub.resolves({
+      layoutData,
+      dictionary,
+    });
+
+    renderView.callsFake((callback) => callback(null, { html: '<div>Hello World</div>' }));
+
+    app.use(
+      '/api/editing',
+      editingRouter({
+        ...defaultOptions,
+        render: {
+          ...defaultOptions.render,
+          renderView,
+        },
+      })
+    );
+
+    const personalizedLayoutData = getPersonalizeLayoutData('mountain-bike-audience');
+
+    request(app)
+      .get('/api/editing/render')
+      .query(personalizeQs)
+      .expect(200, '<div>Hello World</div>')
+      .expect('Content-Security-Policy', `${getSCPHeader()}`)
+      .expect(() => {
+        expect(fetchEditingDataStub.calledOnceWith(fetchEditingDataArgs)).to.be.true;
+        expect(
+          renderView.calledOnceWith(sinon.match.func, '/', personalizedLayoutData, {
+            dictionary,
+          })
+        ).to.be.true;
+      })
+      .end(done);
+  });
+
   it('should response 200 status code when renderView return result and custom endpoint path is used', (done) => {
     const layoutData = {
       sitecore: {

diff --git a/packages/sitecore-jss-proxy/src/middleware/editing/render.ts b/packages/sitecore-jss-proxy/src/middleware/editing/render.ts
@@ -7,6 +7,12 @@ import {
   EDITING_ALLOWED_ORIGINS,
   RenderMetadataQueryParams,
 } from '@sitecore-jss/sitecore-jss/editing';
+import { PersonalizeHelper } from '../../personalize';
+import {
+  DEFAULT_VARIANT,
+  getGroomedVariantIds,
+  personalizeLayout,
+} from '@sitecore-jss/sitecore-jss/personalize';
 
 /**
  * Configuration for the editing render endpoint
@@ -26,6 +32,10 @@ export type EditingRenderEndpointOptions = {
    * The appRenderer will produce the requested route's html
    */
   renderView: AppRenderer;
+  /**
+   * Personalize helper instance passed from proxy app
+   */
+  personalizeHelper?: PersonalizeHelper;
 };
 
 type MetadataRequest = Request & { query: RenderMetadataQueryParams };
@@ -80,6 +90,14 @@ export const editingRenderMiddleware = (config: EditingRenderEndpointOptions) =>
       throw new Error(`Unable to fetch editing data for ${JSON.stringify(query)}`);
     }
 
+    const variantIds = query.sc_variant?.split(',') || [DEFAULT_VARIANT];
+    const personalizeData = getGroomedVariantIds(variantIds);
+    personalizeLayout(
+      data.layoutData,
+      personalizeData.variantId,
+      personalizeData.componentVariantIds
+    );
+
     const viewBag = { dictionary: data.dictionary };
 
     config.renderView(