From 530095d0b0f160b633497d18714b511140af430d Mon Sep 17 00:00:00 2001 From: Ella Date: Thu, 10 Aug 2023 11:12:16 +0300 Subject: [PATCH] Writing flow: add multi select e2e for firefox and webkit --- .../src/page-utils/press-keys.ts | 33 +++++++-------- .../various/multi-block-selection.spec.js | 42 +++++++++++++++---- 2 files changed, 51 insertions(+), 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 index 9929ebf19d01a1..ddf353a4678587 100644 --- 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 index 60f4797836c208..87dd850ead4318 100644 --- 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, } ) => {