Skip to content

Commit

Permalink
Migrate Toolbar roving tabindex tests to Playwright
Browse files Browse the repository at this point in the history
  • Loading branch information
@t-hamano
t-hamano committed Dec 18, 2022
1 parent 4b4c4be commit 1db45c3
Show file tree
Hide file tree
Showing 2 changed files with 216 additions and 142 deletions.
142 changes: 0 additions & 142 deletions packages/e2e-tests/specs/editor/various/toolbar-roving-tabindex.test.js
View file

This file was deleted.

216 changes: 216 additions & 0 deletions test/e2e/specs/editor/various/toolbar-roving-tabindex.test.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,216 @@
/**
* WordPress dependencies
*/
const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );

test.use( {
ToolbarRovingTabindexUtils: async ( { page, pageUtils }, use ) => {
await use( new ToolbarRovingTabindexUtils( { page, pageUtils } ) );
},
} );

test.describe( 'Toolbar roving tabindex', () => {
test.beforeEach( async ( { admin, editor, page } ) => {
await admin.createNewPost();
await editor.insertBlock( { name: 'core/paragraph' } );
await page.keyboard.type( 'First block' );
} );

test( 'ensures paragraph block toolbar uses roving tabindex', async ( {
editor,
page,
ToolbarRovingTabindexUtils,
} ) => {
await editor.insertBlock( { name: 'core/paragraph' } );
await page.keyboard.type( 'Paragraph' );
await ToolbarRovingTabindexUtils.testBlockToolbarKeyboardNavigation(
'Paragraph block',
'Paragraph'
);
await ToolbarRovingTabindexUtils.wrapCurrentBlockWithGroup(
'Paragraph'
);
await ToolbarRovingTabindexUtils.testGroupKeyboardNavigation(
'Paragraph block',
'Paragraph'
);
} );

test( 'ensures heading block toolbar uses roving tabindex', async ( {
editor,
page,
ToolbarRovingTabindexUtils,
} ) => {
await editor.insertBlock( { name: 'core/heading' } );
await page.keyboard.type( 'Heading' );
await ToolbarRovingTabindexUtils.testBlockToolbarKeyboardNavigation(
'Block: Heading',
'Heading'
);
await ToolbarRovingTabindexUtils.wrapCurrentBlockWithGroup( 'Heading' );
await ToolbarRovingTabindexUtils.testGroupKeyboardNavigation(
'Block: Heading',
'Heading'
);
} );

test( 'ensures list block toolbar uses roving tabindex', async ( {
editor,
page,
ToolbarRovingTabindexUtils,
} ) => {
await editor.insertBlock( { name: 'core/list' } );
await page.keyboard.type( 'List' );
await ToolbarRovingTabindexUtils.testBlockToolbarKeyboardNavigation(
'List text',
'Select List'
);
await page.click( `role=button[name="Select List"i]` );
await ToolbarRovingTabindexUtils.wrapCurrentBlockWithGroup( 'List' );
await ToolbarRovingTabindexUtils.testGroupKeyboardNavigation(
'Block: List',
'List'
);
} );

test( 'ensures image block toolbar uses roving tabindex', async ( {
editor,
ToolbarRovingTabindexUtils,
} ) => {
await editor.insertBlock( { name: 'core/image' } );
await ToolbarRovingTabindexUtils.testBlockToolbarKeyboardNavigation(
'Block: Image',
'Image'
);
await ToolbarRovingTabindexUtils.wrapCurrentBlockWithGroup( 'Image' );
await ToolbarRovingTabindexUtils.testGroupKeyboardNavigation(
'Block: Image',
'Image'
);
} );

test( 'ensures table block toolbar uses roving tabindex', async ( {
editor,
page,
ToolbarRovingTabindexUtils,
} ) => {
await editor.insertBlock( { name: 'core/table' } );
await ToolbarRovingTabindexUtils.testBlockToolbarKeyboardNavigation(
'Block: Table',
'Table'
);
// Move focus to the first toolbar item.
await page.keyboard.press( 'Home' );
await ToolbarRovingTabindexUtils.expectLabelToHaveFocus( 'Table' );
await page.click( `role=button[name="Create Table"i]` );
await page.keyboard.press( 'Tab' );
await ToolbarRovingTabindexUtils.testBlockToolbarKeyboardNavigation(
'Body cell text',
'Table'
);
await ToolbarRovingTabindexUtils.wrapCurrentBlockWithGroup( 'Table' );
await ToolbarRovingTabindexUtils.testGroupKeyboardNavigation(
'Block: Table',
'Table'
);
} );

test( 'ensures custom html block toolbar uses roving tabindex', async ( {
editor,
ToolbarRovingTabindexUtils,
} ) => {
await editor.insertBlock( { name: 'core/html' } );
await ToolbarRovingTabindexUtils.testBlockToolbarKeyboardNavigation(
'HTML',
'Custom HTML'
);
await ToolbarRovingTabindexUtils.wrapCurrentBlockWithGroup(
'Custom HTML'
);
await ToolbarRovingTabindexUtils.testGroupKeyboardNavigation(
'Block: Custom HTML',
'Custom HTML'
);
} );

test( 'ensures block toolbar remembers the last focused item', async ( {
editor,
page,
pageUtils,
ToolbarRovingTabindexUtils,
} ) => {
await editor.insertBlock( { name: 'core/paragraph' } );
await page.keyboard.type( 'Paragraph' );
await ToolbarRovingTabindexUtils.focusBlockToolbar();
await page.keyboard.press( 'ArrowRight' );
await ToolbarRovingTabindexUtils.expectLabelToHaveFocus( 'Move up' );
await page.keyboard.press( 'Tab' );
await pageUtils.pressKeyWithModifier( 'shift', 'Tab' );
await ToolbarRovingTabindexUtils.expectLabelToHaveFocus( 'Move up' );
} );

test( 'can reach toolbar items with arrow keys after pressing alt+F10', async ( {
page,
pageUtils,
ToolbarRovingTabindexUtils,
} ) => {
await pageUtils.pressKeyWithModifier( 'alt', 'F10' );
await page.keyboard.press( 'ArrowRight' );
await page.keyboard.press( 'ArrowRight' );
await ToolbarRovingTabindexUtils.expectLabelToHaveFocus( 'Bold' );
} );
} );

class ToolbarRovingTabindexUtils {
constructor( { page, pageUtils } ) {
this.page = page;
this.pageUtils = pageUtils;
}

async focusBlockToolbar() {
await this.pageUtils.pressKeyWithModifier( 'alt', 'F10' );
}

async testBlockToolbarKeyboardNavigation(
currentBlockLabel,
currentBlockTitle
) {
await this.focusBlockToolbar();
await this.expectLabelToHaveFocus( currentBlockTitle );
await this.page.keyboard.press( 'ArrowRight' );
await this.expectLabelToHaveFocus( 'Move up' );
await this.page.keyboard.press( 'Tab' );
await this.expectLabelToHaveFocus( currentBlockLabel );
await this.pageUtils.pressKeyWithModifier( 'shift', 'Tab' );
await this.expectLabelToHaveFocus( 'Move up' );
}

async expectLabelToHaveFocus( label ) {
let ariaLabel = await this.page.evaluate( () =>
document.activeElement.getAttribute( 'aria-label' )
);
// If the labels don't match, try pressing Up Arrow to focus the block wrapper in non-content editable block.
if ( ariaLabel !== label ) {
await this.page.keyboard.press( 'ArrowUp' );
ariaLabel = await this.page.evaluate( () =>
document.activeElement.getAttribute( 'aria-label' )
);
}
await expect( ariaLabel ).toBe( label );
}

async wrapCurrentBlockWithGroup( currentBlockTitle ) {
await this.page.click( `role=button[name="${ currentBlockTitle }"i]` );
await this.page.click( `role=menuitem[name="Group"]` );
}

async testGroupKeyboardNavigation( currentBlockLabel, currentBlockTitle ) {
await this.expectLabelToHaveFocus( 'Block: Group' );
await this.page.keyboard.press( 'ArrowRight' );
await this.expectLabelToHaveFocus( currentBlockLabel );
await this.pageUtils.pressKeyWithModifier( 'shift', 'Tab' );
await this.expectLabelToHaveFocus( 'Select Group' );
await this.page.keyboard.press( 'ArrowRight' );
await this.expectLabelToHaveFocus( currentBlockTitle );
}
}

1 comment on commit 1db45c3

@github-actions
Copy link

Choose a reason for hiding this comment

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

Flaky tests detected.
Some tests passed with failed attempts. The failures may not be related to this commit but are still reported for visibility. See the documentation for more information.

🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/3724992530
📝 Reported issues:

Please sign in to comment.