Skip to content

Commit

Permalink
Fix e2e tests
Browse files Browse the repository at this point in the history
  • Loading branch information
@youknowriad
youknowriad committed Sep 11, 2024
1 parent af0997e commit 66a01ed
Show file tree
Hide file tree
Showing 2 changed files with 14 additions and 188 deletions.
126 changes: 10 additions & 116 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 @@ -17,108 +17,26 @@ test.describe( 'Order of block keyboard navigation', () => {
await editor.openDocumentSettingsSidebar();
} );

test( 'permits tabbing through paragraph blocks in the expected order', async ( {
test( 'permits tabbing through the block toolbar of the paragraph block', async ( {
editor,
KeyboardNavigableBlocks,
page,
pageUtils,
} ) => {
const paragraphBlocks = [ 'Paragraph 0', 'Paragraph 1', 'Paragraph 2' ];

// Create 3 paragraphs blocks with some content.
for ( const paragraphBlock of paragraphBlocks ) {
// Insert three paragraph blocks.
for ( let i = 0; i < 3; i++ ) {
await editor.insertBlock( { name: 'core/paragraph' } );
await page.keyboard.type( paragraphBlock );
await page.keyboard.type( `Paragraph ${ i + 1 }` );
}

// Select the middle block.
// Select the middle paragraph block.
await page.keyboard.press( 'ArrowUp' );
await editor.showBlockToolbar();
await KeyboardNavigableBlocks.navigateToContentEditorTop();
await KeyboardNavigableBlocks.tabThroughParagraphBlock( 'Paragraph 1' );

// Repeat the same steps to ensure that there is no change introduced in how the focus is handled.
// This prevents the previous regression explained in: https://github.com/WordPress/gutenberg/issues/11773.
await KeyboardNavigableBlocks.navigateToContentEditorTop();
await KeyboardNavigableBlocks.tabThroughParagraphBlock( 'Paragraph 1' );
} );

test( 'allows tabbing in navigation mode if no block is selected', async ( {
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' );
} );

test( 'allows tabbing in navigation mode if no block is selected (reverse)', async ( {
editor,
KeyboardNavigableBlocks,
page,
pageUtils,
} ) => {
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 );

// Put focus behind the block list.
await page.evaluate( () => {
document
.querySelector( '.interface-interface-skeleton__sidebar' )
.focus();
} );

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

await pageUtils.pressKeys( 'shift+Tab' );
await KeyboardNavigableBlocks.navigateThroughBlockToolbar();
await page.keyboard.press( 'Tab' );
await KeyboardNavigableBlocks.expectLabelToHaveFocus(
'Paragraph Block. Row 1. 0'
'Block: Paragraph'
);

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

test( 'should navigate correctly with multi selection', async ( {
Expand Down Expand Up @@ -208,31 +126,7 @@ 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( 'Block' );

// 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' );
async navigateThroughBlockToolbar() {
await this.expectLabelToHaveFocus( 'Paragraph' );

await this.page.keyboard.press( 'ArrowRight' );
Expand Down
76 changes: 4 additions & 72 deletions test/e2e/specs/editor/various/writing-flow.spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -106,48 +106,6 @@ test.describe( 'Writing Flow (@firefox, @webkit)', () => {
] );
} );

test( 'Should navigate between inner and root blocks in navigation mode', async ( {
page,
writingFlowUtils,
} ) => {
await writingFlowUtils.addDemoContent();

// Switch to navigation mode.
await page.keyboard.press( 'Escape' );
// Arrow up to Columns block.
await page.keyboard.press( 'ArrowUp' );
await expect
.poll( writingFlowUtils.getActiveBlockName )
.toBe( 'core/columns' );
// Arrow right into Column block.
await page.keyboard.press( 'ArrowRight' );
await expect
.poll( writingFlowUtils.getActiveBlockName )
.toBe( 'core/column' );
// Arrow down to reach second Column block.
await page.keyboard.press( 'ArrowDown' );
// Arrow right again into Paragraph block.
await page.keyboard.press( 'ArrowRight' );
await expect
.poll( writingFlowUtils.getActiveBlockName )
.toBe( 'core/paragraph' );
// Arrow left back to Column block.
await page.keyboard.press( 'ArrowLeft' );
await expect
.poll( writingFlowUtils.getActiveBlockName )
.toBe( 'core/column' );
// Arrow left back to Columns block.
await page.keyboard.press( 'ArrowLeft' );
await expect
.poll( writingFlowUtils.getActiveBlockName )
.toBe( 'core/columns' );
// Arrow up to first paragraph.
await page.keyboard.press( 'ArrowUp' );
await expect
.poll( writingFlowUtils.getActiveBlockName )
.toBe( 'core/paragraph' );
} );

test( 'should navigate around inline boundaries', async ( {
editor,
page,
Expand Down Expand Up @@ -958,32 +916,6 @@ test.describe( 'Writing Flow (@firefox, @webkit)', () => {
<!-- /wp:table -->` );
} );

test( 'escape should set select mode and then focus the canvas', async ( {
page,
writingFlowUtils,
} ) => {
await page.keyboard.press( 'Enter' );
await page.keyboard.type( 'Random Paragraph' );

// First escape enters navigation mode.
await page.keyboard.press( 'Escape' );
const navigationButton = page.getByLabel(
'Paragraph Block. Row 1. Random Paragraph'
);
await expect( navigationButton ).toBeVisible();
await expect
.poll( writingFlowUtils.getActiveBlockName )
.toBe( 'core/paragraph' );

// Second escape should send focus to the canvas
await page.keyboard.press( 'Escape' );
// The navigation button should be hidden.
await expect( navigationButton ).toBeHidden();
await expect(
page.getByRole( 'region', { name: 'Editor content' } )
).toBeFocused();
} );

// Checks for regressions of https://github.com/WordPress/gutenberg/issues/40091.
test( 'does not deselect the block when selecting text outside the editor canvas', async ( {
editor,
Expand Down Expand Up @@ -1223,10 +1155,10 @@ class WritingFlowUtils {
);
await this.page.keyboard.type( '2nd col' ); // If this text is too long, it may wrap to a new line and cause test failure. That's why we're using "2nd" instead of "Second" here.

await this.page.keyboard.press( 'Escape' ); // Enter navigation mode.
await this.page.keyboard.press( 'ArrowLeft' ); // Move to the column block.
await this.page.keyboard.press( 'ArrowLeft' ); // Move to the columns block.
await this.page.keyboard.press( 'Enter' ); // Enter edit mode with the columns block selected.
await this.page.keyboard.press( 'Shift+Tab' ); // Move to toolbar to select parent
await this.page.keyboard.press( 'Enter' ); // Selects the column block.
await this.page.keyboard.press( 'Shift+Tab' ); // Move to toolbar to select parent
await this.page.keyboard.press( 'Enter' ); // Selects the columns block.
await this.page.keyboard.press( 'Enter' ); // Creates a paragraph after the columns block.
await this.page.keyboard.type( 'Second paragraph' );
}
Expand Down

0 comments on commit 66a01ed

Please sign in to comment.