From 7e6f530a72dd9117946dd7e7fa9ab5c29f01d13d Mon Sep 17 00:00:00 2001
From: David Arenas <david.arenas@automattic.com>
Date: Tue, 17 Sep 2024 13:48:06 +0200
Subject: [PATCH] Add simple test for server context

---
 .../interactive-blocks/directive-context/render.php   |  4 +++-
 .../interactive-blocks/directive-context/view.js      | 11 +++++++++--
 packages/interactivity/src/index.ts                   |  2 +-
 .../e2e/specs/interactivity/directive-context.spec.ts |  7 +++++++
 4 files changed, 20 insertions(+), 4 deletions(-)

diff --git a/packages/e2e-tests/plugins/interactive-blocks/directive-context/render.php b/packages/e2e-tests/plugins/interactive-blocks/directive-context/render.php
index 76635e37a2608..04c05ac7fd18c 100644
--- a/packages/e2e-tests/plugins/interactive-blocks/directive-context/render.php
+++ b/packages/e2e-tests/plugins/interactive-blocks/directive-context/render.php
@@ -151,7 +151,7 @@
 <div
 	data-wp-interactive='{"namespace": "directive-context-navigate"}'
 	data-wp-router-region="navigation"
-	data-wp-context='{ "text": "first page" }'
+	data-wp-context='{ "text": "first page", "serverText": "first page" }'
 >
 	<div data-wp-context='{}'>
 		<div data-testid="navigation inherited text" data-wp-text="context.text"></div>
@@ -159,6 +159,8 @@
 	</div>
 	<div data-testid="navigation text" data-wp-text="context.text"></div>
 	<div data-testid="navigation new text" data-wp-text="context.newText"></div>
+	<div data-testid="navigation server text" data-wp-text="context.serverText"></div>
+	<div data-testid="server text" data-wp-text="context.serverText" data-wp-watch="callbacks.updateServerText"></div>
 	<button data-testid="toggle text" data-wp-on--click="actions.toggleText">Toggle Text</button>
 	<button data-testid="add new text" data-wp-on--click="actions.addNewText">Add New Text</button>
 	<button data-testid="add text2" data-wp-on--click="actions.addText2">Add Text 2</button>
diff --git a/packages/e2e-tests/plugins/interactive-blocks/directive-context/view.js b/packages/e2e-tests/plugins/interactive-blocks/directive-context/view.js
index 7515ad5ad9226..202aa8cd7f7a5 100644
--- a/packages/e2e-tests/plugins/interactive-blocks/directive-context/view.js
+++ b/packages/e2e-tests/plugins/interactive-blocks/directive-context/view.js
@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { store, getContext } from '@wordpress/interactivity';
+import { store, getContext, getServerContext } from '@wordpress/interactivity';
 
 store( 'directive-context', {
 	state: {
@@ -55,7 +55,7 @@ const html = `
 		<div
 			data-wp-interactive="directive-context-navigate"
 			data-wp-router-region="navigation"
-			data-wp-context='{ "text": "second page", "text2": "second page" }'
+			data-wp-context='{ "text": "second page", "text2": "second page", "serverText": "second page" }'
 		>
 			<div data-wp-context='{}'>
 				<div data-testid="navigation inherited text" data-wp-text="context.text"></div>
@@ -63,6 +63,7 @@ const html = `
 			</div>
 			<div data-testid="navigation text" data-wp-text="context.text"></div>
 			<div data-testid="navigation new text" data-wp-text="context.newText"></div>
+			<div data-testid="navigation server text" data-wp-text="context.serverText"></div>
 			<button data-testid="toggle text" data-wp-on--click="actions.toggleText">Toggle Text</button>
 			<button data-testid="add new text" data-wp-on--click="actions.addNewText">Add New Text</button>
 			<button data-testid="add text2" data-wp-on--click="actions.addText2">Add Text 2</button>
@@ -99,6 +100,12 @@ const { actions } = store( 'directive-context-navigate', {
 			ctx.newText = 'changed from async action';
 		},
 	},
+	callbacks: {
+		updateServerText() {
+			const ctx = getContext();
+			ctx.serverText = getServerContext().serverText;
+		},
+	},
 } );
 
 store( 'directive-context-watch', {
diff --git a/packages/interactivity/src/index.ts b/packages/interactivity/src/index.ts
index 336c2a97226db..cd34ce3f12a17 100644
--- a/packages/interactivity/src/index.ts
+++ b/packages/interactivity/src/index.ts
@@ -17,7 +17,7 @@ import { parseServerData, populateServerData } from './store';
 import { proxifyState } from './proxies';
 
 export { store, getConfig } from './store';
-export { getContext, getElement } from './scopes';
+export { getContext, getServerContext, getElement } from './scopes';
 export {
 	withScope,
 	useWatch,
diff --git a/test/e2e/specs/interactivity/directive-context.spec.ts b/test/e2e/specs/interactivity/directive-context.spec.ts
index 0a27fe258d5a8..d33430770590a 100644
--- a/test/e2e/specs/interactivity/directive-context.spec.ts
+++ b/test/e2e/specs/interactivity/directive-context.spec.ts
@@ -395,4 +395,11 @@ test.describe( 'data-wp-context', () => {
 		await expect( childProp ).toHaveText( 'fromChildNs' );
 		await expect( parentProp ).toHaveText( 'fromParentNs' );
 	} );
+
+	test( 'should update server context on navigation', async ( { page } ) => {
+		const element = page.getByTestId( 'navigation server text' );
+		await expect( element ).toHaveText( 'first page' );
+		await page.getByTestId( 'navigate' ).click();
+		await expect( element ).toHaveText( 'second page' );
+	} );
 } );