@wordpress/e2e-tests 7.7.0 → 7.8.0

package/CHANGELOG.md

@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 7.8.0 (2023-07-05)
+
 ## 7.7.0 (2023-06-23)
 
 ## 7.6.0 (2023-06-07)

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/e2e-tests",
-	"version": "7.7.0",
+	"version": "7.8.0",
 	"description": "End-To-End (E2E) tests for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -23,11 +23,11 @@
 		"node": ">=14"
 	},
 	"dependencies": {
-		"@wordpress/e2e-test-utils": "^10.7.0",
-		"@wordpress/jest-console": "^7.7.0",
-		"@wordpress/jest-puppeteer-axe": "^6.7.0",
-		"@wordpress/scripts": "^26.7.0",
-		"@wordpress/url": "^3.37.0",
+		"@wordpress/e2e-test-utils": "^10.8.0",
+		"@wordpress/jest-console": "^7.8.0",
+		"@wordpress/jest-puppeteer-axe": "^6.8.0",
+		"@wordpress/scripts": "^26.8.0",
+		"@wordpress/url": "^3.38.0",
 		"chalk": "^4.0.0",
 		"expect-puppeteer": "^4.4.0",
 		"filenamify": "^4.2.0",
@@ -45,5 +45,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "d47d8069e1aae05d4a16dc287902eb90edcbff50"
+	"gitHead": "bcd13d59b22553b3c9dc5869077bff1e864cf9f5"
 }

package/plugins/block-api/index.js

@@ -1,13 +1,16 @@
 ( function () {
 	const { registerBlockType } = wp.blocks;
+	const { useBlockProps } = wp.blockEditor;
+	const { createElement: el } = wp.element;
 	const { addFilter } = wp.hooks;
 
 	registerBlockType( 'e2e-tests/hello-world', {
+		apiVersion: 3,
 		title: 'Hello World',
 		description: 'Hello World test block.',
 		category: 'widgets',
-		edit() {
-			return 'Hello Editor!';
+		edit: function Edit() {
+			return el( 'p', useBlockProps(), 'Hello Editor!' );
 		},
 		save() {
 			return 'Hello Frontend!';

package/plugins/block-api.php

@@ -16,6 +16,8 @@ function enqueue_block_api_plugin_script() {
 		plugins_url( 'block-api/index.js', __FILE__ ),
 		array(
 			'wp-blocks',
+			'wp-block-editor',
+			'wp-element',
 			'wp-hooks',
 		),
 		filemtime( plugin_dir_path( __FILE__ ) . 'block-api/index.js' ),

package/plugins/deprecated-node-matcher/index.js

@@ -1,9 +1,10 @@
 ( function () {
 	const registerBlockType = wp.blocks.registerBlockType;
-	const RichText = wp.blockEditor.RichText;
+	const { useBlockProps, RichText } = wp.blockEditor;
 	const el = wp.element.createElement;
 
 	registerBlockType( 'core/deprecated-children-matcher', {
+		apiVersion: 3,
 		title: 'Deprecated Children Matcher',
 		attributes: {
 			value: {
@@ -13,40 +14,35 @@
 			},
 		},
 		category: 'text',
-		edit( { attributes, setAttributes } ) {
+		edit: function EditChildrenMatcher( { attributes, setAttributes } ) {
 			return el( RichText, {
 				tagName: 'p',
 				value: attributes.value,
 				onChange( nextValue ) {
 					setAttributes( { value: nextValue } );
 				},
+				...useBlockProps(),
 			} );
 		},
 		save( { attributes } ) {
 			return el( RichText.Content, {
 				tagName: 'p',
 				value: attributes.value,
+				...useBlockProps.save(),
 			} );
 		},
 	} );
 
 	function toRichTextValue( value ) {
-		// eslint-disable-next-line no-undef
-		return _.map( value, function ( subValue ) {
-			return subValue.children;
-		} );
+		return value?.map( ( { children } ) => children ) ?? [];
 	}
 
 	function fromRichTextValue( value ) {
-		// eslint-disable-next-line no-undef
-		return _.map( value, function ( subValue ) {
-			return {
-				children: subValue,
-			};
-		} );
+		return value.map( ( subValue ) => ( { children: subValue } ) );
 	}
 
 	registerBlockType( 'core/deprecated-node-matcher', {
+		apiVersion: 3,
 		title: 'Deprecated Node Matcher',
 		attributes: {
 			value: {
@@ -61,10 +57,10 @@
 			},
 		},
 		category: 'text',
-		edit( { attributes, setAttributes } ) {
+		edit: function EditNodeMatcher( { attributes, setAttributes } ) {
 			return el(
 				'blockquote',
-				{},
+				useBlockProps(),
 				el( RichText, {
 					multiline: 'p',
 					value: toRichTextValue( attributes.value ),
@@ -74,12 +70,12 @@
 						} );
 					},
 				} )
-			);
+			)
 		},
 		save( { attributes } ) {
 			return el(
 				'blockquote',
-				{},
+				useBlockProps.save(),
 				el( RichText.Content, {
 					value: toRichTextValue( attributes.value ),
 				} )

package/plugins/deprecated-node-matcher.php

@@ -15,7 +15,6 @@ function enqueue_deprecated_node_matcher_plugin_script() {
 		'gutenberg-test-deprecated-node-matcher',
 		plugins_url( 'deprecated-node-matcher/index.js', __FILE__ ),
 		array(
-			'lodash',
 			'wp-blocks',
 			'wp-element',
 			'wp-block-editor',

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

@@ -12,6 +12,7 @@
 	const allowedBlocksWhenMultipleChildren = [ 'core/gallery', 'core/video' ];
 
 	registerBlockType( 'test/allowed-blocks-dynamic', {
+		apiVersion: 3,
 		title: 'Allowed Blocks Dynamic',
 		icon: 'carrot',
 		category: 'text',

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

@@ -2,7 +2,7 @@
 	const registerBlockType = wp.blocks.registerBlockType;
 	const createBlock = wp.blocks.createBlock;
 	const el = wp.element.createElement;
-	const InnerBlocks = wp.blockEditor.InnerBlocks;
+	const { InnerBlocks, useBlockProps } = wp.blockEditor;
 	const useState = window.wp.element.useState;
 
 	const TEMPLATE = [
@@ -47,35 +47,38 @@
 	};
 
 	registerBlockType( 'test/test-inner-blocks-no-locking', {
+		apiVersion: 3,
 		title: 'Test Inner Blocks no locking',
 		icon: 'cart',
 		category: 'text',
 
-		edit() {
-			return el( InnerBlocks, {
+		edit: function InnerBlocksNoLockingEdit() {
+			return el( 'div', useBlockProps(), el( InnerBlocks, {
 				template: TEMPLATE,
-			} );
+			} ) );
 		},
 
 		save,
 	} );
 
 	registerBlockType( 'test/test-inner-blocks-locking-all', {
+		apiVersion: 3,
 		title: 'Test InnerBlocks locking all',
 		icon: 'cart',
 		category: 'text',
 
-		edit() {
-			return el( InnerBlocks, {
+		edit: function InnerBlocksBlocksLockingAllEdit() {
+			return el( 'div', useBlockProps(), el( InnerBlocks, {
 				template: TEMPLATE,
 				templateLock: 'all',
-			} );
+			} ) );
 		},
 
 		save,
 	} );
 
 	registerBlockType( 'test/test-inner-blocks-update-locked-template', {
+		apiVersion: 3,
 		title: 'Test Inner Blocks update locked template',
 		icon: 'cart',
 		category: 'text',
@@ -87,7 +90,7 @@
 			},
 		},
 
-		edit( props ) {
+		edit: function InnerBlocksUpdateLockedTemplateEdit( props ) {
 			const hasUpdatedTemplated = props.attributes.hasUpdatedTemplate;
 			return el( 'div', null, [
 				el(
@@ -99,12 +102,12 @@
 					},
 					'Update template'
 				),
-				el( InnerBlocks, {
+				el( 'div', useBlockProps(), el( InnerBlocks, {
 					template: hasUpdatedTemplated
 						? TEMPLATE_TWO_PARAGRAPHS
 						: TEMPLATE,
 					templateLock: 'all',
-				} ),
+				} ) ),
 			] );
 		},
 
@@ -112,21 +115,23 @@
 	} );
 
 	registerBlockType( 'test/test-inner-blocks-paragraph-placeholder', {
+		apiVersion: 3,
 		title: 'Test Inner Blocks Paragraph Placeholder',
 		icon: 'cart',
 		category: 'text',
 
-		edit() {
-			return el( InnerBlocks, {
+		edit: function InnerBlocksParagraphPlaceholderEdit() {
+			return el( 'div', useBlockProps(), el( InnerBlocks, {
 				template: TEMPLATE_PARAGRAPH_PLACEHOLDER,
 				templateInsertUpdatesSelection: true,
-			} );
+			} ) );
 		},
 
 		save,
 	} );
 
 	registerBlockType( 'test/test-inner-blocks-transformer-target', {
+		apiVersion: 3,
 		title: 'Test Inner Blocks transformer target',
 		icon: 'cart',
 		category: 'text',
@@ -165,36 +170,34 @@
 			],
 		},
 
-		edit() {
-			return el( InnerBlocks, {
+		edit: function InnerBlocksTransformerTargetEdit() {
+			return el( 'div', useBlockProps(), el( InnerBlocks, {
 				template: TEMPLATE,
-			} );
+			} ) );
 		},
 
 		save,
 	} );
 
-
-	function InnerBlocksAsyncTemplateEdit() {
-		const [ template, setTemplate ] = useState( [] );
-
-		setInterval( () => {
-			setTemplate( TEMPLATE_TWO_PARAGRAPHS );
-		}, 1000 );
-
-		return el( InnerBlocks, {
-			template,
-		} );
-	}
-
 	registerBlockType(
 		'test/test-inner-blocks-async-template',
 		{
+			apiVersion: 3,
 			title: 'Test Inner Blocks Async Template',
 			icon: 'cart',
 			category: 'text',
 
-			edit: InnerBlocksAsyncTemplateEdit,
+			edit: function InnerBlocksAsyncTemplateEdit() {
+				const [ template, setTemplate ] = useState( [] );
+
+				setInterval( () => {
+					setTemplate( TEMPLATE_TWO_PARAGRAPHS );
+				}, 1000 );
+
+				return el('div', useBlockProps(), el( InnerBlocks, {
+					template,
+				} ) );
+			},
 
 			// Purposely do not save inner blocks so that it's possible to test template resolution.
 			save() {},

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

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

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

@@ -0,0 +1,59 @@
+<?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="add missing href at hydration"
+	></a>
+
+	<a
+		href="/other-url"
+		data-wp-bind--href="state.url"
+		data-testid="change href at hydration"
+	></a>
+
+	<input
+		type="checkbox"
+		data-wp-bind--checked="state.checked"
+		data-testid="add missing checked at hydration"
+	/>
+
+	<input
+		type="checkbox"
+		checked
+		data-wp-bind--checked="!state.checked"
+		data-testid="remove existing checked at hydration"
+	/>
+
+	<a
+		href="/other-url"
+		data-wp-bind--href="state.url"
+		data-testid="nested binds - 1"
+	>
+		<img
+			width="1"
+			data-wp-bind--width="state.width"
+			data-testid="nested binds - 2"
+		/>
+	</a>
+
+	<button data-testid="toggle" data-wp-on--click="actions.toggle">
+		Update
+	</button>
+
+	<p
+		data-wp-bind--hidden="!state.show"
+		data-wp-bind--aria-hidden="!state.show"
+		data-wp-bind--aria-expanded="state.show"
+		data-wp-bind--data-some-value="state.show"
+		data-testid="check enumerated attributes with true/false exist and have a string value"
+	>
+		Some Text
+	</p>
+</div>

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

@@ -0,0 +1,23 @@
+( ( { wp } ) => {
+	const { store } = wp.interactivity;
+
+	store( {
+		state: {
+			url: '/some-url',
+			checked: true,
+			show: false,
+			width: 1,
+		},
+		foo: {
+			bar: 1,
+		},
+		actions: {
+			toggle: ( { state, foo } ) => {
+				state.url = '/some-other-url';
+				state.checked = ! state.checked;
+				state.show = ! state.show;
+				state.width += foo.bar;
+			},
+		},
+	} );
+} )( window );

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

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

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

@@ -0,0 +1,75 @@
+<?php
+/**
+ * HTML for testing the directive `data-wp-class`.
+ *
+ * @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
+		class="foo bar"
+		data-wp-class--foo="state.falseValue"
+		data-testid="remove class if callback returns falsy value"
+	></div>
+
+	<div
+		class="foo"
+		data-wp-class--bar="state.trueValue"
+		data-testid="add class if callback returns truthy value"
+	></div>
+
+	<div
+		class="foo bar"
+		data-wp-class--foo="state.falseValue"
+		data-wp-class--bar="state.trueValue"
+		data-wp-class--baz="state.trueValue"
+		data-testid="handles multiple classes and callbacks"
+	></div>
+
+	<div
+		class="foo foo-bar"
+		data-wp-class--foo="state.falseValue"
+		data-wp-class--foo-bar="state.trueValue"
+		data-testid="handles class names that are contained inside other class names"
+	></div>
+
+	<div
+		class="foo bar baz"
+		data-wp-class--bar="state.trueValue"
+		data-testid="can toggle class in the middle"
+	></div>
+
+	<div
+		data-wp-class--foo="state.falseValue"
+		data-testid="can toggle class when class attribute is missing"
+	></div>
+
+	<div data-wp-context='{ "falseValue": false }'>
+		<div
+			class="foo"
+			data-wp-class--foo="context.falseValue"
+			data-testid="can use context values"
+		></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-class/view.js

@@ -0,0 +1,21 @@
+( ( { wp } ) => {
+	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-context/block.json

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

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>