@wordpress/e2e-tests 7.22.2 → 7.22.3

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/e2e-tests",
-	"version": "7.22.2",
+	"version": "7.22.3",
 	"description": "End-To-End (E2E) tests for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -24,11 +24,11 @@
 	},
 	"dependencies": {
 		"@wordpress/e2e-test-utils": "^10.22.1",
-		"@wordpress/interactivity": "^5.0.1",
-		"@wordpress/interactivity-router": "^1.1.1",
+		"@wordpress/interactivity": "^5.0.2",
+		"@wordpress/interactivity-router": "^1.1.2",
 		"@wordpress/jest-console": "^7.22.1",
 		"@wordpress/jest-puppeteer-axe": "^6.22.1",
-		"@wordpress/scripts": "^27.2.2",
+		"@wordpress/scripts": "^27.2.3",
 		"@wordpress/url": "^3.52.1",
 		"chalk": "^4.0.0",
 		"expect-puppeteer": "^4.4.0",
@@ -46,5 +46,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "b12d75c5c5256fda2a0509bb432e20ddd3354d5e"
+	"gitHead": "864c1c553cb284def3bd5c907998da45f5c143ea"
 }

package/plugins/interactive-blocks/directive-context/render.php

@@ -18,6 +18,7 @@ wp_enqueue_script_module( 'directive-context-view' );
 		>
 			<!-- rendered during hydration -->
 		</pre>
+		<button data-testid="parent replace" data-wp-on--click="actions.replaceObj">Replace obj</button>
 		<button
 			data-testid="parent prop1"
 			name="prop1"
@@ -50,6 +51,14 @@ wp_enqueue_script_module( 'directive-context-view' );
 		>
 			obj.prop5
 		</button>
+		<button
+			data-testid="parent new"
+			name="new"
+			value="modifiedFromParent"
+			data-wp-on--click="actions.updateContext"
+		>
+			new
+		</button>
 		<div
 			data-wp-context='{ "prop2":"child","prop3":"child","obj":{"prop5":"child","prop6":"child"},"array":[4,5,6] }'
 		>
@@ -59,6 +68,7 @@ wp_enqueue_script_module( 'directive-context-view' );
 			>
 				<!-- rendered during hydration -->
 			</pre>
+			<button data-testid="child replace" data-wp-on--click="actions.replaceObj">Replace obj</button>
 			<button
 				data-testid="child prop1"
 				name="prop1"
@@ -127,10 +137,15 @@ wp_enqueue_script_module( 'directive-context-view' );
 	data-wp-router-region="navigation"
 	data-wp-context='{ "text": "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>
 	<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>
 	<button data-testid="navigate" data-wp-on--click="actions.navigate">Navigate</button>
 	<button data-testid="async navigate" data-wp-on--click="actions.asyncNavigate">Async Navigate</button>
 </div>
@@ -143,3 +158,41 @@ wp_enqueue_script_module( 'directive-context-view' );
 	<span data-testid="non-default suffix context" data-wp-text="context.text"></span>
 	<span data-testid="default suffix context" data-wp-text="context.defaultText"></span>
 </div>
+
+<div
+	data-wp-interactive='directive-context'
+	data-wp-context='{ "list": [
+		{ "id": 1, "text": "Text 1" },
+		{ "id": 2, "text": "Text 2" }
+	] }'
+>
+	<button data-testid="select 1" data-wp-on--click="actions.selectItem" value=1>Select 1</button>
+	<button data-testid="select 2" data-wp-on--click="actions.selectItem" value=2>Select 2</button>
+	<div data-testid="selected" data-wp-text="state.selected"></div>
+</div>
+
+<div
+	data-wp-interactive="directive-context-watch"
+	data-wp-context='{"counter":0}'
+>
+	<button
+		data-testid="counter parent"
+		data-wp-on--click="actions.increment"
+		data-wp-text="context.counter"
+	></button>
+	<div
+		data-wp-context='{"counter":0, "changes":0}'
+		data-wp-watch="callbacks.countChanges"
+	>
+		<button
+			data-testid="counter child"
+			data-wp-on--click="actions.increment"
+			data-wp-text="context.counter"
+		>
+		</button>
+		<span
+			data-testid="counter changes"
+			data-wp-text="context.changes"
+		></span>
+	</div>
+</div>

package/plugins/interactive-blocks/directive-context/view.js

@@ -9,6 +9,10 @@ store( 'directive-context', {
 			const ctx = getContext();
 			return JSON.stringify( ctx, undefined, 2 );
 		},
+		get selected() {
+			const { list, selected } = getContext();
+			return list.find( ( obj ) => obj === selected )?.text;
+		}
 	},
 	actions: {
 		updateContext( event ) {
@@ -22,6 +26,15 @@ store( 'directive-context', {
 			const ctx = getContext();
 			ctx.text = ctx.text === 'Text 1' ? 'Text 2' : 'Text 1';
 		},
+		selectItem( event ) {
+			const ctx = getContext();
+			const value = parseInt( event.target.value );
+			ctx.selected = ctx.list.find( ( { id } ) => id === value );
+		},
+		replaceObj() {
+			const ctx = getContext();
+			ctx.obj = { overwritten: true };
+		}
 	},
 } );
 
@@ -29,12 +42,17 @@ const html = `
 		<div
 			data-wp-interactive='{ "namespace": "directive-context-navigate" }'
 			data-wp-router-region="navigation"
-			data-wp-context='{ "text": "second page" }'
+			data-wp-context='{ "text": "second page", "text2": "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>
 			<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 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>
 			<button data-testid="navigate" data-wp-on--click="actions.navigate">Navigate</button>
 			<button data-testid="async navigate" data-wp-on--click="actions.asyncNavigate">Async Navigate</button>
 		</div>`;
@@ -49,13 +67,17 @@ const { actions } = store( 'directive-context-navigate', {
 			const ctx = getContext();
 			ctx.newText = 'some new text';
 		},
+		addText2() {
+			const ctx = getContext();
+			ctx.text2 = 'some new text';
+		},
 		navigate() {
 			return import( '@wordpress/interactivity-router' ).then(
-				( { actions: routerActions } ) =>
-					routerActions.navigate(
-						window.location,
-						{ force: true, html },
-					)
+				( { actions: routerActions } ) => {
+					const url = new URL( window.location.href );
+					url.searchParams.set( 'next_page', 'true' );
+					return routerActions.navigate( url, { force: true, html } );
+				}
 			);
 
 		},
@@ -66,3 +88,21 @@ const { actions } = store( 'directive-context-navigate', {
 		},
 	},
 } );
+
+store( 'directive-context-watch', {
+	actions: {
+		increment: () => {
+			const ctx = getContext();
+			ctx.counter = ctx.counter + 1;
+		},
+	},
+	callbacks: {
+		countChanges: () => {
+			const ctx = getContext();
+			// Subscribe to changes in counter.
+			// eslint-disable-next-line no-unused-expressions
+			ctx.counter;
+			ctx.changes = ctx.changes + 1;
+		},
+	},
+});

package/plugins/interactive-blocks/router-navigate/render.php

@@ -15,6 +15,13 @@ if ( $attributes['disableNavigation'] ) {
 		array( 'clientNavigationDisabled' => true )
 	);
 }
+
+if ( isset( $attributes['data'] ) ) {
+	wp_interactivity_state(
+		'router',
+		array( 'data' => $attributes['data'] )
+	);
+}
 ?>
 
 <div
@@ -24,8 +31,12 @@ if ( $attributes['disableNavigation'] ) {
 	<h2 data-testid="title"><?php echo $attributes['title']; ?></h2>
 
 	<output
-		data-testid="router navigations"
-		data-wp-text="state.navigations"
+		data-testid="router navigations pending"
+		data-wp-text="state.navigations.pending"
+	>NaN</output>
+	<output
+		data-testid="router navigations count"
+		data-wp-text="state.navigations.count"
 	>NaN</output>
 	<output
 		data-testid="router status"
@@ -39,24 +50,30 @@ if ( $attributes['disableNavigation'] ) {
 		Timeout <span data-wp-text="state.timeout">NaN</span>
 	</button>
 
-	<?php
-	if ( isset( $attributes['links'] ) ) {
-		foreach ( $attributes['links'] as $key => $link ) {
-			$i = $key += 1;
-			echo <<<HTML
-			<a
-				data-testid="link $i"
-				data-wp-on--click="actions.navigate"
-				href="$link"
-			>link $i</a>
-			<a
-				data-testid="link $i with hash"
-				data-wp-on--click="actions.navigate"
-				data-force-navigation="true"
-				href="$link#link-$i-with-hash"
-			>link $i with hash</a>
+	<nav>
+		<?php
+		if ( isset( $attributes['links'] ) ) {
+			foreach ( $attributes['links'] as $key => $link ) {
+				$i = $key += 1;
+				echo <<<HTML
+				<a
+					data-testid="link $i"
+					data-wp-on--click="actions.navigate"
+					href="$link"
+				>link $i</a>
+				<a
+					data-testid="link $i with hash"
+					data-wp-on--click="actions.navigate"
+					data-force-navigation="true"
+					href="$link#link-$i-with-hash"
+				>link $i with hash</a>
 HTML;
+			}
 		}
-	}
-	?>
+		?>
+	</nav>
+	<div data-testid="getterProp" data-wp-text="state.data.getterProp"></div>
+	<div data-testid="prop1" data-wp-text="state.data.prop1"></div>
+	<div data-testid="prop2" data-wp-text="state.data.prop2"></div>
+	<div data-testid="prop3" data-wp-text="state.data.prop3"></div>
 </div>

package/plugins/interactive-blocks/router-navigate/view.js

@@ -6,14 +6,23 @@ import { store } from '@wordpress/interactivity';
 const { state } = store( 'router', {
 	state: {
 		status: 'idle',
-		navigations: 0,
+		navigations: {
+			pending: 0,
+			count: 0,
+		},
 		timeout: 10000,
+		data: {
+			get getterProp() {
+				return `value from getter (${ state.data.prop1 })`;
+			}
+		}
 	},
 	actions: {
 		*navigate( e ) {
 			e.preventDefault();
 
-			state.navigations += 1;
+			state.navigations.count += 1;
+			state.navigations.pending += 1;
 			state.status = 'busy';
 
 			const force = e.target.dataset.forceNavigation === 'true';
@@ -24,9 +33,9 @@ const { state } = store( 'router', {
 			);
 			yield actions.navigate( e.target.href, { force, timeout } );
 
-			state.navigations -= 1;
+			state.navigations.pending -= 1;
 
-			if ( state.navigations === 0 ) {
+			if ( state.navigations.pending === 0 ) {
 				state.status = 'idle';
 			}
 		},

package/plugins/interactive-blocks/store/block.json

@@ -0,0 +1,15 @@
+{
+	"$schema": "https://schemas.wp.org/trunk/block.json",
+	"apiVersion": 2,
+	"name": "test/store",
+	"title": "E2E Interactivity tests - store definition",
+	"category": "text",
+	"icon": "heart",
+	"description": "",
+	"supports": {
+		"interactivity": true
+	},
+	"textdomain": "e2e-interactivity",
+	"viewScript": "store-view",
+	"render": "file:./render.php"
+}

package/plugins/interactive-blocks/store/render.php

@@ -0,0 +1,17 @@
+<?php
+/**
+ * HTML for testing the directive `data-wp-bind`.
+ *
+ * @package gutenberg-test-interactive-blocks
+ */
+
+wp_enqueue_script_module( 'store-view' );
+?>
+
+<div data-wp-interactive="test/store">
+	<div
+		data-testid="non-plain object"
+		data-wp-text="state.isNotProxified"
+		data-wp-init="callbacks.init"
+	></div>
+</div>

package/plugins/interactive-blocks/store/view.js

@@ -0,0 +1,20 @@
+/**
+ * WordPress dependencies
+ */
+import { store, getElement } from '@wordpress/interactivity';
+
+
+const { state } = store( 'test/store', {
+	state: {
+		get isNotProxified() {
+			const { ref } = getElement();
+			return state.elementRef === ref;
+		}
+	},
+	callbacks: {
+		init() {
+			const { ref } = getElement();
+			state.elementRef = ref; // HTMLElement
+		}
+	}
+} )