npm - @wordpress/e2e-tests - Versions diffs - 7.7.0 → 7.9.0 - Mend

@wordpress/e2e-tests 7.7.0 → 7.9.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 (61) hide show

package/plugins/interactive-blocks/directive-text/view.js ADDED Viewed

@@ -0,0 +1,17 @@
+( ( { wp } ) => {
+	const { store } = wp.interactivity;
+	store( {
+		state: {
+			text: 'Text 1',
+		},
+		actions: {
+			toggleStateText: ( { state } ) => {
+				state.text = state.text === 'Text 1' ? 'Text 2' : 'Text 1';
+			},
+			toggleContextText: ( { context } ) => {
+				context.text = context.text === 'Text 1' ? 'Text 2' : 'Text 1';
+			},
+		},
+	} );
+} )( window );

package/plugins/interactive-blocks/negation-operator/block.json ADDED Viewed

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

package/plugins/interactive-blocks/negation-operator/render.php ADDED Viewed

@@ -0,0 +1,26 @@
+<?php
+/**
+ * HTML for testing the negation operator in directives.
+ *
+ * @package gutenberg-test-interactive-blocks
+ */
+?>
+<div data-wp-interactive>
+	<button
+		data-wp-on--click="actions.toggle"
+		data-testid="toggle active value"
+	>
+		Toggle Active Value
+	</button>
+	<div
+		data-wp-bind--hidden="!state.active"
+		data-testid="add hidden attribute if state is not active"
+	></div>
+	<div
+		data-wp-bind--hidden="!selectors.active"
+		data-testid="add hidden attribute if selector is not active"
+	></div>
+</div>

package/plugins/interactive-blocks/negation-operator/view.js ADDED Viewed

@@ -0,0 +1,22 @@
+( ( { wp } ) => {
+	/**
+	 * WordPress dependencies
+	 */
+	const { store } = wp.interactivity;
+	store( {
+		selectors: {
+			active: ( { state } ) => {
+				return state.active;
+			},
+		},
+		state: {
+			active: false,
+		},
+		actions: {
+			toggle: ( { state } ) => {
+				state.active = ! state.active;
+			},
+		},
+	} );
+} )( window );

package/plugins/interactive-blocks/store-tag/block.json ADDED Viewed

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

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

@@ -0,0 +1,64 @@
+<?php
+/**
+ * HTML for testing the hydration of the serialized store.
+ *
+ * @package gutenberg-test-interactive-blocks
+ * @phpcs:disable VariableAnalysis.CodeAnalysis.VariableAnalysis.UndefinedVariable
+ */
+// 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>
+		Counter:
+		<span
+			data-wp-bind--children="state.counter.value"
+			data-testid="counter value"
+			><?php echo $test_store_tag_counter; ?></span
+		>
+		<br />
+		Double:
+		<span
+			data-wp-bind--children="state.counter.double"
+			data-testid="counter double"
+			><?php echo $test_store_tag_double; ?></span
+		>
+		<br />
+		<button
+			data-wp-on--click="actions.counter.increment"
+			data-testid="counter button"
+		>
+			+1
+		</button>
+		<span
+			data-wp-bind--children="state.counter.clicks"
+			data-testid="counter clicks"
+			>0</span
+		>
+		clicks
+	</div>
+</div>
+<?php
+if ( 'missing' !== $attributes['condition'] ) {
+	if ( 'ok' === $attributes['condition'] ) {
+		$test_store_tag_json = '{ "state": { "counter": { "value": 3 } } }';
+	}
+	if ( 'corrupted-json' === $attributes['condition'] ) {
+		$test_store_tag_json = 'this is not a JSON';
+	}
+	if ( 'invalid-state' === $attributes['condition'] ) {
+		$test_store_tag_json = '{ "state": null }';
+	}
+	echo <<<HTML
+	<script type="application/json" id="wp-interactivity-store-data">
+		$test_store_tag_json
+	</script>
+HTML;
+}

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

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

package/plugins/interactive-blocks/tovdom/block.json ADDED Viewed

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

package/plugins/interactive-blocks/tovdom/cdata.js ADDED Viewed

@@ -0,0 +1,15 @@
+const cdata = `
+	<div>
+		<![CDATA[##1##]]>
+		<div data-testid="it should keep this node between CDATA">
+			<![CDATA[##2##]]>
+		</div>
+	</div>
+	`;
+const cdataElement = new DOMParser()
+	.parseFromString( cdata, 'text/xml' )
+	.querySelector( 'div' );
+document
+	.getElementById( 'replace-with-cdata' )
+	.replaceWith( cdataElement );

package/plugins/interactive-blocks/tovdom/processing-instructions.js ADDED Viewed

@@ -0,0 +1,16 @@
+const processingInstructions = `
+	<div>
+		<?xpacket ##1## ?>
+		<div data-testid="it should keep this node between processing instructions">
+			Processing instructions inner node
+			<?xpacket ##2## ?>
+		</div>
+	</div>
+	`;
+const processingInstructionsElement = new DOMParser()
+	.parseFromString( processingInstructions, 'text/xml' )
+	.querySelector( 'div' );
+document
+	.getElementById( 'replace-with-processing-instructions' )
+	.replaceWith( processingInstructionsElement );

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

@@ -0,0 +1,33 @@
+<?php
+/**
+ * HTML for testing the vDOM generation.
+ *
+ * @package gutenberg-test-interactive-blocks
+ */
+$plugin_url   = plugin_dir_url( __DIR__ );
+$src_proc_ins = $plugin_url . 'tovdom/processing-instructions.js';
+$src_cdata    = $plugin_url . 'tovdom/cdata.js';
+?>
+<div data-wp-interactive>
+	<div data-testid="it should delete comments">
+		<!-- ##1## -->
+		<div data-testid="it should keep this node between comments">
+			Comments inner node
+			<!-- ##2## -->
+		</div>
+	</div>
+	<div data-testid="it should delete processing instructions">
+		<div id="replace-with-processing-instructions"></div>
+	</div>
+	<script src="<?php echo $src_proc_ins; ?>"></script>
+	<div data-testid="it should replace CDATA with text nodes">
+		<div id="replace-with-cdata"></div>
+	</div>
+	<script src="<?php echo $src_cdata; ?>"></script>
+</div>

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

@@ -0,0 +1,5 @@
+( ( { wp } ) => {
+	const { store } = wp.interactivity;
+	store( {} );
+} )( window );

package/plugins/interactive-blocks/tovdom-islands/block.json ADDED Viewed

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

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

@@ -0,0 +1,66 @@
+<?php
+/**
+ * HTML for testing the directive `data-wp-interactive`.
+ *
+ * @package gutenberg-test-interactive-blocks
+ */
+?>
+<div>
+	<div data-wp-show="state.falseValue">
+		<span data-testid="not inside an island">
+			This should be shown because it is inside an island.
+		</span>
+	</div>
+	<div data-wp-interactive>
+		<div data-wp-show="state.falseValue">
+			<span data-testid="inside an island">
+				This should not be shown because it is inside an island.
+			</span>
+		</div>
+	</div>
+	<div data-wp-interactive>
+		<div data-wp-ignore>
+			<div data-wp-show="state.falseValue">
+				<span
+					data-testid="inside an inner block of an isolated island"
+				>
+					This should be shown because it is inside an inner
+					block of an isolated island.
+				</span>
+			</div>
+		</div>
+	</div>
+	<div data-wp-interactive>
+		<div data-wp-interactive>
+			<div
+				data-wp-show="state.falseValue"
+				data-testid="island inside another island"
+			>
+				<span>
+					This should not have two template wrappers because
+					that means we hydrated twice.
+				</span>
+			</div>
+		</div>
+	</div>
+	<div data-wp-interactive>
+		<div>
+			<div data-wp-interactive data-wp-ignore>
+				<div data-wp-show="state.falseValue">
+					<span
+						data-testid="island inside inner block of isolated island"
+					>
+						This should not be shown because even though it
+						is inside an inner block of an isolated island,
+						it's inside an new island.
+					</span>
+				</div>
+			</div>
+		</div>
+	</div>
+</div>

package/plugins/interactive-blocks/tovdom-islands/view.js ADDED Viewed

@@ -0,0 +1,9 @@
+( ( { wp } ) => {
+	const { store } = wp.interactivity;
+	store( {
+		state: {
+			falseValue: false,
+		},
+	} );
+} )( window );

package/plugins/interactive-blocks.php ADDED Viewed

@@ -0,0 +1,48 @@
+<?php
+/**
+ * Plugin Name: Gutenberg Test Interactive Blocks
+ * Plugin URI: https://github.com/WordPress/gutenberg
+ * Author: Gutenberg Team
+ *
+ * @package gutenberg-test-interactive-blocks
+ */
+add_action(
+	'init',
+	function() {
+		// Register all blocks found in the `interactive-blocks` folder.
+		if ( file_exists( __DIR__ . '/interactive-blocks/' ) ) {
+			$block_json_files = glob( __DIR__ . '/interactive-blocks/**/block.json' );
+			// Auto register all blocks that were found.
+			foreach ( $block_json_files as $filename ) {
+				$block_folder = dirname( $filename );
+				$name         = basename( $block_folder );
+				$view_file = plugin_dir_url( $block_folder ) . $name . '/' . 'view.js';
+				wp_register_script(
+					$name . '-view',
+					$view_file,
+					array( 'wp-interactivity' ),
+					filemtime( $view_file ),
+					true
+				);
+				register_block_type_from_metadata( $block_folder );
+			};
+		};
+		// Temporary fix to disable SSR of directives during E2E testing. This
+		// is required at this moment, as SSR for directives is not stabilized
+		// yet and we need to ensure hydration works, even when the rendered
+		// HTML is not correct or malformed.
+		if ( 'true' === $_GET['disable_directives_ssr'] ) {
+			remove_filter(
+				'render_block',
+				'gutenberg_interactivity_process_directives_in_root_blocks'
+			);
+		}
+	}
+);

package/specs/editor/plugins/__snapshots__/container-blocks.test.js.snap CHANGED Viewed

@@ -22,10 +22,11 @@ exports[`InnerBlocks Template Sync Ensures blocks without locking are kept intac
 <p class="has-large-font-size">Content…</p>
 <!-- /wp:paragraph -->
-<!-- wp:paragraph -->
-<p>added paragraph</p>
-<!-- /wp:paragraph -->
-<!-- /wp:test/test-inner-blocks-no-locking -->"
+			<!-- wp:paragraph -->
+			<p>added paragraph</p>
+			<!-- /wp:paragraph -->
+		<!-- /wp:test/test-inner-blocks-no-locking -->
+"
 `;
 exports[`InnerBlocks Template Sync Removes blocks that are not expected by the template if a lock all exists 1`] = `

package/specs/editor/plugins/container-blocks.test.js CHANGED Viewed

@@ -9,6 +9,7 @@ import {
 	insertBlock,
 	switchEditorModeTo,
 	pressKeyWithModifier,
+	canvas,
 } from '@wordpress/e2e-test-utils';
 describe( 'InnerBlocks Template Sync', () => {
@@ -75,7 +76,7 @@ describe( 'InnerBlocks Template Sync', () => {
 		expect( await getEditedPostContent() ).toMatchSnapshot();
 		// Trigger a template update and assert that a second block is now present.
-		const [ button ] = await page.$x(
+		const [ button ] = await canvas().$x(
 			`//button[contains(text(), 'Update template')]`
 		);
 		await button.click();

package/specs/editor/plugins/iframed-equeue-block-assets.test.js CHANGED Viewed

@@ -32,6 +32,7 @@ describe( 'iframed inline styles', () => {
 	} );
 	it( 'should load styles added through enqueue_block_assets', async () => {
+		await page.waitForSelector( 'iframe[name="editor-canvas"]' );
 		// Check stylesheet.
 		expect(
 			await getComputedStyle( canvas(), 'body', 'background-color' )
@@ -40,5 +41,11 @@ describe( 'iframed inline styles', () => {
 		expect( await getComputedStyle( canvas(), 'body', 'padding' ) ).toBe(
 			'20px'
 		);
+		expect(
+			await canvas().evaluate( () => ( { ...document.body.dataset } ) )
+		).toEqual( {
+			iframedEnqueueBlockAssetsL10n: 'Iframed Enqueue Block Assets!',
+		} );
 	} );
 } );

package/specs/editor/various/block-editor-keyboard-shortcuts.test.js CHANGED Viewed

@@ -90,7 +90,7 @@ describe( 'block editor keyboard shortcuts', () => {
 		} );
 		it( 'should prevent deleting multiple selected blocks from inputs', async () => {
 			await clickBlockToolbarButton( 'Options' );
-			await clickMenuItem( 'Create pattern' );
+			await clickMenuItem( 'Create pattern/reusable block' );
 			const reusableBlockNameInputSelector =
 				'.reusable-blocks-menu-items__convert-modal .components-text-control__input';
 			const nameInput = await page.waitForSelector(

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

@@ -105,7 +105,8 @@ describe( 'Links', () => {
 		await waitForURLFieldAutoFocus();
 		const urlInputValue = await page.evaluate(
-			() => document.querySelector( '[aria-label="URL"]' ).value
+			() =>
+				document.querySelector( '.block-editor-url-input__input' ).value
 		);
 		expect( urlInputValue ).toBe( '' );
@@ -496,7 +497,7 @@ describe( 'Links', () => {
 			await pressKeyWithModifier( 'primary', 'K' );
 			const [ settingsToggle ] = await page.$x(
-				'//button[contains(@aria-label, "Link Settings")]'
+				'//button[contains(text(), "Advanced")]'
 			);
 			await settingsToggle.click();
@@ -528,7 +529,7 @@ describe( 'Links', () => {
 			await waitForURLFieldAutoFocus();
-			await page.keyboard.press( 'Tab' );
+			await pressKeyWithModifier( 'shift', 'Tab' );
 			// Tabbing should land us in the text input.
 			const { isTextInput, textValue } = await page.evaluate( () => {
@@ -585,8 +586,10 @@ describe( 'Links', () => {
 			await editButton.click();
-			// Tabbing forward should land us in the "Text" input.
-			await page.keyboard.press( 'Tab' );
+			await waitForURLFieldAutoFocus();
+			// Tabbing backward should land us in the "Text" input.
+			await pressKeyWithModifier( 'shift', 'Tab' );
 			const textInputValue = await page.evaluate(
 				() => document.activeElement.value
@@ -614,8 +617,9 @@ describe( 'Links', () => {
 			);
 			await editButton.click();
-			// tab forward to the text input.
-			await page.keyboard.press( 'Tab' );
+			await waitForURLFieldAutoFocus();
+			await pressKeyWithModifier( 'shift', 'Tab' );
 			const textInputValue = await page.evaluate(
 				() => document.activeElement.value
@@ -661,7 +665,7 @@ describe( 'Links', () => {
 			await waitForURLFieldAutoFocus();
 			const [ settingsToggle ] = await page.$x(
-				'//button[contains(@aria-label, "Link Settings")]'
+				'//button[contains(text(), "Advanced")]'
 			);
 			await settingsToggle.click();
@@ -679,7 +683,7 @@ describe( 'Links', () => {
 			await pressKeyWithModifier( 'shift', 'ArrowRight' );
 			// Move back to the text input.
-			await pressKeyTimes( 'Tab', 2 );
+			await pressKeyTimes( 'Tab', 1 );
 			// Tabbing back should land us in the text input.
 			const textInputValue = await page.evaluate(
@@ -879,8 +883,11 @@ describe( 'Links', () => {
 			await waitForURLFieldAutoFocus();
-			// Move to Link Text field.
-			await page.keyboard.press( 'Tab' );
+			// Move to "Text" field.
+			await pressKeyWithModifier( 'shift', 'Tab' );
+			// Delete existing value from "Text" field
+			await page.keyboard.press( 'Delete' );
 			// Change text to "z"
 			await page.keyboard.type( 'z' );

package/specs/editor/various/publish-button.test.js CHANGED Viewed

@@ -43,19 +43,4 @@ describe( 'PostPublishButton', () => {
 			await page.$( '.editor-post-publish-button[aria-disabled="true"]' )
 		).not.toBeNull();
 	} );
-	it( 'should be disabled when metabox is being saved', async () => {
-		await canvas().type( '.editor-post-title__input', 'E2E Test Post' ); // Make it saveable.
-		expect(
-			await page.$( '.editor-post-publish-button[aria-disabled="true"]' )
-		).toBeNull();
-		await page.evaluate( () => {
-			window.wp.data.dispatch( 'core/edit-post' ).requestMetaBoxUpdates();
-			return true;
-		} );
-		expect(
-			await page.$( '.editor-post-publish-button[aria-disabled="true"]' )
-		).not.toBeNull();
-	} );
 } );

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

@@ -23,8 +23,6 @@ const reusableBlockNameInputSelector =
 	'.reusable-blocks-menu-items__convert-modal .components-text-control__input';
 const reusableBlockInspectorNameInputSelector =
 	'.block-editor-block-inspector .components-text-control__input';
-const syncToggleSelector =
-	'.reusable-blocks-menu-items__convert-modal .components-form-toggle__input';
 const syncToggleSelectorChecked =
 	'.reusable-blocks-menu-items__convert-modal .components-form-toggle.is-checked';
@@ -113,7 +111,7 @@ describe( 'Reusable blocks', () => {
 		await insertReusableBlock( 'Surprised greeting block' );
 		// Convert block to a regular block.
-		await clickBlockToolbarButton( 'Convert to regular block' );
+		await clickBlockToolbarButton( 'Detach pattern' );
 		// Check that we have a paragraph block on the page.
 		const paragraphBlock = await canvas().$(
@@ -197,7 +195,7 @@ describe( 'Reusable blocks', () => {
 		// Convert block to a reusable block.
 		await clickBlockToolbarButton( 'Options' );
-		await clickMenuItem( 'Create pattern' );
+		await clickMenuItem( 'Create pattern/reusable block' );
 		// Set title.
 		const nameInput = await page.waitForSelector(
@@ -205,14 +203,12 @@ describe( 'Reusable blocks', () => {
 		);
 		await nameInput.click();
 		await page.keyboard.type( 'Multi-selection reusable block' );
-		const syncToggle = await page.waitForSelector( syncToggleSelector );
-		syncToggle.click();
 		await page.waitForSelector( syncToggleSelectorChecked );
 		await page.keyboard.press( 'Enter' );
 		// Wait for creation to finish.
 		await page.waitForXPath(
-			'//*[contains(@class, "components-snackbar")]/*[text()="Synced Pattern created."]'
+			'//*[contains(@class, "components-snackbar")]/*[contains(text(),"Pattern created:")]'
 		);
 		await clearAllBlocks();
@@ -221,7 +217,7 @@ describe( 'Reusable blocks', () => {
 		await insertReusableBlock( 'Multi-selection reusable block' );
 		// Convert block to a regular block.
-		await clickBlockToolbarButton( 'Convert to regular blocks' );
+		await clickBlockToolbarButton( 'Detach patterns' );
 		// Check that we have two paragraph blocks on the page.
 		expect( await getEditedPostContent() ).toMatchSnapshot();
@@ -352,8 +348,8 @@ describe( 'Reusable blocks', () => {
 		expect( reusableBlockWithParagraph ).toBeTruthy();
 		// Convert back to regular blocks.
-		await clickBlockToolbarButton( 'Select Pattern' );
-		await clickBlockToolbarButton( 'Convert to regular block' );
+		await clickBlockToolbarButton( 'Select Edited block' );
+		await clickBlockToolbarButton( 'Detach pattern' );
 		await page.waitForXPath( selector, {
 			hidden: true,
 		} );
@@ -383,14 +379,12 @@ describe( 'Reusable blocks', () => {
 		// Convert to reusable.
 		await clickBlockToolbarButton( 'Options' );
-		await clickMenuItem( 'Create pattern' );
+		await clickMenuItem( 'Create pattern/reusable block' );
 		const nameInput = await page.waitForSelector(
 			reusableBlockNameInputSelector
 		);
 		await nameInput.click();
 		await page.keyboard.type( 'Block with styles' );
-		const syncToggle = await page.waitForSelector( syncToggleSelector );
-		syncToggle.click();
 		await page.waitForSelector( syncToggleSelectorChecked );
 		await page.keyboard.press( 'Enter' );
 		const reusableBlock = await canvas().waitForSelector(