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 all commits
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
86 changes: 86 additions & 0 deletions packages/e2e-test-utils/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -173,6 +173,14 @@ _Returns_

- `Promise`: Promise resolving once the edit post sidebar is opened.

<a name="externalWrapperHasFocus" href="#externalWrapperHasFocus">#</a> **externalWrapperHasFocus**

Asserts that the element with keyboard focus is a block's external wrapper

_Parameters_

- _blockType_ `string`: The expected value of the data-type attribute of the block's external wrapper

<a name="findSidebarPanelToggleButtonWithTitle" href="#findSidebarPanelToggleButtonWithTitle">#</a> **findSidebarPanelToggleButtonWithTitle**

Finds a sidebar panel with the provided title.
Expand Down Expand Up @@ -243,6 +251,14 @@ _Returns_

- `Promise`: Promise resolving with post content markup.

<a name="getElementSelectorList" href="#getElementSelectorList">#</a> **getElementSelectorList**

Returns an array of classnames that match a given selector on the current page

_Parameters_

- _selector_ `string`: The selector to query on the page

<a name="hasBlockSwitcher" href="#hasBlockSwitcher">#</a> **hasBlockSwitcher**

Returns a boolean indicating if the current selected block has a block switcher or not.
Expand All @@ -251,6 +267,15 @@ _Returns_

- `Promise`: Promise resolving with a boolean.

<a name="insertAndPopulateBlock" href="#insertAndPopulateBlock">#</a> **insertAndPopulateBlock**

Inserts a content block and then, if it has text content areas, fills them with text

_Parameters_

- _blockName_ `string`: The type of block to insert
- _content_ `string`: The text to enter into each contenteditable area

<a name="insertBlock" href="#insertBlock">#</a> **insertBlock**

Opens the inserter, searches for the given term, then selects the first
Expand All @@ -261,6 +286,10 @@ _Parameters_
- _searchTerm_ `string`: The text to search the inserter for.
- _panelName_ `string`: The inserter panel to open (if it's closed by default).

<a name="inserterToggleHasFocus" href="#inserterToggleHasFocus">#</a> **inserterToggleHasFocus**

Asserts that a content block's inserter toggle has keyboard focus

<a name="installPlugin" href="#installPlugin">#</a> **installPlugin**

Installs a plugin from the WP.org repository.
Expand Down Expand Up @@ -315,6 +344,10 @@ _Returns_

- `Promise`: Promise that uses `mockCheck` to see if a request should be mocked with `mock`, and optionally transforms the response with `responseObjectTransform`.

<a name="navigateToContentEditorTop" href="#navigateToContentEditorTop">#</a> **navigateToContentEditorTop**

Undocumented declaration.

<a name="observeFocusLoss" href="#observeFocusLoss">#</a> **observeFocusLoss**

Binds to the document on page load which throws an error if a `focusout`
Expand Down Expand Up @@ -469,6 +502,59 @@ running the test is not already the admin user).
Switches the current user to whichever user we should be
running the tests as (if we're not already that user).

<a name="tabThroughBlock" href="#tabThroughBlock">#</a> **tabThroughBlock**

Tabs through a content block and asserts that the external wrapper, inserter toggle, mover controls, and toolbar buttons all receive keyboard focus.

_Parameters_

- _blockType_ `string`: The expected value of the data-type attribute of the block's external wrapper

<a name="tabThroughBlockMoverControl" href="#tabThroughBlockMoverControl">#</a> **tabThroughBlockMoverControl**

Navigates through the block mover control using the keyboard. Asserts that the 'move up' and 'move down' controls receive focus.

<a name="tabThroughBlockToolbar" href="#tabThroughBlockToolbar">#</a> **tabThroughBlockToolbar**

Navigate through a block's toolbar using the keyboard. Asserts that each button receives focus.

<a name="tabThroughFileBlock" href="#tabThroughFileBlock">#</a> **tabThroughFileBlock**

Tabs through a content block with file upload buttons, such as an Image, Gallery, Audio, or Cover block

_Parameters_

- _blockType_ `string`: The expected value of the data-type attribute of the block's external wrapper

<a name="tabThroughPlaceholderButtons" href="#tabThroughPlaceholderButtons">#</a> **tabThroughPlaceholderButtons**

Tabs through the file upload buttons that appear in a file content block's placeholder area

<a name="tabThroughTextBlock" href="#tabThroughTextBlock">#</a> **tabThroughTextBlock**

Tabs through a content block with text content areas, such as a Heading, Quote, or Paragraph block. Asserts that the text content areas all receive focus.

_Parameters_

- _blockType_ `string`: The expected value of the data-type attribute of the block's external wrapper
- _content_ `string`: The expected title of the block

<a name="textContentAreas" href="#textContentAreas">#</a> **textContentAreas**

Returns a list of a block's contenteditable elements.

_Parameters_

- _empty_ `boolean`: When true, restricts the list to contenteditable elements with no value

<a name="textContentAreasHaveFocus" href="#textContentAreasHaveFocus">#</a> **textContentAreasHaveFocus**

Tabs through the text content areas of a block and asserts the expected values

_Parameters_

- _content_ `string`: The expected value of the block's contenteditable elements

<a name="toggleScreenOption" href="#toggleScreenOption">#</a> **toggleScreenOption**

Toggles the screen option with the given label.
Expand Down
10 changes: 10 additions & 0 deletions packages/e2e-test-utils/src/external-wrapper-has-focus.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
/**
* Asserts that the element with keyboard focus is a block's external wrapper
*
* @param {string} blockType The expected value of the data-type attribute of the block's external wrapper
*/

export async function externalWrapperHasFocus( blockType ) {
const activeElementDataType = await page.evaluate( () => document.activeElement.dataset.type );
await expect( activeElementDataType ).toEqual( blockType );
}
16 changes: 16 additions & 0 deletions packages/e2e-test-utils/src/get-element-list.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
/*eslint no-shadow: ["error", { "allow": ["selector"] }]*/

/**
* Returns an array of classnames that match a given selector on the current page
*
* @param {string} selector The selector to query on the page
*/
export const getElementSelectorList = async ( selector ) => {
return await page.evaluate( ( selector ) => {
return Array.from(
document.querySelectorAll(
selector
)
).map( ( elem ) => elem.className );
}, selector );
};
13 changes: 13 additions & 0 deletions packages/e2e-test-utils/src/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -14,19 +14,24 @@ export { dragAndResize } from './drag-and-resize';
export { enablePageDialogAccept } from './enable-page-dialog-accept';
export { enablePrePublishChecks } from './enable-pre-publish-checks';
export { ensureSidebarOpened } from './ensure-sidebar-opened';
export { externalWrapperHasFocus } from './external-wrapper-has-focus';
export { findSidebarPanelToggleButtonWithTitle } from './find-sidebar-panel-toggle-button-with-title';
export { findSidebarPanelWithTitle } from './find-sidebar-panel-with-title';
export { getAllBlockInserterItemTitles } from './get-all-block-inserter-item-titles';
export { getAllBlocks } from './get-all-blocks';
export { getAvailableBlockTransforms } from './get-available-block-transforms';
export { getBlockSetting } from './get-block-setting';
export { getEditedPostContent } from './get-edited-post-content';
export { getElementSelectorList } from './get-element-list';
export { hasBlockSwitcher } from './has-block-switcher';
export { insertAndPopulateBlock } from './insert-and-populate-block';
export { insertBlock } from './insert-block';
export { inserterToggleHasFocus } from './inserter-toggle-has-focus';
export { installPlugin } from './install-plugin';
export { isCurrentURL } from './is-current-url';
export { isInDefaultBlock } from './is-in-default-block';
export { loginUser } from './login-user';
export { navigateToContentEditorTop } from './navigate-to-content-editor-top';
export { observeFocusLoss } from './observe-focus-loss';
export { openAllBlockInserterCategories } from './open-all-block-inserter-categories';
export { openDocumentSettingsSidebar } from './open-document-settings-sidebar';
Expand All @@ -44,6 +49,14 @@ 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 { tabThroughBlock } from './tab-through-block';
export { tabThroughBlockMoverControl } from './tab-through-block-mover-control';
export { tabThroughBlockToolbar } from './tab-through-block-toolbar';
export { tabThroughFileBlock } from './tab-through-file-block';
export { tabThroughPlaceholderButtons } from './tab-through-placeholder-buttons';
export { tabThroughTextBlock } from './tab-through-text-block';
export { textContentAreas } from './text-content-areas';
export { textContentAreasHaveFocus } from './text-content-areas-have-focus';
export { toggleScreenOption } from './toggle-screen-option';
export { transformBlockTo } from './transform-block-to';
export { uninstallPlugin } from './uninstall-plugin';
Expand Down
28 changes: 28 additions & 0 deletions packages/e2e-test-utils/src/insert-and-populate-block.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
/**
* WordPress dependencies
*/
import {
insertBlock,
textContentAreas,
} from '@wordpress/e2e-test-utils';

/**
* Inserts a content block and then, if it has text content areas, fills them with text
*
* @param {string} blockName The type of block to insert
* @param {string} content The text to enter into each contenteditable area
*/
export async function insertAndPopulateBlock( blockName, content ) {
await insertBlock( blockName );
// typing populates the first content area
await page.keyboard.type( content );

// if there are more contenteditable elements, select and populate them too:
const blocks = await textContentAreas( { empty: true } );

for ( let i = 0; i < blocks.length; i++ ) {
await page.keyboard.press( 'Tab' );
await page.keyboard.type( content );
}
await page.keyboard.press( 'Enter' );
}
8 changes: 8 additions & 0 deletions packages/e2e-test-utils/src/inserter-toggle-has-focus.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
/**
* Asserts that a content block's inserter toggle has keyboard focus
*/

export async function inserterToggleHasFocus() {
const isFocusedInserterToggle = await page.evaluate( () => document.activeElement.classList.contains( 'block-editor-inserter__toggle' ) );
await expect( isFocusedInserterToggle ).toBe( true );
}
17 changes: 17 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,17 @@
/**
* Navigates to the top of the content editor using the keyboard.
*/

/**
* Internal dependencies
*/
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 @@
/**
* Navigates through the block mover control using the keyboard. Asserts that the 'move up' and 'move down' controls receive focus.
*/
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( 'block-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( 'block-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. Asserts that each button receives focus.
*/

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( '.block-editor-block-contextual-toolbar button:not([disabled])' )
).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 );
}
}
28 changes: 28 additions & 0 deletions packages/e2e-test-utils/src/tab-through-block.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
/**
* WordPress dependencies
*/
import {
externalWrapperHasFocus,
inserterToggleHasFocus,
tabThroughBlockMoverControl,
tabThroughBlockToolbar,
} from '@wordpress/e2e-test-utils';

/**
* Tabs through a content block and asserts that the external wrapper, inserter toggle, mover controls, and toolbar buttons all receive keyboard focus.
*
* @param {string} blockType The expected value of the data-type attribute of the block's external wrapper
*/

export async function tabThroughBlock( blockType ) {
// Tab to the next block
await page.keyboard.press( 'Tab' );
await externalWrapperHasFocus( blockType );

// Tab causes 'add block' button to receive focus
await page.keyboard.press( 'Tab' );
await inserterToggleHasFocus();

await tabThroughBlockMoverControl();
await tabThroughBlockToolbar();
}
17 changes: 17 additions & 0 deletions packages/e2e-test-utils/src/tab-through-file-block.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@

/**
* Internal dependencies
*/

import { tabThroughBlock } from './tab-through-block';
import { tabThroughPlaceholderButtons } from './tab-through-placeholder-buttons';

/**
* Tabs through a content block with file upload buttons, such as an Image, Gallery, Audio, or Cover block
*
* @param {string} blockType The expected value of the data-type attribute of the block's external wrapper
*/
export async function tabThroughFileBlock( blockType ) {
await tabThroughBlock( blockType );
await tabThroughPlaceholderButtons();
}
21 changes: 21 additions & 0 deletions packages/e2e-test-utils/src/tab-through-placeholder-buttons.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
/**
* WordPress dependencies
*/
import {
getElementSelectorList,
} from '@wordpress/e2e-test-utils';

/**
* Tabs through the file upload buttons that appear in a file content block's placeholder area
*/
export const tabThroughPlaceholderButtons = async () => {
const placeholderButtons = await getElementSelectorList( '.wp-block.is-selected .block-editor-media-placeholder button:not([disabled])' );

for ( const buttonClassName of placeholderButtons ) {
await page.keyboard.press( 'Tab' );
const focusePlaceholderButton = await page.evaluate( () =>
document.activeElement.className
);
await expect( focusePlaceholderButton ).toEqual( buttonClassName );
}
};
20 changes: 20 additions & 0 deletions packages/e2e-test-utils/src/tab-through-text-block.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
/**
* Internal dependencies
*/
import { tabThroughBlock } from './tab-through-block';
import { textContentAreasHaveFocus } from './text-content-areas-have-focus';

/**
* Tabs through a content block with text content areas, such as a Heading, Quote, or Paragraph block. Asserts that the text content areas all receive focus.
*
* @param {string} blockType The expected value of the data-type attribute of the block's external wrapper
* @param {string} content The expected title of the block
*/

export async function tabThroughTextBlock( blockType, content ) {
await tabThroughBlock( blockType );

// Tab causes the block text content to receive focus
await page.keyboard.press( 'Tab' );
await textContentAreasHaveFocus( content );
}
Loading