@wordpress/e2e-tests 7.11.1 → 7.12.1-next.5a1d1283.0

package/CHANGELOG.md

@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 7.12.0 (2023-08-31)
+
 ## 7.11.0 (2023-08-16)
 
 ## 7.10.0 (2023-08-10)

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/e2e-tests",
-	"version": "7.11.1",
+	"version": "7.12.1-next.5a1d1283.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.11.1",
-		"@wordpress/jest-console": "^7.11.1",
-		"@wordpress/jest-puppeteer-axe": "^6.11.1",
-		"@wordpress/scripts": "^26.11.1",
-		"@wordpress/url": "^3.41.1",
+		"@wordpress/e2e-test-utils": "^10.12.1-next.5a1d1283.0",
+		"@wordpress/jest-console": "^7.13.1-next.5a1d1283.0",
+		"@wordpress/jest-puppeteer-axe": "^6.12.1-next.5a1d1283.0",
+		"@wordpress/scripts": "^26.13.1-next.5a1d1283.0",
+		"@wordpress/url": "^3.42.1-next.5a1d1283.0",
 		"chalk": "^4.0.0",
 		"expect-puppeteer": "^4.4.0",
 		"filenamify": "^4.2.0",
@@ -45,5 +45,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "bb1fbf87bb0f451744530fc6a85de2dff1263bed"
+	"gitHead": "fa0b66987dab5a15f38663e06036d09bccffaa4b"
 }

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

@@ -56,4 +56,44 @@
 	>
 		Some Text
 	</p>
+
+	<?php
+	$hydration_cases = array(
+		'false'       => '{ "value": false }',
+		'true'        => '{ "value": true }',
+		'null'        => '{ "value": null }',
+		'undef'       => '{ "__any": "any" }',
+		'emptyString' => '{ "value": "" }',
+		'anyString'   => '{ "value": "any" }',
+		'number'      => '{ "value": 10 }',
+	);
+	?>
+
+	<?php foreach ( $hydration_cases as $type => $context ) : ?>
+	<div
+		data-testid='hydrating <?php echo $type; ?>'
+		data-wp-context='<?php echo $context; ?>'
+	>
+		<img
+			alt="Red dot"
+			data-testid="image"
+			data-wp-bind--width="context.value"
+			src="data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAUA
+			AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO
+			9TXL0Y4OHwAAAABJRU5ErkJggg=="
+		>
+		<input
+			type="text"
+			data-testid="input"
+			data-wp-bind--name="context.value"
+			data-wp-bind--value="context.value"
+			data-wp-bind--disabled="context.value"
+			data-wp-bind--aria-disabled="context.value"
+		>
+		<button
+			data-testid="toggle value"
+			data-wp-on--click="actions.toggleValue"
+		>Toggle</button>
+	</div>
+	<?php endforeach; ?>
 </div>

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

@@ -18,6 +18,17 @@
 				state.show = ! state.show;
 				state.width += foo.bar;
 			},
+			toggleValue: ( { context } ) => {
+				const previousValue = ( 'previousValue' in context )
+					? context.previousValue
+					// Any string works here; we just want to toggle the value
+					// to ensure Preact renders the same we are hydrating in the
+					// first place.
+					: 'tacocat';
+
+				context.previousValue = context.value;
+				context.value = previousValue;
+			}
 		},
 	} );
 } )( window );

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

@@ -119,3 +119,16 @@
 		</button>
 	</div>
 </div>
+
+<div
+	data-wp-interactive
+	data-wp-navigation-id="navigation"
+	data-wp-context='{ "text": "first page" }'
+>
+	<div data-testid="navigation text" data-wp-text="context.text"></div>
+	<div data-testid="navigation new text" data-wp-text="context.newText"></div>
+	<button data-testid="toggle text" data-wp-on--click="actions.toggleText">Toggle Text</button>
+	<button data-testid="add new text" data-wp-on--click="actions.addNewText">Add New Text</button>
+	<button data-testid="navigate" data-wp-on--click="actions.navigate">Navigate</button>
+	<button data-testid="async navigate" data-wp-on--click="actions.asyncNavigate">Async Navigate</button>
+</div>

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

@@ -1,5 +1,19 @@
 ( ( { wp } ) => {
-	const { store } = wp.interactivity;
+	const { store, navigate } = wp.interactivity;
+
+	const html = `
+		<div
+			data-wp-interactive
+			data-wp-navigation-id="navigation"
+			data-wp-context='{ "text": "second page" }'
+		>
+			<div data-testid="navigation text" data-wp-text="context.text"></div>
+			<div data-testid="navigation new text" data-wp-text="context.newText"></div>
+			<button data-testid="toggle text" data-wp-on--click="actions.toggleText">Toggle Text</button>
+			<button data-testid="add new text" data-wp-on--click="actions.addNewText">Add new text</button>
+			<button data-testid="navigate" data-wp-on--click="actions.navigate">Navigate</button>
+			<button data-testid="async navigate" data-wp-on--click="actions.asyncNavigate">Async Navigate</button>
+		</div>`;
 
 	store( {
 		derived: {
@@ -17,6 +31,25 @@
 			toggleContextText: ( { context } ) => {
 				context.text = context.text === 'Text 1' ? 'Text 2' : 'Text 1';
 			},
+			toggleText: ( { context } ) => {
+				context.text = "changed dynamically";
+			},
+			addNewText: ( { context } ) => {
+				context.newText = 'some new text';
+			},
+			navigate: () => {
+				navigate( window.location, {
+					force: true,
+					html,
+				} );
+			},
+			asyncNavigate: async ({ context }) => {
+				await navigate( window.location, {
+					force: true,
+					html,
+				} );
+				context.newText = 'changed from async action';
+			}
 		},
 	} );
 } )( window );

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

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

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

@@ -0,0 +1,18 @@
+<?php
+/**
+ * HTML for testing the directive `data-wp-key`.
+ *
+ * @package gutenberg-test-interactive-blocks
+ */
+
+?>
+
+<div data-wp-interactive data-wp-navigation-id="some-id">
+	<ul>
+		<li data-wp-key="id-2" data-testid="first-item">2</li>
+		<li data-wp-key="id-3">3</li>
+	</ul>
+	<button data-testid="navigate" data-wp-on--click="actions.navigate">
+		Navigate
+	</button>
+</div>

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

@@ -0,0 +1,23 @@
+( ( { wp } ) => {
+	const { store, navigate } = wp.interactivity;
+
+	const html = `
+		<div data-wp-interactive data-wp-navigation-id="some-id">
+			<ul>
+				<li data-wp-key="id-1">1</li>
+				<li data-wp-key="id-2" data-testid="second-item">2</li>
+				<li data-wp-key="id-3">3</li>
+			</ul>
+		</div>`;
+
+	store( {
+		actions: {
+			navigate: () => {
+				navigate( window.location, {
+					force: true,
+					html,
+				} );
+			},
+		},
+	} );
+} )( window );

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

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

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

@@ -0,0 +1,67 @@
+<?php
+/**
+ * HTML for testing the directive `data-wp-bind`.
+ *
+ * @package gutenberg-test-interactive-blocks
+ */
+
+?>
+<div
+	data-wp-interactive
+	data-wp-slot-provider
+	data-wp-context='{ "text": "fill" }'
+>
+	<div data-testid="slots" data-wp-context='{ "text": "fill inside slots" }'>
+		<div
+			data-testid="slot-1"
+			data-wp-key="slot-1"
+			data-wp-slot="slot-1"
+			data-wp-context='{ "text": "fill inside slot 1" }'
+		>[1]</div>
+		<div
+			data-testid="slot-2"
+			data-wp-key="slot-2"
+			data-wp-slot='{ "name": "slot-2", "position": "before" }'
+			data-wp-context='{ "text": "[2]" }'
+			data-wp-text='context.text'
+			data-wp-on--click="actions.updateSlotText"
+		>[2]</div>
+		<div
+			data-testid="slot-3"
+			data-wp-key="slot-3"
+			data-wp-slot='{ "name": "slot-3", "position": "after" }'
+			data-wp-context='{ "text": "[3]" }'
+			data-wp-text='context.text'
+			data-wp-on--click="actions.updateSlotText"
+		>[3]</div>
+		<div
+			data-testid="slot-4"
+			data-wp-key="slot-4"
+			data-wp-slot='{ "name": "slot-4", "position": "children" }'
+			data-wp-context='{ "text": "fill inside slot 4" }'
+		>[4]</div>
+		<div
+			data-testid="slot-5"
+			data-wp-key="slot-5"
+			data-wp-slot='{ "name": "slot-5", "position": "replace" }'
+			data-wp-context='{ "text": "fill inside slot 5" }'
+		>[5]</div>
+	</div>
+
+	<div data-testid="fill-container">
+		<span
+			data-testid="fill"
+			data-wp-fill="state.slot"
+			data-wp-text="context.text"
+		>initial</span>
+	</div>
+
+	<div data-wp-on--click="actions.changeSlot">
+		<button data-testid="slot-1-button" data-slot="slot-1">slot-1</button>
+		<button data-testid="slot-2-button" data-slot="slot-2">slot-2</button>
+		<button data-testid="slot-3-button" data-slot="slot-3">slot-3</button>
+		<button data-testid="slot-4-button" data-slot="slot-4">slot-4</button>
+		<button data-testid="slot-5-button" data-slot="slot-5">slot-5</button>
+		<button data-testid="reset" data-slot="">reset</button>
+	</div>
+</div>

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

@@ -0,0 +1,18 @@
+( ( { wp } ) => {
+	const { store } = wp.interactivity;
+
+	store( {
+		state: {
+			slot: ''
+		},
+		actions: {
+			changeSlot: ( { state, event } ) => {
+				state.slot = event.target.dataset.slot;
+			},
+			updateSlotText: ( { context } ) => {
+				const n = context.text[1];
+				context.text = `[${n} updated]`;
+			},
+		},
+	} );
+} )( window );

package/plugins/interactive-blocks/router-regions/block.json

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

package/plugins/interactive-blocks/router-regions/render.php

@@ -0,0 +1,89 @@
+<?php
+/**
+ * HTML for testing the hydration of router regions.
+ *
+ * @package gutenberg-test-interactive-blocks
+ * @phpcs:disable VariableAnalysis.CodeAnalysis.VariableAnalysis.UndefinedVariable
+ */
+
+?>
+
+<section>
+	<h2>Region 1</h2>
+	<div data-wp-interactive data-wp-navigation-id="region-1">
+		<p
+			data-testid="region-1-text"
+			data-wp-text="state.region1.text"
+		>not hydrated</p>
+		<p
+			data-testid="region-1-ssr"
+		>content from page <?php echo $attributes['page']; ?></p>
+
+		<button
+			data-testid="state-counter"
+			data-wp-text="state.counter.value"
+			data-wp-on--click="actions.counter.increment"
+		>NaN</button>
+
+		<?php if ( isset( $attributes['next'] ) ) : ?>
+			<a
+				data-testid="next"
+				data-wp-on--click="actions.router.navigate"
+				href="<?php echo $attributes['next']; ?>"
+			>Next</a>
+		<?php else : ?>
+			<a
+				data-testid="back"
+				data-wp-on--click="actions.router.back"
+				href="#"
+			>Back</a>
+		<?php endif; ?>
+	</div>
+</section>
+
+<div>
+	<p
+		data-testid="no-region-text-1"
+		data-wp-text="state.region1.text"
+	>not hydrated</p>
+</div>
+
+
+<section>
+	<h2>Region 2</h2>
+	<div data-wp-interactive data-wp-navigation-id="region-2">
+		<p
+			data-testid="region-2-text"
+			data-wp-text="state.region2.text"
+		>not hydrated</p>
+		<p
+			data-testid="region-2-ssr"
+		>content from page <?php echo $attributes['page']; ?></p>
+
+		<button
+			data-testid="context-counter"
+			data-wp-context='{ "counter": { "initialValue": 0 } }'
+			data-wp-init="actions.counter.init"
+			data-wp-text="context.counter.value"
+			data-wp-on--click="actions.counter.increment"
+		>NaN</button>
+
+		<div data-wp-ignore>
+			<div>
+				<p
+					data-testid="no-region-text-2"
+					data-wp-text="state.region2.text"
+				>not hydrated</p>
+			</div>
+
+			<section>
+				<h2>Nested region</h2>
+				<div data-wp-interactive data-wp-navigation-id="nested-region">
+					<p
+						data-testid="nested-region-ssr"
+					>content from page <?php echo $attributes['page']; ?></p>
+				</div>
+			</section>
+		</div>
+	</div>
+</section>

package/plugins/interactive-blocks/router-regions/view.js

@@ -0,0 +1,43 @@
+( ( { wp } ) => {
+	/**
+	 * WordPress dependencies
+	 */
+	const { store, navigate } = wp.interactivity;
+
+	store( {
+		state: {
+			region1: {
+				text: 'hydrated'
+			},
+			region2: {
+				text: 'hydrated'
+			},
+			counter: {
+				value: 0,
+			},
+		},
+		actions: {
+			router: {
+				navigate: async ( { event: e } ) => {
+					e.preventDefault();
+					await navigate( e.target.href );
+				},
+				back: () => history.back(),
+			},
+			counter: {
+				increment: ( { state, context } ) => {
+					if ( context.counter ) {
+						context.counter.value += 1;
+					} else {
+						state.counter.value += 1;
+					}
+				},
+				init: ( { context } ) => {
+					if ( context.counter ) {
+						context.counter.value = context.counter.initialValue;
+					}
+				}
+			},
+		},
+	} );
+} )( window );

package/specs/performance/post-editor.test.results.json

@@ -0,0 +1,19 @@
+{
+	"serverResponse": [],
+	"firstPaint": [],
+	"domContentLoaded": [],
+	"loaded": [],
+	"firstContentfulPaint": [],
+	"firstBlock": [],
+	"type": [
+		75.483, 96.376, 82.063, 101.192, 87.573, 56.599000000000004,
+		63.778999999999996, 93.079, 98.277, 95.365, 94.48599999999999, 55.739,
+		81.715, 66.875, 60.897, 54.249, 52.537, 58.745, 49.615
+	],
+	"typeContainer": [],
+	"focus": [],
+	"listViewOpen": [],
+	"inserterOpen": [],
+	"inserterHover": [],
+	"inserterSearch": []
+}

package/specs/performance/site-editor.test.results.json

@@ -0,0 +1,60 @@
+{
+	"serverResponse": [
+		409.40000009536743, 405.59999990463257, 410.09999990463257
+	],
+	"firstPaint": [ 438.59999990463257, 447.3999996185303, 449.59999990463257 ],
+	"domContentLoaded": [ 676, 690.0999999046326, 693 ],
+	"loaded": [ 1405.6999998092651, 1400.3999996185303, 1425.9000000953674 ],
+	"firstContentfulPaint": [
+		903.2999997138977, 921.0999999046326, 925.2999997138977
+	],
+	"firstBlock": [
+		3166.7999997138977, 3206.5999999046326, 3238.4000000953674
+	],
+	"type": [
+		81.45900000000002, 37.088, 36.051, 38.596000000000004, 49.931, 40.322,
+		38.99999999999999, 34.235, 33.608999999999995, 32.88399999999999, 30.44,
+		37.113, 31.534999999999997, 33.792, 36.942, 35.251000000000005, 33.722,
+		33.471999999999994, 35.26499999999999, 29.682, 30.173,
+		30.674999999999997, 35.668000000000006, 38.278, 37.62, 37.562, 38.091,
+		32.237, 28.119999999999997, 31.342, 39.89, 37.443, 37.761, 40.262,
+		37.922, 30.727, 30.955000000000002, 36.53000000000001, 32.293, 37.299,
+		38.55800000000001, 39.85699999999999, 33.721999999999994, 30.139,
+		29.294, 31.016, 35.7, 36.839, 31.061000000000003, 29.540000000000003,
+		48.998999999999995, 35.423, 33.650000000000006, 29.404999999999998,
+		32.744, 30.584999999999997, 30.705, 31.873, 28.907, 30.516, 30.882,
+		29.257, 29.794, 31.150000000000002, 32.095, 31.066000000000003, 32.872,
+		31.894, 31.331, 31.796, 31.675, 30.427999999999997, 30.872, 30.974,
+		32.707, 31.849999999999998, 28.935, 28.441000000000003,
+		30.566000000000003, 29.014, 33.158, 32.272, 28.990000000000002, 28.76,
+		28.967000000000002, 29.418, 28.503, 31.255000000000003, 28.703,
+		30.369000000000003, 34.910000000000004, 31.03, 28.523,
+		32.361999999999995, 33.870000000000005, 30.11, 30.944000000000003,
+		28.601, 30.572999999999997, 33.216, 30.822, 28.892000000000003,
+		32.95099999999999, 31.228, 28.251, 34.89, 30.131000000000004, 29.395,
+		31.557000000000002, 28.137, 32.051, 38.242, 36.382999999999996, 35.037,
+		36.2, 31.717999999999996, 28.927999999999997, 32.540000000000006,
+		35.448, 28.292, 35.059999999999995, 31.345000000000002, 36.122, 31.69,
+		28.492, 29.308, 30.793000000000003, 28.784000000000002,
+		28.275999999999996, 36.577999999999996, 30.220000000000002, 35.832,
+		31.192, 36.102999999999994, 30.733999999999998, 30.574,
+		35.455999999999996, 29.963, 37.967, 29.323999999999998, 36.643,
+		31.200000000000003, 36.864999999999995, 32.344, 30.321, 29.214, 28.627,
+		29.71, 29.006, 36.067, 29.583, 29.562, 37.795, 30.166999999999998,
+		30.811999999999998, 33.319, 32.939, 39.233999999999995, 28.856,
+		34.81700000000001, 30.324, 33.611000000000004, 33.707,
+		30.191000000000003, 29.191, 29.23, 30.715, 29.281, 28.168,
+		33.449000000000005, 36.36600000000001, 29.086, 30.589, 29.13, 28.789,
+		29.156000000000002, 43.327, 34.439, 28.777, 30.586, 28.973000000000003,
+		30.026, 40.023, 30.203, 28.328000000000003, 30.825000000000003, 29.739,
+		31.504, 43.708000000000006, 29.296999999999997, 32.294, 31.733, 30.44,
+		28.879, 30.349999999999998, 29.466, 29.302999999999997, 30,
+		29.468999999999998, 28.740000000000002
+	],
+	"typeContainer": [],
+	"focus": [],
+	"inserterOpen": [],
+	"inserterHover": [],
+	"inserterSearch": [],
+	"listViewOpen": []
+}