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.

Sign up for GitHub

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

Add e2e tests for keyboard interactions in DataViews ListView #61648

Merged
merged 4 commits into from
May 14, 2024
Merged

Add e2e tests for keyboard interactions in DataViews ListView #61648

Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
7764d8f
Implement e2e test for keyboard interactions on dataviews list view
oandregal May 14, 2024
21a87ee
Update test/e2e/specs/site-editor/dataviews-list-layout-keyboard.spec.js
oandregal May 14, 2024
f4b9d6d
Use toBeVisible instead of waitFor
oandregal May 14, 2024
90b54b9
Create pages for e2e tests
Mamaduka May 14, 2024
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
200 changes: 200 additions & 0 deletions test/e2e/specs/site-editor/dataviews-list-layout-keyboard.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,200 @@
/**
* WordPress dependencies
*/
const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );

test.describe( 'Dataviews List Layout', () => {
test.beforeAll( async ( { requestUtils } ) => {
// Activate a theme with permissions to access the site editor.
await requestUtils.activateTheme( 'emptytheme' );
await requestUtils.createPage( {
title: 'Privacy Policy',
status: 'publish',
} );
await requestUtils.createPage( {
title: 'Sample Page',
status: 'publish',
} );
} );

test.afterAll( async ( { requestUtils } ) => {
// Go back to the default theme.
await Promise.all( [
requestUtils.activateTheme( 'twentytwentyone' ),
requestUtils.deleteAllPages(),
] );
} );

test.beforeEach( async ( { admin, page } ) => {
// Go to the pages page, as it has the list layout enabled by default.
await admin.visitSiteEditor();
await page.getByRole( 'button', { name: 'Pages' } ).click();
} );

test( 'Items list is reachable via TAB', async ( { page } ) => {
// Start the sequence on the search component.
await page.getByRole( 'searchbox', { name: 'Search' } ).click();

// Tab until reaching the items list.
await page.keyboard.press( 'Tab' );
await expect(
page.getByRole( 'button', { name: 'Add filter' } )
).toBeFocused();

await page.keyboard.press( 'Tab' );
await expect(
page.getByRole( 'button', { name: 'Reset' } )
).toBeFocused();

await page.keyboard.press( 'Tab' );
await expect(
page.getByRole( 'button', { name: 'View options' } )
).toBeFocused();

// Make sure the items have loaded before reaching for the 1st item in the list.
await expect( page.getByRole( 'grid' ) ).toBeVisible();
await page.keyboard.press( 'Tab' );
await expect( page.getByLabel( 'Privacy Policy' ) ).toBeFocused();
} );

test( 'Navigates from items list to preview via TAB, and vice versa', async ( {
page,
} ) => {
// Start the sequence on the search component.
await page.getByRole( 'searchbox', { name: 'Search' } ).click();

// Tab until reaching the items list.
await page.keyboard.press( 'Tab' );
await page.keyboard.press( 'Tab' );
await page.keyboard.press( 'Tab' );

// Make sure the items have loaded before reaching for the 1st item in the list.
await expect( page.getByRole( 'grid' ) ).toBeVisible();
await page.keyboard.press( 'Tab' );
await expect( page.getByLabel( 'Privacy Policy' ) ).toBeFocused();

// Go to the preview.
await page.keyboard.press( 'Tab' );
await expect(
page
.getByRole( 'region', { name: 'Editor content' } )
.getByRole( 'button', { name: 'Edit' } )
).toBeFocused();

// Go back to the items list using SHIFT+TAB.
await page.keyboard.press( 'Shift+Tab' );
await expect( page.getByLabel( 'Privacy Policy' ) ).toBeFocused();
} );

test( 'Navigates the items list via UP/DOWN arrow keys', async ( {
page,
} ) => {
// Start the sequence on the search component.
await page.getByRole( 'searchbox', { name: 'Search' } ).click();

// Tab until reaching the items list.
await page.keyboard.press( 'Tab' );
await page.keyboard.press( 'Tab' );
await page.keyboard.press( 'Tab' );

// Make sure the items have loaded before reaching for the 1st item in the list.
await expect( page.getByRole( 'grid' ) ).toBeVisible();
await page.keyboard.press( 'Tab' );

// Use arrow up/down to move through the list.
await page.keyboard.press( 'ArrowDown' );
await expect( page.getByLabel( 'Sample Page' ) ).toBeFocused();

await page.keyboard.press( 'ArrowUp' );
await expect( page.getByLabel( 'Privacy Policy' ) ).toBeFocused();
} );

test( 'Actions are reachable via RIGHT/LEFT arrow keys', async ( {
page,
} ) => {
// Start the sequence on the search component.
await page.getByRole( 'searchbox', { name: 'Search' } ).click();

// Tab until reaching the items list.
await page.keyboard.press( 'Tab' );
await page.keyboard.press( 'Tab' );
await page.keyboard.press( 'Tab' );

// Make sure the items have loaded before reaching for the 1st item in the list.
await expect( page.getByRole( 'grid' ) ).toBeVisible();
await page.keyboard.press( 'Tab' );

// Use right/left arrow keys to move horizontally.
await page.keyboard.press( 'ArrowRight' );
await expect(
page
.getByRole( 'row', { name: 'Privacy Policy Edit Actions' } )
.getByLabel( 'Edit' )
).toBeFocused();

await page.keyboard.press( 'ArrowRight' );
await expect(
page
.getByRole( 'row', { name: 'Privacy Policy Edit Actions' } )
.getByLabel( 'Actions' )
).toBeFocused();

await page.keyboard.press( 'ArrowLeft' );
await expect(
page
.getByRole( 'row', { name: 'Privacy Policy Edit Actions' } )
.getByLabel( 'Edit' )
).toBeFocused();

await page.keyboard.press( 'ArrowLeft' );
await expect( page.getByLabel( 'Privacy Policy' ) ).toBeFocused();
} );

test( 'Navigates the list via UP/DOWN arrow keys from action buttons', async ( {
page,
} ) => {
// Start the sequence on the search component.
await page.getByRole( 'searchbox', { name: 'Search' } ).click();

// Tab until reaching the items list.
await page.keyboard.press( 'Tab' );
await page.keyboard.press( 'Tab' );
await page.keyboard.press( 'Tab' );

// Make sure the items have loaded before reaching for the 1st item in the list.
await expect( page.getByRole( 'grid' ) ).toBeVisible();
await page.keyboard.press( 'Tab' );

// Use arrow up/down to move through the list from the edit primary action button.
await page.keyboard.press( 'ArrowRight' );
await page.keyboard.press( 'ArrowDown' );
await expect(
page
.getByRole( 'row', { name: 'Sample Page Edit Actions' } )
.getByLabel( 'Edit' )
).toBeFocused();

await page.keyboard.press( 'ArrowUp' );
await expect(
page
.getByRole( 'row', { name: 'Privacy Policy Edit Actions' } )
.getByLabel( 'Edit' )
).toBeFocused();

// Use arrow up/down to move through the list from the all actions button.
await page.keyboard.press( 'ArrowRight' );
await page.keyboard.press( 'ArrowDown' );
await expect(
page
.getByRole( 'row', { name: 'Sample Page Edit Actions' } )
.getByLabel( 'Actions' )
).toBeFocused();

await page.keyboard.press( 'ArrowUp' );
await expect(
page
.getByRole( 'row', { name: 'Privacy Policy Edit Actions' } )
.getByLabel( 'Actions' )
).toBeFocused();
} );
} );
Loading