@wordpress/e2e-tests 7.16.0 → 7.18.0

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

@@ -1,27 +1,30 @@
-( ( { wp } ) => {
-	const { store } = wp.interactivity;
+/**
+ * WordPress dependencies
+ */
+import { store, getContext } from '@wordpress/interactivity';
 
-	store( {
-		state: {
-			counter: 0,
-			text: ''
+const { state } = store( 'directive-on', {
+	state: {
+		counter: 0,
+		text: '',
+	},
+	actions: {
+		clickHandler: ( event ) => {
+			state.counter += 1;
+			event.target.dispatchEvent(
+				new CustomEvent( 'customevent', { bubbles: true } )
+			);
 		},
-		actions: {
-			clickHandler: ( { state, event } ) => {
-				state.counter += 1;
-				event.target.dispatchEvent(
-					new CustomEvent( 'customevent', { bubbles: true } )
-				);
-			},
-			inputHandler: ( { state, event } ) => {
-				state.text = event.target.value;
-			},
-			selectHandler: ( { context, event } ) => {
-				context.option = event.target.value;
-			},
-			customEventHandler: ({ context }) => {
-				context.customEvents += 1;
-			},
+		inputHandler: ( event ) => {
+			state.text = event.target.value;
 		},
-	} );
-} )( window );
+		selectHandler: ( event ) => {
+			const context = getContext();
+			context.option = event.target.value;
+		},
+		customEventHandler: () => {
+			const context = getContext();
+			context.customEvents += 1;
+		},
+	},
+} );

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

@@ -5,8 +5,10 @@
  * @package gutenberg-test-interactive-blocks
  */
 
+gutenberg_enqueue_module( 'directive-priorities-view' );
 ?>
-<div data-wp-interactive>
+
+<div data-wp-interactive='{ "namespace": "directive-priorities" }'>
 	<pre data-testid="execution order"></pre>
 
 	<!-- Element with test directives -->
@@ -20,5 +22,8 @@
 </div>
 
 <div data-testid="non-existent-directives">
-	<div data-wp-interactive ><div data-wp-non-existent-directive></div></div>
+	<!-- WARNING: the `div` with `data-wp-non-existent-directive` should remain
+		inline (i.e., without new line or blank characters in between) to
+		ensure it is the only child node. Otherwise, tests could fail. -->
+	<div data-wp-interactive='{ "namespace": "directive-priorities" }'><div data-wp-non-existent-directive></div></div>
 </div>

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

@@ -1,121 +1,117 @@
-( ( { wp } ) => {
-	/**
-	 * WordPress dependencies
-	 */
-	const {
-		store,
-		directive,
-		deepSignal,
-		useContext,
-		useEffect,
-		createElement: h
-	} = wp.interactivity;
+/**
+ * WordPress dependencies
+ */
+import {
+	store,
+	getContext,
+	directive,
+	deepSignal,
+	useEffect,
+	createElement as h,
+} from '@wordpress/interactivity';
 
-	/**
-	 * Util to check that render calls happen in order.
-	 *
-	 * @param {string} n Name passed from the directive being executed.
-	 */
-	const executionProof = ( n ) => {
-		const el = document.querySelector( '[data-testid="execution order"]' );
-		if ( ! el.textContent ) el.textContent = n;
-		else el.textContent += `, ${ n }`;
-	};
+/**
+ * Namespace used in custom directives and store.
+ */
+const namespace = 'directive-priorities';
 
-	/**
-	 * Simple context directive, just for testing purposes. It provides a deep
-	 * signal with these two properties:
-	 * - attribute: 'from context'
-	 * - text: 'from context'
-	 */
-	directive(
-		'test-context',
-		( { context: { Provider }, props: { children } } ) => {
-			executionProof( 'context' );
-			const value = deepSignal( {
+/**
+ * Util to check that render calls happen in order.
+ *
+ * @param {string} n Name passed from the directive being executed.
+ */
+const executionProof = ( n ) => {
+	const el = document.querySelector( '[data-testid="execution order"]' );
+	if ( ! el.textContent ) el.textContent = n;
+	else el.textContent += `, ${ n }`;
+};
+
+/**
+ * Simple context directive, just for testing purposes. It provides a deep
+ * signal with these two properties:
+ * - attribute: 'from context'
+ * - text: 'from context'
+ */
+directive(
+	'test-context',
+	( { context: { Provider }, props: { children } } ) => {
+		executionProof( 'context' );
+		const value = deepSignal( {
+			[ namespace ]: {
 				attribute: 'from context',
 				text: 'from context',
-			} );
-			return h( Provider, { value }, children );
-		},
-		{ priority: 8 }
-	);
-
-	/**
-	 * Simple attribute directive, for testing purposes. It reads the value of
-	 * `attribute` from context and populates `data-attribute` with it.
-	 */
-	directive( 'test-attribute', ( { context, evaluate, element } ) => {
-		executionProof( 'attribute' );
-		const contextValue = useContext( context );
-		const attributeValue = evaluate( 'context.attribute', {
-			context: contextValue,
+			},
 		} );
-		useEffect( () => {
-			element.ref.current.setAttribute(
-				'data-attribute',
-				attributeValue,
-			);
-		}, [] );
-		element.props[ 'data-attribute' ] = attributeValue;
+		return h( Provider, { value }, children );
+	},
+	{ priority: 8 }
+);
+
+/**
+ * Simple attribute directive, for testing purposes. It reads the value of
+ * `attribute` from context and populates `data-attribute` with it.
+ */
+directive( 'test-attribute', ( { evaluate, element } ) => {
+	executionProof( 'attribute' );
+	const attributeValue = evaluate( {
+		namespace,
+		value: 'context.attribute',
 	} );
+	useEffect( () => {
+		element.ref.current.setAttribute( 'data-attribute', attributeValue );
+	}, [] );
+	element.props[ 'data-attribute' ] = attributeValue;
+} );
 
-	/**
-	 * Simple text directive, for testing purposes. It reads the value of
-	 * `text` from context and populates `children` with it.
-	 */
-	directive(
-		'test-text',
-		( { context, evaluate, element } ) => {
-			executionProof( 'text' );
-			const contextValue = useContext( context );
-			const textValue = evaluate( 'context.text', {
-				context: contextValue,
-			} );
-			element.props.children =
-				h( 'p', { 'data-testid': 'text' }, textValue );
-		},
-		{ priority: 12 }
-	);
+/**
+ * Simple text directive, for testing purposes. It reads the value of
+ * `text` from context and populates `children` with it.
+ */
+directive(
+	'test-text',
+	( { evaluate, element } ) => {
+		executionProof( 'text' );
+		const textValue = evaluate( { namespace, value: 'context.text' } );
+		element.props.children = h( 'p', { 'data-testid': 'text' }, textValue );
+	},
+	{ priority: 12 }
+);
 
-	/**
-	 * Children directive, for testing purposes. It adds a wrapper around
-	 * `children`, including two buttons to modify `text` and `attribute` values
-	 * from the received context.
-	 */
-	directive(
-		'test-children',
-		( { context, evaluate, element } ) => {
-			executionProof( 'children' );
-			const contextValue = useContext( context );
-			const updateAttribute = () => {
-				evaluate(
-					'actions.updateAttribute',
-					{ context: contextValue }
-				);
-			};
-			const updateText = () => {
-				evaluate( 'actions.updateText', { context: contextValue } );
-			};
-			element.props.children = h(
-				'div',
-				{},
-				element.props.children,
-				h( 'button', { onClick: updateAttribute }, 'Update attribute' ),
-				h( 'button', { onClick: updateText }, 'Update text' )
-			);
-		},
-		{ priority: 14 }
-	);
+/**
+ * Children directive, for testing purposes. It adds a wrapper around
+ * `children`, including two buttons to modify `text` and `attribute` values
+ * from the received context.
+ */
+directive(
+	'test-children',
+	( { evaluate, element } ) => {
+		executionProof( 'children' );
+		const updateAttribute = () => {
+			evaluate( { namespace, value: 'actions.updateAttribute' } );
+		};
+		const updateText = () => {
+			evaluate( { namespace, value: 'actions.updateText' } );
+		};
+		element.props.children = h(
+			'div',
+			{},
+			element.props.children,
+			h( 'button', { onClick: updateAttribute }, 'Update attribute' ),
+			h( 'button', { onClick: updateText }, 'Update text' )
+		);
+	},
+	{ priority: 14 }
+);
 
-	store( {
-		actions: {
-			updateText( { context } ) {
-				context.text = 'updated';
-			},
-			updateAttribute( { context } ) {
-				context.attribute = 'updated';
-			},
+store( 'directive-priorities', {
+	actions: {
+		updateText() {
+			const context = getContext();
+			context.text = 'updated';
 		},
-	} );
-} )( window );
+		updateAttribute() {
+			const context = getContext();
+			context.attribute = 'updated';
+		},
+	},
+} );

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

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

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

@@ -1,18 +1,20 @@
-( ( { wp } ) => {
-	const { store } = wp.interactivity;
+/**
+ * WordPress dependencies
+ */
+import { store, getContext } from '@wordpress/interactivity';
 
-	store( {
-		state: {
-			slot: ''
+const { state } = store( 'directive-slots', {
+	state: {
+		slot: '',
+	},
+	actions: {
+		changeSlot( event ) {
+			state.slot = event.target.dataset.slot;
 		},
-		actions: {
-			changeSlot: ( { state, event } ) => {
-				state.slot = event.target.dataset.slot;
-			},
-			updateSlotText: ( { context } ) => {
-				const n = context.text[1];
-				context.text = `[${n} updated]`;
-			},
+		updateSlotText() {
+			const context = getContext();
+			const n = context.text[ 1 ];
+			context.text = `[${ n } updated]`;
 		},
-	} );
-} )( window );
+	},
+} );

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

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

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

@@ -1,22 +1,24 @@
-( ( { wp } ) => {
-	const { store } = wp.interactivity;
+/**
+ * WordPress dependencies
+ */
+import { store, getContext } from '@wordpress/interactivity';
 
-	store( {
-		state: {
-			falseValue: false,
-			color: "red",
-			border: "2px solid yellow"
+const { state } = store( 'directive-style', {
+	state: {
+		falseValue: false,
+		color: 'red',
+		border: '2px solid yellow',
+	},
+	actions: {
+		toggleColor() {
+			state.color = state.color === 'red' ? 'blue' : 'red';
 		},
-		actions: {
-			toggleColor: ( { state } ) => {
-				state.color = state.color === "red" ? "blue" : "red";
-			},
-			switchColorToFalse: ({ state }) => {
-				state.color = false;
-			},
-			toggleContext: ( { context } ) => {
-				context.color = context.color === "red" ? "blue" : "red";
-			},
+		switchColorToFalse() {
+			state.color = false;
 		},
-	} );
-} )( window );
+		toggleContext() {
+			const context = getContext();
+			context.color = context.color === 'red' ? 'blue' : 'red';
+		},
+	},
+} );

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

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

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

@@ -1,17 +1,19 @@
-( ( { wp } ) => {
-	const { store } = wp.interactivity;
+/**
+ * WordPress dependencies
+ */
+import { store, getContext } from '@wordpress/interactivity';
 
-	store( {
-		state: {
-			text: 'Text 1',
+const { state } = store( 'directive-context', {
+	state: {
+		text: 'Text 1',
+	},
+	actions: {
+		toggleStateText() {
+			state.text = state.text === 'Text 1' ? 'Text 2' : 'Text 1';
 		},
-		actions: {
-			toggleStateText: ( { state } ) => {
-				state.text = state.text === 'Text 1' ? 'Text 2' : 'Text 1';
-			},
-			toggleContextText: ( { context } ) => {
-				context.text = context.text === 'Text 1' ? 'Text 2' : 'Text 1';
-			},
+		toggleContextText() {
+			const context = getContext();
+			context.text = context.text === 'Text 1' ? 'Text 2' : 'Text 1';
 		},
-	} );
-} )( window );
+	},
+} );

package/plugins/interactive-blocks/{store-afterload → directive-watch}/block.json

@@ -1,7 +1,7 @@
 {
 	"apiVersion": 2,
-	"name": "test/store-afterload",
-	"title": "E2E Interactivity tests - store afterload",
+	"name": "test/directive-watch",
+	"title": "E2E Interactivity tests - directive watch",
 	"category": "text",
 	"icon": "heart",
 	"description": "",
@@ -9,6 +9,6 @@
 		"interactivity": true
 	},
 	"textdomain": "e2e-interactivity",
-	"viewScript": "store-afterload-view",
+	"viewScript": "directive-watch-view",
 	"render": "file:./render.php"
 }

package/plugins/interactive-blocks/{directive-effect → directive-watch}/render.php

@@ -1,29 +1,31 @@
 <?php
 /**
- * HTML for testing the directive `data-wp-effect`.
+ * HTML for testing the directive `data-wp-watch`.
  *
  * @package gutenberg-test-interactive-blocks
  */
 
+gutenberg_enqueue_module( 'directive-watch-view' );
 ?>
-<div data-wp-interactive>
+
+<div data-wp-interactive='{ "namespace": "directive-watch" }'>
 	<div data-wp-show-mock="state.isOpen">
 		<input
 			data-testid="input"
-			data-wp-effect="effects.elementAddedToTheDOM"
+			data-wp-watch="callbacks.elementAddedToTheDOM"
 		/>
 	</div>
 
 	<div
-		data-wp-text="selectors.elementInTheDOM"
+		data-wp-text="state.elementInTheDOM"
 		data-testid="element in the DOM"
 	></div>
 
-	<div data-wp-effect="effects.changeFocus"></div>
+	<div data-wp-watch="callbacks.changeFocus"></div>
 
 	<div
 		data-testid="short-circuit infinite loops"
-		data-wp-effect="effects.infiniteLoop"
+		data-wp-watch="callbacks.infiniteLoop"
 		data-wp-text="state.counter"
 	>
 		0

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

@@ -0,0 +1,53 @@
+/**
+ * WordPress dependencies
+ */
+import { store, directive } from '@wordpress/interactivity';
+
+// Fake `data-wp-show-mock` 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-watch', {
+	state: {
+		isOpen: true,
+		isElementInTheDOM: false,
+		counter: 0,
+		get elementInTheDOM() {
+			return state.isElementInTheDOM
+				? 'element is in the DOM'
+				: 'element is not in the DOM';
+		},
+	},
+	actions: {
+		toggle() {
+			state.isOpen = ! state.isOpen;
+		},
+		increment() {
+			state.counter = state.counter + 1;
+		},
+	},
+	callbacks: {
+		elementAddedToTheDOM: () => {
+			state.isElementInTheDOM = true;
+
+			return () => {
+				state.isElementInTheDOM = false;
+			};
+		},
+		changeFocus: () => {
+			if ( state.isOpen ) {
+				document.querySelector( "[data-testid='input']" ).focus();
+			}
+		},
+		infiniteLoop: () => {
+			state.counter = state.counter + 1;
+		},
+	},
+} );

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

@@ -5,8 +5,10 @@
  * @package gutenberg-test-interactive-blocks
  */
 
+gutenberg_enqueue_module( 'negation-operator-view' );
 ?>
-<div data-wp-interactive>
+
+<div data-wp-interactive='{ "namespace": "negation-operator" }'>
 	<button
 		data-wp-on--click="actions.toggle"
 		data-testid="toggle active value"
@@ -20,7 +22,7 @@
 	></div>
 
 	<div
-		data-wp-bind--hidden="!selectors.active"
+		data-wp-bind--hidden="!state.isActive"
 		data-testid="add hidden attribute if selector is not active"
 	></div>
 </div>

package/plugins/interactive-blocks/negation-operator/view.js

@@ -1,22 +1,18 @@
-( ( { wp } ) => {
-	/**
-	 * WordPress dependencies
-	 */
-	const { store } = wp.interactivity;
+/**
+ * WordPress dependencies
+ */
+import { store } from '@wordpress/interactivity';
 
-	store( {
-		selectors: {
-			active: ( { state } ) => {
-				return state.active;
-			},
+const { state } = store( 'negation-operator', {
+	state: {
+		active: false,
+		get isActive() {
+			return state.active;
 		},
-		state: {
-			active: false,
+	},
+	actions: {
+		toggle() {
+			state.active = ! state.active;
 		},
-		actions: {
-			toggle: ( { state } ) => {
-				state.active = ! state.active;
-			},
-		},
-	} );
-} )( window );
+	},
+} );