@wordpress/e2e-tests 7.7.0 → 7.9.0

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

@@ -0,0 +1,121 @@
+<?php
+/**
+ * HTML for testing the directive `data-wp-context`.
+ *
+ * @package gutenberg-test-interactive-blocks
+ */
+
+?>
+<div data-wp-interactive>
+	<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"
+		>
+			<!-- rendered during hydration -->
+		</pre>
+		<button
+			data-testid="parent prop1"
+			name="prop1"
+			value="modifiedFromParent"
+			data-wp-on--click="actions.updateContext"
+		>
+			prop1
+		</button>
+		<button
+			data-testid="parent prop2"
+			name="prop2"
+			value="modifiedFromParent"
+			data-wp-on--click="actions.updateContext"
+		>
+			prop2
+		</button>
+		<button
+			data-testid="parent obj.prop4"
+			name="obj.prop4"
+			value="modifiedFromParent"
+			data-wp-on--click="actions.updateContext"
+		>
+			obj.prop4
+		</button>
+		<button
+			data-testid="parent obj.prop5"
+			name="obj.prop5"
+			value="modifiedFromParent"
+			data-wp-on--click="actions.updateContext"
+		>
+			obj.prop5
+		</button>
+		<div
+			data-wp-context='{ "prop2":"child","prop3":"child","obj":{"prop5":"child","prop6":"child"},"array":[4,5,6] }'
+		>
+			<pre
+				data-testid="child context"
+				data-wp-bind--children="derived.renderContext"
+			>
+				<!-- rendered during hydration -->
+			</pre>
+			<button
+				data-testid="child prop1"
+				name="prop1"
+				value="modifiedFromChild"
+				data-wp-on--click="actions.updateContext"
+			>
+				prop1
+			</button>
+			<button
+				data-testid="child prop2"
+				name="prop2"
+				value="modifiedFromChild"
+				data-wp-on--click="actions.updateContext"
+			>
+				prop2
+			</button>
+			<button
+				data-testid="child prop3"
+				name="prop3"
+				value="modifiedFromChild"
+				data-wp-on--click="actions.updateContext"
+			>
+				prop3
+			</button>
+			<button
+				data-testid="child obj.prop4"
+				name="obj.prop4"
+				value="modifiedFromChild"
+				data-wp-on--click="actions.updateContext"
+			>
+				obj.prop4
+			</button>
+			<button
+				data-testid="child obj.prop5"
+				name="obj.prop5"
+				value="modifiedFromChild"
+				data-wp-on--click="actions.updateContext"
+			>
+				obj.prop5
+			</button>
+			<button
+				data-testid="child obj.prop6"
+				name="obj.prop6"
+				value="modifiedFromChild"
+				data-wp-on--click="actions.updateContext"
+			>
+				obj.prop6
+			</button>
+		</div>
+		<br />
+
+		<button
+			data-testid="context & other directives"
+			data-wp-context='{ "text": "Text 1" }'
+			data-wp-text="context.text"
+			data-wp-on--click="actions.toggleContextText"
+			data-wp-bind--value="context.text"
+		>
+			Toggle Context Text
+		</button>
+	</div>
+</div>

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-style/block.json

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

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

@@ -0,0 +1,93 @@
+<?php
+/**
+ * HTML for testing the directive `data-wp-style`.
+ *
+ * @package gutenberg-test-interactive-blocks
+ */
+
+?>
+
+<div data-wp-interactive>
+	<button
+		data-wp-on--click="actions.toggleColor"
+		data-testid="toggle color"
+	>
+		Toggle Color
+	</button>
+
+	<button
+		data-wp-on--click="actions.switchColorToFalse"
+		data-testid="switch color to false"
+	>
+		Switch Color to False
+	</button>
+
+	<div
+		style="color: red; background: green;"
+		data-wp-style--color="state.color"
+		data-testid="dont change style if callback returns same value on hydration"
+	>Don't change style if callback returns same value on hydration</div>
+
+	<div
+		style="color: blue; background: green;"
+		data-wp-style--color="state.falseValue"
+		data-testid="remove style if callback returns falsy value on hydration"
+	>Remove style if callback returns falsy value on hydration</div>
+
+	<div
+		style="color: blue; background: green;"
+		data-wp-style--color="state.color"
+		data-testid="change style if callback returns a new value on hydration"
+	>Change style if callback returns a new value on hydration</div>
+
+	<div
+		style="color: blue; background: green; border: 1px solid black"
+		data-wp-style--color="state.falseValue"
+		data-wp-style--background="state.color"
+		data-wp-style--border="state.border"
+		data-testid="handles multiple styles and callbacks on hydration"
+	>Handles multiple styles and callbacks on hydration</div>
+
+	<div
+		data-wp-style--color="state.color"
+		data-testid="can add style when style attribute is missing on hydration"
+	>Can add style when style attribute is missing on hydration</div>
+
+	<div
+		style="color: red;"
+		data-wp-style--color="state.color"
+		data-testid="can toggle style"
+	>Can toggle style</div>
+
+	<div
+		style="color: red;"
+		data-wp-style--color="state.color"
+		data-testid="can remove style"
+	>Can remove style</div>
+
+	<div
+		style="color: blue; background: green; border: 1px solid black;"
+		data-wp-style--background="state.color"
+		data-testid="can toggle style in the middle"
+	>Can toggle style in the middle</div>
+
+	<div
+		style="background-color: green;"
+		data-wp-style--background-color="state.color"
+		data-testid="handles styles names with hyphens"
+	>Handles styles names with hyphens</div>
+
+	<div data-wp-context='{ "color": "blue" }'>
+		<div
+			style="color: blue;"
+			data-wp-style--color="context.color"
+			data-testid="can use context values"
+		></div>
+		<button
+			data-wp-on--click="actions.toggleContext"
+			data-testid="toggle context"
+		>
+			Toggle context
+		</button>
+	</div>
+</div>

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

@@ -0,0 +1,22 @@
+( ( { wp } ) => {
+	const { store } = wp.interactivity;
+
+	store( {
+		state: {
+			falseValue: false,
+			color: "red",
+			border: "2px solid yellow"
+		},
+		actions: {
+			toggleColor: ( { state } ) => {
+				state.color = state.color === "red" ? "blue" : "red";
+			},
+			switchColorToFalse: ({ state }) => {
+				state.color = false;
+			},
+			toggleContext: ( { context } ) => {
+				context.color = context.color === "red" ? "blue" : "red";
+			},
+		},
+	} );
+} )( 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>