@wordpress/e2e-tests 7.7.0 → 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/links.test.js

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

@@ -113,7 +113,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 +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(
@@ -221,7 +221,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();
@@ -353,7 +353,7 @@ describe( 'Reusable blocks', () => {
 
 		// Convert back to regular blocks.
 		await clickBlockToolbarButton( 'Select Pattern' );
-		await clickBlockToolbarButton( 'Convert to regular block' );
+		await clickBlockToolbarButton( 'Detach pattern' );
 		await page.waitForXPath( selector, {
 			hidden: true,
 		} );
@@ -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
 		);

package/specs/experiments/blocks/post-comments-form.test.js

@@ -37,7 +37,7 @@ describe( 'Post Comments Form', () => {
 			);
 			await expect( page ).toClick(
 				'.edit-site-sidebar-navigation-item',
-				{ text: /singular/i }
+				{ text: /single entries/i }
 			);
 			await enterEditMode();
 

package/specs/site-editor/settings-sidebar.test.js

@@ -79,7 +79,7 @@ describe( 'Settings sidebar', () => {
 					'Used as a fallback template for all pages when a more specific template is not defined.',
 			} );
 			expect( templateCardAfterNavigation ).toMatchObject( {
-				title: 'Singular',
+				title: 'Single Entries',
 				description:
 					'Displays any single entry, such as a post or a page. This template will serve as a fallback when a more specific template (e.g., Single Post, Page, or Attachment) cannot be found.',
 			} );