@wordpress/e2e-tests 7.28.0 → 8.0.0

package/CHANGELOG.md

@@ -2,6 +2,15 @@
 
 ## Unreleased
 
+## 8.0.0 (2024-05-31)
+
+### Breaking Changes
+
+-   Variables like `process.env.IS_GUTENBERG_PLUGIN` have been replaced by `globalThis.IS_GUTENBERG_PLUGIN`. Build systems using `process.env` should be updated ([#61486](https://github.com/WordPress/gutenberg/pull/61486)).
+-   Increase the minimum required Node.js version to v18.12.0 matching long-term support releases ([#31270](https://github.com/WordPress/gutenberg/pull/61930)). Learn more about [Node.js releases](https://nodejs.org/en/about/previous-releases).
+
+## 7.29.0 (2024-05-16)
+
 ## 7.28.0 (2024-05-02)
 
 ## 7.27.0 (2024-04-19)
@@ -62,7 +71,7 @@
 
 ### Breaking Changes
 
--  Started requiring Jest v29 instead of v27 as a peer dependency. See [breaking changes in Jest 28](https://jestjs.io/blog/2022/04/25/jest-28) and [in jest 29](https://jestjs.io/blog/2022/08/25/jest-29) ([#47388](https://github.com/WordPress/gutenberg/pull/47388))
+-   Started requiring Jest v29 instead of v27 as a peer dependency. See [breaking changes in Jest 28](https://jestjs.io/blog/2022/04/25/jest-28) and [in jest 29](https://jestjs.io/blog/2022/08/25/jest-29) ([#47388](https://github.com/WordPress/gutenberg/pull/47388))
 
 ## 6.5.0 (2023-03-01)
 

package/README.md

@@ -80,7 +80,7 @@ Debugging in a Chrome browser can be replaced with `vscode`'s debugger by adding
 
 This will run jest, targetting the spec file currently open in the editor. `vscode`'s debugger can now be used to add breakpoints and inspect tests as you would in Chrome DevTools.
 
-**Note**: This package requires Node.js 14.0.0 or later. It is not compatible with older versions.
+**Note**: This package requires Node.js version with long-term support status (check [Active LTS or Maintenance LTS releases](https://nodejs.org/en/about/previous-releases)). It is not compatible with older versions.
 
 ## Contributing to this package
 

package/config/is-gutenberg-plugin.js

@@ -1,6 +1,3 @@
-global.process.env = {
-	...global.process.env,
-	// Inject the `IS_GUTENBERG_PLUGIN` global, used for feature flagging.
-	// eslint-disable-next-line @wordpress/is-gutenberg-plugin
-	IS_GUTENBERG_PLUGIN: process.env.npm_package_config_IS_GUTENBERG_PLUGIN,
-};
+// eslint-disable-next-line @wordpress/wp-global-usage
+globalThis.IS_GUTENBERG_PLUGIN =
+	process.env.npm_package_config_IS_GUTENBERG_PLUGIN === 'true';

package/mu-plugins/server-timing.php

@@ -0,0 +1,91 @@
+<?php
+
+add_filter(
+	'template_include',
+	static function ( $template ) {
+
+		global $timestart, $wpdb;
+
+		$server_timing_values = array();
+		$template_start       = microtime( true );
+
+		$server_timing_values['wpBeforeTemplate'] = $template_start - $timestart;
+
+		ob_start();
+
+		add_action(
+			'shutdown',
+			static function () use ( $server_timing_values, $template_start, $wpdb ) {
+				$output = ob_get_clean();
+
+				$server_timing_values['wpTemplate'] = microtime( true ) - $template_start;
+
+				$server_timing_values['wpTotal'] = $server_timing_values['wpBeforeTemplate'] + $server_timing_values['wpTemplate'];
+
+				/*
+				 * While values passed via Server-Timing are intended to be durations,
+				 * any numeric value can actually be passed.
+				 * This is a nice little trick as it allows to easily get this information in JS.
+				 */
+				$server_timing_values['wpMemoryUsage'] = memory_get_usage();
+				$server_timing_values['wpDbQueries']   = $wpdb->num_queries;
+
+				$header_values = array();
+				foreach ( $server_timing_values as $slug => $value ) {
+					if ( is_float( $value ) ) {
+						$value = round( $value * 1000.0, 2 );
+					}
+					$header_values[] = sprintf( '%1$s;dur=%2$s', $slug, $value );
+				}
+				header( 'Server-Timing: ' . implode( ', ', $header_values ) );
+
+				echo $output;
+			},
+			PHP_INT_MIN
+		);
+
+		return $template;
+	},
+	PHP_INT_MAX
+);
+
+add_action(
+	'admin_init',
+	static function () {
+		global $timestart, $wpdb;
+
+		ob_start();
+
+		add_action(
+			'shutdown',
+			static function () use ( $wpdb, $timestart ) {
+				$output = ob_get_clean();
+
+				$server_timing_values = array();
+
+				$server_timing_values['wpTotal'] = microtime( true ) - $timestart;
+
+				/*
+				 * While values passed via Server-Timing are intended to be durations,
+				 * any numeric value can actually be passed.
+				 * This is a nice little trick as it allows to easily get this information in JS.
+				 */
+				$server_timing_values['wpMemoryUsage'] = memory_get_usage();
+				$server_timing_values['wpDbQueries']   = $wpdb->num_queries;
+
+				$header_values = array();
+				foreach ( $server_timing_values as $slug => $value ) {
+					if ( is_float( $value ) ) {
+						$value = round( $value * 1000.0, 2 );
+					}
+					$header_values[] = sprintf( '%1$s;dur=%2$s', $slug, $value );
+				}
+				header( 'Server-Timing: ' . implode( ', ', $header_values ) );
+
+				echo $output;
+			},
+			PHP_INT_MIN
+		);
+	},
+	PHP_INT_MAX
+);

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/e2e-tests",
-	"version": "7.28.0",
+	"version": "8.0.0",
 	"description": "End-To-End (E2E) tests for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -20,16 +20,17 @@
 		"url": "https://github.com/WordPress/gutenberg/issues"
 	},
 	"engines": {
-		"node": ">=14"
+		"node": ">=18.12.0",
+		"npm": ">=8.19.2"
 	},
 	"dependencies": {
-		"@wordpress/e2e-test-utils": "^10.28.0",
-		"@wordpress/interactivity": "^5.6.0",
-		"@wordpress/interactivity-router": "^1.7.0",
-		"@wordpress/jest-console": "^7.28.0",
-		"@wordpress/jest-puppeteer-axe": "^6.28.0",
-		"@wordpress/scripts": "^27.8.0",
-		"@wordpress/url": "^3.58.0",
+		"@wordpress/e2e-test-utils": "^11.0.0",
+		"@wordpress/interactivity": "^6.0.0",
+		"@wordpress/interactivity-router": "^2.0.0",
+		"@wordpress/jest-console": "^8.0.0",
+		"@wordpress/jest-puppeteer-axe": "^7.0.0",
+		"@wordpress/scripts": "^28.0.0",
+		"@wordpress/url": "^4.0.0",
 		"chalk": "^4.0.0",
 		"expect-puppeteer": "^4.4.0",
 		"filenamify": "^4.2.0",
@@ -46,5 +47,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "581d8a5580dba8f600b7268d51eb554771ae482c"
+	"gitHead": "2f30cddff15723ac7017fd009fc5913b7b419400"
 }

package/plugins/hooks-api/index.js

@@ -17,7 +17,6 @@
 				{
 					className: 'e2e-reset-block-button',
 					variant: "secondary",
-					isLarge: true,
 					onClick() {
 						const emptyBlock = createBlock( props.name );
 						props.onReplace( emptyBlock );

package/plugins/inner-blocks-templates/index.js

@@ -92,7 +92,7 @@
 
 		edit: function InnerBlocksUpdateLockedTemplateEdit( props ) {
 			const hasUpdatedTemplated = props.attributes.hasUpdatedTemplate;
-			return el( 'div', null, [
+			return el( 'div', null,
 				el(
 					'button',
 					{
@@ -108,7 +108,7 @@
 						: TEMPLATE,
 					templateLock: 'all',
 				} ) ),
-			] );
+			);
 		},
 
 		save,

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

@@ -16,5 +16,5 @@ document.addEventListener( 'DOMContentLoaded', () => {
 				},
 			},
 		} );
-	}, 50 );
+	}, 100 );
 } );

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

@@ -93,6 +93,7 @@
 		<button
 			data-testid="toggle value"
 			data-wp-on--click="actions.toggleValue"
+			data-wp-bind--data-toggle-count="context.count"
 		>Toggle</button>
 	</div>
 	<?php endforeach; ?>

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

@@ -32,6 +32,7 @@ const { state, foo } = store( 'directive-bind', {
 
 			context.previousValue = context.value;
 			context.value = previousValue;
+			context.count = ( context.count ?? 0 ) + 1;
 		},
 	},
 } );

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

@@ -6,7 +6,8 @@
  */
 ?>
 
-<div data-wp-interactive="directive-on">
+<?php // A wrong directive name like "data-wp-on--" should not kill the interactivity. ?>
+<div data-wp-interactive="directive-on" data-wp-on--="">
 	<div>
 		<p data-wp-text="state.counter" data-testid="counter">0</p>
 		<button

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

@@ -24,4 +24,8 @@
 			<p data-wp-text="state.counter" data-testid="counter">0</p>
 		</div>
 	</div>
+	<div data-wp-on-document--keydown="actions.keydownHandler" data-wp-on-document--keydown--second="actions.keydownSecondHandler">
+		<p data-wp-text="state.keydownHandler" data-testid="keydownHandler">no</p>
+		<p data-wp-text="state.keydownSecondHandler" data-testid="keydownSecondHandler">no</p>
+	</div>
 </div>

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

@@ -25,6 +25,8 @@ const { state } = store( 'directive-on-document', {
 		counter: 0,
 		isVisible: true,
 		isEventAttached: 'no',
+		keydownHandler: 'no',
+		keydownSecondHandler: 'no',
 	},
 	callbacks: {
 		keydownHandler() {
@@ -39,5 +41,11 @@ const { state } = store( 'directive-on-document', {
 			state.isEventAttached = 'no';
 			state.isVisible = ! state.isVisible;
 		},
+		keydownHandler: () => {
+			state.keydownHandler = 'yes';
+		},
+		keydownSecondHandler: () => {
+			state.keydownSecondHandler = 'yes';
+		}
 	}
 } );

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

@@ -21,4 +21,8 @@
 			<p data-wp-text="state.counter" data-testid="counter">0</p>
 		</div>
 	</div>
+	<div data-wp-on-window--resize="actions.resizeHandler" data-wp-on-window--resize--second="actions.resizeSecondHandler">
+		<p data-wp-text="state.resizeHandler" data-testid="resizeHandler">no</p>
+		<p data-wp-text="state.resizeSecondHandler" data-testid="resizeSecondHandler">no</p>
+	</div>
 </div>

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

@@ -25,6 +25,8 @@ const { state } = store( 'directive-on-window', {
 		counter: 0,
 		isVisible: true,
 		isEventAttached: 'no',
+		resizeHandler: 'no',
+		resizeSecondHandler: 'no',
 	},
 	callbacks: {
 		resizeHandler() {
@@ -39,5 +41,11 @@ const { state } = store( 'directive-on-window', {
 			state.isEventAttached = 'no';
 			state.isVisible = ! state.isVisible;
 		},
+		resizeHandler: () => {
+			state.resizeHandler = 'yes';
+		},
+		resizeSecondHandler: () => {
+			state.resizeSecondHandler = 'yes';
+		}
 	}
 } );

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

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

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

@@ -0,0 +1,45 @@
+<?php
+/**
+ * HTML for testing the directive `data-wp-bind`.
+ *
+ * @package gutenberg-test-interactive-blocks
+ */
+?>
+
+<div data-wp-interactive="">
+	<a data-wp-bind--href="state.url" data-testid="empty namespace"></a>
+</div>
+
+<div data-wp-interactive="namespace">
+	<a data-wp-bind--href="state.url" data-testid="correct namespace"></a>
+</div>
+
+<div data-wp-interactive="{}">
+	<a data-wp-bind--href="state.url" data-testid="object namespace"></a>
+</div>
+
+<div data-wp-interactive="null">
+	<a data-wp-bind--href="state.url" data-testid="null namespace"></a>
+</div>
+
+<div data-wp-interactive="2">
+	<a data-wp-bind--href="state.url" data-testid="number namespace"></a>
+</div>
+
+<div data-wp-interactive>
+	<a data-wp-bind--href="other::state.url" data-testid="other namespace"></a>
+</div>
+
+<div data-wp-interactive="true">
+	<a data-wp-bind--href="state.url" data-testid="true namespace"></a>
+</div>
+
+<div data-wp-interactive="false">
+	<a data-wp-bind--href="state.url" data-testid="false namespace"></a>
+</div>
+<div data-wp-interactive="[]">
+	<a data-wp-bind--href="state.url" data-testid="[] namespace"></a>
+</div>
+<div data-wp-interactive='"quoted string"'>
+	<a data-wp-bind--href="state.url" data-testid="quoted namespace"></a>
+</div>

package/plugins/interactive-blocks/namespace/view.asset.php

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

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

@@ -0,0 +1,70 @@
+/**
+ * WordPress dependencies
+ */
+import { store } from '@wordpress/interactivity';
+
+
+store( '', {
+	state: {
+		url: '/empty-string-url',
+	},
+} );
+
+store( 'namespace', {
+	state: {
+		url: '/namespace-url',
+	},
+} );
+
+store( 'other', {
+	state: {
+		url: '/other-store-url',
+	},
+} );
+
+store( 'null', {
+	state: {
+		url: '/null-url',
+	},
+} );
+
+store( '2', {
+	state: {
+		url: '/number-url',
+	},
+} );
+
+store( '{}', {
+	state: {
+		url: '/object-url',
+	},
+} );
+
+store( 'true', {
+	state: {
+		url: '/true-url',
+	},
+} );
+
+store( 'false', {
+	state: {
+		url: '/false-url',
+	},
+} );
+
+store( '[]', {
+	state: {
+		url: '/array-url',
+	},
+} );
+
+store( '"quoted string"', {
+	state: {
+		url: '/quoted-url',
+	},
+} );
+
+
+
+
+

package/plugins/interactive-blocks.php

@@ -29,11 +29,7 @@ add_action(
 			// Ensure the interactivity API is loaded.
 			wp_interactivity();
 			// But remove the server directive processing.
-			remove_filter(
-				'render_block_data',
-				'wp_interactivity_process_directives_of_interactive_blocks',
-				100
-			);
+			add_filter( 'interactivity_process_directives', '__return_false' );
 		}
 	}
 );

package/plugins/lightbox-allow-editing-false-enabled-false.php

@@ -0,0 +1,26 @@
+<?php
+/**
+ * Plugin Name: Lightbox Allow Editing False Enabled False
+ * Plugin URI: https://github.com/WordPress/gutenberg
+ * Author: Gutenberg Team
+ *
+ * @package gutenberg-lightbox-allow-editing-false-enabled-false
+ */
+
+function filter_theme_json_theme( $theme_json ) {
+	$new_data = array(
+		'version'  => 2,
+		'settings' => array(
+			'blocks' => array(
+				'core/image' => array(
+					'lightbox' => array(
+						'allowEditing' => false,
+						'enabled'      => false,
+					),
+				),
+			),
+		),
+	);
+	return $theme_json->update_with( $new_data );
+}
+add_filter( 'wp_theme_json_data_theme', 'filter_theme_json_theme' );