@wordpress/e2e-tests 9.3.0 → 9.3.1-next.v.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/e2e-tests",
-	"version": "9.3.0",
+	"version": "9.3.1-next.v.0+b8934fcf9",
 	"description": "Test plugins and mu-plugins for E2E tests in WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -24,8 +24,8 @@
 		"npm": ">=8.19.2"
 	},
 	"dependencies": {
-		"@wordpress/interactivity": "^6.38.0",
-		"@wordpress/interactivity-router": "^2.38.0"
+		"@wordpress/interactivity": "^6.38.1-next.v.0+b8934fcf9",
+		"@wordpress/interactivity-router": "^2.38.2-next.v.0+b8934fcf9"
 	},
 	"peerDependencies": {
 		"jest": ">=29",
@@ -36,5 +36,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "50c4c0f51e4797c217946ce42adfaa5eb026f33f"
+	"gitHead": "17529010285784fd2e735348a28391c79de87c88"
 }

package/plugins/interactive-blocks/hydration-timing/block.json

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

package/plugins/interactive-blocks/hydration-timing/render.php

@@ -0,0 +1,31 @@
+<?php
+/**
+ * HTML for testing hydration timing with delayed module loading.
+ *
+ * @package gutenberg-test-interactive-blocks
+ *
+ * @phpcs:disable VariableAnalysis.CodeAnalysis.VariableAnalysis.UndefinedVariable
+ */
+?>
+
+<div
+	data-wp-interactive="test/hydration-timing"
+	<?php echo wp_interactivity_data_wp_context( array( 'initialized' => false ) ); ?>
+>
+	<p
+		data-wp-text="state.moduleLoaded"
+		data-testid="module-loaded"
+	>no</p>
+
+	<p
+		data-wp-text="context.initialized"
+		data-testid="context-initialized"
+	>no</p>
+
+	<div
+		data-wp-init="callbacks.init"
+		data-testid="hydration-status"
+	>
+		Hydration test block
+	</div>
+</div>

package/plugins/interactive-blocks/hydration-timing/view.asset.php

@@ -0,0 +1 @@
+<?php return array( 'dependencies' => array( '@wordpress/interactivity' ) );

package/plugins/interactive-blocks/hydration-timing/view.js

@@ -0,0 +1,23 @@
+/**
+ * WordPress dependencies
+ */
+import { store, getContext } from '@wordpress/interactivity';
+
+// This is the "fast" module that loads immediately. It imports
+// @wordpress/interactivity, which initializes the runtime.
+//
+// The test pairs this with a "slow" module (hydration-timing-slow) that is
+// artificially delayed. The race condition occurs when this fast module
+// triggers hydration before the slow module has finished loading.
+
+store( 'test/hydration-timing', {
+	state: {
+		moduleLoaded: 'yes',
+	},
+	callbacks: {
+		init() {
+			const context = getContext();
+			context.initialized = true;
+		},
+	},
+} );

package/plugins/interactive-blocks/hydration-timing-async/block.json

@@ -0,0 +1,15 @@
+{
+	"$schema": "https://schemas.wp.org/trunk/block.json",
+	"apiVersion": 3,
+	"name": "test/hydration-timing-async",
+	"title": "E2E Interactivity tests - hydration timing async import",
+	"category": "text",
+	"icon": "heart",
+	"description": "",
+	"supports": {
+		"interactivity": true
+	},
+	"textdomain": "e2e-interactivity",
+	"viewScriptModule": "file:./view.js",
+	"render": "file:./render.php"
+}

package/plugins/interactive-blocks/hydration-timing-async/render.php

@@ -0,0 +1,36 @@
+<?php
+/**
+ * HTML for testing hydration timing - async import block.
+ *
+ * This block's view module dynamically imports @wordpress/interactivity
+ * on DOMContentLoaded, simulating a lazy-loading scenario. The test verifies
+ * that hydration still occurs even when the library is loaded after
+ * DOMContentLoaded has fired.
+ *
+ * @package gutenberg-test-interactive-blocks
+ *
+ * @phpcs:disable VariableAnalysis.CodeAnalysis.VariableAnalysis.UndefinedVariable
+ */
+?>
+
+<div
+	data-wp-interactive="test/hydration-timing-async"
+	<?php echo wp_interactivity_data_wp_context( array( 'hydrated' => false ) ); ?>
+>
+	<p
+		data-wp-text="state.asyncModuleLoaded"
+		data-testid="async-module-loaded"
+	>no</p>
+
+	<p
+		data-wp-text="context.hydrated"
+		data-testid="async-hydrated"
+	>no</p>
+
+	<div
+		data-wp-init="callbacks.init"
+		data-testid="async-hydration-status"
+	>
+		Async import hydration test block
+	</div>
+</div>

package/plugins/interactive-blocks/hydration-timing-async/view.asset.php

@@ -0,0 +1,8 @@
+<?php return array(
+	'dependencies' => array(
+		array(
+			'id'     => '@wordpress/interactivity',
+			'import' => 'dynamic',
+		),
+	),
+);

package/plugins/interactive-blocks/hydration-timing-async/view.js

@@ -0,0 +1,29 @@
+/**
+ * This module dynamically imports @wordpress/interactivity on DOMContentLoaded.
+ *
+ * This simulates a lazy-loading scenario where the Interactivity API is not
+ * statically imported. The test verifies that hydration still occurs even
+ * when the library is loaded after DOMContentLoaded has already fired.
+ */
+
+const initStore = async () => {
+	const { store, getContext } = await import( '@wordpress/interactivity' );
+
+	store( 'test/hydration-timing-async', {
+		state: {
+			asyncModuleLoaded: 'yes',
+		},
+		callbacks: {
+			// TODO: this could be unavailable during hydration. Fix
+			// `data-wp-init` to support that case.
+			init() {
+				const context = getContext();
+				context.hydrated = true;
+			},
+		},
+	} );
+};
+
+document.addEventListener( 'DOMContentLoaded', () =>
+	setTimeout( initStore, 1 )
+);

package/plugins/interactive-blocks/hydration-timing-slow/block.json

@@ -0,0 +1,15 @@
+{
+	"$schema": "https://schemas.wp.org/trunk/block.json",
+	"apiVersion": 3,
+	"name": "test/hydration-timing-slow",
+	"title": "E2E Interactivity tests - hydration timing slow module",
+	"category": "text",
+	"icon": "heart",
+	"description": "",
+	"supports": {
+		"interactivity": true
+	},
+	"textdomain": "e2e-interactivity",
+	"viewScriptModule": "file:./view.js",
+	"render": "file:./render.php"
+}

package/plugins/interactive-blocks/hydration-timing-slow/render.php

@@ -0,0 +1,36 @@
+<?php
+/**
+ * HTML for testing hydration timing - slow module block.
+ *
+ * This block's view module will be artificially delayed in the test
+ * to simulate a slow network connection. The test verifies that
+ * hydration waits for this module to load even when other modules
+ * that import @wordpress/interactivity have already been evaluated.
+ *
+ * @package gutenberg-test-interactive-blocks
+ *
+ * @phpcs:disable VariableAnalysis.CodeAnalysis.VariableAnalysis.UndefinedVariable
+ */
+?>
+
+<div
+	data-wp-interactive="test/hydration-timing"
+	<?php echo wp_interactivity_data_wp_context( array( 'slowInitialized' => false ) ); ?>
+>
+	<p
+		data-wp-text="state.slowModuleLoaded"
+		data-testid="slow-module-loaded"
+	>no</p>
+
+	<p
+		data-wp-text="context.slowInitialized"
+		data-testid="slow-context-initialized"
+	>no</p>
+
+	<div
+		data-wp-init="callbacks.slowInit"
+		data-testid="slow-hydration-status"
+	>
+		Slow module hydration test block
+	</div>
+</div>

package/plugins/interactive-blocks/hydration-timing-slow/view.asset.php

@@ -0,0 +1 @@
+<?php return array( 'dependencies' => array( '@wordpress/interactivity' ) );

package/plugins/interactive-blocks/hydration-timing-slow/view.js

@@ -0,0 +1,22 @@
+/**
+ * WordPress dependencies
+ */
+import { store, getContext } from '@wordpress/interactivity';
+
+// This module will be artificially delayed in the test.
+// It also imports @wordpress/interactivity, so when it's evaluated,
+// the interactivity runtime will have already been initialized by
+// the fast module. The test verifies that hydration waits for this
+// module to finish loading before running.
+
+store( 'test/hydration-timing', {
+	state: {
+		slowModuleLoaded: 'yes',
+	},
+	callbacks: {
+		slowInit() {
+			const context = getContext();
+			context.slowInitialized = true;
+		},
+	},
+} );

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

@@ -11,6 +11,7 @@
 <section>
 	<h2>Region 1</h2>
 	<div
+		data-testid="region-1"
 		data-wp-interactive="router-regions"
 		data-wp-router-region="region-1"
 	>
@@ -54,8 +55,11 @@
 <section>
 	<h2>Region 2</h2>
 	<div
+		data-testid="region-2"
+		data-wp-key="region-2"
 		data-wp-interactive="router-regions"
 		data-wp-router-region="region-2"
+		data-wp-run="callbacks.nope"
 	>
 		<p
 			data-testid="region-2-text"
@@ -113,6 +117,7 @@
 	<!-- Router region inside data-wp-interactive -->
 	<div
 		data-testid="valid-inside-interactive"
+		data-wp-key="valid-inside-interactive"
 		data-wp-interactive="router-regions"
 		data-wp-router-region="valid-inside-interactive"
 		data-wp-context='{ "counter": { "value": 0 } }'
@@ -131,6 +136,7 @@
 		<!-- Router region inside data-wp-router-region -->
 		<div
 			data-testid="valid-inside-router-region"
+			data-wp-key="valid-inside-router-region"
 			data-wp-interactive="router-regions"
 			data-wp-router-region="valid-inside-router-region"
 			data-wp-context='{ "counter": { "value": 0 } }'
@@ -192,6 +198,7 @@
 			data-wp-interactive="router-regions"
 			data-wp-router-region='$region_data'
 			data-testid="$region_id"
+			data-wp-key="$region_id"
 			$has_directives
 		>
 			<div $context_data>

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

@@ -64,5 +64,8 @@ const { state } = store( 'router-regions', {
 		init() {
 			state.initCount += 1;
 		},
+		nope() {
+			// This function does nothing.
+		},
 	},
 } );