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 df55f3a
Show file tree
Hide file tree
Showing 5 changed files with 15 additions and 238 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
26 changes: 0 additions & 26 deletions test/e2e/specs/editor/various/shortcut-focus-toolbar.spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,32 +50,6 @@ test.describe( 'Focus toolbar shortcut (alt + F10)', () => {
await expect( toolbarUtils.documentToolbarTooltip ).toBeHidden();
} );

test( 'Focuses correct toolbar in default view options in select mode', async ( {
editor,
page,
toolbarUtils,
} ) => {
// Test: Focus the document toolbar from title
await toolbarUtils.useSelectMode();
await toolbarUtils.moveToToolbarShortcut();
await expect( toolbarUtils.documentToolbarButton ).toBeFocused();

// Test: Focus the top level toolbar from empty block
await editor.insertBlock( { name: 'core/paragraph' } );
await toolbarUtils.useSelectMode();
await toolbarUtils.moveToToolbarShortcut();
await expect( toolbarUtils.documentToolbarButton ).toBeFocused();

// Test: Focus the top level toolbar from paragraph block
await editor.insertBlock( { name: 'core/paragraph' } );
await page.keyboard.type(
'Focus top level toolbar from paragraph block in select mode.'
);
await toolbarUtils.useSelectMode();
await toolbarUtils.moveToToolbarShortcut();
await expect( toolbarUtils.documentToolbarButton ).toBeFocused();
} );

test.describe( 'In Top Toolbar option:', () => {
test.beforeEach( async ( { editor } ) => {
// Ensure the fixed toolbar option is on
Expand Down
78 changes: 5 additions & 73 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 @@ -1222,11 +1154,11 @@ class WritingFlowUtils {
'role=listbox[name="Blocks"i] >> role=option[name="Paragraph"i]'
);
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.editor.showBlockToolbar();
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
13 changes: 0 additions & 13 deletions test/e2e/specs/site-editor/navigation.spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -83,19 +83,6 @@ test.describe( 'Site editor navigation', () => {
// The button role should have been removed from the iframe.
await expect( editorCanvasButton ).toBeHidden();

// Test to make sure a Tab keypress works as expected.
// As of this writing, we are in select mode and a tab
// keypress will reveal the header template select mode
// button. This test is not documenting that we _want_
// that action, but checking that we are within the site
// editor and keypresses work as intened.
await pageUtils.pressKeys( 'Tab' );
await expect(
page.getByRole( 'button', {
name: 'Template Part Block. Row 1. header',
} )
).toBeFocused();

// Test: We can go back to the main navigation from the editor frame
// Move to the document toolbar
await pageUtils.pressKeys( 'alt+F10' );
Expand Down
10 changes: 0 additions & 10 deletions test/e2e/specs/widgets/customizing-widgets.spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -467,16 +467,6 @@ test.describe( 'Widgets Customizer', () => {
await expect( paragraphBlock ).toBeVisible();

await paragraphBlock.focus();

// Expect pressing the Escape key to enter navigation mode,
// but not close the editor.
await page.keyboard.press( 'Escape' );
await expect(
page.locator(
'css=.block-editor-block-list__block-selection-button'
)
).toBeVisible();
await expect( paragraphBlock ).toBeVisible();
} );

test( 'should move (inner) blocks to another sidebar', async ( {
Expand Down

0 comments on commit df55f3a

Please sign in to comment.