@wordpress/e2e-tests 7.6.4 → 7.8.0

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

@@ -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

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

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

@@ -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

@@ -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

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

package/plugins/interactive-blocks.php

@@ -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/container-blocks.test.js

@@ -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/various/block-editor-keyboard-shortcuts.test.js

@@ -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/reusable-blocks.test.js

@@ -197,7 +197,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(
@@ -383,7 +383,7 @@ 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
 		);