Skip to content

Commit

Permalink
Refactor keyboard navigable blocks test to match new behavior
Browse files Browse the repository at this point in the history
  • Loading branch information
@jeryj
jeryj committed Oct 4, 2023
1 parent 8fd6f1d commit 8d7534c
Showing 1 changed file with 38 additions and 119 deletions.
157 changes: 38 additions & 119 deletions test/e2e/specs/editor/various/keyboard-navigable-blocks.spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,8 @@
const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );

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

Expand Down Expand Up @@ -58,45 +58,6 @@ test.describe( 'Order of block keyboard navigation', () => {
editor,
KeyboardNavigableBlocks,
page,
} ) => {
const paragraphBlocks = [ '0', '1' ];

// Create 2 paragraphs blocks with some content.
for ( const paragraphBlock of paragraphBlocks ) {
await editor.insertBlock( { name: 'core/paragraph' } );
await page.keyboard.type( paragraphBlock );
}

// Clear the selected block.
const paragraph = editor.canvas
.locator( '[data-type="core/paragraph"]' )
.getByText( '1' );
const box = await paragraph.boundingBox();
await page.mouse.click( box.x - 1, box.y );

await page.keyboard.press( 'Tab' );
await KeyboardNavigableBlocks.expectLabelToHaveFocus( 'Add title' );

await page.keyboard.press( 'Tab' );
await KeyboardNavigableBlocks.expectLabelToHaveFocus(
'Paragraph Block. Row 1. 0'
);

await page.keyboard.press( 'Tab' );
await KeyboardNavigableBlocks.expectLabelToHaveFocus(
'Paragraph Block. Row 2. 1'
);

await page.keyboard.press( 'Tab' );
await KeyboardNavigableBlocks.expectLabelToHaveFocus(
'Post (selected)'
);
} );

test( 'allows tabbing in navigation mode if no block is selected (reverse)', async ( {
editor,
KeyboardNavigableBlocks,
page,
pageUtils,
} ) => {
const paragraphBlocks = [ '0', '1' ];
Expand All @@ -107,19 +68,12 @@ test.describe( 'Order of block keyboard navigation', () => {
await page.keyboard.type( paragraphBlock );
}

// Clear the selected block.
const paragraph = editor.canvas
.locator( '[data-type="core/paragraph"]' )
.getByText( '1' );
const box = await paragraph.boundingBox();
await page.mouse.click( box.x - 1, box.y );

// Put focus behind the block list.
await page.evaluate( () => {
document
.querySelector( '.interface-interface-skeleton__sidebar' )
.focus();
} );
// Clear the selected block and switch to Select mode
await page.keyboard.press( 'Escape' );
// Move focus into the sidebar
await page.keyboard.press( 'Tab' );
const activeElement = page.locator( ':focus' );
await expect( activeElement ).toHaveText( 'Post' );

await pageUtils.pressKeys( 'shift+Tab' );
await KeyboardNavigableBlocks.expectLabelToHaveFocus( 'Add block' );
Expand All @@ -141,6 +95,17 @@ test.describe( 'Order of block keyboard navigation', () => {

await pageUtils.pressKeys( 'shift+Tab' );
await KeyboardNavigableBlocks.expectLabelToHaveFocus( 'Add title' );

// Make sure it works tabbing back through in sequence
await pageUtils.pressKeys( 'Tab' );
await KeyboardNavigableBlocks.expectLabelToHaveFocus(
'Paragraph Block. Row 1. 0'
);

await pageUtils.pressKeys( 'Tab' );
await KeyboardNavigableBlocks.expectLabelToHaveFocus(
'Paragraph Block. Row 2. 1'
);
} );

test( 'should navigate correctly with multi selection', async ( {
Expand Down Expand Up @@ -171,9 +136,14 @@ test.describe( 'Order of block keyboard navigation', () => {
'Multiple selected blocks'
);

await pageUtils.pressKeys( 'shift+Tab' );
await pageUtils.pressKeys( 'alt+F10' );
await page.keyboard.press( 'ArrowRight' );
await KeyboardNavigableBlocks.expectLabelToHaveFocus( 'Move up' );
// Return focus to the editor
await page.keyboard.press( 'Escape' );
await KeyboardNavigableBlocks.expectLabelToHaveFocus(
'Multiple selected blocks'
);
} );

test( 'allows the first element within a block to receive focus', async ( {
Expand All @@ -194,27 +164,31 @@ test.describe( 'Order of block keyboard navigation', () => {

test( 'allows the block wrapper to gain focus for a group block instead of the first element', async ( {
editor,
KeyboardNavigableBlocks,
page,
} ) => {
// Insert a group block.
await editor.insertBlock( { name: 'core/group' } );
// Select the default, selected Group layout from the variation picker.
const groupButton = editor.canvas.locator(
'button[aria-label="Group: Gather blocks in a container."]'

const activeElement = editor.canvas.locator( ':focus' );

await expect( activeElement ).toHaveAttribute(
'aria-label',
'Group: Gather blocks in a container.'
);

await groupButton.click();
await page.keyboard.press( 'Enter' );

// If active label matches, that means focus did not change from group block wrapper.
await KeyboardNavigableBlocks.expectLabelToHaveFocus( 'Block: Group' );
await expect( activeElement ).toHaveAttribute(
'aria-label',
'Block: Group'
);
} );
} );

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

async expectLabelToHaveFocus( label ) {
Expand All @@ -229,61 +203,6 @@ class KeyboardNavigableBlocks {

expect( ariaLabel ).toBe( label );
}

async navigateToContentEditorTop() {
// Use 'Ctrl+`' to return to the top of the editor.
await this.pageUtils.pressKeys( 'ctrl+`', { times: 5 } );
}

async tabThroughParagraphBlock( paragraphText ) {
await this.tabThroughBlockToolbar();

await this.page.keyboard.press( 'Tab' );
await this.expectLabelToHaveFocus( 'Block: Paragraph' );

const activeElement = this.editor.canvas.locator( ':focus' );

await expect( activeElement ).toHaveText( paragraphText );

await this.page.keyboard.press( 'Tab' );
await this.expectLabelToHaveFocus( 'Post' );

// Need to shift+tab here to end back in the block. If not, we'll be in the next region and it will only require 4 region jumps instead of 5.
await this.pageUtils.pressKeys( 'shift+Tab' );
await this.expectLabelToHaveFocus( 'Block: Paragraph' );
}

async tabThroughBlockToolbar() {
await this.page.keyboard.press( 'Tab' );
await this.expectLabelToHaveFocus( 'Paragraph' );

await this.page.keyboard.press( 'ArrowRight' );
await this.expectLabelToHaveFocus( 'Move up' );

await this.page.keyboard.press( 'ArrowRight' );
await this.expectLabelToHaveFocus( 'Move down' );

await this.page.keyboard.press( 'ArrowRight' );
await this.expectLabelToHaveFocus( 'Align text' );

await this.page.keyboard.press( 'ArrowRight' );
await this.expectLabelToHaveFocus( 'Bold' );

await this.page.keyboard.press( 'ArrowRight' );
await this.expectLabelToHaveFocus( 'Italic' );

await this.page.keyboard.press( 'ArrowRight' );
await this.expectLabelToHaveFocus( 'Link' );

await this.page.keyboard.press( 'ArrowRight' );
await this.expectLabelToHaveFocus( 'More' );

await this.page.keyboard.press( 'ArrowRight' );
await this.expectLabelToHaveFocus( 'Options' );

await this.page.keyboard.press( 'ArrowRight' );
await this.expectLabelToHaveFocus( 'Paragraph' );
}
}

/* eslint-enable playwright/expect-expect */

0 comments on commit 8d7534c

Please sign in to comment.