Start using modules in the interactivity e2e tests

WordPress · Nov 29, 2023 · 876fdb1 · 876fdb1
1 parent 4135f22
commit 876fdb1
Show file tree

Hide file tree

Showing 38 changed files with 576 additions and 566 deletions.
diff --git a/packages/e2e-tests/package.json b/packages/e2e-tests/package.json
@@ -24,6 +24,7 @@
 	},
 	"dependencies": {
 		"@wordpress/e2e-test-utils": "file:../e2e-test-utils",
+		"@wordpress/interactivity": "file:../interactivity",
 		"@wordpress/jest-console": "file:../jest-console",
 		"@wordpress/jest-puppeteer-axe": "file:../jest-puppeteer-axe",
 		"@wordpress/scripts": "file:../scripts",

diff --git a/packages/e2e-tests/plugins/interactive-blocks.php b/packages/e2e-tests/plugins/interactive-blocks.php
@@ -21,10 +21,10 @@ function () {
 
 				$view_file = plugin_dir_url( $block_folder ) . $name . '/' . 'view.js';
 
-				wp_register_script(
+				gutenberg_register_module(
 					$name . '-view',
 					$view_file,
-					array( 'wp-interactivity' ),
+					array( '@wordpress/interactivity' ),
 					filemtime( $view_file ),
 					true
 				);

diff --git a/packages/e2e-tests/plugins/interactive-blocks/directive-bind/render.php b/packages/e2e-tests/plugins/interactive-blocks/directive-bind/render.php
@@ -5,7 +5,9 @@
  * @package gutenberg-test-interactive-blocks
  */
 
+gutenberg_enqueue_module( 'directive-bind-view' );
 ?>
+
 <div data-wp-interactive='{ "namespace": "directive-bind" }'>
 	<a
 		data-wp-bind--href="state.url"

diff --git a/packages/e2e-tests/plugins/interactive-blocks/directive-bind/view.js b/packages/e2e-tests/plugins/interactive-blocks/directive-bind/view.js
@@ -1,35 +1,37 @@
-( ( { wp } ) => {
-	const { store, getContext } = wp.interactivity;
+/**
+ * WordPress dependencies
+ */
+import { store, getContext } from '@wordpress/interactivity';
 
-	const { state, foo } = store( 'directive-bind', {
-		state: {
-			url: '/some-url',
-			checked: true,
-			show: false,
-			width: 1,
+const { state, foo } = store( 'directive-bind', {
+	state: {
+		url: '/some-url',
+		checked: true,
+		show: false,
+		width: 1,
+	},
+	foo: {
+		bar: 1,
+	},
+	actions: {
+		toggle: () => {
+			state.url = '/some-other-url';
+			state.checked = ! state.checked;
+			state.show = ! state.show;
+			state.width += foo.bar;
 		},
-		foo: {
-			bar: 1,
-		},
-		actions: {
-			toggle: () => {
-				state.url = '/some-other-url';
-				state.checked = ! state.checked;
-				state.show = ! state.show;
-				state.width += foo.bar;
-			},
-			toggleValue: () => {
-				const context = getContext();
-				const previousValue = ( 'previousValue' in context )
+		toggleValue: () => {
+			const context = getContext();
+			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';
+					: // 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;
-			}
+			context.previousValue = context.value;
+			context.value = previousValue;
 		},
-	} );
-} )( window );
+	},
+} );
diff --git a/packages/e2e-tests/plugins/interactive-blocks/directive-body/render.php b/packages/e2e-tests/plugins/interactive-blocks/directive-body/render.php
@@ -5,7 +5,9 @@
  * @package gutenberg-test-interactive-blocks
  */
 
+gutenberg_enqueue_module( 'directive-body-view' );
 ?>
+
 <div
 	data-wp-interactive='{ "namespace":"directive-body" }'
 	data-wp-context='{"text":"text-1"}'

diff --git a/packages/e2e-tests/plugins/interactive-blocks/directive-body/view.js b/packages/e2e-tests/plugins/interactive-blocks/directive-body/view.js
@@ -1,12 +1,13 @@
-( ( { wp } ) => {
-	const { store, getContext } = wp.interactivity;
+/**
+ * WordPress dependencies
+ */
+import { store, getContext } from '@wordpress/interactivity';
 
-	store( 'directive-body', {
-		actions: {
-			toggleText: () => {
-				const context = getContext();
-				context.text = context.text === 'text-1' ? 'text-2' : 'text-1';
-			},
+store( 'directive-body', {
+	actions: {
+		toggleText: () => {
+			const context = getContext();
+			context.text = context.text === 'text-1' ? 'text-2' : 'text-1';
 		},
-	} );
-} )( window );
+	},
+} );
diff --git a/packages/e2e-tests/plugins/interactive-blocks/directive-class/render.php b/packages/e2e-tests/plugins/interactive-blocks/directive-class/render.php
@@ -5,7 +5,9 @@
  * @package gutenberg-test-interactive-blocks
  */
 
+gutenberg_enqueue_module( 'directive-class-view' );
 ?>
+
 <div data-wp-interactive='{"namespace": "directive-class"}'>
 	<button
 		data-wp-on--click="actions.toggleTrueValue"

diff --git a/packages/e2e-tests/plugins/interactive-blocks/directive-class/view.js b/packages/e2e-tests/plugins/interactive-blocks/directive-class/view.js
@@ -1,22 +1,23 @@
-( ( { wp } ) => {
-	const { store, getContext } = wp.interactivity;
+/**
+ * WordPress dependencies
+ */
+import { store, getContext } from '@wordpress/interactivity';
 
-	const { state } = store( "directive-class", {
-		state: {
-			trueValue: true,
-			falseValue: false,
+const { state } = store( 'directive-class', {
+	state: {
+		trueValue: true,
+		falseValue: false,
+	},
+	actions: {
+		toggleTrueValue: () => {
+			state.trueValue = ! state.trueValue;
 		},
-		actions: {
-			toggleTrueValue: () => {
-				state.trueValue = ! state.trueValue;
-			},
-			toggleFalseValue: () => {
-				state.falseValue = ! state.falseValue;
-			},
-			toggleContextFalseValue: () => {
-				const context = getContext();
-				context.falseValue = ! context.falseValue;
-			},
+		toggleFalseValue: () => {
+			state.falseValue = ! state.falseValue;
 		},
-	} );
-} )( window );
+		toggleContextFalseValue: () => {
+			const context = getContext();
+			context.falseValue = ! context.falseValue;
+		},
+	},
+} );
diff --git a/packages/e2e-tests/plugins/interactive-blocks/directive-context/render.php b/packages/e2e-tests/plugins/interactive-blocks/directive-context/render.php
@@ -5,7 +5,9 @@
  * @package gutenberg-test-interactive-blocks
  */
 
+gutenberg_enqueue_module( 'directive-context-view' );
 ?>
+
 <div data-wp-interactive='{"namespace": "directive-context"}'>
 	<div
 		data-wp-context='{ "prop1":"parent","prop2":"parent","obj":{"prop4":"parent","prop5":"parent"},"array":[1,2,3] }'

diff --git a/packages/e2e-tests/plugins/interactive-blocks/directive-context/view.js b/packages/e2e-tests/plugins/interactive-blocks/directive-context/view.js
@@ -1,29 +1,31 @@
-( ( { wp } ) => {
-	const { store, navigate, getContext } = wp.interactivity;
+/**
+ * WordPress dependencies
+ */
+import { store, navigate, getContext } from '@wordpress/interactivity';
 
-	store( 'directive-context', {
-		state: {
-			get renderContext() {
-				const ctx = getContext()
-				return JSON.stringify( ctx, undefined, 2 );
-			},
+store( 'directive-context', {
+	state: {
+		get renderContext() {
+			const ctx = getContext();
+			return JSON.stringify( ctx, undefined, 2 );
 		},
-		actions: {
-			updateContext( event ) {
-				const ctx = getContext();
-				const { name, value } = event.target;
-				const [ key, ...path ] = name.split( '.' ).reverse();
-				const obj = path.reduceRight( ( o, k ) => o[ k ], ctx );
-				obj[ key ] = value;
-			},
-			toggleContextText() {
-				const ctx = getContext();
-				ctx.text = ctx.text === 'Text 1' ? 'Text 2' : 'Text 1';
-			},
-		}
-	} );
+	},
+	actions: {
+		updateContext( event ) {
+			const ctx = getContext();
+			const { name, value } = event.target;
+			const [ key, ...path ] = name.split( '.' ).reverse();
+			const obj = path.reduceRight( ( o, k ) => o[ k ], ctx );
+			obj[ key ] = value;
+		},
+		toggleContextText() {
+			const ctx = getContext();
+			ctx.text = ctx.text === 'Text 1' ? 'Text 2' : 'Text 1';
+		},
+	},
+} );
 
-	const html = `
+const html = `
 		<div
 			data-wp-interactive='{ "namespace": "directive-context-navigate" }'
 			data-wp-navigation-id="navigation"
@@ -37,27 +39,26 @@
 			<button data-testid="async navigate" data-wp-on--click="actions.asyncNavigate">Async Navigate</button>
 		</div>`;
 
-	const { actions } = store( 'directive-context-navigate', {
-		actions: {
-			toggleText() {
-				const ctx = getContext();
-				ctx.text = "changed dynamically";
-			},
-			addNewText() {
-				const ctx = getContext();
-				ctx.newText = 'some new text';
-			},
-			navigate() {
-				return navigate( window.location, {
-					force: true,
-					html,
-				} );
-			},
-			* asyncNavigate() {
-				yield actions.navigate();
-				const ctx = getContext();
-				ctx.newText = 'changed from async action';
-			}
+const { actions } = store( 'directive-context-navigate', {
+	actions: {
+		toggleText() {
+			const ctx = getContext();
+			ctx.text = 'changed dynamically';
+		},
+		addNewText() {
+			const ctx = getContext();
+			ctx.newText = 'some new text';
+		},
+		navigate() {
+			return navigate( window.location, {
+				force: true,
+				html,
+			} );
+		},
+		*asyncNavigate() {
+			yield actions.navigate();
+			const ctx = getContext();
+			ctx.newText = 'changed from async action';
 		},
-	} );
-} )( window );
+	},
+} );
diff --git a/packages/e2e-tests/plugins/interactive-blocks/directive-init/render.php b/packages/e2e-tests/plugins/interactive-blocks/directive-init/render.php
@@ -5,7 +5,9 @@
  * @package gutenberg-test-interactive-blocks
  */
 
+gutenberg_enqueue_module( 'directive-init-view' );
 ?>
+
 <div data-wp-interactive='{ "namespace": "directive-init" }'>
 	<div
 		data-testid="single init"