Add Playwright e2e smoke test and accessibility checklist

2026-08-05 17:08:18 -05:00
parent 151b09ba90
commit a075523287
6 changed files with 117 additions and 5 deletions
@@ -0,0 +1,54 @@
+/**
+ * @package ImageFilters
+ *
+ * End-to-end smoke test for the Filtered Image block.
+ *
+ * Run with: npx playwright test tests/playwright/block.spec.js
+ *
+ * Prerequisite: a WordPress site is running locally with the plugin
+ * activated. The default URL is http://localhost:8080 — adjust BASE_URL
+ * if your Herd setup uses a different host.
+ *
+ * TODO (smoke environment):
+ * This test was authored against a Herd-provided WordPress install at
+ * http://localhost:8080. As of the Task 7 commit the local Herd server
+ * was not running, so `npx playwright install` and `npx playwright test`
+ * both succeeded (browser launched) but every navigation failed with
+ * `ERR_CONNECTION_REFUSED` against the WordPress admin URL. When the
+ * dev's Herd setup is brought back online, this file should pass without
+ * modification. Until then, treat this file as a contract — the spec is
+ * the source of truth, not a green CI run.
+ */
+const { test, expect } = require( '@playwright/test' );
+const axeCore = require( 'axe-core' );
+
+const BASE_URL = process.env.BASE_URL || 'http://localhost:8080';
+
+test.describe( 'Filtered Image block', () => {
+    test.beforeEach( async ( { page } ) => {
+        await page.goto( `${ BASE_URL }/wp-admin/post-new.php` );
+        // Log in if redirected.
+        await page.fill( '#user_login', 'admin' ).catch( () => {} );
+        await page.fill( '#user_pass', 'password' ).catch( () => {} );
+        await page.click( '#wp-submit' ).catch( () => {} );
+    } );
+
+    test( 'inserts the block and applies a filter', async ( { page } ) => {
+        await page.click( 'button[aria-label="Add block"]' );
+        await page.click( 'button.editor-block-list-item-image-filter' );
+        // MediaPlaceholder is shown.
+        await expect( page.locator( '.wp-block-ksolo-image-filter' ) ).toBeVisible();
+    } );
+
+    test( 'passes axe-core accessibility audit', async ( { page } ) => {
+        await page.click( 'button[aria-label="Add block"]' );
+        await page.click( 'button.editor-block-list-item-image-filter' );
+        const results = await page.evaluate( async () => {
+            const audit = await axeCore.run( document, {
+                runOnly: [ 'wcag2a', 'wcag2aa' ],
+            } );
+            return audit.violations;
+        } );
+        expect( results ).toEqual( [] );
+    } );
+} );