diff --git a/tests/e2e/admin-ui-smoke.spec.js b/tests/e2e/admin-ui-smoke.spec.js new file mode 100644 index 000000000..ebf7902b2 --- /dev/null +++ b/tests/e2e/admin-ui-smoke.spec.js @@ -0,0 +1,130 @@ +/** + * WordPress dependencies + */ +import { test, expect } from '@wordpress/e2e-test-utils-playwright'; + +/** + * Admin UI smoke test for the Stream plugin. + * + * Loads the main Stream admin screens and asserts that core + * jQuery-dependent widgets render and that no uncaught JS errors + * are emitted. Intended to catch regressions from upstream jQuery, + * jQuery UI, or select2 version bumps that the unit / integration + * suites do not exercise. + */ + +const ADMIN = 'http://stream.wpenv.net/wp-admin'; + +test.describe.configure( { mode: 'serial' } ); + +let page; +const consoleErrors = []; +const pageErrors = []; + +test.beforeAll( async ( { browser } ) => { + page = await browser.newPage(); + + page.on( 'console', ( msg ) => { + if ( msg.type() === 'error' ) { + consoleErrors.push( msg.text() ); + } + } ); + page.on( 'pageerror', ( err ) => { + pageErrors.push( err.message ); + } ); + + // The setup fixture deactivates Stream network-wide before the suite. + // Reactivate it so the Stream admin pages are reachable. + await page.goto( `${ ADMIN }/network/plugins.php` ); + const activate = page.getByLabel( 'Network Activate Stream' ); + if ( await activate.isVisible() ) { + // eslint-disable-next-line no-console + console.log( 'Activating Stream for admin UI smoke tests.' ); + await activate.click(); + } +} ); + +test.afterAll( async () => { + // Deactivate Stream again so other suites start from the same state + // as the shared setup fixture. + await page.goto( `${ ADMIN }/network/plugins.php` ); + const deactivate = page.getByLabel( 'Network Deactivate Stream' ); + if ( await deactivate.isVisible() ) { + // eslint-disable-next-line no-console + console.log( 'Deactivating Stream after admin UI smoke tests.' ); + await deactivate.click(); + } + + // eslint-disable-next-line no-console + console.log( `Console errors captured: ${ consoleErrors.length }` ); + consoleErrors.forEach( ( e, i ) => { + // eslint-disable-next-line no-console + console.log( ` ${ i + 1 }. ${ e }` ); + } ); + + expect( + pageErrors, + `No uncaught JS errors expected on Stream admin UI, got: ${ pageErrors.join( + ' | ', + ) }`, + ).toEqual( [] ); +} ); + +test.describe( 'Admin UI smoke', () => { + test( 'exposes window.jQuery on the Stream records page', async () => { + await page.goto( `${ ADMIN }/admin.php?page=wp_stream` ); + const version = await page.evaluate( + () => window.jQuery && window.jQuery.fn && window.jQuery.fn.jquery, + ); + // eslint-disable-next-line no-console + console.log( `window.jQuery.fn.jquery = ${ version }` ); + expect( version ).toBeTruthy(); + } ); + + test( 'renders the records list table', async () => { + await page.goto( `${ ADMIN }/admin.php?page=wp_stream` ); + await expect( page.locator( 'table.wp-list-table' ) ).toBeVisible(); + } ); + + test( 'opens the jQuery UI date range picker', async () => { + await page.goto( `${ ADMIN }/admin.php?page=wp_stream` ); + + // The date inputs are revealed only when the "Custom" range is selected. + // The visible UI is a select2 widget on top of the real