Writing flow: add multi select e2e for firefox and webkit

WordPress · Aug 10, 2023 · 530095d · 530095d
1 parent 908bc4a
commit 530095d
Show file tree

Hide file tree

Showing 2 changed files with 51 additions and 24 deletions.
diff --git a/packages/e2e-test-utils-playwright/src/page-utils/press-keys.ts b/packages/e2e-test-utils-playwright/src/page-utils/press-keys.ts
@@ -52,17 +52,22 @@ async function emulateClipboard( page: Page, type: 'copy' | 'cut' | 'paste' ) {
 			const canvasDoc =
 				// @ts-ignore
 				document.activeElement?.contentDocument ?? document;
-			const clipboardDataTransfer = new DataTransfer();
+			const event = new ClipboardEvent( _type, {
+				bubbles: true,
+				cancelable: true,
+				clipboardData: new DataTransfer(),
+			} );
+
+			if ( ! event.clipboardData ) {
+				throw new Error( 'ClipboardEvent.clipboardData is null' );
+			}
 
 			if ( _type === 'paste' ) {
-				clipboardDataTransfer.setData(
+				event.clipboardData.setData(
 					'text/plain',
 					_clipboardData.plainText
 				);
-				clipboardDataTransfer.setData(
-					'text/html',
-					_clipboardData.html
-				);
+				event.clipboardData.setData( 'text/html', _clipboardData.html );
 			} else {
 				const selection = canvasDoc.defaultView.getSelection()!;
 				const plainText = selection.toString();
@@ -78,21 +83,15 @@ async function emulateClipboard( page: Page, type: 'copy' | 'cut' | 'paste' ) {
 						)
 						.join( '' );
 				}
-				clipboardDataTransfer.setData( 'text/plain', plainText );
-				clipboardDataTransfer.setData( 'text/html', html );
+				event.clipboardData.setData( 'text/plain', plainText );
+				event.clipboardData.setData( 'text/html', html );
 			}
 
-			canvasDoc.activeElement?.dispatchEvent(
-				new ClipboardEvent( _type, {
-					bubbles: true,
-					cancelable: true,
-					clipboardData: clipboardDataTransfer,
-				} )
-			);
+			canvasDoc.activeElement.dispatchEvent( event );
 
 			return {
-				plainText: clipboardDataTransfer.getData( 'text/plain' ),
-				html: clipboardDataTransfer.getData( 'text/html' ),
+				plainText: event.clipboardData.getData( 'text/plain' ),
+				html: event.clipboardData.getData( 'text/html' ),
 			};
 		},
 		[ type, clipboardDataHolder ] as const

diff --git a/test/e2e/specs/editor/various/multi-block-selection.spec.js b/test/e2e/specs/editor/various/multi-block-selection.spec.js
@@ -10,7 +10,7 @@ const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );
  * Some tests in this file use the character `|` to represent the caret's position
  * in a more readable format.
  */
-test.describe( 'Multi-block selection', () => {
+test.describe( 'Multi-block selection (@firefox, @webkit)', () => {
 	test.use( {
 		multiBlockSelectionUtils: async ( { page, editor }, use ) => {
 			await use( new MultiBlockSelectionUtils( { page, editor } ) );
@@ -48,7 +48,7 @@ test.describe( 'Multi-block selection', () => {
 	} );
 
 	// See #14448: an incorrect buffer may trigger multi-selection too soon.
-	test( 'should only trigger multi-selection when at the end', async ( {
+	test( 'should only trigger multi-selection when at the end (-webkit)', async ( {
 		page,
 		editor,
 		pageUtils,
@@ -294,7 +294,7 @@ test.describe( 'Multi-block selection', () => {
 	} );
 
 	// @see https://github.com/WordPress/gutenberg/issues/34118
-	test( 'should properly select a single block even if `shift` was held for the selection', async ( {
+	test( 'should properly select a single block even if `shift` was held for the selection (-firefox)', async ( {
 		page,
 		editor,
 		pageUtils,
@@ -340,7 +340,7 @@ test.describe( 'Multi-block selection', () => {
 		] );
 	} );
 
-	test( 'should properly select multiple blocks if selected nested blocks belong to different parent', async ( {
+	test( 'should properly select multiple blocks if selected nested blocks belong to different parent (-webkit)', async ( {
 		editor,
 		multiBlockSelectionUtils,
 	} ) => {
@@ -374,7 +374,7 @@ test.describe( 'Multi-block selection', () => {
 			.toEqual( [ 1, 4 ] );
 	} );
 
-	test( 'should properly select part of nested rich text block while holding shift', async ( {
+	test( 'should properly select part of nested rich text block while holding shift (-firefox)', async ( {
 		page,
 		editor,
 	} ) => {
@@ -1079,7 +1079,7 @@ test.describe( 'Multi-block selection', () => {
 		] );
 	} );
 
-	test( 'should write over selection', async ( {
+	test( 'should write over selection (-firefox)', async ( {
 		page,
 		editor,
 		pageUtils,
@@ -1104,6 +1104,34 @@ test.describe( 'Multi-block selection', () => {
 		] );
 	} );
 
+	test( 'should write over selection (-chromium, -webkit, @firefox)', async ( {
+		page,
+		editor,
+		pageUtils,
+	} ) => {
+		await editor.canvas
+			.getByRole( 'button', { name: 'Add default block' } )
+			.click();
+		await page.keyboard.type( '1[' );
+		await page.keyboard.press( 'Enter' );
+		await page.keyboard.type( ']2' );
+		await page.keyboard.press( 'ArrowLeft' );
+		// Select everything between [].
+		await pageUtils.pressKeys( 'Shift+ArrowLeft', { times: 3 } );
+
+		// Ensure selection is in the correct place.
+		await page.keyboard.type( '|' );
+		// For some reason, this works completely fine when testing manually in
+		// Firefox, but with Playwright it only merges the blocks but doesn't
+		// insert the character.
+		await expect.poll( editor.getBlocks ).toMatchObject( [
+			{
+				name: 'core/paragraph',
+				attributes: { content: '12' },
+			},
+		] );
+	} );
+
 	test( 'should handle Enter across blocks', async ( {
 		page,
 		editor,
@@ -1179,7 +1207,7 @@ test.describe( 'Multi-block selection', () => {
 		] );
 	} );
 
-	test( 'should partially select with shift + click (@webkit)', async ( {
+	test( 'should partially select with shift + click', async ( {
 		page,
 		editor,
 	} ) => {