Add e2e test

packages/block-editor/src/components/block-switcher/index.js

@@ -89,22 +89,26 @@ export const BlockSwitcherDropdownMenu = ( { clientIds, blocks } ) => {
 	const isReusable = blocks.length === 1 && isReusableBlock( blocks[ 0 ] );
 	const isTemplate = blocks.length === 1 && isTemplatePart( blocks[ 0 ] );
 
+	function selectForMultipleBlocks( insertedBlocks ) {
+		if ( insertedBlocks.length > 1 ) {
+			multiSelect(
+				insertedBlocks[ 0 ].clientId,
+				insertedBlocks[ insertedBlocks.length - 1 ].clientId
+			);
+		}
+	}
+
 	// Simple block tranformation based on the `Block Transforms` API.
 	function onBlockTransform( name ) {
 		const newBlocks = switchToBlockType( blocks, name );
 		replaceBlocks( clientIds, newBlocks );
-		multiSelect(
-			newBlocks[ 0 ].clientId,
-			newBlocks[ newBlocks.length - 1 ].clientId
-		);
+		selectForMultipleBlocks( newBlocks );
 	}
+
 	// Pattern transformation through the `Patterns` API.
 	function onPatternTransform( transformedBlocks ) {
 		replaceBlocks( clientIds, transformedBlocks );
-		multiSelect(
-			transformedBlocks[ 0 ].clientId,
-			transformedBlocks[ transformedBlocks.length - 1 ].clientId
-		);
+		selectForMultipleBlocks( transformedBlocks );
 	}
 
 	/**

packages/e2e-test-utils-playwright/src/editor/transform-block-to.ts

@@ -7,26 +7,38 @@ import type { Editor } from './index';
  * Clicks the default block appender.
  *
  * @param {Editor} this
- * @param {string} name Block name.
+ * @param {string} name Block name or title.
  */
 export async function transformBlockTo( this: Editor, name: string ) {
+	await this.showBlockToolbar();
+
+	if ( name.includes( '/' ) ) {
+		name = await this.page.evaluate( () => {
+			// @ts-ignore (Reason: wp isn't typed).
+			return window.wp.blocks.getBlockType( name ).title;
+		} );
+	}
+
+	const switcherToggle = await this.page.waitForSelector(
+		'.block-editor-block-switcher__toggle'
+	);
+	await switcherToggle.evaluate( ( element ) => element.scrollIntoView() );
+	await this.page.waitForSelector( '.block-editor-block-switcher__toggle' );
+	await switcherToggle.click();
+	await this.page.waitForSelector(
+		'.block-editor-block-switcher__container'
+	);
+
+	// Find the block button option within the switcher popover.
+	const xpath = `//*[contains(@class, "block-editor-block-switcher__popover")]//button[.='${ name }']`;
+	const insertButton = await this.page.waitForSelector( xpath );
+	// Clicks may fail if the button is out of view. Assure it is before click.
+	await insertButton.evaluate( ( element ) => element.scrollIntoView() );
+	await insertButton.click();
+
 	await this.page.evaluate(
-		( [ blockName ] ) => {
-			// @ts-ignore (Reason: wp isn't typed)
-			const clientIds = window.wp.data
-				.select( 'core/block-editor' )
-				.getSelectedBlockClientIds();
-			// @ts-ignore (Reason: wp isn't typed)
-			const blocks = window.wp.data
-				.select( 'core/block-editor' )
-				.getBlocksByClientId( clientIds );
-			// @ts-ignore (Reason: wp isn't typed)
-			window.wp.data.dispatch( 'core/block-editor' ).replaceBlocks(
-				clientIds,
-				// @ts-ignore (Reason: wp isn't typed)
-				window.wp.blocks.switchToBlockType( blocks, blockName )
-			);
-		},
-		[ name ]
+		() =>
+			// @ts-ignore (Reason: window global).
+			new Promise( requestIdleCallback )
 	);
 }

test/e2e/specs/editor/blocks/__snapshots__/List-selects-all-transformed-output-1-chromium.txt

@@ -0,0 +1,9 @@
+<!-- wp:list -->
+<ul><!-- wp:list-item -->
+<li>1</li>
+<!-- /wp:list-item -->
+
+<!-- wp:list-item -->
+<li>2</li>
+<!-- /wp:list-item --></ul>
+<!-- /wp:list -->

test/e2e/specs/editor/blocks/__snapshots__/List-selects-all-transformed-output-2-chromium.txt

@@ -0,0 +1,7 @@
+<!-- wp:paragraph -->
+<p>1</p>
+<!-- /wp:paragraph -->
+
+<!-- wp:paragraph -->
+<p>2</p>
+<!-- /wp:paragraph -->

test/e2e/specs/editor/blocks/__snapshots__/List-selects-all-transformed-output-3-chromium.txt

@@ -0,0 +1,9 @@
+<!-- wp:list -->
+<ul><!-- wp:list-item -->
+<li>1</li>
+<!-- /wp:list-item -->
+
+<!-- wp:list-item -->
+<li>2</li>
+<!-- /wp:list-item --></ul>
+<!-- /wp:list -->

test/e2e/specs/editor/blocks/list.spec.js

@@ -1231,4 +1231,25 @@ test.describe( 'List', () => {
 
 		expect( await editor.getEditedPostContent() ).toMatchSnapshot();
 	} );
+
+	test( 'selects all transformed output', async ( { editor, page } ) => {
+		await page.click( 'role=button[name="Add default block"i]' );
+		await page.keyboard.type( '* 1' );
+		await page.keyboard.press( 'Enter' );
+		await page.keyboard.type( '2' );
+
+		// Select the whole list.
+		await page.keyboard.press( 'ArrowUp' );
+		await page.keyboard.press( 'ArrowUp' );
+
+		expect( await editor.getEditedPostContent() ).toMatchSnapshot();
+
+		await editor.transformBlockTo( 'Paragraph' );
+
+		expect( await editor.getEditedPostContent() ).toMatchSnapshot();
+
+		await editor.transformBlockTo( 'List' );
+
+		expect( await editor.getEditedPostContent() ).toMatchSnapshot();
+	} );
 } );