Skip to content

Commit

Permalink
Testing: Reimplement Ctrl+A as emulated in pressKeyWithModifier
Browse files Browse the repository at this point in the history
  • Loading branch information
aduth committed Mar 28, 2019
1 parent 81d58d2 commit 8857e40
Show file tree
Hide file tree
Showing 10 changed files with 90 additions and 62 deletions.
8 changes: 0 additions & 8 deletions packages/e2e-test-utils/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down
2 changes: 0 additions & 2 deletions packages/e2e-test-utils/src/index.js
Original file line number Diff line number Diff line change
@@ -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';
Expand Down Expand Up @@ -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';
Expand Down
6 changes: 3 additions & 3 deletions packages/e2e-test-utils/src/login-user.js
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand All @@ -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' ) ] );
Expand Down
76 changes: 76 additions & 0 deletions packages/e2e-test-utils/src/press-key-with-modifier.js
Original file line number Diff line number Diff line change
Expand Up @@ -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( () => {
document.body.dispatchEvent(
new KeyboardEvent( 'keydown', {
key: 'Control',
code: 'ControlLeft',
location: window.KeyboardEvent.DOM_KEY_LOCATION_LEFT,
getModifierState: ( keyArg ) => keyArg === 'Control',
ctrl: true,
charCode: 0,
keyCode: 17,
which: 17,
} )
);

document.body.dispatchEvent(
new KeyboardEvent( 'keydown', {
key: 'a',
code: 'KeyA',
location: window.KeyboardEvent.DOM_KEY_LOCATION_STANDARD,
getModifierState: ( keyArg ) => keyArg === 'Control',
ctrl: true,
charCode: 0,
keyCode: 65,
which: 65,
} )
);

const wasPrevented = ! document.body.dispatchEvent(
new KeyboardEvent( 'keyup', {
key: 'a',
code: 'KeyA',
location: window.KeyboardEvent.DOM_KEY_LOCATION_STANDARD,
getModifierState: ( keyArg ) => keyArg === 'Control',
ctrl: true,
charCode: 0,
keyCode: 65,
which: 65,
} )
);

if ( ! wasPrevented ) {
document.execCommand( 'selectall', false, null );
}

document.body.dispatchEvent(
new KeyboardEvent( 'keyup', {
key: 'Control',
code: 'ControlLeft',
location: window.KeyboardEvent.DOM_KEY_LOCATION_LEFT,
getModifierState: () => false,
charCode: 0,
keyCode: 17,
which: 17,
} ),
);
} );
}

/**
* Performs a key press with modifier (Shift, Control, Meta, Alt), where each modifier
* is normalized to platform-specific modifier.
Expand All @@ -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,
Expand Down
19 changes: 0 additions & 19 deletions packages/e2e-test-utils/src/select-all-blocks.js

This file was deleted.

15 changes: 0 additions & 15 deletions packages/e2e-test-utils/src/select-all.js

This file was deleted.

3 changes: 1 addition & 2 deletions packages/e2e-tests/specs/block-hierarchy-navigation.test.js
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,6 @@ import {
getEditedPostContent,
pressKeyTimes,
pressKeyWithModifier,
__unstableSelectAll,
} from '@wordpress/e2e-test-utils';

async function openBlockNavigator() {
Expand Down Expand Up @@ -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();
Expand Down
13 changes: 5 additions & 8 deletions packages/e2e-tests/specs/multi-block-selection.test.js
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,6 @@ import {
pressKeyWithModifier,
pressKeyTimes,
getEditedPostContent,
selectAllBlocks,
__unstableSelectAll,
} from '@wordpress/e2e-test-utils';

describe( 'Multi-block selection', () => {
Expand Down Expand Up @@ -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 );
} );
Expand Down Expand Up @@ -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
Expand Down
5 changes: 3 additions & 2 deletions packages/e2e-tests/specs/reusable-blocks.test.js
Original file line number Diff line number Diff line change
Expand Up @@ -5,9 +5,9 @@ import {
insertBlock,
createNewPost,
clickBlockToolbarButton,
pressKeyWithModifier,
searchForBlock,
getEditedPostContent,
selectAllBlocks,
} from '@wordpress/e2e-test-utils';

function waitForAndAcceptDialog() {
Expand Down Expand Up @@ -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"]' );
Expand Down
5 changes: 2 additions & 3 deletions packages/e2e-tests/specs/rich-text.test.js
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,6 @@ import {
insertBlock,
clickBlockAppender,
pressKeyWithModifier,
__unstableSelectAll,
} from '@wordpress/e2e-test-utils';

describe( 'RichText', () => {
Expand All @@ -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();
Expand All @@ -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();
Expand Down

0 comments on commit 8857e40

Please sign in to comment.