Testing: Reimplement Ctrl+A as emulated in pressKeyWithModifier

packages/e2e-test-utils/README.md

@@ -377,14 +377,6 @@ _Parameters_
 
 -   _searchTerm_ `string`: The text to search the inserter for.
 
-<a name="selectAllBlocks" href="#selectAllBlocks">#</a> **selectAllBlocks**
-
-Selects all blocks present in the block editor.
-
-_Returns_
-
--   `Promise`: Promise resolving once active element selected.
-
 <a name="selectBlockByClientId" href="#selectBlockByClientId">#</a> **selectBlockByClientId**
 
 Given the clientId of a block, selects the block on the editor.

packages/e2e-test-utils/src/index.js

@@ -1,4 +1,3 @@
-export { __unstableSelectAll } from './select-all';
 export { activatePlugin } from './activate-plugin';
 export { arePrePublishChecksEnabled } from './are-pre-publish-checks-enabled';
 export { clearLocalStorage } from './clear-local-storage';
@@ -38,7 +37,6 @@ export { publishPost } from './publish-post';
 export { publishPostWithPrePublishChecksDisabled } from './publish-post-with-pre-publish-checks-disabled';
 export { saveDraft } from './save-draft';
 export { searchForBlock } from './search-for-block';
-export { selectAllBlocks } from './select-all-blocks';
 export { selectBlockByClientId } from './select-block-by-client-id';
 export { setBrowserViewport } from './set-browser-viewport';
 export { setPostContent } from './set-post-content';

packages/e2e-test-utils/src/login-user.js

@@ -4,7 +4,7 @@
 import { WP_USERNAME, WP_PASSWORD } from './shared/config';
 import { createURL } from './create-url';
 import { isCurrentURL } from './is-current-url';
-import { __unstableSelectAll } from './select-all';
+import { pressKeyWithModifier } from './press-key-with-modifier';
 
 /**
  * Performs log in with specified username and password.
@@ -20,10 +20,10 @@ export async function loginUser( username = WP_USERNAME, password = WP_PASSWORD
 	}
 
 	await page.focus( '#user_login' );
-	await __unstableSelectAll();
+	await pressKeyWithModifier( 'primary', 'a' );
 	await page.type( '#user_login', username );
 	await page.focus( '#user_pass' );
-	await __unstableSelectAll();
+	await pressKeyWithModifier( 'primary', 'a' );
 	await page.type( '#user_pass', password );
 
 	await Promise.all( [ page.waitForNavigation(), page.click( '#wp-submit' ) ] );

packages/e2e-test-utils/src/press-key-with-modifier.js

@@ -8,6 +8,78 @@ import { capitalize } from 'lodash';
  */
 import { modifiers, SHIFT, ALT, CTRL } from '@wordpress/keycodes';
 
+/**
+ * Emulates a Ctrl+A SelectAll key combination by dispatching custom keyboard
+ * events and using the results of those events to determine whether to call
+ * `document.execCommand( 'selectall' );`. This is necessary because Puppeteer
+ * does not emulate Ctrl+A SelectAll in macOS. Events are dispatched to ensure
+ * that any `Event#preventDefault` which would have normally occurred in the
+ * application as a result of Ctrl+A is respected.
+ *
+ * @link https://github.com/GoogleChrome/puppeteer/issues/1313
+ * @link https://w3c.github.io/uievents/tools/key-event-viewer.html
+ *
+ * @return {Promise} Promise resolving once the SelectAll emulation completes.
+ */
+async function emulateSelectAll() {
+	await page.evaluate( () => {
+		const isMac = /Mac|iPod|iPhone|iPad/.test( window.navigator.platform );
+
+		document.activeElement.dispatchEvent(
+			new KeyboardEvent( 'keydown', {
+				bubbles: true,
+				cancelable: true,
+				key: isMac ? 'Meta' : 'Control',
+				code: isMac ? 'MetaLeft' : 'ControlLeft',
+				location: window.KeyboardEvent.DOM_KEY_LOCATION_LEFT,
+				getModifierState: ( keyArg ) => keyArg === ( isMac ? 'Meta' : 'Control' ),
+				ctrlKey: ! isMac,
+				metaKey: isMac,
+				charCode: 0,
+				keyCode: isMac ? 93 : 17,
+				which: isMac ? 93 : 17,
+			} )
+		);
+
+		const preventableEvent = new KeyboardEvent( 'keydown', {
+			bubbles: true,
+			cancelable: true,
+			key: 'a',
+			code: 'KeyA',
+			location: window.KeyboardEvent.DOM_KEY_LOCATION_STANDARD,
+			getModifierState: ( keyArg ) => keyArg === ( isMac ? 'Meta' : 'Control' ),
+			ctrlKey: ! isMac,
+			metaKey: isMac,
+			charCode: 0,
+			keyCode: 65,
+			which: 65,
+		} );
+
+		const wasPrevented = (
+			! document.activeElement.dispatchEvent( preventableEvent ) ||
+			preventableEvent.defaultPrevented
+		);
+
+		if ( ! wasPrevented ) {
+			document.execCommand( 'selectall', false, null );
+		}
+
+		document.activeElement.dispatchEvent(
+			new KeyboardEvent( 'keyup', {
+				bubbles: true,
+				cancelable: true,
+				key: isMac ? 'Meta' : 'Control',
+				code: isMac ? 'MetaLeft' : 'ControlLeft',
+				location: window.KeyboardEvent.DOM_KEY_LOCATION_LEFT,
+				getModifierState: () => false,
+				charCode: 0,
+				keyCode: isMac ? 93 : 17,
+				which: isMac ? 93 : 17,
+			} ),
+		);
+	} );
+}
+
 /**
  * Performs a key press with modifier (Shift, Control, Meta, Alt), where each modifier
  * is normalized to platform-specific modifier.
@@ -16,6 +88,10 @@ import { modifiers, SHIFT, ALT, CTRL } from '@wordpress/keycodes';
  * @param {string} key Key to press while modifier held.
  */
 export async function pressKeyWithModifier( modifier, key ) {
+	if ( modifier.toLowerCase() === 'primary' && key.toLowerCase() === 'a' ) {
+		return await emulateSelectAll();
+	}
+
 	const isAppleOS = () => process.platform === 'darwin';
 	const overWrittenModifiers = {
 		...modifiers,

packages/e2e-tests/specs/block-hierarchy-navigation.test.js

@@ -7,7 +7,6 @@ import {
 	getEditedPostContent,
 	pressKeyTimes,
 	pressKeyWithModifier,
-	__unstableSelectAll,
 } from '@wordpress/e2e-test-utils';
 
 async function openBlockNavigator() {
@@ -100,7 +99,7 @@ describe( 'Navigating the block hierarchy', () => {
 		await page.keyboard.press( 'Space' );
 
 		// Replace its content.
-		await __unstableSelectAll();
+		await pressKeyWithModifier( 'primary', 'a' );
 		await page.keyboard.type( 'and I say hello' );
 
 		expect( await getEditedPostContent() ).toMatchSnapshot();

packages/e2e-tests/specs/multi-block-selection.test.js

@@ -8,8 +8,6 @@ import {
 	pressKeyWithModifier,
 	pressKeyTimes,
 	getEditedPostContent,
-	selectAllBlocks,
-	__unstableSelectAll,
 } from '@wordpress/e2e-test-utils';
 
 describe( 'Multi-block selection', () => {
@@ -76,11 +74,7 @@ describe( 'Multi-block selection', () => {
 
 		// Select all via double shortcut.
 		await page.click( firstBlockSelector );
-		// NOTE: `__unstableSelectAll` is used for cross-platform compatibility
-		// alternative to Cmd+A. The second issuance of the key combination is
-		// handled internerally by the block editor's KeyboardShortcuts utility
-		// and is not subject to the same buggy emulation.
-		await __unstableSelectAll();
+		await pressKeyWithModifier( 'primary', 'a' );
 		await pressKeyWithModifier( 'primary', 'a' );
 		await expectMultiSelected( blocks, true );
 	} );
@@ -132,7 +126,10 @@ describe( 'Multi-block selection', () => {
 		await page.keyboard.type( 'Second Paragraph' );
 		await insertBlock( 'Paragraph' );
 		await page.keyboard.type( 'Third Paragraph' );
-		await selectAllBlocks();
+
+		// Multiselect via keyboard.
+		await pressKeyWithModifier( 'primary', 'a' );
+		await pressKeyWithModifier( 'primary', 'a' );
 
 		// TODO: It would be great to do this test by spying on `wp.a11y.speak`,
 		// but it's very difficult to do that because `wp.a11y` has

packages/e2e-tests/specs/reusable-blocks.test.js

@@ -5,9 +5,9 @@ import {
 	insertBlock,
 	createNewPost,
 	clickBlockToolbarButton,
+	pressKeyWithModifier,
 	searchForBlock,
 	getEditedPostContent,
-	selectAllBlocks,
 } from '@wordpress/e2e-test-utils';
 
 function waitForAndAcceptDialog() {
@@ -210,7 +210,8 @@ describe( 'Reusable Blocks', () => {
 		await page.keyboard.type( 'Second paragraph' );
 
 		// Select all the blocks
-		await selectAllBlocks();
+		await pressKeyWithModifier( 'primary', 'a' );
+		await pressKeyWithModifier( 'primary', 'a' );
 
 		// Convert block to a reusable block
 		await page.waitForSelector( 'button[aria-label="More options"]' );

packages/e2e-tests/specs/rich-text.test.js

@@ -7,7 +7,6 @@ import {
 	insertBlock,
 	clickBlockAppender,
 	pressKeyWithModifier,
-	__unstableSelectAll,
 } from '@wordpress/e2e-test-utils';
 
 describe( 'RichText', () => {
@@ -31,7 +30,7 @@ describe( 'RichText', () => {
 	it( 'should apply formatting with access shortcut', async () => {
 		await clickBlockAppender();
 		await page.keyboard.type( 'test' );
-		await __unstableSelectAll();
+		await pressKeyWithModifier( 'primary', 'a' );
 		await pressKeyWithModifier( 'access', 'd' );
 
 		expect( await getEditedPostContent() ).toMatchSnapshot();
@@ -40,7 +39,7 @@ describe( 'RichText', () => {
 	it( 'should apply formatting with primary shortcut', async () => {
 		await clickBlockAppender();
 		await page.keyboard.type( 'test' );
-		await __unstableSelectAll();
+		await pressKeyWithModifier( 'primary', 'a' );
 		await pressKeyWithModifier( 'primary', 'b' );
 
 		expect( await getEditedPostContent() ).toMatchSnapshot();