@wordpress/e2e-tests 7.9.0 → 7.11.0

package/CHANGELOG.md

@@ -2,6 +2,10 @@
 
 ## Unreleased
 
+## 7.11.0 (2023-08-16)
+
+## 7.10.0 (2023-08-10)
+
 ## 7.9.0 (2023-07-20)
 
 ## 7.8.0 (2023-07-05)

package/jest.config.js

@@ -14,10 +14,7 @@ module.exports = {
 		'expect-puppeteer',
 		'puppeteer-testing-library/extend-expect',
 	],
-	testPathIgnorePatterns: [
-		'/node_modules/',
-		'e2e-tests/specs/performance/',
-	],
+	testPathIgnorePatterns: [ '/node_modules/' ],
 	snapshotFormat: {
 		escapeString: false,
 		printBasicPrototype: false,

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/e2e-tests",
-	"version": "7.9.0",
+	"version": "7.11.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.9.0",
-		"@wordpress/jest-console": "^7.9.0",
-		"@wordpress/jest-puppeteer-axe": "^6.9.0",
-		"@wordpress/scripts": "^26.9.0",
-		"@wordpress/url": "^3.39.0",
+		"@wordpress/e2e-test-utils": "^10.11.0",
+		"@wordpress/jest-console": "^7.11.0",
+		"@wordpress/jest-puppeteer-axe": "^6.11.0",
+		"@wordpress/scripts": "^26.11.0",
+		"@wordpress/url": "^3.41.0",
 		"chalk": "^4.0.0",
 		"expect-puppeteer": "^4.4.0",
 		"filenamify": "^4.2.0",
@@ -45,5 +45,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "6f14d11ed4cb59df110a28ebaa23ecba95eb673a"
+	"gitHead": "78a288d55b83a713b2f7d98d5a855c0771a2afc6"
 }

package/plugins/iframed-enqueue-block-editor-settings.php

@@ -0,0 +1,19 @@
+<?php
+/**
+ * Plugin Name: Gutenberg Test Iframed enqueue block editor settings
+ * Plugin URI: https://github.com/WordPress/gutenberg
+ * Author: Gutenberg Team
+ *
+ * @package gutenberg-test-iframed-iframed-enqueue-block-editor-settings
+ */
+
+add_action(
+	'block_editor_settings_all',
+	function( $settings ) {
+		$settings['styles'][] = array(
+			'css'            => 'p { border: 1px solid red }',
+			'__unstableType' => 'plugin',
+		);
+		return $settings;
+	}
+);

package/plugins/interactive-blocks/{directive-show → directive-body}/block.json

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

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

@@ -0,0 +1,22 @@
+<?php
+/**
+ * HTML for testing the directive `data-wp-body`.
+ *
+ * @package gutenberg-test-interactive-blocks
+ */
+
+?>
+<div
+	data-wp-interactive
+	data-wp-context='{"text":"text-1"}'
+>
+	<div data-testid="container">
+		<aside data-wp-body data-testid="element with data-wp-body">
+			<p data-wp-text="context.text" data-testid="text">initial</p>
+		</aside>
+	</div>
+	<button
+		data-wp-on--click="actions.toggleText"
+		data-testid="toggle text"
+	>toggle text</button>
+</div>

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

@@ -0,0 +1,11 @@
+( ( { wp } ) => {
+	const { store } = wp.interactivity;
+
+	store( {
+		actions: {
+			toggleText: ( { context } ) => {
+				context.text = context.text === 'text-1' ? 'text-2' : 'text-1';
+			},
+		},
+	} );
+} )( window );

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

@@ -72,4 +72,15 @@
 			Toggle context falseValue
 		</button>
 	</div>
+
+	<div
+		data-wp-class--block__element--modifier="state.trueValue"
+		data-testid="can use BEM notation classes"
+	></div>
+
+	<div
+		data-wp-class--main-bg----color="state.trueValue"
+		data-testid="can use classes with several dashes"
+	></div>
+
 </div>

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

@@ -7,7 +7,7 @@
 
 ?>
 <div data-wp-interactive>
-	<div data-wp-fakeshow="state.isOpen">
+	<div data-wp-show-mock="state.isOpen">
 		<input
 			data-testid="input"
 			data-wp-effect="effects.elementAddedToTheDOM"
@@ -21,7 +21,19 @@
 
 	<div data-wp-effect="effects.changeFocus"></div>
 
+	<div
+		data-testid="short-circuit infinite loops"
+		data-wp-effect="effects.infiniteLoop"
+		data-wp-text="state.counter"
+	>
+		0
+	</div>
+
 	<button data-testid="toggle" data-wp-on--click="actions.toggle">
 		Update
 	</button>
+
+	<button data-testid="increment" data-wp-on--click="actions.increment">
+		Increment
+	</button>
 </div>

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

@@ -1,28 +1,19 @@
 ( ( { wp } ) => {
-	const { store, directive, useContext, useMemo } = wp.interactivity;
+	const { store, directive } = 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.
+	// 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(
-		'fakeshow',
+		'show-mock',
 		( {
 			directives: {
-				fakeshow: { default: fakeshow },
+				"show-mock": { default: showMock },
 			},
 			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;
+			if ( ! evaluate( showMock ) ) return null;
+			return element;
 		}
 	);
 
@@ -30,6 +21,7 @@
 		state: {
 			isOpen: true,
 			isElementInTheDOM: false,
+			counter: 0,
 		},
 		selectors: {
 			elementInTheDOM: ( { state } ) =>
@@ -41,6 +33,9 @@
 			toggle( { state } ) {
 				state.isOpen = ! state.isOpen;
 			},
+			increment( { state } ) {
+				state.counter = state.counter + 1;
+			},
 		},
 		effects: {
 			elementAddedToTheDOM: ( { state } ) => {
@@ -55,6 +50,9 @@
 					document.querySelector( "[data-testid='input']" ).focus();
 				}
 			},
+			infiniteLoop: ({ state }) => {
+				state.counter = state.counter + 1;
+			}
 		},
 	} );
 

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

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

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

@@ -0,0 +1,42 @@
+<?php
+/**
+ * HTML for testing the directive `data-wp-init`.
+ *
+ * @package gutenberg-test-interactive-blocks
+ */
+
+?>
+<div data-wp-interactive>
+	<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>
+		<button data-wp-on--click="actions.reset">reset</button>
+	</div>
+	<div
+		data-testid="multiple inits"
+		data-wp-context='{"isReady":[false,false],"calls":[0,0]}'
+		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>
+	</div>
+	<div
+		data-testid="init show"
+		data-wp-context='{"isVisible":true,"isMounted":false}'
+	>
+		<div data-wp-show-mock="context.isVisible" data-testid="show">
+			<span data-wp-init="actions.initMount">Initially visible</span>
+		</div>
+		<button data-wp-on--click="actions.toggle" data-testid="toggle">
+			toggle
+		</button>
+		<p data-wp-text="selector.isMounted" data-testid="isMounted">
+			true
+		</p>
+	</div>
+</div>

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

@@ -0,0 +1,64 @@
+( ( { wp } ) => {
+	const { store, directive, useContext } = wp.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;
+		}
+	);
+
+
+	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.
+				isReady[0] = isReady[0];
+				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 );

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

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

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

@@ -0,0 +1,52 @@
+<?php
+/**
+ * HTML for testing the directive `data-wp-on`.
+ *
+ * @package gutenberg-test-interactive-blocks
+ */
+
+?>
+<div data-wp-interactive>
+	<div>
+		<p data-wp-text="state.counter" data-testid="counter">0</p>
+		<button
+			data-testid="button"
+			data-wp-on--click="actions.clickHandler"
+		>Click me!</button>
+	</div>
+	<div>
+		<p data-wp-text="state.text" data-testid="text">initial</p>
+		<input
+			type="text"
+			value="initial"
+			data-testid="input"
+			data-wp-on--input="actions.inputHandler"
+		>
+	</div>
+	<div data-wp-context='{"option":"undefined"}'>
+		<p data-wp-text="context.option" data-testid="option">0</p>
+		<select
+			name="pets"
+			value="undefined"
+			data-testid="select"
+			data-wp-on--change="actions.selectHandler"
+		>
+			<option value="undefined">Choose an option...</option>
+			<option value="dog">Dog</option>
+			<option value="cat">Cat</option>
+		</select>
+	</div>
+	<div
+		data-wp-on--customevent="actions.customEventHandler"
+		data-wp-context='{"customEvents":0}'
+	>
+		<p
+			data-wp-text="context.customEvents"
+			data-testid="custom events counter"
+		>0</p>
+		<button
+			data-testid="custom events button"
+			data-wp-on--click="actions.clickHandler"
+		>Click me!</button>
+	</div>
+</div>

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

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

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

@@ -18,3 +18,7 @@
 		data-wp-test-context
 	></div>
 </div>
+
+<div data-testid="non-existent-directives">
+	<div data-wp-interactive ><div data-wp-non-existent-directive></div></div>
+</div>

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

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

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

@@ -0,0 +1,41 @@
+<?php
+/**
+ * HTML for testing `afterLoad` callbacks added to the store.
+ *
+ * @package gutenberg-test-interactive-blocks
+ */
+
+?>
+<div data-wp-interactive>
+	<h3>Store statuses</h3>
+	<p data-store-status data-wp-text="state.status1">waiting</p>
+	<p data-store-status data-wp-text="state.status2">waiting</p>
+	<p data-store-status data-wp-text="state.status3">waiting</p>
+	<p data-store-status data-wp-text="state.status4">waiting</p>
+
+	<h3><code>afterLoad</code> executions</h3>
+	<p>All stores ready:&#20;
+		<span
+			data-testid="all-stores-ready"
+			data-wp-text="state.allStoresReady">
+		>waiting</span>
+	</p>
+	<p>vDOM ready:&#20;
+		<span
+			data-testid="vdom-ready"
+			data-wp-text="state.vdomReady">
+		>waiting</span>
+	</p>
+	<p><code>afterLoad</code> exec times:&#20;
+		<span
+			data-testid="after-load-exec-times"
+			data-wp-text="state.execTimes.afterLoad">
+		>0</span>
+	</p>
+	<p><code>sharedAfterLoad</code> exec times:&#20;
+		<span
+			data-testid="shared-after-load-exec-times"
+			data-wp-text="state.execTimes.sharedAfterLoad">
+		>0</span>
+	</p>
+</div>

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

@@ -0,0 +1,60 @@
+( ( { wp } ) => {
+	/**
+	 * WordPress dependencies
+	 */
+	const { store } = wp.interactivity;
+
+	const afterLoad = ({ state }) => {
+		// Check the state is correctly initialized.
+		const { status1, status2, status3, status4 } = state;
+		state.allStoresReady =
+			[ status1, status2, status3, status4 ]
+				.every( ( t ) => t === 'ready' )
+				.toString();
+
+		// Check the HTML has been processed as well.
+		const selector = '[data-store-status]';
+		state.vdomReady =
+			document.querySelector( selector ) &&
+				Array.from(
+					document.querySelectorAll( selector )
+				).every( ( el ) => el.textContent === 'ready' ).toString();
+
+		// Increment exec times everytime this function runs.
+		state.execTimes.afterLoad += 1;
+	}
+
+	const sharedAfterLoad = ({ state }) => {
+		// Increment exec times everytime this function runs.
+		state.execTimes.sharedAfterLoad += 1;
+	}
+
+	// Case 1: without afterload callback
+	store( {
+		state: { status1: 'ready' },
+	} );
+
+	// Case 2: non-shared afterload callback
+	store( {
+		state: {
+			status2: 'ready',
+			allStoresReady: false,
+			vdomReady: false,
+			execTimes: { afterLoad: 0 },
+		},
+	}, { afterLoad } );
+
+	// Case 3: shared afterload callback
+	store( {
+		state: {
+			status3: 'ready',
+			execTimes: { sharedAfterLoad: 0 },
+		},
+	}, { afterLoad: sharedAfterLoad }  );
+	store( {
+		state: {
+			status4: 'ready',
+			execTimes: { sharedAfterLoad: 0 },
+		},
+	}, { afterLoad: sharedAfterLoad }  );
+} )( window );

package/plugins/interactive-blocks/tovdom-islands/render.php

@@ -7,14 +7,14 @@
 
 ?>
 <div>
-	<div data-wp-show="state.falseValue">
+	<div data-wp-show-mock="state.falseValue">
 		<span data-testid="not inside an island">
 			This should be shown because it is inside an island.
 		</span>
 	</div>
 
 	<div data-wp-interactive>
-		<div data-wp-show="state.falseValue">
+		<div data-wp-show-mock="state.falseValue">
 			<span data-testid="inside an island">
 				This should not be shown because it is inside an island.
 			</span>
@@ -23,7 +23,7 @@
 
 	<div data-wp-interactive>
 		<div data-wp-ignore>
-			<div data-wp-show="state.falseValue">
+			<div data-wp-show-mock="state.falseValue">
 				<span
 					data-testid="inside an inner block of an isolated island"
 				>
@@ -37,7 +37,7 @@
 	<div data-wp-interactive>
 		<div data-wp-interactive>
 			<div
-				data-wp-show="state.falseValue"
+				data-wp-show-mock="state.falseValue"
 				data-testid="island inside another island"
 			>
 				<span>
@@ -51,7 +51,7 @@
 	<div data-wp-interactive>
 		<div>
 			<div data-wp-interactive data-wp-ignore>
-				<div data-wp-show="state.falseValue">
+				<div data-wp-show-mock="state.falseValue">
 					<span
 						data-testid="island inside inner block of isolated island"
 					>

package/plugins/interactive-blocks/tovdom-islands/view.js

@@ -1,5 +1,22 @@
 ( ( { wp } ) => {
-	const { store } = wp.interactivity;
+	const { store, directive, createElement } = wp.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": { default: showMock },
+			},
+			element,
+			evaluate,
+		} ) => {
+			if ( ! evaluate( showMock ) )
+				element.props.children =
+					createElement( "template", null, element.props.children );
+		}
+	);
 
 	store( {
 		state: {