Add simple test for server context

WordPress · Sep 18, 2024 · 7e6f530 · 7e6f530
1 parent d81f58d
commit 7e6f530
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 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
@@ -151,14 +151,16 @@
 <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>
 		<div data-testid="navigation inherited text2" data-wp-text="context.text2"></div>
 	</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
@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { store, getContext } from '@wordpress/interactivity';
+import { store, getContext, getServerContext } from '@wordpress/interactivity';
 
 store( 'directive-context', {
 	state: {
@@ -55,14 +55,15 @@ 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>
 				<div data-testid="navigation inherited text2" data-wp-text="context.text2"></div>
 			</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
@@ -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
@@ -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' );
+	} );
 } );