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

Restore patterns e2e tests #59024

Merged
merged 2 commits into from
Feb 23, 2024
Merged

Restore patterns e2e tests #59024

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
1389df0
Restore patterns e2e tests
ntsekouras Feb 14, 2024
05b7f5e
feedback
ntsekouras Feb 15, 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
11 changes: 5 additions & 6 deletions test/e2e/specs/site-editor/new-templates-list.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,15 +7,14 @@ test.describe( 'Templates', () => {
test.beforeAll( async ( { requestUtils } ) => {
await Promise.all( [
requestUtils.activateTheme( 'emptytheme' ),
requestUtils.setGutenbergExperiments( [ 'gutenberg-dataviews' ] ),
requestUtils.deleteAllTemplates( 'wp_template' ),
] );
} );
test.afterAll( async ( { requestUtils } ) => {
await Promise.all( [
requestUtils.activateTheme( 'twentytwentyone' ),
requestUtils.deleteAllTemplates( 'wp_template' ),
requestUtils.setGutenbergExperiments( [] ),
] );
await requestUtils.activateTheme( 'twentytwentyone' );
} );
test.afterEach( async ( { requestUtils } ) => {
await requestUtils.deleteAllTemplates( 'wp_template' );
} );
test( 'Sorting', async ( { admin, page } ) => {
await admin.visitSiteEditor( { path: '/wp_template/all' } );
Expand Down
98 changes: 31 additions & 67 deletions test/e2e/specs/site-editor/patterns.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,9 +13,7 @@ const test = base.extend( {
},
} );

// Skip these tests for now as we plan to adapt them to
// the new patterns UI.
test.describe.skip( 'Patterns', () => {
test.describe( 'Patterns', () => {
test.beforeAll( async ( { requestUtils } ) => {
await requestUtils.activateTheme( 'emptytheme' );
await requestUtils.deleteAllBlocks();
Expand All @@ -35,19 +33,14 @@ test.describe.skip( 'Patterns', () => {
admin,
patterns,
} ) => {
await admin.visitSiteEditor();

await patterns.navigation
.getByRole( 'button', { name: 'Patterns' } )
.click();

await admin.visitSiteEditor( { path: '/patterns' } );
await expect(
patterns.navigation.getByRole( 'heading', {
name: 'Patterns',
level: 1,
} )
).toBeVisible();
await expect( patterns.content ).toContainText( 'No patterns found.' );
await expect( patterns.content ).toContainText( 'No results' );

await patterns.navigation
.getByRole( 'button', { name: 'Create pattern' } )
Expand Down Expand Up @@ -101,7 +94,6 @@ test.describe.skip( 'Patterns', () => {
await patterns.navigation
.getByRole( 'button', { name: 'Back' } )
.click();
// TODO: await expect( page ).toHaveTitle( /^Patterns/ );

await expect(
patterns.navigation.getByRole( 'button', {
Expand All @@ -125,18 +117,19 @@ test.describe.skip( 'Patterns', () => {
level: 2,
} )
).toBeVisible();
await expect( patterns.list.getByRole( 'listitem' ) ).toHaveCount( 1 );
await expect( patterns.item ).toHaveCount( 1 );
await expect(
patterns.list
.getByRole( 'heading', { name: 'My pattern' } )
.getByRole( 'button', { name: 'My pattern', exact: true } )
patterns.itemsList.getByText( 'My pattern', {
Copy link
Member

Choose a reason for hiding this comment

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

Do we have a heading role for this text for accessibility?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

They are just divs.. I don't know if there is a better way to get them..

Copy link
Member

Choose a reason for hiding this comment

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

I think there should be a heading role or something similar for the data view so that screen readers know what the grid is about. This can be a follow-up accessibility task for the data views though!

exact: true,
} )
).toBeVisible();
} );

test( 'search and filter patterns', async ( {
admin,
requestUtils,
patterns,
page,
} ) => {
await Promise.all( [
requestUtils.createBlock( {
Expand All @@ -163,76 +156,46 @@ test.describe.skip( 'Patterns', () => {

await admin.visitSiteEditor( { path: '/patterns' } );

await expect( patterns.list.getByRole( 'listitem' ) ).toHaveCount( 3 );

await patterns.content
.getByRole( 'searchbox', { name: 'Search patterns' } )
.fill( 'footer' );
await expect( patterns.list.getByRole( 'listitem' ) ).toHaveCount( 2 );
await expect( patterns.item ).toHaveCount( 3 );
const searchBox = patterns.content.getByRole( 'searchbox', {
name: 'Search',
} );
await searchBox.fill( 'footer' );
await expect( patterns.item ).toHaveCount( 2 );
expect(
await patterns.list
.getByRole( 'listitem' )
.getByRole( 'heading' )
.allInnerTexts()
await patterns.item.getByRole( 'button' ).allInnerTexts()
).toEqual(
expect.arrayContaining( [ 'Unsynced footer', 'Synced footer' ] )
);

const searchBox = patterns.content.getByRole( 'searchbox', {
name: 'Search patterns',
} );

await searchBox.fill( 'no match' );
await expect( patterns.content ).toContainText( 'No patterns found.' );
await expect( patterns.content ).toContainText( 'No results' );

await patterns.content
.getByRole( 'button', { name: 'Reset search' } )
.getByRole( 'button', { name: 'Reset filters' } )
.click();
await expect( searchBox ).toHaveValue( '' );
await expect( patterns.list.getByRole( 'listitem' ) ).toHaveCount( 3 );

const syncFilter = patterns.content.getByRole( 'radiogroup', {
name: 'Filter by sync status',
} );
await expect(
syncFilter.getByRole( 'radio', { name: 'All' } )
).toBeChecked();
await expect( patterns.item ).toHaveCount( 3 );

await syncFilter
.getByRole( 'radio', { name: 'Synced', exact: true } )
await patterns.content
.getByRole( 'button', { name: 'Sync Status' } )
.click();
await expect( patterns.list.getByRole( 'listitem' ) ).toHaveCount( 1 );
await expect( patterns.list.getByRole( 'listitem' ) ).toContainText(
'Synced footer'
);
await page.getByRole( 'option', { name: /^Synced/ } ).click();

await expect( patterns.item ).toHaveCount( 1 );
await expect( patterns.item ).toContainText( 'Synced footer' );

await syncFilter.getByRole( 'radio', { name: 'Not synced' } ).click();
await expect( patterns.list.getByRole( 'listitem' ) ).toHaveCount( 2 );
await page.getByRole( 'option', { name: /^Not synced/ } ).click();
await expect( patterns.item ).toHaveCount( 2 );
expect(
await patterns.list
.getByRole( 'listitem' )
.getByRole( 'heading' )
.allInnerTexts()
await patterns.item.getByRole( 'button' ).allInnerTexts()
).toEqual(
expect.arrayContaining( [ 'Unsynced header', 'Unsynced footer' ] )
);

await searchBox.fill( 'footer' );
await expect( patterns.list.getByRole( 'listitem' ) ).toHaveCount( 1 );
await expect( patterns.list.getByRole( 'listitem' ) ).toContainText(
'Unsynced footer'
);

await syncFilter.getByRole( 'radio', { name: 'All' } ).click();
await expect( patterns.list.getByRole( 'listitem' ) ).toHaveCount( 2 );
expect(
await patterns.list
.getByRole( 'listitem' )
.getByRole( 'heading' )
.allInnerTexts()
).toEqual(
expect.arrayContaining( [ 'Unsynced footer', 'Synced footer' ] )
);
await expect( patterns.item ).toHaveCount( 1 );
await expect( patterns.item ).toContainText( 'Unsynced footer' );
} );
} );

Expand All @@ -249,6 +212,7 @@ class Patterns {
this.navigation = this.#page.getByRole( 'region', {
name: 'Navigation',
} );
this.list = this.content.getByRole( 'list' );
this.itemsList = this.content.locator( '.dataviews-view-grid' );
ntsekouras marked this conversation as resolved.
Show resolved Hide resolved
this.item = this.itemsList.locator( '.dataviews-view-grid__card' );
}
}
Loading