@wordpress/e2e-tests 7.20.0 → 7.21.0

package/CHANGELOG.md

@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 7.21.0 (2024-01-24)
+
 ## 7.20.0 (2024-01-10)
 
 ## 7.19.0 (2023-12-13)

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/e2e-tests",
-	"version": "7.20.0",
+	"version": "7.21.0",
 	"description": "End-To-End (E2E) tests for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -23,12 +23,13 @@
 		"node": ">=14"
 	},
 	"dependencies": {
-		"@wordpress/e2e-test-utils": "^10.20.0",
-		"@wordpress/interactivity": "^3.2.0",
-		"@wordpress/jest-console": "^7.20.0",
-		"@wordpress/jest-puppeteer-axe": "^6.20.0",
-		"@wordpress/scripts": "^27.0.0",
-		"@wordpress/url": "^3.50.0",
+		"@wordpress/e2e-test-utils": "^10.21.0",
+		"@wordpress/interactivity": "^4.0.0",
+		"@wordpress/interactivity-router": "^1.0.0",
+		"@wordpress/jest-console": "^7.21.0",
+		"@wordpress/jest-puppeteer-axe": "^6.21.0",
+		"@wordpress/scripts": "^27.1.0",
+		"@wordpress/url": "^3.51.0",
 		"chalk": "^4.0.0",
 		"expect-puppeteer": "^4.4.0",
 		"filenamify": "^4.2.0",
@@ -45,5 +46,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "5e6f9caa205d3bfdbac131952b7bf9c6ec60569b"
+	"gitHead": "45de2cb4212fed7f2763e95f10300d1ff9d0ec08"
 }

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

@@ -5,7 +5,7 @@
  * @package gutenberg-test-interactive-blocks
  */
 
-gutenberg_enqueue_module( 'directive-bind-view' );
+wp_enqueue_script_module( 'directive-bind-view' );
 ?>
 
 <div data-wp-interactive='{ "namespace": "directive-bind" }'>

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

@@ -5,7 +5,7 @@
  * @package gutenberg-test-interactive-blocks
  */
 
-gutenberg_enqueue_module( 'directive-body-view' );
+wp_enqueue_script_module( 'directive-body-view' );
 ?>
 
 <div

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

@@ -5,7 +5,7 @@
  * @package gutenberg-test-interactive-blocks
  */
 
-gutenberg_enqueue_module( 'directive-class-view' );
+wp_enqueue_script_module( 'directive-class-view' );
 ?>
 
 <div data-wp-interactive='{"namespace": "directive-class"}'>

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

@@ -5,7 +5,7 @@
  * @package gutenberg-test-interactive-blocks
  */
 
-gutenberg_enqueue_module( 'directive-context-view' );
+wp_enqueue_script_module( 'directive-context-view' );
 ?>
 
 <div data-wp-interactive='{"namespace": "directive-context"}'>
@@ -124,7 +124,7 @@ gutenberg_enqueue_module( 'directive-context-view' );
 
 <div
 	data-wp-interactive='{"namespace": "directive-context-navigate"}'
-	data-wp-navigation-id="navigation"
+	data-wp-router-region="navigation"
 	data-wp-context='{ "text": "first page" }'
 >
 	<div data-testid="navigation text" data-wp-text="context.text"></div>

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

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { store, navigate, getContext } from '@wordpress/interactivity';
+import { store, getContext } from '@wordpress/interactivity';
 
 store( 'directive-context', {
 	state: {
@@ -28,7 +28,7 @@ store( 'directive-context', {
 const html = `
 		<div
 			data-wp-interactive='{ "namespace": "directive-context-navigate" }'
-			data-wp-navigation-id="navigation"
+			data-wp-router-region="navigation"
 			data-wp-context='{ "text": "second page" }'
 		>
 			<div data-testid="navigation text" data-wp-text="context.text"></div>
@@ -50,10 +50,14 @@ const { actions } = store( 'directive-context-navigate', {
 			ctx.newText = 'some new text';
 		},
 		navigate() {
-			return navigate( window.location, {
-				force: true,
-				html,
-			} );
+			return import( '@wordpress/interactivity-router' ).then(
+				( { actions: routerActions } ) =>
+					routerActions.navigate(
+						window.location,
+						{ force: true, html },
+					)
+			);
+
 		},
 		*asyncNavigate() {
 			yield actions.navigate();

package/plugins/interactive-blocks/{directive-slots → directive-each}/block.json

@@ -1,8 +1,8 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
 	"apiVersion": 2,
-	"name": "test/directive-slots",
-	"title": "E2E Interactivity tests - directive slots",
+	"name": "test/directive-each",
+	"title": "E2E Interactivity tests - directive each",
 	"category": "text",
 	"icon": "heart",
 	"description": "",
@@ -10,6 +10,6 @@
 		"interactivity": true
 	},
 	"textdomain": "e2e-interactivity",
-	"viewScript": "directive-slots-view",
+	"viewScript": "directive-each-view",
 	"render": "file:./render.php"
 }

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

@@ -0,0 +1,226 @@
+<?php
+/**
+ * HTML for testing the directive `data-wp-each`.
+ *
+ * @package gutenberg-test-interactive-blocks
+ */
+
+wp_enqueue_script_module( 'directive-each-view' );
+?>
+
+<div data-wp-interactive='{ "namespace": "directive-each" }'>
+	<div data-testid="letters">
+		<template data-wp-each="state.letters">
+			<p data-wp-text="context.item" data-testid="item"></p>
+		</template>
+		<!-- SSRed elements; they should be removed on hydration -->
+		<p data-testid="item" data-wp-each-child>A</p>
+		<p data-testid="item" data-wp-each-child>B</p>
+		<p data-testid="item" data-wp-each-child>C</p>
+	</div>
+
+	<hr>
+
+	<div data-testid="fruits">
+		<button
+			data-testid="rotate" data-wp-on--click="actions.rotateFruits"
+		>Rotate</button>
+		<button
+			data-testid="add" data-wp-on--click="actions.addFruit"
+		>Add</button>
+		<button
+			data-testid="replace" data-wp-on--click="actions.replaceFruit"
+		>Replace</button>
+		<template data-wp-each--fruit="state.fruits">
+			<p
+				data-testid="item"
+				data-wp-text="context.fruit"
+				data-wp-on--click="actions.removeFruit"
+			></p>
+		</template>
+		<!-- SSRed elements; they should be removed on hydration -->
+		<p data-testid="item" data-wp-each-child>avocado</p>
+		<p data-testid="item" data-wp-each-child>banana</p>
+		<p data-testid="item" data-wp-each-child>cherimoya</p>
+	</div>
+
+	<hr>
+
+	<div data-testid="books">
+		<button
+			data-testid="rotate" data-wp-on--click="actions.rotateBooks"
+		>Rotate</button>
+		<button
+			data-testid="add" data-wp-on--click="actions.addBook"
+		>Add</button>
+		<button
+			data-testid="replace" data-wp-on--click="actions.replaceBook"
+		>Replace</button>
+		<button
+			data-testid="modify" data-wp-on--click="actions.modifyBook"
+		>Modify</button>
+		<template
+			data-wp-each--book="state.books"
+			data-wp-each-key="context.book.isbn"
+		>
+			<p
+				data-testid="item"
+				data-wp-text="context.book.title"
+				data-wp-on--click="actions.removeBook"
+			></p>
+		</template>
+		<!-- SSRed elements; they should be removed on hydration -->
+		<p data-testid="item" data-wp-each-child>A Game of Thrones</p>
+		<p data-testid="item" data-wp-each-child>A Clash of Kings</p>
+		<p data-testid="item" data-wp-each-child>A Storm of Swords</p>
+	</div>
+
+	<hr>
+
+	<div data-testid="numbers">
+		<button
+			data-testid="shift" data-wp-on--click="actions.shiftNumber"
+		>Shift</button>
+		<button
+			data-testid="unshift" data-wp-on--click="actions.unshiftNumber"
+		>Unshift</button>
+		<template data-wp-each="state.numbers">
+			<p data-wp-text="context.item" data-testid="item"></p>
+		</template>
+		<p data-testid="item" data-wp-each-child>1</p>
+		<p data-testid="item" data-wp-each-child>2</p>
+		<p data-testid="item" data-wp-each-child>3</p>
+		<p data-testid="item">4</p>
+	</div>
+
+	<hr>
+
+	<div data-testid="empty">
+		<button
+			data-testid="add" data-wp-on--click="actions.addItem"
+		>Add</button>
+		<template data-wp-each="state.emptyList">
+			<p data-wp-text="context.item" data-testid="item"></p>
+		</template>
+		<p data-testid="item">item X</p>
+	</div>
+
+	<div data-testid="siblings">
+		<button
+			data-testid="unshift"
+			data-wp-on--click="actions.unshiftNumberAndName"
+		>Unshift</button>
+		<template
+			data-wp-each="state.numbersAndNames"
+			data-wp-each-key="context.item.value"
+		>
+			<p data-wp-text="context.item.name" data-testid="item"></p>
+			<p data-wp-text="context.item.value" data-testid="item"></p>
+		</template>
+		<p data-testid="item" data-wp-each-child>two</p>
+		<p data-testid="item" data-wp-each-child>2</p>
+		<p data-testid="item" data-wp-each-child>three</p>
+		<p data-testid="item" data-wp-each-child>3</p>
+		<p data-testid="item">four</p>
+		<p data-testid="item">4</p>
+	</div>
+
+	<div data-testid="nested">
+		<button
+			data-testid="add animal"
+			data-wp-on--click="actions.addAnimal"
+		>Add animal</button>
+		<button
+			data-testid="add breeds"
+			data-wp-on--click="actions.addBreeds"
+		>Add breeds</button>
+
+		<ul>
+			<template
+				data-wp-each--animal="state.animalBreeds"
+				data-wp-each-key="context.animal.name"
+			>
+				<li data-testid="animal">
+					<span
+						data-testid="name"
+						data-wp-text="context.animal.name"
+					></span>
+					<ul>
+						<template data-wp-each--breed="context.animal.breeds">
+							<li data-wp-text="context.breed"></li>
+						</template>
+					</ul>
+				</li>
+			</template>
+			<!-- SSRed elements; they should be removed on hydration -->
+			<li data-testid="animal" data-wp-each-child>
+				<span data-testid="name">Dog</span>
+				<ul>
+					<template data-wp-each--breed="context.animal.breeds">
+						<li data-wp-text="context.breed"></li>
+					</template>
+					<li data-wp-each-child>Chihuahua</li>
+					<li data-wp-each-child>Rottweiler</li>
+				</ul>
+			</li>
+			<li data-testid="animal" data-wp-each-child>
+				<span data-testid="name">Cat</span>
+				<ul>
+					<template data-wp-each--breed="context.animal.breeds">
+						<li data-wp-text="context.breed"></li>
+					</template>
+					<li data-wp-each-child>Sphynx</li>
+					<li data-wp-each-child>Siamese</li>
+				</ul>
+			</li>
+		</ul>
+	</div>
+
+	<div data-testid="invalid tag">
+		<div data-wp-each="state.letters">
+			<p data-wp-text="context.item" data-testid="item"></p>
+		</div>
+	</div>
+
+
+	<div data-testid="derived state">
+		<button
+			data-testid="rotate" data-wp-on--click="actions.rotateFruits"
+		>Rotate</button>
+		<template
+			data-wp-context='{ "idPrefix": "fruit-" }'
+			data-wp-each--fruit="state.fruits"
+			data-wp-each-key="state.fruitId"
+		>
+			<p
+				data-testid="item"
+				data-wp-text="context.fruit"
+				data-wp-bind--data-fruit-id="state.fruitId"
+			></p>
+		</template>
+		<!-- SSRed elements; they should be removed on hydration -->
+		<p data-testid="item" data-wp-each-child>avocado</p>
+		<p data-testid="item" data-wp-each-child>banana</p>
+		<p data-testid="item" data-wp-each-child>cherimoya</p>
+	</div>
+</div>
+
+<hr>
+
+<div
+	data-wp-interactive='{ "namespace": "directive-each" }'
+	data-wp-router-region="navigation-updated list"
+	data-wp-context='{ "list": [ "beta", "gamma", "delta" ] }'
+	data-testid="navigation-updated list"
+>
+	<button
+		data-testid="navigate"
+		data-wp-on--click="actions.navigate"
+	>Navigate</button>
+	<template data-wp-each="context.list">
+		<p data-wp-text="context.item" data-testid="item"></p>
+	</template>
+	<p data-testid="item" data-wp-each-child>beta</p>
+	<p data-testid="item" data-wp-each-child>gamma</p>
+	<p data-testid="item" data-wp-each-child>delta</p>
+</div>

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

@@ -0,0 +1,192 @@
+/**
+ * WordPress dependencies
+ */
+import { store, getContext } from '@wordpress/interactivity';
+
+const { state } = store( 'directive-each' );
+
+store( 'directive-each', {
+	state: {
+		letters: [ 'A', 'B', 'C' ],
+	},
+} );
+
+store( 'directive-each', {
+	state: {
+		fruits: [ 'avocado', 'banana', 'cherimoya' ],
+		get fruitId() {
+			const { idPrefix, fruit } = getContext();
+			return `${idPrefix}${fruit}`;
+		}
+	},
+	actions: {
+		removeFruit() {
+			const { fruit } = getContext();
+			state.fruits.splice( state.fruits.indexOf( fruit ), 1 );
+		},
+		rotateFruits() {
+			const fruit = state.fruits.pop();
+			state.fruits.splice( 0, 0, fruit );
+		},
+		addFruit() {
+			state.fruits.splice( 0, 0, 'ananas' );
+		},
+		replaceFruit() {
+			state.fruits.splice( 0, 1, 'ananas' );
+		},
+	},
+} );
+
+store( 'directive-each', {
+	state: {
+		books: [
+			{
+				title: 'A Game of Thrones',
+				author: 'George R.R. Martin',
+				isbn: "9780553588484",
+			},
+			{
+				title: 'A Clash of Kings',
+				author: 'George R.R. Martin',
+				isbn: "9780553381696",
+			},
+			{
+				title: 'A Storm of Swords',
+				author: 'George R.R. Martin',
+				isbn: "9780553573428",
+			},
+		],
+	},
+	actions: {
+		removeBook() {
+			const { book } = getContext();
+			state.books.splice( state.books.indexOf( book ), 1 );
+		},
+		rotateBooks() {
+			const book = state.books.pop();
+			state.books.splice( 0, 0, book );
+		},
+		addBook() {
+			const book = {
+				title: 'A Feast for Crows',
+				author: 'George R.R. Martin',
+				isbn: "9780553582024",
+			};
+			state.books.splice( 0, 0, book );
+		},
+		replaceBook() {
+			const book = {
+				title: 'A Feast for Crows',
+				author: 'George R.R. Martin',
+				isbn: "9780553582024",
+			};
+			state.books.splice( 0, 1, book );
+		},
+		modifyBook() {
+			const [ book ] = state.books;
+			book.title = book.title.toUpperCase();
+		},
+	},
+} );
+
+store( 'directive-each', {
+	state: {
+		numbers: [ 1, 2, 3 ],
+	},
+	actions: {
+		shiftNumber() {
+			state.numbers.shift();
+		},
+		unshiftNumber() {
+			if ( state.numbers.length > 0 ) {
+				state.numbers.unshift( state.numbers[ 0 ] - 1 );
+			}
+		}
+	},
+} );
+
+store( 'directive-each', {
+	state: {
+		emptyList: []
+	},
+	actions: {
+		addItem() {
+			state.emptyList.push( `item ${ state.emptyList.length }` );
+		}
+	},
+} );
+
+store( 'directive-each', {
+	state: {
+		numbersAndNames: [
+			{ name: "two", value: 2 },
+			{ name: "three", value: 3 },
+		],
+	},
+	actions: {
+		unshiftNumberAndName() {
+			state.numbersAndNames.unshift( { name: "one", value: 1 } );
+		}
+	},
+} );
+
+store( 'directive-each', {
+	state: {
+		animalBreeds: [
+			{ name: "Dog", breeds: [ 'chihuahua', 'rottweiler' ] },
+			{ name: "Cat", breeds: [ 'sphynx', 'siamese' ] },
+		],
+	},
+	actions: {
+		addAnimal() {
+			state.animalBreeds.unshift( {
+				name: "Rat", breeds: [ 'dumbo', 'rex' ]
+			} );
+		},
+		addBreeds() {
+			state
+				.animalBreeds
+				.forEach( ( { name, breeds } ) => {
+					if ( name === 'Dog') breeds.unshift( 'german shepherd' );
+					if ( name === 'Cat') breeds.unshift( 'maine coon' );
+					if ( name === 'Rat') breeds.unshift( 'satin' );
+				} );
+		}
+	}
+} );
+
+const html = `
+<div
+	data-wp-interactive='{ "namespace": "directive-each" }'
+	data-wp-router-region="navigation-updated list"
+	data-wp-context='{ "list": [ "alpha", "beta", "gamma", "delta" ] }'
+	data-testid="navigation-updated list"
+>
+	<button
+		data-testid="navigate"
+		data-wp-on--click="actions.navigate"
+	>Navigate</button>
+	<template data-wp-each="context.list">
+		<p data-wp-text="context.item" data-testid="item"></p>
+	</template>
+	<p data-testid="item" data-wp-each-child>alpha</p>
+	<p data-testid="item" data-wp-each-child>beta</p>
+	<p data-testid="item" data-wp-each-child>gamma</p>
+	<p data-testid="item" data-wp-each-child>delta</p>
+</div>
+`;
+
+store( 'directive-each', {
+	actions: {
+		*navigate() {
+			const { actions } = yield import(
+				"@wordpress/interactivity-router"
+			);
+			return actions.navigate( window.location, {
+				force: true,
+				html,
+			} );
+		},
+	}
+} );
+

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

@@ -5,7 +5,7 @@
  * @package gutenberg-test-interactive-blocks
  */
 
-gutenberg_enqueue_module( 'directive-init-view' );
+wp_enqueue_script_module( 'directive-init-view' );
 ?>
 
 <div data-wp-interactive='{ "namespace": "directive-init" }'>

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

@@ -5,12 +5,12 @@
  * @package gutenberg-test-interactive-blocks
  */
 
-gutenberg_enqueue_module( 'directive-key-view' );
+wp_enqueue_script_module( 'directive-key-view' );
 ?>
 
 <div
 	data-wp-interactive='{ "namespace": "directive-key" }'
-	data-wp-navigation-id="some-id"
+	data-wp-router-region="some-id"
 >
 	<ul>
 		<li data-wp-key="id-2" data-testid="first-item">2</li>

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

@@ -1,12 +1,12 @@
 /**
  * WordPress dependencies
  */
-import { store, navigate } from '@wordpress/interactivity';
+import { store } from '@wordpress/interactivity';
 
 const html = `
 		<div
 			data-wp-interactive='{ "namespace": "directive-key" }'
-			data-wp-navigation-id="some-id"
+			data-wp-router-region="some-id"
 		>
 			<ul>
 				<li data-wp-key="id-1">1</li>
@@ -17,8 +17,11 @@ const html = `
 
 store( 'directive-key', {
 	actions: {
-		navigate() {
-			navigate( window.location, {
+		*navigate() {
+			const { actions } = yield import(
+				"@wordpress/interactivity-router"
+			);
+			return actions.navigate( window.location, {
 				force: true,
 				html,
 			} );

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

@@ -5,7 +5,7 @@
  * @package gutenberg-test-interactive-blocks
  */
 
-gutenberg_enqueue_module( 'directive-on-view' );
+wp_enqueue_script_module( 'directive-on-view' );
 ?>
 
 <div data-wp-interactive='{ "namespace": "directive-on" }'>

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

@@ -0,0 +1,15 @@
+{
+	"$schema": "https://schemas.wp.org/trunk/block.json",
+	"apiVersion": 2,
+	"name": "test/directive-on-document",
+	"title": "E2E Interactivity tests - directive on document",
+	"category": "text",
+	"icon": "heart",
+	"description": "",
+	"supports": {
+		"interactivity": true
+	},
+	"textdomain": "e2e-interactivity",
+	"viewScript": "directive-on-document-view",
+	"render": "file:./render.php"
+}

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

@@ -0,0 +1,29 @@
+<?php
+/**
+ * HTML for testing the directive `data-wp-on`.
+ *
+ * @package gutenberg-test-interactive-blocks
+ */
+
+wp_enqueue_script_module( 'directive-on-document-view' );
+?>
+
+<div data-wp-interactive='{ "namespace": "directive-on-document" }'>
+	<button 
+		data-testid="visibility"
+		data-wp-on--click="actions.visibilityHandler"
+	>
+		Switch visibility
+	</button>
+
+	<div data-wp-text="state.isEventAttached" data-testid="isEventAttached">no</div>
+
+	<div data-wp-show-mock="state.isVisible">
+		<div
+			data-wp-on-document--keydown="callbacks.keydownHandler"
+			data-wp-init="callbacks.init"
+		>
+			<p data-wp-text="state.counter" data-testid="counter">0</p>
+		</div>
+	</div>
+</div>