@wordpress/e2e-tests 7.11.1 → 7.12.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.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.0",
+		"@wordpress/jest-console": "^7.12.0",
+		"@wordpress/jest-puppeteer-axe": "^6.12.0",
+		"@wordpress/scripts": "^26.12.0",
+		"@wordpress/url": "^3.42.0",
 		"chalk": "^4.0.0",
 		"expect-puppeteer": "^4.4.0",
 		"filenamify": "^4.2.0",
@@ -45,5 +45,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "bb1fbf87bb0f451744530fc6a85de2dff1263bed"
+	"gitHead": "5eac1734bcdca2301fdd37ec8cfe2a45e722a2c4"
 }

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/editor/various/shortcut-help.test.js

@@ -1,47 +0,0 @@
-/**
- * WordPress dependencies
- */
-import {
-	createNewPost,
-	clickOnMoreMenuItem,
-	clickOnCloseModalButton,
-	pressKeyWithModifier,
-} from '@wordpress/e2e-test-utils';
-
-describe( 'keyboard shortcut help modal', () => {
-	beforeAll( async () => {
-		await createNewPost();
-	} );
-
-	it( 'displays the shortcut help modal when opened using the menu item in the more menu', async () => {
-		await clickOnMoreMenuItem( 'Keyboard shortcuts' );
-		const shortcutHelpModalElements = await page.$$(
-			'.edit-post-keyboard-shortcut-help-modal'
-		);
-		expect( shortcutHelpModalElements ).toHaveLength( 1 );
-	} );
-
-	it( 'closes the shortcut help modal when the close icon is clicked', async () => {
-		await clickOnCloseModalButton();
-		const shortcutHelpModalElements = await page.$$(
-			'.edit-post-keyboard-shortcut-help-modal'
-		);
-		expect( shortcutHelpModalElements ).toHaveLength( 0 );
-	} );
-
-	it( 'displays the shortcut help modal when opened using the shortcut key (access+h)', async () => {
-		await pressKeyWithModifier( 'access', 'h' );
-		const shortcutHelpModalElements = await page.$$(
-			'.edit-post-keyboard-shortcut-help-modal'
-		);
-		expect( shortcutHelpModalElements ).toHaveLength( 1 );
-	} );
-
-	it( 'closes the shortcut help modal when the shortcut key (access+h) is pressed again', async () => {
-		await pressKeyWithModifier( 'access', 'h' );
-		const shortcutHelpModalElements = await page.$$(
-			'.edit-post-keyboard-shortcut-help-modal'
-		);
-		expect( shortcutHelpModalElements ).toHaveLength( 0 );
-	} );
-} );