@wordpress/e2e-tests 7.20.0 → 7.21.1

package/plugins/interactive-blocks/directive-on-document/view.js

@@ -0,0 +1,39 @@
+/**
+ * WordPress dependencies
+ */
+import { store, directive } from '@wordpress/interactivity';
+
+// Mock `data-wp-show` directive to test when things are removed from the
+// DOM.  Replace with `data-wp-show` when it's ready.
+directive(
+	'show-mock',
+	( { directives: { 'show-mock': showMock }, element, evaluate } ) => {
+		const entry = showMock.find( ( { suffix } ) => suffix === 'default' );
+		if ( ! evaluate( entry ) ) {
+			return null;
+		}
+		return element;
+	}
+);
+
+const { state } = store( 'directive-on-document', {
+	state: {
+		counter: 0,
+		isVisible: true,
+		isEventAttached: 'no',
+	},
+	callbacks: {
+		keydownHandler() {
+			state.counter += 1;
+		},
+		init() {
+			state.isEventAttached = 'yes';
+		},
+	},
+	actions: {
+		visibilityHandler: () => {
+			state.isEventAttached = 'no';
+			state.isVisible = ! state.isVisible;
+		},
+	}
+} );

package/plugins/interactive-blocks/directive-on-window/block.json

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

package/plugins/interactive-blocks/directive-on-window/render.php

@@ -0,0 +1,26 @@
+<?php
+/**
+ * HTML for testing the directive `data-wp-on`.
+ *
+ * @package gutenberg-test-interactive-blocks
+ */
+
+wp_enqueue_script_module( 'directive-on-window-view' );
+?>
+
+<div data-wp-interactive='{ "namespace": "directive-on-window" }'>
+	<button
+		data-wp-on--click="actions.visibilityHandler"
+		data-testid="visibility">
+		Switch visibility
+	</button>
+	<div data-wp-text="state.isEventAttached" data-testid="isEventAttached">no</div>
+	<div data-wp-show-mock="state.isVisible">
+		<div
+			data-wp-on-window--resize="callbacks.resizeHandler"
+			data-wp-init="callbacks.init"
+		>
+			<p data-wp-text="state.counter" data-testid="counter">0</p>
+		</div>
+	</div>
+</div>

package/plugins/interactive-blocks/directive-on-window/view.js

@@ -0,0 +1,39 @@
+/**
+ * WordPress dependencies
+ */
+import { store, directive } from '@wordpress/interactivity';
+
+// Mock `data-wp-show` directive to test when things are removed from the
+// DOM.  Replace with `data-wp-show` when it's ready.
+directive(
+	'show-mock',
+	( { directives: { 'show-mock': showMock }, element, evaluate } ) => {
+		const entry = showMock.find( ( { suffix } ) => suffix === 'default' );
+		if ( ! evaluate( entry ) ) {
+			return null;
+		}
+		return element;
+	}
+);
+
+const { state } = store( 'directive-on-window', {
+	state: {
+		counter: 0,
+		isVisible: true,
+		isEventAttached: 'no',
+	},
+	callbacks: {
+		resizeHandler() {
+			state.counter += 1;
+		},
+		init() {
+			state.isEventAttached = 'yes';
+		}
+	},
+	actions: {
+		visibilityHandler: () => {
+			state.isEventAttached = 'no';
+			state.isVisible = ! state.isVisible;
+		},
+	}
+} );

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

@@ -5,7 +5,7 @@
  * @package gutenberg-test-interactive-blocks
  */
 
-gutenberg_enqueue_module( 'directive-priorities-view' );
+wp_enqueue_script_module( 'directive-priorities-view' );
 ?>
 
 <div data-wp-interactive='{ "namespace": "directive-priorities" }'>

package/plugins/interactive-blocks/directive-run/block.json

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

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

@@ -0,0 +1,54 @@
+<?php
+/**
+ * HTML for testing the directive `data-wp-run`.
+ *
+ * @package gutenberg-test-interactive-blocks
+ */
+
+wp_enqueue_script_module( 'directive-run-view' );
+?>
+
+<div
+	data-wp-interactive='{ "namespace": "directive-run" }'
+	data-wp-router-region='test-directive-run'
+>
+	<div data-testid="hydrated" data-wp-text="state.isHydrated"></div>
+	<div data-testid="mounted" data-wp-text="state.isMounted"></div>
+	<div data-testid="renderCount" data-wp-text="state.renderCount"></div>
+	<div data-testid="navigated">no</div>
+
+	<div
+		data-wp-run--hydrated="callbacks.updateIsHydrated"
+		data-wp-run--renderCount="callbacks.updateRenderCount"
+		data-wp-text="state.clickCount"
+	></div>
+</div>
+
+<div data-wp-interactive='{ "namespace": "directive-run" }' >
+	<button data-testid="toggle" data-wp-on--click="actions.toggle">
+		Toggle
+	</button>
+
+	<button data-testid="increment" data-wp-on--click="actions.increment">
+		Increment
+	</button>
+
+	<button data-testid="navigate" data-wp-on--click="actions.navigate">
+		Navigate
+	</button>
+
+	<!-- Hook execution results are stored in this element as attributes. -->
+	<div
+		data-testid="wp-run hooks results"
+		data-wp-show-children="state.isOpen"
+		data-init=""
+		data-watch=""
+	>
+		<div
+			data-wp-run--mounted="callbacks.updateIsMounted"
+			data-wp-run--hooks="callbacks.useHooks"
+		>
+			Element with wp-run using hooks
+		</div>
+	</div>
+</div>

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

@@ -0,0 +1,110 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	store,
+	directive,
+	useInit,
+	useWatch,
+	cloneElement,
+	getElement,
+} from '@wordpress/interactivity';
+
+// Custom directive to show hide the content elements in which it is placed.
+directive(
+	'show-children',
+	( { directives: { 'show-children': showChildren }, element, evaluate } ) => {
+		const entry = showChildren.find(
+			( { suffix } ) => suffix === 'default'
+		);
+		return evaluate( entry )
+			? element
+			: cloneElement( element, { children: null } );
+	},
+	{ priority: 9 }
+);
+
+const html = `
+<div
+	data-wp-interactive='{ "namespace": "directive-run" }'
+	data-wp-router-region='test-directive-run'
+>
+	<div data-testid="hydrated" data-wp-text="state.isHydrated"></div>
+	<div data-testid="mounted" data-wp-text="state.isMounted"></div>
+	<div data-testid="renderCount" data-wp-text="state.renderCount"></div>
+	<div data-testid="navigated">yes</div>
+
+	<div
+		data-wp-run--hydrated="callbacks.updateIsHydrated"
+		data-wp-run--renderCount="callbacks.updateRenderCount"
+		data-wp-text="state.clickCount"
+	></div>
+</div>
+`;
+
+const { state } = store( 'directive-run', {
+	state: {
+		isOpen: false,
+		isHydrated: 'no',
+		isMounted: 'no',
+		renderCount: 0,
+		clickCount: 0
+	},
+	actions: {
+		toggle() {
+			state.isOpen = ! state.isOpen;
+		},
+		increment() {
+			state.clickCount = state.clickCount + 1;
+		},
+		*navigate() {
+			const { actions } = yield import(
+				"@wordpress/interactivity-router"
+			);
+			return actions.navigate( window.location, {
+				force: true,
+				html,
+			} );
+		},
+	},
+	callbacks: {
+		updateIsHydrated() {
+			setTimeout( () => ( state.isHydrated = 'yes' ) );
+		},
+		updateIsMounted() {
+			setTimeout( () => ( state.isMounted = 'yes' ) );
+		},
+		updateRenderCount() {
+			setTimeout( () => ( state.renderCount = state.renderCount + 1 ) );
+		},
+		useHooks() {
+			// Runs only on first render.
+			useInit( () => {
+				const { ref } = getElement();
+				ref
+					.closest( '[data-testid="wp-run hooks results"]')
+					.setAttribute( 'data-init', 'initialized' );
+				return () => {
+					ref
+						.closest( '[data-testid="wp-run hooks results"]')
+						.setAttribute( 'data-init', 'cleaned up' );
+				};
+			} );
+
+			// Runs whenever a signal consumed inside updates its value. Also
+			// executes for the first render.
+			useWatch( () => {
+				const { ref } = getElement();
+				const { clickCount } = state;
+				ref
+					.closest( '[data-testid="wp-run hooks results"]')
+					.setAttribute( 'data-watch', clickCount );
+				return () => {
+					ref
+						.closest( '[data-testid="wp-run hooks results"]')
+						.setAttribute( 'data-watch', 'cleaned up' );
+				};
+			} );
+		}
+	}
+} );

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

@@ -5,7 +5,7 @@
  * @package gutenberg-test-interactive-blocks
  */
 
-gutenberg_enqueue_module( 'directive-style-view' );
+wp_enqueue_script_module( 'directive-style-view' );
 ?>
 
 <div data-wp-interactive='{ "namespace": "directive-style" }'>

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

@@ -5,7 +5,7 @@
  * @package gutenberg-test-interactive-blocks
  */
 
-gutenberg_enqueue_module( 'directive-text-view' );
+wp_enqueue_script_module( 'directive-text-view' );
 ?>
 
 <div data-wp-interactive='{ "namespace": "directive-context" }'>
@@ -34,4 +34,18 @@ gutenberg_enqueue_module( 'directive-text-view' );
 			Toggle Context Text
 		</button>
 	</div>
+	<div>
+		<span
+			data-wp-text="state.component"
+			data-testid="show state component"
+		></span>
+		<span
+			data-wp-text="state.number"
+			data-testid="show state number"
+		></span>
+		<span
+			data-wp-text="state.boolean"
+			data-testid="show state boolean"
+		></span>
+	</div>
 </div>

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

@@ -1,11 +1,14 @@
 /**
  * WordPress dependencies
  */
-import { store, getContext } from '@wordpress/interactivity';
+import { store, getContext, createElement } from '@wordpress/interactivity';
 
 const { state } = store( 'directive-context', {
 	state: {
 		text: 'Text 1',
+		component: () => (createElement( 'div', {}, state.text )),
+		number: 1,
+		boolean: true
 	},
 	actions: {
 		toggleStateText() {

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

@@ -5,7 +5,7 @@
  * @package gutenberg-test-interactive-blocks
  */
 
-gutenberg_enqueue_module( 'directive-watch-view' );
+wp_enqueue_script_module( 'directive-watch-view' );
 ?>
 
 <div data-wp-interactive='{ "namespace": "directive-watch" }'>

package/plugins/interactive-blocks/negation-operator/render.php

@@ -5,7 +5,7 @@
  * @package gutenberg-test-interactive-blocks
  */
 
-gutenberg_enqueue_module( 'negation-operator-view' );
+wp_enqueue_script_module( 'negation-operator-view' );
 ?>
 
 <div data-wp-interactive='{ "namespace": "negation-operator" }'>

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

@@ -7,12 +7,12 @@
  * @phpcs:disable VariableAnalysis.CodeAnalysis.VariableAnalysis.UndefinedVariable
  */
 
-gutenberg_enqueue_module( 'router-navigate-view' );
+wp_enqueue_script_module( 'router-navigate-view' );
 ?>
 
 <div
 	data-wp-interactive='{ "namespace": "router" }'
-	data-wp-navigation-id="region-1"
+	data-wp-router-region="region-1"
 >
 	<h2 data-testid="title"><?php echo $attributes['title']; ?></h2>
 

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

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { store, navigate } from '@wordpress/interactivity';
+import { store } from '@wordpress/interactivity';
 
 const { state } = store( 'router', {
 	state: {
@@ -19,7 +19,10 @@ const { state } = store( 'router', {
 			const force = e.target.dataset.forceNavigation === 'true';
 			const { timeout } = state;
 
-			yield navigate( e.target.href, { force, timeout } );
+			const { actions } = yield import(
+				"@wordpress/interactivity-router"
+			);
+			yield actions.navigate( e.target.href, { force, timeout } );
 
 			state.navigations -= 1;
 

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

@@ -7,14 +7,14 @@
  * @phpcs:disable VariableAnalysis.CodeAnalysis.VariableAnalysis.UndefinedVariable
  */
 
-gutenberg_enqueue_module( 'router-regions-view' );
+wp_enqueue_script_module( 'router-regions-view' );
 ?>
 
 <section>
 	<h2>Region 1</h2>
 	<div
 		data-wp-interactive='{"namespace": "router-regions"}'
-		data-wp-navigation-id="region-1"
+		data-wp-router-region="region-1"
 	>
 		<p
 			data-testid="region-1-text"
@@ -58,7 +58,7 @@ gutenberg_enqueue_module( 'router-regions-view' );
 	<h2>Region 2</h2>
 	<div
 		data-wp-interactive='{"namespace": "router-regions"}'
-		data-wp-navigation-id="region-2"
+		data-wp-router-region="region-2"
 	>
 		<p
 			data-testid="region-2-text"
@@ -88,7 +88,7 @@ gutenberg_enqueue_module( 'router-regions-view' );
 				<h2>Nested region</h2>
 				<div
 					data-wp-interactive='{"namespace": "router-regions"}'
-					data-wp-navigation-id="nested-region"
+					data-wp-router-region="nested-region"
 				>
 					<p
 						data-testid="nested-region-ssr"

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

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { store, navigate, getContext } from '@wordpress/interactivity';
+import { store, getContext } from '@wordpress/interactivity';
 
 const { state } = store( 'router-regions', {
 	state: {
@@ -19,7 +19,10 @@ const { state } = store( 'router-regions', {
 		router: {
 			*navigate( e ) {
 				e.preventDefault();
-				yield navigate( e.target.href );
+				const { actions } = yield import(
+					"@wordpress/interactivity-router"
+				);
+				yield actions.navigate( e.target.href );
 			},
 			back() {
 				history.back();

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

@@ -7,7 +7,7 @@
  * @phpcs:disable VariableAnalysis.CodeAnalysis.VariableAnalysis.UndefinedVariable
  */
 
-gutenberg_enqueue_module( 'store-tag-view' );
+wp_enqueue_script_module( 'store-tag-view' );
 
 // These variables simulates SSR.
 $test_store_tag_counter = 'ok' === $attributes['condition'] ? 3 : 0;
@@ -49,7 +49,7 @@ $test_store_tag_double  = $test_store_tag_counter * 2;
 if ( 'missing' !== $attributes['condition'] ) {
 
 	if ( 'ok' === $attributes['condition'] ) {
-		$test_store_tag_json = '{ "store-tag": { "counter": { "value": 3 } } }';
+		$test_store_tag_json = '{ "state": { "store-tag": { "counter": { "value": 3 } } } }';
 	}
 
 	if ( 'corrupted-json' === $attributes['condition'] ) {
@@ -61,7 +61,7 @@ if ( 'missing' !== $attributes['condition'] ) {
 	}
 
 	echo <<<HTML
-	<script type="application/json" id="wp-interactivity-initial-state">
+	<script type="application/json" id="wp-interactivity-data">
 		$test_store_tag_json
 	</script>
 HTML;

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

@@ -9,7 +9,7 @@ $plugin_url   = plugin_dir_url( __DIR__ );
 $src_proc_ins = $plugin_url . 'tovdom/processing-instructions.js';
 $src_cdata    = $plugin_url . 'tovdom/cdata.js';
 
-gutenberg_enqueue_module( 'tovdom-view' );
+wp_enqueue_script_module( 'tovdom-view' );
 ?>
 
 <div data-wp-interactive='{ "namespace": "tovdom" }'>

package/plugins/interactive-blocks/tovdom-islands/render.php

@@ -5,7 +5,7 @@
  * @package gutenberg-test-interactive-blocks
  */
 
-gutenberg_enqueue_module( 'tovdom-islands-view' );
+wp_enqueue_script_module( 'tovdom-islands-view' );
 ?>
 
 <div>

package/plugins/interactive-blocks/with-scope/block.json

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

package/plugins/interactive-blocks/with-scope/render.php

@@ -0,0 +1,14 @@
+<?php
+/**
+ * HTML for testing the directive `data-wp-on`.
+ *
+ * @package gutenberg-test-interactive-blocks
+ */
+
+wp_enqueue_script_module( 'with-scope-view' );
+?>
+
+<div data-wp-interactive='{ "namespace": "with-scope" }' data-wp-context='{"asyncCounter": 0, "syncCounter": 0}' data-wp-init--a='callbacks.asyncInit' data-wp-init--b='callbacks.syncInit'>
+		<p data-wp-text="context.asyncCounter" data-testid="asyncCounter">0</p>
+		<p data-wp-text="context.syncCounter" data-testid="syncCounter">0</p>
+</div>

package/plugins/interactive-blocks/with-scope/view.js

@@ -0,0 +1,20 @@
+/**
+ * WordPress dependencies
+ */
+import { store, getContext, withScope } from '@wordpress/interactivity';
+
+store( 'with-scope', {
+	callbacks: {
+		asyncInit: () => {
+			setTimeout( withScope(function*() {
+				yield new Promise(resolve => setTimeout(resolve, 1));
+				const context = getContext()
+				context.asyncCounter += 1;
+			}, 1 ));
+		},
+		syncInit: () => {
+			const context = getContext()
+			context.syncCounter += 1;
+		}
+	},
+} );

package/plugins/interactive-blocks.php

@@ -21,26 +21,35 @@ add_action(
 
 				$view_file = plugin_dir_url( $block_folder ) . $name . '/' . 'view.js';
 
-				gutenberg_register_module(
+				wp_register_script_module(
 					$name . '-view',
 					$view_file,
-					array( '@wordpress/interactivity' ),
-					filemtime( $view_file ),
-					true
+					array(
+						'@wordpress/interactivity',
+						array(
+							'id'     => '@wordpress/interactivity-router',
+							'import' => 'dynamic',
+						),
+					),
+					filemtime( $view_file )
 				);
 
 				register_block_type_from_metadata( $block_folder );
 			}
 		}
 
-		// Temporary fix to disable SSR of directives during E2E testing. This
-		// is required at this moment, as SSR for directives is not stabilized
-		// yet and we need to ensure hydration works, even when the rendered
-		// HTML is not correct or malformed.
-		if ( 'true' === $_GET['disable_directives_ssr'] ) {
+		/*
+		 * Disable the server directive processing during E2E testing. This is
+		 * required to ensure that client hydration works even when the rendered
+		 * HTML contains unbalanced tags and it couldn't be processed in the server.
+		 */
+		if ( 'true' === $_GET['disable_server_directive_processing'] ) {
+			// Ensure the interactivity API is loaded.
+			wp_interactivity();
+			// But remove the server directive processing.
 			remove_filter(
 				'render_block_data',
-				'gutenberg_interactivity_mark_root_blocks'
+				'wp_interactivity_process_directives_of_interactive_blocks'
 			);
 		}
 	}

package/specs/editor/various/__snapshots__/pattern-blocks.test.js.snap

@@ -1,11 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Pattern blocks allows conversion back to blocks when the reusable block has unsaved edits 1`] = `
-"<!-- wp:paragraph -->
-<p>12</p>
-<!-- /wp:paragraph -->"
-`;
-
 exports[`Pattern blocks can be created from multiselection and converted back to regular blocks 1`] = `
 "<!-- wp:paragraph -->
 <p>Hello there!</p>