Skip to content

Keycodes package modifiers usage and adding missing JSDocs. #11855

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
gziolo merged 13 commits into from
Nov 17, 2018
Merged

Keycodes package modifiers usage and adding missing JSDocs. #11855

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
3ac0e18
Replaced pressWithModifier with rawShortcut.
nicolad Nov 14, 2018
6fd9de2
Merge branch 'master' of github.com:WordPress/gutenberg into code-qua…
nicolad Nov 14, 2018
d194732
Replaced SELECT_WORD_MODIFIER_KEYS, META_KEY and ACCESS_MODIFIER_KEYS…
nicolad Nov 15, 2018
d280c62
Merge branch 'master' of github.com:WordPress/gutenberg into code-qua…
nicolad Nov 15, 2018
d241f52
Replaced key strings with constants.
nicolad Nov 15, 2018
527292d
Replaced rawShortcut usage. TODO: Apply DRY.
nicolad Nov 15, 2018
39cc2ed
Adjusted failing tests and overwritten some modifiers.
nicolad Nov 16, 2018
f1ca029
Merge branch 'master' of github.com:WordPress/gutenberg into code-qua…
nicolad Nov 16, 2018
b39cd29
Removed META_KEY and SELECT_WORD_MODIFIER_KEYS added after syncing wi…
nicolad Nov 16, 2018
9723760
Merge branch 'master' of https://github.com/WordPress/gutenberg into …
nicolad Nov 16, 2018
810c1a5
Merge branch 'master' of https://github.com/WordPress/gutenberg into …
nicolad Nov 16, 2018
6acf004
Make sure that the check for OS is executed in e2e tests
gziolo Nov 17, 2018
bf564d8
Another try to properly call the check for OS in e2e tests
gziolo Nov 17, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions packages/keycodes/src/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,7 @@ const modifiers = {
alt: () => [ ALT ],
ctrlShift: () => [ CTRL, SHIFT ],
shift: () => [ SHIFT ],
shiftAlt: () => [ SHIFT, ALT ],
shiftAlt: ( _isApple ) => _isApple() ? [ 'Shift', 'Alt' ] : [ 'Shift', 'Control' ],
};

/**
Expand All @@ -65,7 +65,7 @@ const modifiers = {
*/
export const rawShortcut = mapValues( modifiers, ( modifier ) => {
return ( character, _isApple = isAppleOS ) => {
return [ ...modifier( _isApple ), character.toLowerCase() ].join( '+' );
return [ ...modifier( _isApple ), character.toLowerCase() ].filter( ( key ) => key !== '' ).join( '+' );
Copy link
Member

@gziolo gziolo Nov 15, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What was the reason that filtering is introduced?

Copy link
Member Author

@nicolad nicolad Nov 15, 2018 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is because when we are passing second argument to pressWithModifier there is no need to pass it to rawShortcut also, because key is used only in here await page.keyboard.press( key )

Copy link
Contributor

@talldan talldan Nov 15, 2018 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think it might be tidier to export the modifiers const from keycodes, and write a function that maps the keys exactly as they're needed within the e2e/utils (instead of using rawShortcut in tests).

That would also allow the possibility of adding extra combinations to the list of modifiers that are only used in tests (e.g. the shift+control word selection modifiers) and the production implementation wouldn't need to be touched.

Copy link
Member Author

@nicolad nicolad Nov 16, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Agree, have adjusted this, also had swapped ctrl, because in tests it was used as Control. Also shiftAlt is overwritten in pressWithModifier to align with tests prior usage.

For some reasons Travis has cached META_KEY and SELECT_WORD_MODIFIER_KEYS, which is causing tests to fail, is there a way to clean cache in Travis ?

};
} );

Expand Down
11 changes: 5 additions & 6 deletions test/e2e/specs/a11y.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@
* Internal dependencies
*/
import {
ACCESS_MODIFIER_KEYS,
newPost,
pressWithModifier,
} from '../support/utils';
Expand All @@ -19,7 +18,7 @@ describe( 'a11y', () => {
} );

it( 'tabs header bar', async () => {
await pressWithModifier( 'Control', '~' );
await pressWithModifier( 'primary', '~' );

await page.keyboard.press( 'Tab' );

Expand All @@ -32,7 +31,7 @@ describe( 'a11y', () => {

it( 'constrains focus to a modal when tabbing', async () => {
// Open keyboard help modal.
await pressWithModifier( ACCESS_MODIFIER_KEYS, 'h' );
await pressWithModifier( 'access', 'h' );

// The close button should not be focused by default; this is a strange UX
// experience.
Expand All @@ -46,7 +45,7 @@ describe( 'a11y', () => {
} );

it( 'returns focus to the first tabbable in a modal after blurring a tabbable', async () => {
await pressWithModifier( ACCESS_MODIFIER_KEYS, 'h' );
await pressWithModifier( 'access', 'h' );

// Click to move focus to an element after the last tabbable within the
// modal.
Expand All @@ -58,13 +57,13 @@ describe( 'a11y', () => {
} );

it( 'returns focus to the last tabbable in a modal after blurring a tabbable and tabbing in reverse direction', async () => {
await pressWithModifier( ACCESS_MODIFIER_KEYS, 'h' );
await pressWithModifier( 'access', 'h' );

// Click to move focus to an element before the first tabbable within
// the modal.
await page.click( '.components-modal__header-heading' );

await pressWithModifier( 'Shift', 'Tab' );
await pressWithModifier( 'shift', 'Tab' );

expect( await isCloseButtonFocused() ).toBe( true );
} );
Expand Down
5 changes: 2 additions & 3 deletions test/e2e/specs/block-deletion.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,6 @@ import {
getEditedPostContent,
newPost,
pressWithModifier,
ACCESS_MODIFIER_KEYS,
} from '../support/utils';

const addThreeParagraphsToNewPost = async () => {
Expand Down Expand Up @@ -50,7 +49,7 @@ describe( 'block deletion -', () => {
it( 'results in two remaining blocks and positions the caret at the end of the second block', async () => {
// Type some text to assert that the shortcut also deletes block content.
await page.keyboard.type( 'this is block 2' );
await pressWithModifier( ACCESS_MODIFIER_KEYS, 'z' );
await pressWithModifier( 'access', 'z' );
expect( await getEditedPostContent() ).toMatchSnapshot();

// Type additional text and assert that caret position is correct by comparing to snapshot.
Expand Down Expand Up @@ -98,7 +97,7 @@ describe( 'block deletion -', () => {
await page.keyboard.press( 'Enter' );

// Press the up arrow once to select the third and fourth blocks.
await pressWithModifier( 'Shift', 'ArrowUp' );
await pressWithModifier( 'shift', 'ArrowUp' );

// Now that the block wrapper is selected, press backspace to delete it.
await page.keyboard.press( 'Backspace' );
Expand Down
14 changes: 6 additions & 8 deletions test/e2e/specs/block-hierarchy-navigation.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,6 @@
* Internal dependencies
*/
import {
ACCESS_MODIFIER_KEYS,
META_KEY,
newPost,
insertBlock,
getEditedPostContent,
Expand All @@ -12,7 +10,7 @@ import {
} from '../support/utils';

async function openBlockNavigator() {
return pressWithModifier( ACCESS_MODIFIER_KEYS, 'o' );
return pressWithModifier( 'access', 'o' );
}

describe( 'Navigating the block hierarchy', () => {
Expand Down Expand Up @@ -63,10 +61,10 @@ describe( 'Navigating the block hierarchy', () => {
await page.keyboard.press( 'Enter' );

// Move focus to the sidebar area.
await pressWithModifier( 'Control', '`' );
await pressWithModifier( 'Control', '`' );
await pressWithModifier( 'Control', '`' );
await pressWithModifier( 'Control', '`' );
await pressWithModifier( 'primary', '`' );
await pressWithModifier( 'primary', '`' );
await pressWithModifier( 'primary', '`' );
await pressWithModifier( 'primary', '`' );
await pressTimes( 'Tab', 4 );

// Tweak the columns count by increasing it by one.
Expand Down Expand Up @@ -99,7 +97,7 @@ describe( 'Navigating the block hierarchy', () => {
await page.keyboard.press( 'Space' );

// Replace its content.
await pressWithModifier( META_KEY, 'A' );
await pressWithModifier( 'primary', 'A' );
await page.keyboard.type( 'and I say hello' );

expect( await getEditedPostContent() ).toMatchSnapshot();
Expand Down
3 changes: 1 addition & 2 deletions test/e2e/specs/block-icons.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@
* Internal dependencies
*/
import {
ACCESS_MODIFIER_KEYS,
pressWithModifier,
newPost,
insertBlock,
Expand Down Expand Up @@ -36,7 +35,7 @@ async function getFirstInserterIcon() {
}

async function selectFirstBlock() {
await pressWithModifier( ACCESS_MODIFIER_KEYS, 'o' );
await pressWithModifier( 'access', 'o' );
const navButtons = await page.$$( '.editor-block-navigation__item-button' );
await navButtons[ 0 ].click();
}
Expand Down
2 changes: 1 addition & 1 deletion test/e2e/specs/blocks/list.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -80,7 +80,7 @@ describe( 'List', () => {
it( 'can be created by converting a paragraph with line breaks', async () => {
await clickBlockAppender();
await page.keyboard.type( 'one' );
await pressWithModifier( 'Shift', 'Enter' );
await pressWithModifier( 'shift', 'Enter' );
await page.keyboard.type( 'two' );
await convertBlock( 'List' );

Expand Down
19 changes: 9 additions & 10 deletions test/e2e/specs/change-detection.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,6 @@ import {
pressWithModifier,
ensureSidebarOpened,
publishPost,
META_KEY,
} from '../support/utils';

describe( 'Change detection', () => {
Expand Down Expand Up @@ -69,7 +68,7 @@ describe( 'Change detection', () => {
await interceptSave();

// Keyboard shortcut Ctrl+S save.
await pressWithModifier( META_KEY, 'S' );
await pressWithModifier( 'primary', 'S' );

expect( hadInterceptedSave ).toBe( false );
} );
Expand Down Expand Up @@ -164,7 +163,7 @@ describe( 'Change detection', () => {
page.waitForSelector( '.editor-post-saved-state.is-saved' ),

// Keyboard shortcut Ctrl+S save.
pressWithModifier( META_KEY, 'S' ),
pressWithModifier( 'primary', 'S' ),
] );

await assertIsDirty( false );
Expand All @@ -178,13 +177,13 @@ describe( 'Change detection', () => {
page.waitForSelector( '.editor-post-saved-state.is-saved' ),

// Keyboard shortcut Ctrl+S save.
pressWithModifier( META_KEY, 'S' ),
pressWithModifier( 'primary', 'S' ),
] );

await interceptSave();

// Keyboard shortcut Ctrl+S save.
await pressWithModifier( META_KEY, 'S' );
await pressWithModifier( 'primary', 'S' );

expect( hadInterceptedSave ).toBe( false );
} );
Expand All @@ -196,7 +195,7 @@ describe( 'Change detection', () => {

await Promise.all( [
// Keyboard shortcut Ctrl+S save.
pressWithModifier( META_KEY, 'S' ),
pressWithModifier( 'primary', 'S' ),

// Ensure save update fails and presents button.
page.waitForXPath(
Expand All @@ -222,7 +221,7 @@ describe( 'Change detection', () => {
await interceptSave();

// Keyboard shortcut Ctrl+S save.
await pressWithModifier( META_KEY, 'S' );
await pressWithModifier( 'primary', 'S' );

await releaseSaveIntercept();

Expand All @@ -238,7 +237,7 @@ describe( 'Change detection', () => {
await interceptSave();

// Keyboard shortcut Ctrl+S save.
await pressWithModifier( META_KEY, 'S' );
await pressWithModifier( 'primary', 'S' );

await page.type( '.editor-post-title__input', '!' );

Expand All @@ -255,7 +254,7 @@ describe( 'Change detection', () => {
await interceptSave();

// Keyboard shortcut Ctrl+S save.
await pressWithModifier( META_KEY, 'S' );
await pressWithModifier( 'primary', 'S' );

// Dirty post while save is in-flight.
await page.type( '.editor-post-title__input', '!' );
Expand All @@ -277,7 +276,7 @@ describe( 'Change detection', () => {
await interceptSave();

// Keyboard shortcut Ctrl+S save.
await pressWithModifier( META_KEY, 'S' );
await pressWithModifier( 'primary', 'S' );

await clickBlockAppender();

Expand Down
3 changes: 1 addition & 2 deletions test/e2e/specs/deprecated-node-matcher.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,6 @@ import {
newPost,
insertBlock,
getEditedPostContent,
META_KEY,
pressWithModifier,
} from '../support/utils';
import { activatePlugin, deactivatePlugin } from '../support/plugins';
Expand Down Expand Up @@ -38,7 +37,7 @@ describe( 'Deprecated Node Matcher', () => {
await page.keyboard.down( 'Shift' );
await page.keyboard.press( 'ArrowLeft' );
await page.keyboard.up( 'Shift' );
await pressWithModifier( META_KEY, 'b' );
await pressWithModifier( 'primary', 'b' );
expect( await getEditedPostContent() ).toMatchSnapshot();
} );
} );
Loading