Keycodes package modifiers usage and adding missing JSDocs. #11855

nicolad · 2018-11-14T12:59:36Z

Description

Replaced pressWithModifier method from e2e test utils with modifiers from keycodes package.
Added missing JSDocs in test utils files.

How has this been tested?

Testing will be done with TravisCI

Types of changes

Enhancements

Checklist:

My code is tested.
My code follows the WordPress code style.
My code follows the accessibility standards.
My code has proper inline documentation.

…lity/11535-test-utils-jsdocs-and-modifiers-update

… with rawShortcuts.

…lity/11535-test-utils-jsdocs-and-modifiers-update

nicolad

Hi @gziolo, based on this modifierMapping
const SELECT_WORD_MODIFIER_KEYS = process.platform === 'darwin' ? [ 'Shift', 'Alt' ] : [ 'Shift', 'Control' ];
from this file https://github.com/WordPress/gutenberg/blob/master/test/e2e/specs/links.test.js#L18
I have updated this modifier:
https://github.com/WordPress/gutenberg/blob/master/packages/keycodes/src/index.js#L56
This change caused this test to fail:
https://github.com/WordPress/gutenberg/blob/master/packages/edit-post/src/components/keyboard-shortcut-help-modal/test/index.js
What's your thought on this, should I updated the test or should I change back keycodes package ?

gziolo · 2018-11-15T12:52:25Z

I think @talldan have the most experience with Keyboard shortcuts modal so I would defer it to him.

I see also a lot of failing e2e tests because of:

Unknown key: "Ctrl"

In general, I like the direction where this PR is heading. It would be awesome if we could land those changes as it will allow us to reuse existing utilities rather than duplicate them for all tests.

packages/keycodes/src/index.js

gziolo · 2018-11-15T12:57:21Z

packages/keycodes/src/index.js

 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( '+' );


What was the reason that filtering is introduced?

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 )

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.

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 ?

talldan

Hey @vadimnicolai - thanks for the changes!

I've added a couple of comments for things that I think need to be addressed.

packages/keycodes/src/index.js

talldan · 2018-11-15T13:38:46Z

packages/keycodes/src/index.js

 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( '+' );


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.

gziolo · 2018-11-16T10:47:12Z

I will try to clear caches on Travis and restart build.

gziolo

This is looking very good, it still needs some adjustments.

There are some issues to resolve:

[0] [0] /home/travis/build/WordPress/gutenberg/test/e2e/specs/links.test.js
[0] [0] 391:28 error 'META_KEY' is not defined no-undef
[0] [0] 461:28 error 'SELECT_WORD_MODIFIER_KEYS' is not defined no-undef
[0] [0]
[0] [0] /home/travis/build/WordPress/gutenberg/test/e2e/specs/undo.test.js
[0] [0] 25:28 error 'META_KEY' is not defined no-undef
[0] [0] 34:28 error 'META_KEY' is not defined no-undef
[0] [0] 39:28 error 'META_KEY' is not defined no-undef
[0] [0]
[0] [0] ✖ 8 problems (5 errors, 3 warnings)

There are still references to the removed constants:

ReferenceError: META_KEY is not defined
  389 | 
  390 | 		// Press Cmd+K to insert a link
> 391 | 		await pressWithModifier( META_KEY, 'K' );
      | 		                         ^
  392 | 
  393 | 		// Wait for the URL field to auto-focus
  394 | 		await waitForAutoFocus();
  at Object.META_KEY (test/e2e/specs/links.test.js:391:28)
  at tryCatch (node_modules/regenerator-runtime/runtime.js:62:40)
  at Generator.invoke [as _invoke] (node_modules/regenerator-runtime/runtime.js:288:22)
  at Generator.prototype.(anonymous function) [as next] (node_modules/regenerator-runtime/runtime.js:114:21)
  at asyncGeneratorStep (test/e2e/specs/links.test.js:15:103)
  at _next (test/e2e/specs/links.test.js:17:194)
● Links › link popover remains visible after a mouse drag event
ReferenceError: SELECT_WORD_MODIFIER_KEYS is not defined
459 |
460 | // Select some text
> 461 | await pressWithModifier( SELECT_WORD_MODIFIER_KEYS, 'ArrowLeft' );
| ^
462 |
463 | // Click on the Link button
464 | await page.click( 'button[aria-label="Link"]' );
at Object.SELECT_WORD_MODIFIER_KEYS (test/e2e/specs/links.test.js:461:28)
at tryCatch (node_modules/regenerator-runtime/runtime.js:62:40)
at Generator.invoke [as _invoke] (node_modules/regenerator-runtime/runtime.js:288:22)
at Generator.prototype.(anonymous function) [as next] (node_modules/regenerator-runtime/runtime.js:114:21)
at asyncGeneratorStep (test/e2e/specs/links.test.js:15:103)
at _next (test/e2e/specs/links.test.js:17:194)
FAIL test/e2e/specs/undo.test.js (6.534s)
● undo › should undo typing after a pause
ReferenceError: META_KEY is not defined
23 | expect( await getEditedPostContent() ).toMatchSnapshot();
24 |
> 25 | await pressWithModifier( META_KEY, 'z' );
| ^
26 |
27 | expect( await getEditedPostContent() ).toMatchSnapshot();
28 | } );
at Object.META_KEY (test/e2e/specs/undo.test.js:25:28)
at tryCatch (node_modules/regenerator-runtime/runtime.js:62:40)
at Generator.invoke [as _invoke] (node_modules/regenerator-runtime/runtime.js:288:22)
at Generator.prototype.(anonymous function) [as next] (node_modules/regenerator-runtime/runtime.js:114:21)
at asyncGeneratorStep (test/e2e/specs/undo.test.js:9:103)
at _next (test/e2e/specs/undo.test.js:11:194)
● undo › should undo typing after non input change
ReferenceError: META_KEY is not defined
32 |
33 | await page.keyboard.type( 'before keyboard ' );
> 34 | await pressWithModifier( META_KEY, 'b' );
| ^
35 | await page.keyboard.type( 'after keyboard' );
36 |
37 | expect( await getEditedPostContent() ).toMatchSnapshot();
at Object.META_KEY (test/e2e/specs/undo.test.js:34:28)
at tryCatch (node_modules/regenerator-runtime/runtime.js:62:40)
at Generator.invoke [as _invoke] (node_modules/regenerator-runtime/runtime.js:288:22)
at Generator.prototype.(anonymous function) [as next] (node_modules/regenerator-runtime/runtime.js:114:21)
at asyncGeneratorStep (test/e2e/specs/undo.test.js:9:103)
at _next (test/e2e/specs/undo.test.js:11:194)

…lity/11535-test-utils-jsdocs-and-modifiers-update

…th mster.

…code-quality/11535-test-utils-jsdocs-and-modifiers-update

nicolad · 2018-11-16T16:34:01Z

Is the Travis environment the same as the container in which e2e tests are runned locally ?

gziolo · 2018-11-17T11:00:14Z

It should be very close to what you have locally if you use Docker instance provided with the repository.

FAIL test/e2e/specs/links.test.js (41.536s)

There are 9 tests failing in this suite. Everything else passes. Maybe shiftAlt behaves differently on Travis?

https://github.com/WordPress/gutenberg/pull/11855/files#diff-3d57671ff8af77f3854ff531c06ba975R39

gziolo · 2018-11-17T11:03:33Z

test/e2e/support/utils/press-with-modifier.js

+		...modifiers,
+		shiftAlt: ( _isApple ) => _isApple ? [ SHIFT, ALT ] : [ SHIFT, CTRL ],
+	};
+	const mappedModifiers = overWrittenModifiers[ modifier ]( isAppleOS );


I think I found what's causing issues. isAppleOS should be called here. It is passed down as function and that's why shiftAlt is always [ SHIFT, ALT ].

Actually, it should be inside shiftAlt. It's not easy to debug using GitHub UI :)

You have an eye of the 🐯

Feedback was addressed :)

nicolad · 2018-11-17T12:25:35Z

Is it ok if I will add missing JSDocs in a separate PR ?

gziolo · 2018-11-17T14:48:59Z

Yes, sure thing. Another nice refactor, thanks for all your help with making e2e test utils better 🙇

From WordPress#11855

* Add e2e tests for the format API * Fixes some whitespace issues * Update format-api.test.js * Add missing dependencies to the script registration * Add snapshot to test * Check for custom button, remove extra lines * Change modifier keys used From #11855

aduth · 2020-03-31T16:12:17Z

test/e2e/specs/links.test.js

 *
 * @type {string}
 */
-const SELECT_WORD_MODIFIER_KEYS = process.platform === 'darwin' ? [ 'Shift', 'Alt' ] : [ 'Shift', 'Control' ];


The JSDoc comment on the preceding comment existed to complement this line of code. With this line of code removed, that JSDoc should have been removed as well.

See: #21297

Replaced pressWithModifier with rawShortcut.

3ac0e18

nicolad mentioned this pull request Nov 14, 2018

Separate e2e test utils functions into their own files #11701

Merged

4 tasks

Merge branch 'master' of github.com:WordPress/gutenberg into code-qua…

6fd9de2

…lity/11535-test-utils-jsdocs-and-modifiers-update

gziolo added [Type] Automated Testing Testing infrastructure changes impacting the execution of end-to-end (E2E) and/or unit tests. [Type] Code Quality Issues or PRs that relate to code quality labels Nov 14, 2018

nicolad added 2 commits November 15, 2018 10:07

Replaced SELECT_WORD_MODIFIER_KEYS, META_KEY and ACCESS_MODIFIER_KEYS…

d194732

… with rawShortcuts.

Merge branch 'master' of github.com:WordPress/gutenberg into code-qua…

d280c62

…lity/11535-test-utils-jsdocs-and-modifiers-update

nicolad commented Nov 15, 2018

View reviewed changes

gziolo requested review from ellatrix and talldan November 15, 2018 12:42

gziolo added the [Type] Enhancement A suggestion for improvement. label Nov 15, 2018

gziolo requested a review from mcsf November 15, 2018 12:48

gziolo reviewed Nov 15, 2018

View reviewed changes

Replaced key strings with constants.

d241f52

talldan previously requested changes Nov 15, 2018

View reviewed changes

nicolad added 2 commits November 15, 2018 17:42

Replaced rawShortcut usage. TODO: Apply DRY.

527292d

Adjusted failing tests and overwritten some modifiers.

39cc2ed

gziolo requested changes Nov 16, 2018

View reviewed changes

nicolad added 4 commits November 16, 2018 15:20

Merge branch 'master' of github.com:WordPress/gutenberg into code-qua…

f1ca029

…lity/11535-test-utils-jsdocs-and-modifiers-update

Removed META_KEY and SELECT_WORD_MODIFIER_KEYS added after syncing wi…

b39cd29

…th mster.

Merge branch 'master' of https://github.com/WordPress/gutenberg into …

9723760

…code-quality/11535-test-utils-jsdocs-and-modifiers-update

Merge branch 'master' of https://github.com/WordPress/gutenberg into …

810c1a5

…code-quality/11535-test-utils-jsdocs-and-modifiers-update

gziolo reviewed Nov 17, 2018

View reviewed changes

Make sure that the check for OS is executed in e2e tests

6acf004

gziolo added this to the 4.5 milestone Nov 17, 2018

Another try to properly call the check for OS in e2e tests

bf564d8

gziolo approved these changes Nov 17, 2018

View reviewed changes

gziolo merged commit 3b16e5f into WordPress:master Nov 17, 2018

nicolad mentioned this pull request Nov 19, 2018

Added missing JSDocs in e2e test utils. #12071

Merged

4 tasks

raquelmsmith pushed a commit to raquelmsmith/gutenberg that referenced this pull request Nov 20, 2018

Change modifier keys used

3037398

From WordPress#11855

nicolad self-assigned this Sep 29, 2019

aduth mentioned this pull request Mar 31, 2020

E2E Tests: Remove unused JSDoc docblock #21297

Merged

aduth reviewed Mar 31, 2020

View reviewed changes

monzerfoda mentioned this pull request Dec 1, 2023

[Snyk] Fix for 1 vulnerabilities monzerfoda/gutenberg#20

Open

Keycodes package modifiers usage and adding missing JSDocs. #11855

Keycodes package modifiers usage and adding missing JSDocs. #11855

Uh oh!

Conversation

nicolad commented Nov 14, 2018 • edited by gziolo Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

How has this been tested?

Types of changes

Checklist:

Uh oh!

nicolad left a comment

Choose a reason for hiding this comment

Uh oh!

gziolo commented Nov 15, 2018

Uh oh!

Uh oh!

gziolo Nov 15, 2018

Choose a reason for hiding this comment

Uh oh!

nicolad Nov 15, 2018 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

talldan Nov 15, 2018 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

nicolad Nov 16, 2018

Choose a reason for hiding this comment

Uh oh!

talldan left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

talldan Nov 15, 2018 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

gziolo commented Nov 16, 2018

Uh oh!

gziolo left a comment

Choose a reason for hiding this comment

Uh oh!

nicolad commented Nov 16, 2018 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

gziolo commented Nov 17, 2018

Uh oh!

gziolo Nov 17, 2018

Choose a reason for hiding this comment

Uh oh!

gziolo Nov 17, 2018

Choose a reason for hiding this comment

Uh oh!

nicolad Nov 17, 2018

Choose a reason for hiding this comment

Uh oh!

nicolad commented Nov 17, 2018

Uh oh!

gziolo commented Nov 17, 2018

Uh oh!

aduth Mar 31, 2020

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

nicolad commented Nov 14, 2018 •

edited by gziolo

Loading

nicolad Nov 15, 2018 •

edited

Loading

talldan Nov 15, 2018 •

edited

Loading

talldan Nov 15, 2018 •

edited

Loading

nicolad commented Nov 16, 2018 •

edited

Loading