Skip to content

Site Editor: Add E2E coverage for view config extensibility #80577

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

Merged
jorgefilipecosta merged 2 commits into from
Jul 23, 2026
Merged

Site Editor: Add E2E coverage for view config extensibility #80577

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
552633e
Site Editor: Add E2E coverage for view config extensibility
jorgefilipecosta Jul 22, 2026
a59b86f
Site Editor: Harden view config extensibility E2E
jorgefilipecosta Jul 22, 2026
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
110 changes: 110 additions & 0 deletions packages/e2e-tests/plugins/view-config-extensibility.php
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,110 @@
<?php
/**
* Plugin Name: Gutenberg Test View Config Extensibility
* Plugin URI: https://github.com/WordPress/gutenberg
* Author: Gutenberg Team
*
* @package gutenberg-test-view-config-extensibility
*/

/**
* Customizes the Pages view configuration for end-to-end testing.
*
* @param Gutenberg_View_Config_Data $data The Pages view configuration.
* @return Gutenberg_View_Config_Data The customized configuration.
*/
function gutenberg_test_customize_page_view_config( $data ) {
$data->merge(
array(
'default_view' => array(
'type' => 'table',
'sort' => array(
'field' => 'date',
'direction' => 'desc',
),
),
'view_list' => array(
array(
'slug' => 'drafts',
'title' => 'In progress',
'view' => array(
'filters' => array(
array(
'field' => 'date',
'operator' => 'after',
'value' => '2018-01-01T00:00:00',
'isLocked' => true,
),
),
),
),
array(
'slug' => 'published-after-2020',
'title' => 'Published after 2020',
'view' => array(
'filters' => array(
array(
'field' => 'status',
'operator' => 'isAny',
'value' => 'publish',
'isLocked' => true,
),
array(
'field' => 'date',
'operator' => 'after',
'value' => '2020-12-31T23:59:59',
'isLocked' => true,
),
),
),
),
),
'form' => array(
'layout' => array( 'type' => 'regular' ),
),
),
1
);

$data->remove(
array(
'default_view' => array(
'fields' => array( 'author' ),
),
'view_list' => array( 'future' ),
),
1
);

$data->set(
array(
'default_layouts' => array(
'table' => array(
'layout' => array(
'styles' => array(
'status' => array(
'width' => '240px',
),
),
),
),
),
),
1
);

$data->replace(
array(
'form' => array(
'fields' => array( 'slug' ),
),
),
1
);

return $data;
}
add_filter(
'get_entity_view_config_postType_page',
'gutenberg_test_customize_page_view_config'
);
200 changes: 200 additions & 0 deletions test/e2e/specs/site-editor/view-config-extensibility.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' );

const PLUGIN_SLUG = 'gutenberg-test-view-config-extensibility';
const MATCHING_PAGE_TITLE = 'Published in 2021';
const NONMATCHING_PAGE_TITLE = 'Published in 2020';

test.describe( 'View config extensibility', () => {
test.beforeAll( async ( { requestUtils } ) => {
await Promise.all( [
requestUtils.activateTheme( 'emptytheme' ),
requestUtils.activatePlugin( PLUGIN_SLUG ),
requestUtils.resetPreferences(),
requestUtils.deleteAllPages(),
] );

await Promise.all( [
requestUtils.createPage( {
title: NONMATCHING_PAGE_TITLE,
status: 'publish',
date: '2020-01-01T12:00:00',
} ),
requestUtils.createPage( {
title: MATCHING_PAGE_TITLE,
status: 'publish',
date: '2021-01-01T12:00:00',
} ),
requestUtils.createPage( {
title: 'Draft Included',
status: 'draft',
date: '2019-01-01T12:00:00',
} ),
requestUtils.createPage( {
title: 'Draft Excluded',
status: 'draft',
date: '2017-01-01T12:00:00',
} ),
// Excluded from "Published after 2020" solely by its status, so
// it proves that view's status filter is applied. Its date must
// pass the view's after-2020 filter yet predate the newest
// published fixture, which the default view expects first.
requestUtils.createPage( {
title: 'Draft After 2020',
status: 'draft',
date: '2021-01-01T06:00:00',
} ),
] );
} );

test.afterAll( async ( { requestUtils } ) => {
await Promise.all( [
requestUtils.deactivatePlugin( PLUGIN_SLUG ),
requestUtils.resetPreferences(),
requestUtils.deleteAllPages(),
requestUtils.activateTheme( 'twentytwentyone' ),
] );
} );

test( 'applies the filtered configuration throughout the Pages UI', async ( {
admin,
page,
} ) => {
await admin.visitSiteEditor( { postType: 'page' } );

// The filtered view list reaches the Site Editor sidebar.
await expect(
page.getByRole( 'button', { name: 'Published', exact: true } )
).toBeVisible();
await expect(
page.getByRole( 'button', { name: 'In progress', exact: true } )
).toBeVisible();
await expect(
page.getByRole( 'button', {
name: 'Published after 2020',
exact: true,
} )
).toBeVisible();
await expect(
page.getByRole( 'button', { name: 'Drafts', exact: true } )
).toHaveCount( 0 );
await expect(
page.getByRole( 'button', { name: 'Scheduled', exact: true } )
).toHaveCount( 0 );
await expect(
page.getByRole( 'button', { name: 'Pending', exact: true } )
).toBeVisible();

// The default view and the only allowed layout reach DataViews.
const table = page.getByRole( 'table' );
await expect( table ).toBeVisible();
await expect(
page.getByRole( 'button', { name: 'Layout', exact: true } )
).toHaveCount( 0 );
await expect( table.getByRole( 'row' ).nth( 1 ) ).toHaveAccessibleName(
new RegExp( MATCHING_PAGE_TITLE )
);

const statusHeader = table.getByRole( 'columnheader', {
name: /Status/,
} );
await expect( statusHeader ).toBeVisible();
await expect(
table.getByRole( 'columnheader', { name: /Author/ } )
).toHaveCount( 0 );
await expect( statusHeader ).toHaveAttribute(
'style',
/width:\s*240px/
);

await page.getByRole( 'button', { name: 'View options' } ).click();
await expect( page.getByLabel( 'Sort by' ) ).toHaveValue( 'date' );
await expect(
page.getByRole( 'radio', { name: 'Sort descending' } )
).toBeChecked();
await page.keyboard.press( 'Escape' );

// A newly added view applies all of its custom filters.
await page
.getByRole( 'button', {
name: 'Published after 2020',
exact: true,
} )
.click();
await expect(
table.getByRole( 'row', {
name: new RegExp( MATCHING_PAGE_TITLE ),
} )
).toBeVisible();
await expect(
table.getByRole( 'row', {
name: new RegExp( NONMATCHING_PAGE_TITLE ),
} )
).toHaveCount( 0 );
await expect(
table.getByRole( 'row', { name: /Draft Included/ } )
).toHaveCount( 0 );
await expect(
table.getByRole( 'row', { name: /Draft Excluded/ } )
).toHaveCount( 0 );
// This page passes the date filter, so only the status filter
// excludes it.
await expect(
table.getByRole( 'row', { name: /Draft After 2020/ } )
).toHaveCount( 0 );

// The existing Drafts view keeps its status filter and gains the date filter.
await page
.getByRole( 'button', { name: 'In progress', exact: true } )
.click();
await expect(
table.getByRole( 'row', { name: /Draft Included/ } )
).toBeVisible();
await expect(
table.getByRole( 'row', { name: /Draft Excluded/ } )
).toHaveCount( 0 );
await expect(
table.getByRole( 'row', {
name: new RegExp( MATCHING_PAGE_TITLE ),
} )
).toHaveCount( 0 );
await expect(
table.getByRole( 'row', {
name: new RegExp( NONMATCHING_PAGE_TITLE ),
} )
).toHaveCount( 0 );

await page
.getByRole( 'button', { name: 'Published', exact: true } )
.click();
await expect(
table.getByRole( 'row', {
name: new RegExp( MATCHING_PAGE_TITLE ),
} )
).toBeVisible();

// The filtered form reaches the Quick Edit DataForm.
const matchingPageRow = table.getByRole( 'row', {
name: new RegExp( MATCHING_PAGE_TITLE ),
} );
await matchingPageRow
.getByRole( 'button', { name: 'Quick Edit' } )
.click();

const quickEditModal = page.locator(
'.dataviews-action-modal__quick-edit'
);
await expect( quickEditModal ).toBeVisible();
await expect(
quickEditModal.getByRole( 'textbox', { name: 'Link' } )
).toBeVisible();
await expect(
quickEditModal.getByRole( 'button', { name: 'Edit Slug' } )
).toHaveCount( 0 );
await expect(
quickEditModal.getByRole( 'button', { name: 'Edit Status' } )
).toHaveCount( 0 );
} );
} );
Loading