@wordpress/e2e-tests 7.7.0 → 7.8.0

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

@@ -0,0 +1,22 @@
+( ( { wp } ) => {
+	const { store } = wp.interactivity;
+
+	store( {
+		derived: {
+			renderContext: ( { context } ) => {
+				return JSON.stringify( context, undefined, 2 );
+			},
+		},
+		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';
+			},
+		},
+	} );
+} )( window );

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

@@ -0,0 +1,14 @@
+{
+	"apiVersion": 2,
+	"name": "test/directive-effect",
+	"title": "E2E Interactivity tests - directive effect",
+	"category": "text",
+	"icon": "heart",
+	"description": "",
+	"supports": {
+		"interactivity": true
+	},
+	"textdomain": "e2e-interactivity",
+	"viewScript": "directive-effect-view",
+	"render": "file:./render.php"
+}

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

@@ -0,0 +1,27 @@
+<?php
+/**
+ * HTML for testing the directive `data-wp-effect`.
+ *
+ * @package gutenberg-test-interactive-blocks
+ */
+
+?>
+<div data-wp-interactive>
+	<div data-wp-fakeshow="state.isOpen">
+		<input
+			data-testid="input"
+			data-wp-effect="effects.elementAddedToTheDOM"
+		/>
+	</div>
+
+	<div
+		data-wp-text="selectors.elementInTheDOM"
+		data-testid="element in the DOM"
+	></div>
+
+	<div data-wp-effect="effects.changeFocus"></div>
+
+	<button data-testid="toggle" data-wp-on--click="actions.toggle">
+		Update
+	</button>
+</div>

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

@@ -0,0 +1,61 @@
+( ( { wp } ) => {
+	const { store, directive, useContext, useMemo } = wp.interactivity;
+
+	// Fake `data-wp-fakeshow` directive to test when things are removed from the DOM.
+	// Replace with `data-wp-show` when it's ready.
+	directive(
+		'fakeshow',
+		( {
+			directives: {
+				fakeshow: { default: fakeshow },
+			},
+			element,
+			evaluate,
+			context,
+		} ) => {
+			const contextValue = useContext( context );
+			const children = useMemo(
+				() =>
+					element.type === 'template'
+						? element.props.templateChildren
+						: element,
+				[]
+			);
+			if ( ! evaluate( fakeshow, { context: contextValue } ) ) return null;
+			return children;
+		}
+	);
+
+	store( {
+		state: {
+			isOpen: true,
+			isElementInTheDOM: false,
+		},
+		selectors: {
+			elementInTheDOM: ( { state } ) =>
+				state.isElementInTheDOM
+					? 'element is in the DOM'
+					: 'element is not in the DOM',
+		},
+		actions: {
+			toggle( { state } ) {
+				state.isOpen = ! state.isOpen;
+			},
+		},
+		effects: {
+			elementAddedToTheDOM: ( { state } ) => {
+				state.isElementInTheDOM = true;
+
+				return () => {
+					state.isElementInTheDOM = false;
+				};
+			},
+			changeFocus: ( { state } ) => {
+				if ( state.isOpen ) {
+					document.querySelector( "[data-testid='input']" ).focus();
+				}
+			},
+		},
+	} );
+
+} )( window );

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

@@ -0,0 +1,14 @@
+{
+	"apiVersion": 2,
+	"name": "test/directive-priorities",
+	"title": "E2E Interactivity tests - directive priorities",
+	"category": "text",
+	"icon": "heart",
+	"description": "",
+	"supports": {
+		"interactivity": true
+	},
+	"textdomain": "e2e-interactivity",
+	"viewScript": "directive-priorities-view",
+	"render": "file:./render.php"
+}

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

@@ -0,0 +1,20 @@
+<?php
+/**
+ * HTML for testing priorities between directives.
+ *
+ * @package gutenberg-test-interactive-blocks
+ */
+
+?>
+<div data-wp-interactive>
+	<pre data-testid="execution order"></pre>
+
+	<!-- Element with test directives -->
+	<div
+		data-testid="test directives"
+		data-wp-test-attribute
+		data-wp-test-children
+		data-wp-test-text
+		data-wp-test-context
+	></div>
+</div>

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

@@ -0,0 +1,121 @@
+( ( { wp } ) => {
+	/**
+	 * WordPress dependencies
+	 */
+	const {
+		store,
+		directive,
+		deepSignal,
+		useContext,
+		useEffect,
+		createElement: h
+	} = wp.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 }`;
+	};
+
+	/**
+	 * 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( {
+				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;
+	} );
+
+	/**
+	 * 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 }
+	);
+
+	/**
+	 * 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 }
+	);
+
+	store( {
+		actions: {
+			updateText( { context } ) {
+				context.text = 'updated';
+			},
+			updateAttribute( { context } ) {
+				context.attribute = 'updated';
+			},
+		},
+	} );
+} )( window );

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

@@ -0,0 +1,14 @@
+{
+	"apiVersion": 2,
+	"name": "test/directive-show",
+	"title": "E2E Interactivity tests - directive show",
+	"category": "text",
+	"icon": "heart",
+	"description": "",
+	"supports": {
+		"interactivity": true
+	},
+	"textdomain": "e2e-interactivity",
+	"viewScript": "directive-show-view",
+	"render": "file:./render.php"
+}

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

@@ -0,0 +1,53 @@
+<?php
+/**
+ * HTML for testing the directive `data-wp-show`.
+ *
+ * @package gutenberg-test-interactive-blocks
+ */
+
+?>
+<div data-wp-interactive>
+	<button
+		data-wp-on--click="actions.toggleTrueValue"
+		data-testid="toggle trueValue"
+	>
+		Toggle trueValue
+	</button>
+
+	<button
+		data-wp-on--click="actions.toggleFalseValue"
+		data-testid="toggle falseValue"
+	>
+		Toggle falseValue
+	</button>
+
+	<div
+		data-wp-show="state.trueValue"
+		id="truthy-div"
+		data-testid="show if callback returns truthy value"
+	>
+		<p>trueValue children</p>
+	</div>
+
+	<div
+		data-wp-show="state.falseValue"
+		data-testid="do not show if callback returns false value"
+	>
+		<p>falseValue children</p>
+	</div>
+
+	<div data-wp-context='{ "falseValue": false }'>
+		<div
+			data-wp-show="context.falseValue"
+			data-testid="can use context values"
+		>
+			falseValue
+		</div>
+		<button
+			data-wp-on--click="actions.toggleContextFalseValue"
+			data-testid="toggle context false value"
+		>
+			Toggle context falseValue
+		</button>
+	</div>
+</div>

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

@@ -0,0 +1,24 @@
+( ( { wp } ) => {
+	/**
+	 * WordPress dependencies
+	 */
+	const { store } = wp.interactivity;
+
+	store( {
+		state: {
+			trueValue: true,
+			falseValue: false,
+		},
+		actions: {
+			toggleTrueValue: ( { state } ) => {
+				state.trueValue = ! state.trueValue;
+			},
+			toggleFalseValue: ( { state } ) => {
+				state.falseValue = ! state.falseValue;
+			},
+			toggleContextFalseValue: ( { context } ) => {
+				context.falseValue = ! context.falseValue;
+			},
+		},
+	} );
+} )( window );

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

@@ -0,0 +1,14 @@
+{
+	"apiVersion": 2,
+	"name": "test/directive-text",
+	"title": "E2E Interactivity tests - directive text",
+	"category": "text",
+	"icon": "heart",
+	"description": "",
+	"supports": {
+		"interactivity": true
+	},
+	"textdomain": "e2e-interactivity",
+	"viewScript": "directive-text-view",
+	"render": "file:./render.php"
+}

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

@@ -0,0 +1,35 @@
+<?php
+/**
+ * HTML for testing the directive `data-wp-text`.
+ *
+ * @package gutenberg-test-interactive-blocks
+ */
+
+?>
+<div data-wp-interactive>
+	<div>
+		<span
+			data-wp-text="state.text"
+			data-testid="show state text"
+		></span>
+		<button
+			data-wp-on--click="actions.toggleStateText"
+			data-testid="toggle state text"
+		>
+			Toggle State Text
+		</button>
+	</div>
+
+	<div data-wp-context='{ "text": "Text 1" }'>
+		<span
+			data-wp-text="context.text"
+			data-testid="show context text"
+		></span>
+		<button
+			data-wp-on--click="actions.toggleContextText"
+			data-testid="toggle context text"
+		>
+			Toggle Context Text
+		</button>
+	</div>
+</div>

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

@@ -0,0 +1,17 @@
+( ( { wp } ) => {
+	const { store } = wp.interactivity;
+
+	store( {
+		state: {
+			text: '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';
+			},
+		},
+	} );
+} )( window );

package/plugins/interactive-blocks/negation-operator/block.json

@@ -0,0 +1,14 @@
+{
+	"apiVersion": 2,
+	"name": "test/negation-operator",
+	"title": "E2E Interactivity tests - negation operator",
+	"category": "text",
+	"icon": "heart",
+	"description": "",
+	"supports": {
+		"interactivity": true
+	},
+	"textdomain": "e2e-interactivity",
+	"viewScript": "negation-operator-view",
+	"render": "file:./render.php"
+}

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

@@ -0,0 +1,26 @@
+<?php
+/**
+ * HTML for testing the negation operator in directives.
+ *
+ * @package gutenberg-test-interactive-blocks
+ */
+
+?>
+<div data-wp-interactive>
+	<button
+		data-wp-on--click="actions.toggle"
+		data-testid="toggle active value"
+	>
+		Toggle Active Value
+	</button>
+
+	<div
+		data-wp-bind--hidden="!state.active"
+		data-testid="add hidden attribute if state is not active"
+	></div>
+
+	<div
+		data-wp-bind--hidden="!selectors.active"
+		data-testid="add hidden attribute if selector is not active"
+	></div>
+</div>

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

@@ -0,0 +1,22 @@
+( ( { wp } ) => {
+	/**
+	 * WordPress dependencies
+	 */
+	const { store } = wp.interactivity;
+
+	store( {
+		selectors: {
+			active: ( { state } ) => {
+				return state.active;
+			},
+		},
+		state: {
+			active: false,
+		},
+		actions: {
+			toggle: ( { state } ) => {
+				state.active = ! state.active;
+			},
+		},
+	} );
+} )( window );

package/plugins/interactive-blocks/store-tag/block.json

@@ -0,0 +1,14 @@
+{
+	"apiVersion": 2,
+	"name": "test/store-tag",
+	"title": "E2E Interactivity tests - store tag",
+	"category": "text",
+	"icon": "heart",
+	"description": "",
+	"supports": {
+		"interactivity": true
+	},
+	"textdomain": "e2e-interactivity",
+	"viewScript": "store-tag-view",
+	"render": "file:./render.php"
+}

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

@@ -0,0 +1,64 @@
+<?php
+/**
+ * HTML for testing the hydration of the serialized store.
+ *
+ * @package gutenberg-test-interactive-blocks
+ * @phpcs:disable VariableAnalysis.CodeAnalysis.VariableAnalysis.UndefinedVariable
+ */
+
+// These variables simulates SSR.
+$test_store_tag_counter = 'ok' === $attributes['condition'] ? 3 : 0;
+$test_store_tag_double  = $test_store_tag_counter * 2;
+?>
+<div data-wp-interactive>
+	<div>
+		Counter:
+		<span
+			data-wp-bind--children="state.counter.value"
+			data-testid="counter value"
+			><?php echo $test_store_tag_counter; ?></span
+		>
+		<br />
+		Double:
+		<span
+			data-wp-bind--children="state.counter.double"
+			data-testid="counter double"
+			><?php echo $test_store_tag_double; ?></span
+		>
+		<br />
+		<button
+			data-wp-on--click="actions.counter.increment"
+			data-testid="counter button"
+		>
+			+1
+		</button>
+		<span
+			data-wp-bind--children="state.counter.clicks"
+			data-testid="counter clicks"
+			>0</span
+		>
+		clicks
+	</div>
+</div>
+<?php
+
+if ( 'missing' !== $attributes['condition'] ) {
+
+	if ( 'ok' === $attributes['condition'] ) {
+		$test_store_tag_json = '{ "state": { "counter": { "value": 3 } } }';
+	}
+
+	if ( 'corrupted-json' === $attributes['condition'] ) {
+		$test_store_tag_json = 'this is not a JSON';
+	}
+
+	if ( 'invalid-state' === $attributes['condition'] ) {
+		$test_store_tag_json = '{ "state": null }';
+	}
+
+	echo <<<HTML
+	<script type="application/json" id="wp-interactivity-store-data">
+		$test_store_tag_json
+	</script>
+HTML;
+}

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

@@ -0,0 +1,24 @@
+( ( { wp } ) => {
+	/**
+	 * WordPress dependencies
+	 */
+	const { store } = wp.interactivity;
+
+	store( {
+		state: {
+			counter: {
+				// `value` is defined in the server.
+				double: ( { state } ) => state.counter.value * 2,
+				clicks: 0,
+			},
+		},
+		actions: {
+			counter: {
+				increment: ( { state } ) => {
+					state.counter.value += 1;
+					state.counter.clicks += 1;
+				},
+			},
+		},
+	} );
+} )( window );

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

@@ -0,0 +1,14 @@
+{
+	"apiVersion": 2,
+	"name": "test/tovdom",
+	"title": "E2E Interactivity tests - tovdom",
+	"category": "text",
+	"icon": "heart",
+	"description": "",
+	"supports": {
+		"interactivity": true
+	},
+	"textdomain": "e2e-interactivity",
+	"viewScript": "tovdom-view",
+	"render": "file:./render.php"
+}

package/plugins/interactive-blocks/tovdom/cdata.js

@@ -0,0 +1,15 @@
+const cdata = `
+	<div>
+		<![CDATA[##1##]]>
+		<div data-testid="it should keep this node between CDATA">
+			<![CDATA[##2##]]>
+		</div>
+	</div>
+	`;
+
+const cdataElement = new DOMParser()
+	.parseFromString( cdata, 'text/xml' )
+	.querySelector( 'div' );
+document
+	.getElementById( 'replace-with-cdata' )
+	.replaceWith( cdataElement );

package/plugins/interactive-blocks/tovdom/processing-instructions.js

@@ -0,0 +1,16 @@
+const processingInstructions = `
+	<div>
+		<?xpacket ##1## ?>
+		<div data-testid="it should keep this node between processing instructions">
+			Processing instructions inner node
+			<?xpacket ##2## ?>
+		</div>
+	</div>
+	`;
+
+const processingInstructionsElement = new DOMParser()
+	.parseFromString( processingInstructions, 'text/xml' )
+	.querySelector( 'div' );
+document
+	.getElementById( 'replace-with-processing-instructions' )
+	.replaceWith( processingInstructionsElement );