fix(tools): migrate unit test runner from playwright to puppeteer

.changeset/big-dingos-live.md

@@ -0,0 +1,9 @@
+---
+"@patternfly/pfe-tools": major
+---
+
+**Test Runner**: migrate config from playwright-backed to puppeteer.
+
+Transitive dependencies have changed, so if your test files relied on playwright imports,
+you'll need to update them.
+

.github/workflows/tests.yml

@@ -98,7 +98,7 @@ jobs:
     name: SSR Tests (Playwright)
     runs-on: ubuntu-latest
     container:
-      image: mcr.microsoft.com/playwright:v1.48.2-noble
+      image: mcr.microsoft.com/playwright:v1.57.0-noble
     steps:
       - uses: actions/checkout@v4
       - uses: actions/setup-node@v4

core/pfe-core/controllers/internals-controller.ts

@@ -340,7 +340,7 @@ export class InternalsController implements ReactiveController, ARIAMixin {
 /** @see https://w3c.github.io/aria/#ref-for-dom-ariamixin-ariaactivedescendantelement-1 */
 declare global {
   // https://github.com/webcomponents-cg/community-protocols/pull/75
-  var _elementInternals: WeakMap<Element, ElementInternals>; // eslint-disable-line no-var
+  var _elementInternals: WeakMap<Element, ElementInternals>;
   interface ARIAMixin {
     ariaActiveDescendantElement: Element | null;
     ariaControlsElements: readonly Element[] | null;

core/pfe-core/controllers/slot-controller-server.ts

@@ -12,7 +12,7 @@ export class SlotController implements SlotControllerPublicAPI {
 
   static anonymousAttribute = 'ssr-hint-has-slotted-default' as const;
 
-  constructor(public host: ReactiveElement, ..._: SlotControllerArgs) {
+  constructor(public host: ReactiveElement, ..._args: SlotControllerArgs) {
     host.addController(this);
   }
 
@@ -24,7 +24,7 @@ export class SlotController implements SlotControllerPublicAPI {
         .map(x => x.trim());
   }
 
-  getSlotted<T extends Element = Element>(..._: (string | null)[]): T[] {
+  getSlotted<T extends Element = Element>(..._names: (string | null)[]): T[] {
     return [];
   }
 

core/pfe-core/controllers/test/combobox-controller.spec.ts

@@ -1,4 +1,4 @@
-import { expect, fixture, nextFrame } from '@open-wc/testing';
+import { expect, fixture } from '@open-wc/testing';
 import { sendKeys } from '@web/test-runner-commands';
 import { a11ySnapshot } from '@patternfly/pfe-tools/test/a11y-snapshot.js';
 
@@ -176,10 +176,9 @@ abstract class TestCombobox extends ReactiveElement {
             });
 
             it('collapses the listbox', async function() {
-              expect(await a11ySnapshot())
-                  .to.not.axContainRole('listbox')
-                  .and
-                  .to.axContainQuery({ role: 'combobox', expanded: false });
+              const snapshot = await a11ySnapshot();
+              expect(snapshot).to.not.axContainRole('listbox');
+              expect(snapshot).to.axContainQuery({ role: 'combobox', expanded: false });
             });
           });
         });
@@ -189,10 +188,9 @@ abstract class TestCombobox extends ReactiveElement {
           beforeEach(updateComplete);
 
           it('collapses the listbox', async function() {
-            expect(await a11ySnapshot())
-                .to.not.axContainRole('listbox')
-                .and
-                .to.axContainQuery({ role: 'combobox', expanded: false });
+            const snapshot = await a11ySnapshot();
+            expect(snapshot).to.not.axContainRole('listbox');
+            expect(snapshot).to.axContainQuery({ role: 'combobox', expanded: false });
           });
 
           it('maintains DOM focus on the combobox', async function() {

elements/pf-v5-accordion/test/pf-accordion.spec.ts

@@ -1,7 +1,6 @@
 import { expect, fixture, html, aTimeout, nextFrame } from '@open-wc/testing';
-import { sendKeys } from '@web/test-runner-commands';
 
-import { allUpdates, clickElementAtCenter } from '@patternfly/pfe-tools/test/utils.js';
+import { allUpdates, clickElementAtCenter, press as pressKey } from '@patternfly/pfe-tools/test/utils.js';
 import { a11ySnapshot, querySnapshot } from '@patternfly/pfe-tools/test/a11y-snapshot.js';
 
 // Import the element we're testing.
@@ -56,9 +55,9 @@ describe('<pf-v5-accordion>', function() {
     await allUpdates(element);
   }
 
-  function press(press: string) {
+  function press(key: string) {
     return async function() {
-      await sendKeys({ press });
+      await pressKey(key);
       await allUpdates(element);
     };
   }
@@ -391,14 +390,7 @@ describe('<pf-v5-accordion>', function() {
         describe('Tab', function() {
           beforeEach(press('Tab'));
           it('blurs out of the accordion', async function() {
-            expect(await a11ySnapshot()).to.have.axTreeFocusOn(document.body);
-          });
-        });
-
-        describe('Shift+Tab', function() {
-          beforeEach(press('Shift+Tab'));
-          it('blurs out of the accordion', async function() {
-            expect(await a11ySnapshot()).to.have.axTreeFocusOn(document.body);
+            expect(await a11ySnapshot()).to.not.axContainQuery({ role: 'button', focused: true });
           });
         });
 
@@ -479,7 +471,7 @@ describe('<pf-v5-accordion>', function() {
         describe('Tab', function() {
           beforeEach(press('Tab'));
           it('moves focus to the body', async function() {
-            expect(await a11ySnapshot()).to.have.axTreeFocusOn(document.body);
+            expect(await a11ySnapshot()).to.not.axContainQuery({ role: 'button', focused: true });
           });
         });
 
@@ -554,13 +546,6 @@ describe('<pf-v5-accordion>', function() {
           });
         });
 
-        describe('Shift+Tab', function() {
-          beforeEach(press('Shift+Tab'));
-          it('moves focus to the body', async function() {
-            expect(await a11ySnapshot()).to.have.axTreeFocusOn(document.body);
-          });
-        });
-
         describe('ArrowDown', function() {
           beforeEach(press('ArrowDown'));
           it('moves focus to the first header', async function() {
@@ -628,14 +613,8 @@ describe('<pf-v5-accordion>', function() {
 
             describe('Tab', function() {
               beforeEach(press('Tab'));
-              it('moves focus to the body', async function() {
-                expect(await a11ySnapshot()).to.have.axTreeFocusOn(document.body);
-              });
-              describe('Shift+Tab', function() {
-                beforeEach(press('Shift+Tab'));
-                it('keeps focus on the link in the first panel', async function() {
-                  expect(await a11ySnapshot()).to.have.axTreeFocusOn(panel1.querySelector('a'));
-                });
+              it('moves focus out of the accordion', async function() {
+                expect(await a11ySnapshot()).to.not.axContainQuery({ role: 'button', focused: true });
               });
             });
 
@@ -732,7 +711,9 @@ describe('<pf-v5-accordion>', function() {
           describe('Home', function() {
             beforeEach(press('Home'));
             it('moves focus to the first header', async function() {
-              expect(await a11ySnapshot()).to.have.axTreeFocusOn(header1);
+              expect(await a11ySnapshot())
+                  .axTreeFocusedNode.to.have
+                  .axName(header1.textContent!.trim());
             });
 
             it('does not open other panels', function() {
@@ -822,7 +803,7 @@ describe('<pf-v5-accordion>', function() {
           describe('Shift+Tab', function() {
             beforeEach(press('Shift+Tab'));
             it('moves focus to the body', async function() {
-              expect(await a11ySnapshot()).to.have.axTreeFocusOn(document.body);
+              expect(await a11ySnapshot()).to.not.axContainQuery({ role: 'button', focused: true });
             });
           });
 
@@ -1111,25 +1092,23 @@ describe('<pf-v5-accordion>', function() {
             });
             beforeEach(() => allUpdates(element));
             it('expands the first top-level pair', async function() {
-              const snapshot = await a11ySnapshot();
-              const expanded = snapshot?.children?.find(x => x.expanded);
-              expect(expanded?.name).to.equal(topLevelHeader1.textContent?.trim());
+              expect(await a11ySnapshot())
+                  .to.axContainQuery({ name: topLevelHeader1.textContent?.trim(), expanded: true });
               expect(topLevelHeader1.expanded).to.be.true;
               expect(topLevelPanel1.hasAttribute('expanded')).to.be.true;
               expect(topLevelPanel1.expanded).to.be.true;
             });
             it('collapses the second top-level pair', async function() {
-              const snapshot = await a11ySnapshot();
-              const header2 = querySnapshot(snapshot, { name: 'top-header-2' });
-              expect(header2).to.have.property('expanded', true);
+              expect(await a11ySnapshot())
+                  .to.axContainQuery({ name: 'top-header-2', expanded: true });
             });
             it('collapses the first nested pair', async function() {
-              const snapshot = await a11ySnapshot();
-              expect(querySnapshot(snapshot, { name: 'nest-1-header-1' })).to.not.have.property('expanded');
+              expect(await a11ySnapshot())
+                  .to.not.axContainQuery({ name: 'nest-1-header-1', expanded: true });
             });
             it('collapses the second nested pair', async function() {
-              const snapshot = await a11ySnapshot();
-              expect(querySnapshot(snapshot, { name: 'nest-2-header-1' })).to.not.have.property('expanded');
+              expect(await a11ySnapshot())
+                  .to.not.axContainQuery({ name: 'nest-2-header-1', expanded: true });
             });
           });
         });
@@ -1249,7 +1228,7 @@ describe('<pf-v5-accordion>', function() {
             beforeEach(press('Tab'));
             beforeEach(nextFrame);
             it('should move focus back to the body', async function() {
-              expect(await a11ySnapshot()).to.have.axTreeFocusOn(document.body);
+              expect(await a11ySnapshot()).to.not.axContainQuery({ role: 'button', focused: true });
             });
           });
         });

elements/pf-v5-alert/pf-v5-alert.ts

@@ -1,7 +1,6 @@
 import { LitElement, html, type TemplateResult } from 'lit';
 import { customElement } from 'lit/decorators/custom-element.js';
 import { property } from 'lit/decorators/property.js';
-import { classMap } from 'lit/directives/class-map.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 
 import { observes } from '@patternfly/pfe-core/decorators.js';