npm - @wordpress/e2e-tests - Versions diffs - 7.17.0 → 7.18.0 - Mend

@wordpress/e2e-tests 7.17.0 → 7.18.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (57) hide show

package/plugins/interactive-blocks/router-navigate/render.php CHANGED Viewed

@@ -6,26 +6,29 @@
  * @phpcs:disable VariableAnalysis.CodeAnalysis.VariableAnalysis.UndefinedVariable
  */
+gutenberg_enqueue_module( 'router-navigate-view' );
 ?>
-<div data-wp-interactive data-wp-navigation-id="region-1">
+<div
+	data-wp-interactive='{ "namespace": "router" }'
+	data-wp-navigation-id="region-1"
+>
 	<h2 data-testid="title"><?php echo $attributes['title']; ?></h2>
 	<output
 		data-testid="router navigations"
-		data-wp-text="state.router.navigations"
+		data-wp-text="state.navigations"
 	>NaN</output>
 	<output
 		data-testid="router status"
-		data-wp-text="state.router.status"
+		data-wp-text="state.status"
 	>undefined</output>
 	<button
-		data-wp-on--click="actions.router.toggleTimeout"
+		data-wp-on--click="actions.toggleTimeout"
 		data-testid="toggle timeout"
 	>
-		Timeout <span data-wp-text="state.router.timeout">NaN</span>
+		Timeout <span data-wp-text="state.timeout">NaN</span>
 	</button>
 	<?php
@@ -35,12 +38,12 @@
 			echo <<<HTML
 			<a
 				data-testid="link $i"
-				data-wp-on--click="actions.router.navigate"
+				data-wp-on--click="actions.navigate"
 				href="$link"
 			>link $i</a>
 			<a
 				data-testid="link $i with hash"
-				data-wp-on--click="actions.router.navigate"
+				data-wp-on--click="actions.navigate"
 				data-force-navigation="true"
 				href="$link#link-$i-with-hash"
 			>link $i with hash</a>

package/plugins/interactive-blocks/router-navigate/view.js CHANGED Viewed

@@ -1,41 +1,34 @@
-( ( { wp } ) => {
-	/**
-	 * WordPress dependencies
-	 */
-	const { store, navigate } = wp.interactivity;
+/**
+ * WordPress dependencies
+ */
+import { store, navigate } from '@wordpress/interactivity';
-	store( {
-		state: {
-			router: {
-				status: 'idle',
-				navigations: 0,
-				timeout: 10000,
-			}
-		},
-		actions: {
-			router: {
-				navigate: async ( { state, event: e } ) => {
-					e.preventDefault();
+const { state } = store( 'router', {
+	state: {
+		status: 'idle',
+		navigations: 0,
+		timeout: 10000,
+	},
+	actions: {
+		*navigate( e ) {
+			e.preventDefault();
-					state.router.navigations += 1;
-					state.router.status = 'busy';
+			state.navigations += 1;
+			state.status = 'busy';
-					const force = e.target.dataset.forceNavigation === 'true';
-					const { timeout } = state.router;
+			const force = e.target.dataset.forceNavigation === 'true';
+			const { timeout } = state;
-					await navigate( e.target.href, { force, timeout } );
+			yield navigate( e.target.href, { force, timeout } );
-					state.router.navigations -= 1;
+			state.navigations -= 1;
-					if ( state.router.navigations === 0) {
-						state.router.status = 'idle';
-					}
-				},
-				toggleTimeout: ( { state }) => {
-					state.router.timeout =
-						state.router.timeout === 10000 ? 0 : 10000;
-				}
-			},
+			if ( state.navigations === 0 ) {
+				state.status = 'idle';
+			}
+		},
+		toggleTimeout() {
+			state.timeout = state.timeout === 10000 ? 0 : 10000;
 		},
-	} );
-} )( window );
+	},
+} );

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

@@ -6,11 +6,15 @@
  * @phpcs:disable VariableAnalysis.CodeAnalysis.VariableAnalysis.UndefinedVariable
  */
+gutenberg_enqueue_module( 'router-regions-view' );
 ?>
 <section>
 	<h2>Region 1</h2>
-	<div data-wp-interactive data-wp-navigation-id="region-1">
+	<div
+		data-wp-interactive='{"namespace": "router-regions"}'
+		data-wp-navigation-id="region-1"
+	>
 		<p
 			data-testid="region-1-text"
 			data-wp-text="state.region1.text"
@@ -51,7 +55,10 @@
 <section>
 	<h2>Region 2</h2>
-	<div data-wp-interactive data-wp-navigation-id="region-2">
+	<div
+		data-wp-interactive='{"namespace": "router-regions"}'
+		data-wp-navigation-id="region-2"
+	>
 		<p
 			data-testid="region-2-text"
 			data-wp-text="state.region2.text"
@@ -78,7 +85,10 @@
 			<section>
 				<h2>Nested region</h2>
-				<div data-wp-interactive data-wp-navigation-id="nested-region">
+				<div
+					data-wp-interactive='{"namespace": "router-regions"}'
+					data-wp-navigation-id="nested-region"
+				>
 					<p
 						data-testid="nested-region-ssr"
 					>content from page <?php echo $attributes['page']; ?></p>

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

@@ -1,43 +1,45 @@
-( ( { wp } ) => {
-	/**
-	 * WordPress dependencies
-	 */
-	const { store, navigate } = wp.interactivity;
+/**
+ * WordPress dependencies
+ */
+import { store, navigate, getContext } from '@wordpress/interactivity';
-	store( {
-		state: {
-			region1: {
-				text: 'hydrated'
-			},
-			region2: {
-				text: 'hydrated'
+const { state } = store( 'router-regions', {
+	state: {
+		region1: {
+			text: 'hydrated',
+		},
+		region2: {
+			text: 'hydrated',
+		},
+		counter: {
+			value: 0,
+		},
+	},
+	actions: {
+		router: {
+			*navigate( e ) {
+				e.preventDefault();
+				yield navigate( e.target.href );
 			},
-			counter: {
-				value: 0,
+			back() {
+				history.back();
 			},
 		},
-		actions: {
-			router: {
-				navigate: async ( { event: e } ) => {
-					e.preventDefault();
-					await navigate( e.target.href );
-				},
-				back: () => history.back(),
+		counter: {
+			increment() {
+				const context = getContext();
+				if ( context?.counter ) {
+					context.counter.value += 1;
+				} else {
+					state.counter.value += 1;
+				}
 			},
-			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;
-					}
+			init() {
+				const context = getContext();
+				if ( context.counter ) {
+					context.counter.value = context.counter.initialValue;
 				}
 			},
 		},
-	} );
-} )( window );
+	},
+} );

package/plugins/interactive-blocks/store-tag/render.php CHANGED Viewed

@@ -6,11 +6,14 @@
  * @phpcs:disable VariableAnalysis.CodeAnalysis.VariableAnalysis.UndefinedVariable
  */
+gutenberg_enqueue_module( 'store-tag-view' );
 // These variables simulates SSR.
 $test_store_tag_counter = 'ok' === $attributes['condition'] ? 3 : 0;
 $test_store_tag_double  = $test_store_tag_counter * 2;
 ?>
-<div data-wp-interactive>
+<div data-wp-interactive='{ "namespace": "store-tag" }'>
 	<div>
 		Counter:
 		<span
@@ -45,7 +48,7 @@ $test_store_tag_double  = $test_store_tag_counter * 2;
 if ( 'missing' !== $attributes['condition'] ) {
 	if ( 'ok' === $attributes['condition'] ) {
-		$test_store_tag_json = '{ "state": { "counter": { "value": 3 } } }';
+		$test_store_tag_json = '{ "store-tag": { "counter": { "value": 3 } } }';
 	}
 	if ( 'corrupted-json' === $attributes['condition'] ) {
@@ -53,11 +56,11 @@ if ( 'missing' !== $attributes['condition'] ) {
 	}
 	if ( 'invalid-state' === $attributes['condition'] ) {
-		$test_store_tag_json = '{ "state": null }';
+		$test_store_tag_json = 'null';
 	}
 	echo <<<HTML
-	<script type="application/json" id="wp-interactivity-store-data">
+	<script type="application/json" id="wp-interactivity-initial-state">
 		$test_store_tag_json
 	</script>
 HTML;

package/plugins/interactive-blocks/store-tag/view.js CHANGED Viewed

@@ -1,24 +1,24 @@
-( ( { wp } ) => {
-	/**
-	 * WordPress dependencies
-	 */
-	const { store } = wp.interactivity;
+/**
+ * WordPress dependencies
+ */
+import { store } from '@wordpress/interactivity';
-	store( {
-		state: {
-			counter: {
-				// `value` is defined in the server.
-				double: ( { state } ) => state.counter.value * 2,
-				clicks: 0,
+const { state } = store( 'store-tag', {
+	state: {
+		counter: {
+			// `value` is defined in the server.
+			get double() {
+				return state.counter.value * 2;
 			},
+			clicks: 0,
 		},
-		actions: {
-			counter: {
-				increment: ( { state } ) => {
-					state.counter.value += 1;
-					state.counter.clicks += 1;
-				},
+	},
+	actions: {
+		counter: {
+			increment() {
+				state.counter.value += 1;
+				state.counter.clicks += 1;
 			},
 		},
-	} );
-} )( window );
+	},
+} );

package/plugins/interactive-blocks/tovdom/render.php CHANGED Viewed

@@ -8,9 +8,11 @@
 $plugin_url   = plugin_dir_url( __DIR__ );
 $src_proc_ins = $plugin_url . 'tovdom/processing-instructions.js';
 $src_cdata    = $plugin_url . 'tovdom/cdata.js';
+gutenberg_enqueue_module( 'tovdom-view' );
 ?>
-<div data-wp-interactive>
+<div data-wp-interactive='{ "namespace": "tovdom" }'>
 	<div data-testid="it should delete comments">
 		<!-- ##1## -->
 		<div data-testid="it should keep this node between comments">

package/plugins/interactive-blocks/tovdom/view.js CHANGED Viewed

@@ -1,5 +1,6 @@
-( ( { wp } ) => {
-	const { store } = wp.interactivity;
+/**
+ * WordPress dependencies
+ */
+import { store } from '@wordpress/interactivity';
-	store( {} );
-} )( window );
+store( 'tovdom', {} );

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

@@ -5,7 +5,9 @@
  * @package gutenberg-test-interactive-blocks
  */
+gutenberg_enqueue_module( 'tovdom-islands-view' );
 ?>
 <div>
 	<div data-wp-show-mock="state.falseValue">
 		<span data-testid="not inside an island">
@@ -13,7 +15,7 @@
 		</span>
 	</div>
-	<div data-wp-interactive>
+	<div data-wp-interactive='{ "namespace": "tovdom-islands" }'>
 		<div data-wp-show-mock="state.falseValue">
 			<span data-testid="inside an island">
 				This should not be shown because it is inside an island.
@@ -21,7 +23,7 @@
 		</div>
 	</div>
-	<div data-wp-interactive>
+	<div data-wp-interactive='{ "namespace": "tovdom-islands" }'>
 		<div data-wp-ignore>
 			<div data-wp-show-mock="state.falseValue">
 				<span
@@ -34,8 +36,8 @@
 		</div>
 	</div>
-	<div data-wp-interactive>
-		<div data-wp-interactive>
+	<div data-wp-interactive='{ "namespace": "tovdom-islands" }'>
+		<div data-wp-interactive='{ "namespace": "tovdom-islands" }'>
 			<div
 				data-wp-show-mock="state.falseValue"
 				data-testid="island inside another island"
@@ -48,9 +50,12 @@
 		</div>
 	</div>
-	<div data-wp-interactive>
+	<div data-wp-interactive='{ "namespace": "tovdom-islands" }'>
 		<div>
-			<div data-wp-interactive data-wp-ignore>
+			<div
+				data-wp-interactive='{ "namespace": "tovdom-islands" }'
+				data-wp-ignore
+			>
 				<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 CHANGED Viewed

@@ -1,26 +1,27 @@
-( ( { wp } ) => {
-	const { store, directive, createElement } = wp.interactivity;
+/**
+ * WordPress dependencies
+ */
+import { store, directive, createElement as h } from '@wordpress/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 );
+// 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': showMock }, element, evaluate } ) => {
+		const entry = showMock.find( ( { suffix } ) => suffix === 'default' );
+		if ( ! evaluate( entry ) ) {
+			element.props.children = h(
+				'template',
+				null,
+				element.props.children
+			);
 		}
-	);
+	}
+);
-	store( {
-		state: {
-			falseValue: false,
-		},
-	} );
-} )( window );
+store( 'tovdom-islands', {
+	state: {
+		falseValue: false,
+	},
+} );

package/plugins/interactive-blocks.php CHANGED Viewed

@@ -21,10 +21,10 @@ add_action(
 				$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
 				);

package/specs/editor/various/datepicker.test.js CHANGED Viewed

@@ -56,7 +56,7 @@ function formatDatePickerValues(
 async function getPublishingDate() {
 	return page.$eval(
-		'.edit-post-post-schedule__toggle',
+		'.editor-post-schedule__dialog-toggle',
 		( dateLabel ) => dateLabel.textContent
 	);
 }
@@ -83,7 +83,7 @@ describe.each( [ [ 'UTC-10' ], [ 'UTC' ], [ 'UTC+10' ] ] )(
 		it( 'should show the publishing date if the date is in the past', async () => {
 			// Open the datepicker.
-			await page.click( '.edit-post-post-schedule__toggle' );
+			await page.click( '.editor-post-schedule__dialog-toggle' );
 			// Change the publishing date to a year in the past.
 			await page.click( '.components-datetime__time-field-year' );
@@ -91,7 +91,7 @@ describe.each( [ [ 'UTC-10' ], [ 'UTC' ], [ 'UTC+10' ] ] )(
 			const datePickerValues = await getDatePickerValues();
 			// Close the datepicker.
-			await page.click( '.edit-post-post-schedule__toggle' );
+			await page.click( '.editor-post-schedule__dialog-toggle' );
 			const publishingDate = await getPublishingDate();
@@ -102,7 +102,7 @@ describe.each( [ [ 'UTC-10' ], [ 'UTC' ], [ 'UTC+10' ] ] )(
 		it( 'should show the publishing date if the date is in the future', async () => {
 			// Open the datepicker.
-			await page.click( '.edit-post-post-schedule__toggle' );
+			await page.click( '.editor-post-schedule__dialog-toggle' );
 			// Change the publishing date to a year in the future.
 			await page.click( '.components-datetime__time-field-year' );
@@ -110,7 +110,7 @@ describe.each( [ [ 'UTC-10' ], [ 'UTC' ], [ 'UTC+10' ] ] )(
 			const datePickerValues = await getDatePickerValues();
 			// Close the datepicker.
-			await page.click( '.edit-post-post-schedule__toggle' );
+			await page.click( '.editor-post-schedule__dialog-toggle' );
 			const publishingDate = await getPublishingDate();
@@ -123,17 +123,17 @@ describe.each( [ [ 'UTC-10' ], [ 'UTC' ], [ 'UTC+10' ] ] )(
 		it( `should show the publishing date as "Immediately" if the date is cleared`, async () => {
 			// Open the datepicker.
-			await page.click( '.edit-post-post-schedule__toggle' );
+			await page.click( '.editor-post-schedule__dialog-toggle' );
 			// Change the publishing date to a year in the future.
 			await page.click( '.components-datetime__time-field-year' );
 			await page.keyboard.press( 'ArrowUp' );
 			// Close the datepicker.
-			await page.click( '.edit-post-post-schedule__toggle' );
+			await page.click( '.editor-post-schedule__dialog-toggle' );
 			// Open the datepicker.
-			await page.click( '.edit-post-post-schedule__toggle' );
+			await page.click( '.editor-post-schedule__dialog-toggle' );
 			// Clear the date.
 			await page.click(

package/specs/editor/various/pattern-blocks.test.js CHANGED Viewed

@@ -112,7 +112,7 @@ describe( 'Pattern blocks', () => {
 		// Convert block to a regular block.
 		await clickBlockToolbarButton( 'Options' );
-		await clickMenuItem( 'Detach pattern' );
+		await clickMenuItem( 'Detach' );
 		// Check that we have a paragraph block on the page.
 		const paragraphBlock = await canvas().$(
@@ -219,7 +219,7 @@ describe( 'Pattern blocks', () => {
 		// Convert block to a regular block.
 		await clickBlockToolbarButton( 'Options' );
-		await clickMenuItem( 'Detach patterns' );
+		await clickMenuItem( 'Detach' );
 		// Check that we have two paragraph blocks on the page.
 		expect( await getEditedPostContent() ).toMatchSnapshot();
@@ -350,9 +350,9 @@ describe( 'Pattern blocks', () => {
 		expect( reusableBlockWithParagraph ).toBeTruthy();
 		// Convert back to regular blocks.
-		await clickBlockToolbarButton( 'Select Edited block' );
+		await clickBlockToolbarButton( 'Select parent block: Edited block' );
 		await clickBlockToolbarButton( 'Options' );
-		await clickMenuItem( 'Detach pattern' );
+		await clickMenuItem( 'Detach' );
 		await page.waitForXPath( selector, {
 			hidden: true,
 		} );

package/specs/editor/various/scheduling.test.js CHANGED Viewed

@@ -46,7 +46,7 @@ describe( 'Scheduling', () => {
 				await page.keyboard.press( 'ArrowUp' );
 				// Close the datepicker.
-				await page.click( '.edit-post-post-schedule__toggle' );
+				await page.click( '.editor-post-schedule__dialog-toggle' );
 				expect( await getPublishButtonText() ).toBe( 'Schedule…' );
 			} );

package/plugins/interactive-blocks/directive-effect/block.json DELETED Viewed

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

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

@@ -1,59 +0,0 @@
-( ( { wp } ) => {
-	const { store, directive } = 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 ) ) return null;
-			return element;
-		}
-	);
-	store( {
-		state: {
-			isOpen: true,
-			isElementInTheDOM: false,
-			counter: 0,
-		},
-		selectors: {
-			elementInTheDOM: ( { state } ) =>
-				state.isElementInTheDOM
-					? 'element is in the DOM'
-					: 'element is not in the DOM',
-		},
-		actions: {
-			toggle( { state } ) {
-				state.isOpen = ! state.isOpen;
-			},
-			increment( { state } ) {
-				state.counter = state.counter + 1;
-			},
-		},
-		effects: {
-			elementAddedToTheDOM: ( { state } ) => {
-				state.isElementInTheDOM = true;
-				return () => {
-					state.isElementInTheDOM = false;
-				};
-			},
-			changeFocus: ( { state } ) => {
-				if ( state.isOpen ) {
-					document.querySelector( "[data-testid='input']" ).focus();
-				}
-			},
-			infiniteLoop: ({ state }) => {
-				state.counter = state.counter + 1;
-			}
-		},
-	} );
-} )( window );