From 990c174f0efc7c7d03e88d9b624f01d58db91b5a Mon Sep 17 00:00:00 2001
From: Utkarsh Patel <itismeutkarsh@gmail.com>
Date: Wed, 13 May 2026 14:18:42 +0530
Subject: [PATCH] test(e2e): add admin UI smoke spec for jQuery-dependent
 widgets

Covers the Stream records list table, jQuery UI datepicker, select2
filter, Settings tab, and Alerts tab, and asserts that no uncaught JS
errors are emitted during navigation. Designed to catch regressions
from upstream jQuery, jQuery UI, or select2 version bumps that the
existing unit and integration suites do not exercise.
---
 tests/e2e/admin-ui-smoke.spec.js | 130 +++++++++++++++++++++++++++++++
 1 file changed, 130 insertions(+)
 create mode 100644 tests/e2e/admin-ui-smoke.spec.js

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 <select>, so set
+		// the value on the native element and dispatch the change event jQuery
+		// listens for.
+		await page.evaluate( () => {
+			const select = document.querySelector(
+				'select[name="date_predefined"]',
+			);
+			select.value = 'custom';
+			select.dispatchEvent( new Event( 'change', { bubbles: true } ) );
+		} );
+
+		const dateField = page.locator( 'input.date-picker.field-from' );
+		await expect( dateField ).toBeVisible();
+		await dateField.click();
+		await expect( page.locator( '#ui-datepicker-div' ) ).toBeVisible();
+	} );
+
+	test( 'opens a select2 dropdown', async () => {
+		await page.goto( `${ ADMIN }/admin.php?page=wp_stream` );
+		const select2 = page.locator( '.select2-selection' ).first();
+		await expect( select2 ).toBeVisible();
+		await select2.click();
+		await expect( page.locator( '.select2-dropdown' ) ).toBeVisible();
+		await page.keyboard.press( 'Escape' );
+	} );
+
+	test( 'loads the Settings tab', async () => {
+		await page.goto( `${ ADMIN }/admin.php?page=wp_stream_settings` );
+		await expect( page.locator( 'form' ).first() ).toBeVisible();
+	} );
+
+	test( 'loads the Alerts tab', async () => {
+		await page.goto( `${ ADMIN }/edit.php?post_type=wp_stream_alerts` );
+		const list = page.locator( '.wp-list-table' );
+		const empty = page.locator( '.no-items, .post-state' );
+		await expect( list.or( empty ).first() ).toBeVisible();
+	} );
+} );