Skip to content
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.

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

WIP - add e2e keyboard navigation util functions #1

Closed
Closed
Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
18 commits
Select commit Hold shift + click to select a range
9ac4720
Adding an e2e test verifying simple keyboard navigation through block…
Jan 23, 2019
dbdf8ff
Moving `navigateToContentEditorTop`, `tabThroughParagraphBlock`, `tab…
Feb 24, 2019
7246607
Rewriting tabThroughBlockToolbar to allow it to tab through any block…
Feb 24, 2019
267cb0e
Moving navigateToContentEditorTop, tabThroughBlockMoverControl, and t…
tjnicolaides Mar 7, 2019
830f01a
Merge branch 'master' of github.com:WordPress/gutenberg into add/1345…
tjnicolaides May 23, 2019
f0da33d
Updating block editor classNames to convention - tab-through-block-to…
tjnicolaides May 23, 2019
2b62a21
Updating e2e-test-utils readme
tjnicolaides May 23, 2019
0b3d0a4
WIP - refactoring keyboard navigability tests to handle all the defau…
tjnicolaides May 26, 2019
6365c7e
WIP - successfully tabbing through all core content block types
tjnicolaides May 28, 2019
286060a
WIP - continuing to refactor e2e test tabbing functions
tjnicolaides May 28, 2019
1fd556f
Extracting more keyboard navigation assertions / helpers into e2e-tes…
tjnicolaides Jul 21, 2019
4e3feaf
WIP - refactoring test dependencies for keyboard navigability tests
tjnicolaides Jul 21, 2019
3dbbdd4
WIP Better JSdocs for keyboard navigation e2e test utils
tjnicolaides Jul 22, 2019
40a2f37
JSDocs for keyboard navigability e2e test utils in readme
tjnicolaides Jul 22, 2019
e59fbf6
Merge branch 'master' into add/13455-add-e2e-keyboard-navigation-util…
tjnicolaides Jul 22, 2019
97c6ffd
Fixing failing tests after merge from upstream
tjnicolaides Jul 22, 2019
b8dd4b2
Fixing docs build - PR #16707
tjnicolaides Jul 22, 2019
42ecca4
Merge branch 'master' into add/13455-add-e2e-keyboard-navigation-util…
tjnicolaides Jul 29, 2019
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
Prev Previous commit
Next Next commit
Moving navigateToContentEditorTop, tabThroughBlockMoverControl, and t…
…abThroughBlockToolbar to e2e-test-utils
  • Loading branch information
tjnicolaides committed Mar 7, 2019
commit 267cb0ed2b6fcfa3659bd5ea5316e3b3a1041cb4
3 changes: 3 additions & 0 deletions packages/e2e-test-utils/src/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@ export { insertBlock } from './insert-block';
export { installPlugin } from './install-plugin';
export { isCurrentURL } from './is-current-url';
export { loginUser } from './login-user';
export { navigateToContentEditorTop } from './navigate-to-content-editor-top';
export { observeFocusLoss } from './observe-focus-loss';
export { openDocumentSettingsSidebar } from './open-document-settings-sidebar';
export { openPublishPanel } from './open-publish-panel';
Expand All @@ -36,6 +37,8 @@ export { setPostContent } from './set-post-content';
export { switchEditorModeTo } from './switch-editor-mode-to';
export { switchUserToAdmin } from './switch-user-to-admin';
export { switchUserToTest } from './switch-user-to-test';
export { tabThroughBlockMoverControl } from './tab-through-block-mover-control';
export { tabThroughBlockToolbar } from './tab-through-block-toolbar';
export { toggleScreenOption } from './toggle-screen-option';
export { transformBlockTo } from './transform-block-to';
export { uninstallPlugin } from './uninstall-plugin';
Expand Down
14 changes: 14 additions & 0 deletions packages/e2e-test-utils/src/navigate-to-content-editor-top.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
/**
* Navigate to the top of the content editor using the keyboard
*/

import { pressKeyWithModifier } from './press-key-with-modifier';

export async function navigateToContentEditorTop() {
// Use 'Ctrl+`' to return to the top of the editor
await pressKeyWithModifier( 'ctrl', '`' );
await pressKeyWithModifier( 'ctrl', '`' );

// Tab into the Title block
await page.keyboard.press( 'Tab' );
}
18 changes: 18 additions & 0 deletions packages/e2e-test-utils/src/tab-through-block-mover-control.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
/**
* Navigate through the block mover control using the keyboard
*/
export async function tabThroughBlockMoverControl() {
// Tab to focus on the 'move up' control
await page.keyboard.press( 'Tab' );
const isFocusedMoveUpControl = await page.evaluate( () =>
document.activeElement.classList.contains( 'editor-block-mover__control' )
);
await expect( isFocusedMoveUpControl ).toBe( true );

// Tab to focus on the 'move down' control
await page.keyboard.press( 'Tab' );
const isFocusedMoveDownControl = await page.evaluate( () =>
document.activeElement.classList.contains( 'editor-block-mover__control' )
);
await expect( isFocusedMoveDownControl ).toBe( true );
}
20 changes: 20 additions & 0 deletions packages/e2e-test-utils/src/tab-through-block-toolbar.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
/**
* Navigate through a block's toolbar using the keyboard
*/

export async function tabThroughBlockToolbar() {
const blockToolbarButtons = await page.evaluate( () => {
// return an array with the classNames of the block toolbar's buttons
return [].slice.call(
document.querySelectorAll( '.editor-block-contextual-toolbar button' )
).map( ( elem ) => elem.className );
} );

for ( const buttonClassName of blockToolbarButtons ) {
await page.keyboard.press( 'Tab' );
const focusedBlockToolBarButton = await page.evaluate( () =>
document.activeElement.className
);
await expect( focusedBlockToolBarButton ).toEqual( buttonClassName );
}
}
46 changes: 3 additions & 43 deletions packages/e2e-tests/specs/keyboard-navigable-blocks.test.js
Original file line number Diff line number Diff line change
Expand Up @@ -4,18 +4,11 @@
import {
createNewPost,
insertBlock,
pressKeyWithModifier,
navigateToContentEditorTop,
tabThroughBlockMoverControl,
tabThroughBlockToolbar,
} from '@wordpress/e2e-test-utils';

const navigateToContentEditorTop = async () => {
// Use 'Ctrl+`' to return to the top of the editor
await pressKeyWithModifier( 'ctrl', '`' );
await pressKeyWithModifier( 'ctrl', '`' );

// Tab into the Title block
await page.keyboard.press( 'Tab' );
};

const tabThroughParagraphBlock = async ( paragraphText ) => {
// Tab to the next paragraph block
await page.keyboard.press( 'Tab' );
Expand Down Expand Up @@ -50,39 +43,6 @@ const tabThroughParagraphBlock = async ( paragraphText ) => {
await expect( paragraphEditableContent ).toBe( paragraphText );
};

const tabThroughBlockMoverControl = async () => {
// Tab to focus on the 'move up' control
await page.keyboard.press( 'Tab' );
const isFocusedMoveUpControl = await page.evaluate( () =>
document.activeElement.classList.contains( 'editor-block-mover__control' )
);
await expect( isFocusedMoveUpControl ).toBe( true );

// Tab to focus on the 'move down' control
await page.keyboard.press( 'Tab' );
const isFocusedMoveDownControl = await page.evaluate( () =>
document.activeElement.classList.contains( 'editor-block-mover__control' )
);
await expect( isFocusedMoveDownControl ).toBe( true );
};

const tabThroughBlockToolbar = async () => {
const blockToolbarButtons = await page.evaluate( () => {
// return an array with the classNames of the block toolbar's buttons
return [].slice.call(
document.querySelectorAll( '.editor-block-contextual-toolbar button' )
).map( ( elem ) => elem.className );
} );

for ( const buttonClassName of blockToolbarButtons ) {
await page.keyboard.press( 'Tab' );
const focusedBlockToolBarButton = await page.evaluate( () =>
document.activeElement.className
);
await expect( focusedBlockToolBarButton ).toEqual( buttonClassName );
}
};

describe( 'Order of block keyboard navigation', () => {
beforeEach( async () => {
await createNewPost();
Expand Down