@wordpress/e2e-tests 7.17.0 → 7.18.0

package/CHANGELOG.md

@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 7.18.0 (2023-11-29)
+
 ## 7.17.0 (2023-11-16)
 
 ## 7.16.0 (2023-11-02)

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/e2e-tests",
-	"version": "7.17.0",
+	"version": "7.18.0",
 	"description": "End-To-End (E2E) tests for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -23,11 +23,12 @@
 		"node": ">=14"
 	},
 	"dependencies": {
-		"@wordpress/e2e-test-utils": "^10.17.0",
-		"@wordpress/jest-console": "^7.17.0",
-		"@wordpress/jest-puppeteer-axe": "^6.17.0",
-		"@wordpress/scripts": "^26.17.0",
-		"@wordpress/url": "^3.47.0",
+		"@wordpress/e2e-test-utils": "^10.18.0",
+		"@wordpress/interactivity": "^3.0.0",
+		"@wordpress/jest-console": "^7.18.0",
+		"@wordpress/jest-puppeteer-axe": "^6.18.0",
+		"@wordpress/scripts": "^26.18.0",
+		"@wordpress/url": "^3.48.0",
 		"chalk": "^4.0.0",
 		"expect-puppeteer": "^4.4.0",
 		"filenamify": "^4.2.0",
@@ -45,5 +46,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "839018ff6029ba749780e288e08ff9cd898e50e8"
+	"gitHead": "d98dff8ea96f29cfea045bf964269f46f040d539"
 }

package/plugins/block-icons/index.js

@@ -55,7 +55,7 @@
 	} );
 
 	registerBlockType( 'test/test-dash-icon', {
-		title: 'TestDashIcon',
+		title: 'TestSimpleDashIcon',
 		icon: 'cart',
 		category: 'text',
 

package/plugins/dataviews.php

@@ -0,0 +1,25 @@
+<?php
+/**
+ * Plugin Name: Gutenberg Test DataViews
+ * Plugin URI: https://github.com/WordPress/gutenberg
+ * Author: Gutenberg Team
+ *
+ * @package gutenberg-test-dataviews
+ */
+
+/**
+ * Disables the DataViews experiment on plugin deactivation.
+ */
+function disable_dataviews_experiment() {
+	update_option( 'gutenberg-experiments', array() );
+}
+
+/**
+ * Enables the DataViews experiment.
+ */
+function enable_dataviews_experiment() {
+	update_option( 'gutenberg-experiments', array( 'gutenberg-dataviews' => true ) );
+	register_deactivation_hook( __FILE__, 'disable_dataviews_experiment' );
+}
+
+add_action( 'init', 'enable_dataviews_experiment' );

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

@@ -5,8 +5,10 @@
  * @package gutenberg-test-interactive-blocks
  */
 
+gutenberg_enqueue_module( 'directive-bind-view' );
 ?>
-<div data-wp-interactive>
+
+<div data-wp-interactive='{ "namespace": "directive-bind" }'>
 	<a
 		data-wp-bind--href="state.url"
 		data-testid="add missing href at hydration"

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

@@ -1,34 +1,37 @@
-( ( { wp } ) => {
-	const { store } = wp.interactivity;
+/**
+ * WordPress dependencies
+ */
+import { store, getContext } from '@wordpress/interactivity';
 
-	store( {
-		state: {
-			url: '/some-url',
-			checked: true,
-			show: false,
-			width: 1,
+const { state, foo } = store( 'directive-bind', {
+	state: {
+		url: '/some-url',
+		checked: true,
+		show: false,
+		width: 1,
+	},
+	foo: {
+		bar: 1,
+	},
+	actions: {
+		toggle: () => {
+			state.url = '/some-other-url';
+			state.checked = ! state.checked;
+			state.show = ! state.show;
+			state.width += foo.bar;
 		},
-		foo: {
-			bar: 1,
-		},
-		actions: {
-			toggle: ( { state, foo } ) => {
-				state.url = '/some-other-url';
-				state.checked = ! state.checked;
-				state.show = ! state.show;
-				state.width += foo.bar;
-			},
-			toggleValue: ( { context } ) => {
-				const previousValue = ( 'previousValue' in context )
+		toggleValue: () => {
+			const context = getContext();
+			const previousValue =
+				'previousValue' in context
 					? context.previousValue
-					// Any string works here; we just want to toggle the value
-					// to ensure Preact renders the same we are hydrating in the
-					// first place.
-					: 'tacocat';
+					: // Any string works here; we just want to toggle the value
+					  // to ensure Preact renders the same we are hydrating in the
+					  // first place.
+					  'tacocat';
 
-				context.previousValue = context.value;
-				context.value = previousValue;
-			}
+			context.previousValue = context.value;
+			context.value = previousValue;
 		},
-	} );
-} )( window );
+	},
+} );

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

@@ -5,9 +5,11 @@
  * @package gutenberg-test-interactive-blocks
  */
 
+gutenberg_enqueue_module( 'directive-body-view' );
 ?>
+
 <div
-	data-wp-interactive
+	data-wp-interactive='{ "namespace":"directive-body" }'
 	data-wp-context='{"text":"text-1"}'
 >
 	<div data-testid="container">

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

@@ -1,11 +1,13 @@
-( ( { wp } ) => {
-	const { store } = wp.interactivity;
+/**
+ * WordPress dependencies
+ */
+import { store, getContext } from '@wordpress/interactivity';
 
-	store( {
-		actions: {
-			toggleText: ( { context } ) => {
-				context.text = context.text === 'text-1' ? 'text-2' : 'text-1';
-			},
+store( 'directive-body', {
+	actions: {
+		toggleText: () => {
+			const context = getContext();
+			context.text = context.text === 'text-1' ? 'text-2' : 'text-1';
 		},
-	} );
-} )( window );
+	},
+} );

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

@@ -5,8 +5,10 @@
  * @package gutenberg-test-interactive-blocks
  */
 
+gutenberg_enqueue_module( 'directive-class-view' );
 ?>
-<div data-wp-interactive>
+
+<div data-wp-interactive='{"namespace": "directive-class"}'>
 	<button
 		data-wp-on--click="actions.toggleTrueValue"
 		data-testid="toggle trueValue"

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

@@ -1,21 +1,23 @@
-( ( { wp } ) => {
-	const { store } = wp.interactivity;
+/**
+ * WordPress dependencies
+ */
+import { store, getContext } from '@wordpress/interactivity';
 
-	store( {
-		state: {
-			trueValue: true,
-			falseValue: false,
+const { state } = store( 'directive-class', {
+	state: {
+		trueValue: true,
+		falseValue: false,
+	},
+	actions: {
+		toggleTrueValue: () => {
+			state.trueValue = ! state.trueValue;
 		},
-		actions: {
-			toggleTrueValue: ( { state } ) => {
-				state.trueValue = ! state.trueValue;
-			},
-			toggleFalseValue: ( { state } ) => {
-				state.falseValue = ! state.falseValue;
-			},
-			toggleContextFalseValue: ( { context } ) => {
-				context.falseValue = ! context.falseValue;
-			},
+		toggleFalseValue: () => {
+			state.falseValue = ! state.falseValue;
 		},
-	} );
-} )( window );
+		toggleContextFalseValue: () => {
+			const context = getContext();
+			context.falseValue = ! context.falseValue;
+		},
+	},
+} );

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

@@ -5,14 +5,16 @@
  * @package gutenberg-test-interactive-blocks
  */
 
+gutenberg_enqueue_module( 'directive-context-view' );
 ?>
-<div data-wp-interactive>
+
+<div data-wp-interactive='{"namespace": "directive-context"}'>
 	<div
 		data-wp-context='{ "prop1":"parent","prop2":"parent","obj":{"prop4":"parent","prop5":"parent"},"array":[1,2,3] }'
 	>
 		<pre
 			data-testid="parent context"
-			data-wp-bind--children="derived.renderContext"
+			data-wp-bind--children="state.renderContext"
 		>
 			<!-- rendered during hydration -->
 		</pre>
@@ -53,7 +55,7 @@
 		>
 			<pre
 				data-testid="child context"
-				data-wp-bind--children="derived.renderContext"
+				data-wp-bind--children="state.renderContext"
 			>
 				<!-- rendered during hydration -->
 			</pre>
@@ -121,7 +123,7 @@
 </div>
 
 <div
-	data-wp-interactive
+	data-wp-interactive='{"namespace": "directive-context-navigate"}'
 	data-wp-navigation-id="navigation"
 	data-wp-context='{ "text": "first page" }'
 >

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

@@ -1,9 +1,33 @@
-( ( { wp } ) => {
-	const { store, navigate } = wp.interactivity;
+/**
+ * WordPress dependencies
+ */
+import { store, navigate, getContext } from '@wordpress/interactivity';
 
-	const html = `
+store( 'directive-context', {
+	state: {
+		get renderContext() {
+			const ctx = getContext();
+			return JSON.stringify( ctx, undefined, 2 );
+		},
+	},
+	actions: {
+		updateContext( event ) {
+			const ctx = getContext();
+			const { name, value } = event.target;
+			const [ key, ...path ] = name.split( '.' ).reverse();
+			const obj = path.reduceRight( ( o, k ) => o[ k ], ctx );
+			obj[ key ] = value;
+		},
+		toggleContextText() {
+			const ctx = getContext();
+			ctx.text = ctx.text === 'Text 1' ? 'Text 2' : 'Text 1';
+		},
+	},
+} );
+
+const html = `
 		<div
-			data-wp-interactive
+			data-wp-interactive='{ "namespace": "directive-context-navigate" }'
 			data-wp-navigation-id="navigation"
 			data-wp-context='{ "text": "second page" }'
 		>
@@ -15,41 +39,26 @@
 			<button data-testid="async navigate" data-wp-on--click="actions.asyncNavigate">Async Navigate</button>
 		</div>`;
 
-	store( {
-		derived: {
-			renderContext: ( { context } ) => {
-				return JSON.stringify( context, undefined, 2 );
-			},
+const { actions } = store( 'directive-context-navigate', {
+	actions: {
+		toggleText() {
+			const ctx = getContext();
+			ctx.text = 'changed dynamically';
+		},
+		addNewText() {
+			const ctx = getContext();
+			ctx.newText = 'some new text';
+		},
+		navigate() {
+			return navigate( window.location, {
+				force: true,
+				html,
+			} );
 		},
-		actions: {
-			updateContext: ( { context, event } ) => {
-				const { name, value } = event.target;
-				const [ key, ...path ] = name.split( '.' ).reverse();
-				const obj = path.reduceRight( ( o, k ) => o[ k ], context );
-				obj[ key ] = value;
-			},
-			toggleContextText: ( { context } ) => {
-				context.text = context.text === 'Text 1' ? 'Text 2' : 'Text 1';
-			},
-			toggleText: ( { context } ) => {
-				context.text = "changed dynamically";
-			},
-			addNewText: ( { context } ) => {
-				context.newText = 'some new text';
-			},
-			navigate: () => {
-				navigate( window.location, {
-					force: true,
-					html,
-				} );
-			},
-			asyncNavigate: async ({ context }) => {
-				await navigate( window.location, {
-					force: true,
-					html,
-				} );
-				context.newText = 'changed from async action';
-			}
+		*asyncNavigate() {
+			yield actions.navigate();
+			const ctx = getContext();
+			ctx.newText = 'changed from async action';
 		},
-	} );
-} )( window );
+	},
+} );

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

@@ -5,15 +5,17 @@
  * @package gutenberg-test-interactive-blocks
  */
 
+gutenberg_enqueue_module( 'directive-init-view' );
 ?>
-<div data-wp-interactive>
+
+<div data-wp-interactive='{ "namespace": "directive-init" }'>
 	<div
 		data-testid="single init"
 		data-wp-context='{"isReady":[false],"calls":[0]}'
 		data-wp-init="actions.initOne"
 	>
-		<p data-wp-text="selector.isReady" data-testid="isReady">false</p>
-		<p data-wp-text="selector.calls" data-testid="calls">0</p>
+		<p data-wp-text="state.isReady" data-testid="isReady">false</p>
+		<p data-wp-text="state.calls" data-testid="calls">0</p>
 		<button data-wp-on--click="actions.reset">reset</button>
 	</div>
 	<div
@@ -22,8 +24,8 @@
 		data-wp-init--one="actions.initOne"
 		data-wp-init--two="actions.initTwo"
 	>
-		<p data-wp-text="selector.isReady" data-testid="isReady">false,false</p>
-		<p data-wp-text="selector.calls" data-testid="calls">0,0</p>
+		<p data-wp-text="state.isReady" data-testid="isReady">false,false</p>
+		<p data-wp-text="state.calls" data-testid="calls">0,0</p>
 	</div>
 	<div
 		data-testid="init show"
@@ -35,7 +37,7 @@
 		<button data-wp-on--click="actions.toggle" data-testid="toggle">
 			toggle
 		</button>
-		<p data-wp-text="selector.isMounted" data-testid="isMounted">
+		<p data-wp-text="state.isMounted" data-testid="isMounted">
 			true
 		</p>
 	</div>

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

@@ -1,63 +1,62 @@
-( ( { wp } ) => {
-	const { store, directive, useContext } = wp.interactivity;
+/**
+ * WordPress dependencies
+ */
+import { store, directive, getContext } 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': { default: showMock },
-			},
-			element,
-			evaluate,
-			context,
-		} ) => {
-			const contextValue = useContext( context );
-			if ( ! evaluate( showMock, { context: contextValue } ) ) {
-				return null;
-			}
-			return element;
+// 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;
+	}
+);
 
-
-	store( {
-		selector: {
-			isReady: ({ context: { isReady } }) => {
-				return isReady
-				.map(v => v ? 'true': 'false')
-				.join(',');
-			},
-			calls: ({ context: { calls } }) => {
-				return calls.join(',');
-			},
-			isMounted: ({ context }) => {
-				return context.isMounted ? 'true' : 'false';
-			},
-		},
-		actions: {
-			initOne: ( { context: { isReady, calls } } ) => {
-				isReady[0] = true;
-				// Subscribe to changes in that prop.
-				calls[0]++;
-			},
-			initTwo: ( { context: { isReady, calls } } ) => {
-				isReady[1] = true;
-				calls[1]++;
-			},
-			initMount: ( { context } ) => {
-				context.isMounted = true;
-				return () => {
-					context.isMounted = false;
-				}
-			},
-			reset: ( { context: { isReady } } ) => {
-				isReady.fill(false);
-			},
-			toggle: ( { context } ) => {
-				context.isVisible = ! context.isVisible;
-			},
-		},
-	} );
-} )( window );
+store( 'directive-init', {
+	state: {
+		get isReady() {
+			const { isReady } = getContext();
+			return isReady.map( ( v ) => ( v ? 'true' : 'false' ) ).join( ',' );
+		},
+		get calls() {
+			const { calls } = getContext();
+			return calls.join( ',' );
+		},
+		get isMounted() {
+			const { isMounted } = getContext();
+			return isMounted ? 'true' : 'false';
+		},
+	},
+	actions: {
+		initOne() {
+			const { isReady, calls } = getContext();
+			isReady[ 0 ] = true;
+			// Subscribe to changes in that prop.
+			calls[ 0 ]++;
+		},
+		initTwo() {
+			const { isReady, calls } = getContext();
+			isReady[ 1 ] = true;
+			calls[ 1 ]++;
+		},
+		initMount() {
+			const ctx = getContext();
+			ctx.isMounted = true;
+			return () => {
+				ctx.isMounted = false;
+			};
+		},
+		reset() {
+			const { isReady } = getContext();
+			isReady.fill( false );
+		},
+		toggle() {
+			const ctx = getContext();
+			ctx.isVisible = ! ctx.isVisible;
+		},
+	},
+} );

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

@@ -5,9 +5,13 @@
  * @package gutenberg-test-interactive-blocks
  */
 
+gutenberg_enqueue_module( 'directive-key-view' );
 ?>
 
-<div data-wp-interactive data-wp-navigation-id="some-id">
+<div
+	data-wp-interactive='{ "namespace": "directive-key" }'
+	data-wp-navigation-id="some-id"
+>
 	<ul>
 		<li data-wp-key="id-2" data-testid="first-item">2</li>
 		<li data-wp-key="id-3">3</li>

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

@@ -1,8 +1,13 @@
-( ( { wp } ) => {
-	const { store, navigate } = wp.interactivity;
+/**
+ * WordPress dependencies
+ */
+import { store, navigate } from '@wordpress/interactivity';
 
-	const html = `
-		<div data-wp-interactive data-wp-navigation-id="some-id">
+const html = `
+		<div
+			data-wp-interactive='{ "namespace": "directive-key" }'
+			data-wp-navigation-id="some-id"
+		>
 			<ul>
 				<li data-wp-key="id-1">1</li>
 				<li data-wp-key="id-2" data-testid="second-item">2</li>
@@ -10,14 +15,13 @@
 			</ul>
 		</div>`;
 
-	store( {
-		actions: {
-			navigate: () => {
-				navigate( window.location, {
-					force: true,
-					html,
-				} );
-			},
+store( 'directive-key', {
+	actions: {
+		navigate() {
+			navigate( window.location, {
+				force: true,
+				html,
+			} );
 		},
-	} );
-} )( window );
+	},
+} );

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

@@ -5,8 +5,10 @@
  * @package gutenberg-test-interactive-blocks
  */
 
+gutenberg_enqueue_module( 'directive-on-view' );
 ?>
-<div data-wp-interactive>
+
+<div data-wp-interactive='{ "namespace": "directive-on" }'>
 	<div>
 		<p data-wp-text="state.counter" data-testid="counter">0</p>
 		<button