chore: upgrade playwright to 1.48.2

.github/workflows/unit-tests.yml

@@ -43,7 +43,7 @@ jobs:
         run: yarn --frozen-lockfile --no-progress --non-interactive
 
       - name: Install Playwright
-        run: npx playwright install-deps firefox
+        run: npx playwright install firefox --with-deps
 
       - name: Test
         run: yarn test:firefox
@@ -65,7 +65,7 @@ jobs:
         run: yarn --frozen-lockfile --no-progress --non-interactive
 
       - name: Install Playwright
-        run: npx playwright install-deps webkit
+        run: npx playwright install webkit --with-deps
 
       - name: Test
         run: yarn test:webkit

package.json

@@ -69,6 +69,9 @@
     "stylelint-config-vaadin": "^1.0.0-alpha.2",
     "typescript": "^5.5.2"
   },
+  "resolutions": {
+     "playwright": "^1.48.2"
+  },
   "lint-staged": {
     "*.{js,ts}": [
       "eslint --fix",

packages/app-layout/test/app-layout.common.js

@@ -6,29 +6,11 @@ import {
   makeSoloTouchEvent,
   nextFrame,
   nextRender,
+  nextResize,
   oneEvent,
 } from '@vaadin/testing-helpers';
 import sinon from 'sinon';
-
-/**
- * Resolves once the function is invoked on the given object.
- */
-function onceInvoked(object, functionName) {
-  return new Promise((resolve) => {
-    sinon.replace(object, functionName, (...args) => {
-      sinon.restore();
-      object[functionName](...args);
-      resolve();
-    });
-  });
-}
-
-/**
- * Resolves once the ResizeObserver has processed a resize.
- */
-async function onceResized(layout) {
-  await onceInvoked(layout, '_updateOffsetSize');
-}
+import './not-animated-styles.js';
 
 describe('vaadin-app-layout', () => {
   let layout;
@@ -108,12 +90,12 @@ describe('vaadin-app-layout', () => {
         navbarContent.style.height = '100px';
         navbarContent.setAttribute('slot', 'navbar');
         layout.appendChild(navbarContent);
-        await onceResized(layout);
+        await nextResize(layout);
         const initialOffset = parseInt(getComputedStyle(layout).getPropertyValue('padding-top'));
         expect(initialOffset).to.be.greaterThan(0);
         // Increase navbar content size and measure increase
         navbarContent.style.height = '200px';
-        await onceResized(layout);
+        await nextResize(layout);
         const updatedOffset = parseInt(getComputedStyle(layout).getPropertyValue('padding-top'));
         expect(updatedOffset).to.equal(initialOffset + 100);
       });
@@ -162,12 +144,12 @@ describe('vaadin-app-layout', () => {
         navbarContent.style.height = '100px';
         navbarContent.setAttribute('slot', 'navbar touch-optimized');
         layout.appendChild(navbarContent);
-        await onceResized(layout);
+        await nextResize(layout);
         const initialOffset = parseInt(getComputedStyle(layout).getPropertyValue('padding-bottom'));
         expect(initialOffset).to.be.greaterThan(0);
         // Increase navbar content size and measure increase
         navbarContent.style.height = '200px';
-        await onceResized(layout);
+        await nextResize(layout);
         const updatedOffset = parseInt(getComputedStyle(layout).getPropertyValue('padding-bottom'));
         expect(updatedOffset).to.equal(initialOffset + 100);
       });
@@ -196,7 +178,7 @@ describe('vaadin-app-layout', () => {
       drawer = layout.shadowRoot.querySelector('[part=drawer]');
       backdrop = layout.shadowRoot.querySelector('[part=backdrop]');
       // Wait for the initial resize observer callback
-      await onceResized(layout);
+      await nextResize(layout);
       await nextFrame();
     }
 
@@ -289,7 +271,7 @@ describe('vaadin-app-layout', () => {
 
       it('should only update offset size once during the drawer transition', async () => {
         layout.primarySection = 'drawer';
-        await onceResized(layout);
+        await nextResize(layout);
         await nextRender();
 
         layout.style.setProperty('--vaadin-app-layout-transition', '100ms');

packages/app-layout/test/not-animated-styles.js

@@ -0,0 +1,10 @@
+import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+
+registerStyles(
+  'vaadin-app-layout',
+  css`
+    :host {
+      transition: none !important;
+    }
+  `,
+);

packages/avatar-group/test/avatar-group.common.js

@@ -5,32 +5,13 @@ import {
   fixtureSync,
   nextFrame,
   nextRender,
+  nextResize,
   oneEvent,
   spaceKeyDown,
   tabKeyDown,
 } from '@vaadin/testing-helpers';
 import sinon from 'sinon';
 
-/**
- * Resolves once the function is invoked on the given object.
- */
-function onceInvoked(object, functionName) {
-  return new Promise((resolve) => {
-    sinon.replace(object, functionName, (...args) => {
-      sinon.restore();
-      object[functionName](...args);
-      resolve();
-    });
-  });
-}
-
-/**
- * Resolves once the ResizeObserver in AvatarGroup has processed a resize.
- */
-async function onceResized(group) {
-  await onceInvoked(group, '__setItemsInView');
-}
-
 describe('avatar-group', () => {
   let group;
 
@@ -190,15 +171,15 @@ describe('avatar-group', () => {
 
       it('should consider element width when maxItemsVisible is set', async () => {
         group.style.width = '100px';
-        await onceResized(group);
+        await nextResize(group);
 
         const items = group.querySelectorAll('vaadin-avatar');
         expect(items.length).to.equal(3);
       });
 
       it('should set abbr property correctly if maxItemsVisible and width are set', async () => {
         group.style.width = '100px';
-        await onceResized(group);
+        await nextResize(group);
 
         const overflow = group._overflow;
         expect(overflow.abbr).to.equal('+3');
@@ -218,7 +199,7 @@ describe('avatar-group', () => {
 
     it('should render avatars to fit width on resize', async () => {
       group.style.width = '110px';
-      await onceResized(group);
+      await nextResize(group);
       const items = group.querySelectorAll('vaadin-avatar');
       expect(items.length).to.equal(3);
       expect(overflow.abbr).to.equal('+3');
@@ -227,27 +208,27 @@ describe('avatar-group', () => {
     it('should always show at least two avatars', async () => {
       group.items = group.items.slice(0, 2);
       group.style.width = '50px';
-      await onceResized(group);
+      await nextResize(group);
       const items = group.querySelectorAll('vaadin-avatar:not([hidden])');
       expect(items.length).to.equal(2);
     });
 
     it('should not show overlay with only one avatar', async () => {
       group.style.width = '170px';
-      await onceResized(group);
+      await nextResize(group);
       expect(overflow.hasAttribute('hidden')).to.be.true;
     });
 
     it('should re-render avatars on items change', async () => {
       group.style.width = '110px';
       group.items = group.items.slice(0, 2);
-      await onceResized(group);
+      await nextResize(group);
       expect(overflow.hasAttribute('hidden')).to.be.true;
     });
 
     it('should render avatars in the menu items', async () => {
       group.style.width = '110px';
-      await onceResized(group);
+      await nextResize(group);
 
       overflow.click();
       await oneEvent(overlay, 'vaadin-overlay-open');
@@ -258,27 +239,27 @@ describe('avatar-group', () => {
 
     it('should re-render overflowing avatars on resize', async () => {
       group.style.width = '110px';
-      await onceResized(group);
+      await nextResize(group);
 
       overflow.click();
       await oneEvent(overlay, 'vaadin-overlay-open');
 
       group.style.width = '75px';
-      await onceResized(group);
+      await nextResize(group);
 
       const items = overlay.querySelectorAll('vaadin-avatar-group-menu-item');
       expect(items.length).to.equal(4);
     });
 
     it('should close overlay on resize when all avatars fit', async () => {
       group.style.width = '110px';
-      await onceResized(group);
+      await nextResize(group);
 
       overflow.click();
       await oneEvent(overlay, 'vaadin-overlay-open');
 
       group.style.width = '';
-      await onceResized(group);
+      await nextResize(group);
 
       expect(overlay.opened).to.be.false;
     });

packages/board/test/helpers.js

@@ -1,28 +1,8 @@
-import sinon from 'sinon';
-
-/**
- * Resolves once the function is invoked on the given object.
- */
-function onceInvoked(object, functionName) {
-  return new Promise((resolve) => {
-    const stub = sinon.stub(object, functionName).callsFake((...args) => {
-      stub.restore();
-      object[functionName](...args);
-      resolve();
-    });
-  });
-}
-
-/**
- * Resolves once the ResizeObserver in BoardRow has processed a resize.
- */
-export async function onceResized(boardRow) {
-  await onceInvoked(boardRow, '_onResize');
-}
+import { nextResize } from '@vaadin/testing-helpers';
 
 /**
  * Resolves once the ResizeObserver in all the BoardRows has processed a resize.
  */
 export function allResized(boardRows) {
-  return Promise.all(boardRows.map((boardRow) => onceResized(boardRow)));
+  return Promise.all(boardRows.map((boardRow) => nextResize(boardRow)));
 }

packages/board/test/redraw.test.js

@@ -1,7 +1,7 @@
 import { expect } from '@vaadin/chai-plugins';
-import { aTimeout, fixtureSync } from '@vaadin/testing-helpers';
+import { aTimeout, fixtureSync, nextResize } from '@vaadin/testing-helpers';
 import '../vaadin-board.js';
-import { allResized, onceResized } from './helpers.js';
+import { allResized } from './helpers.js';
 
 describe('redraw', () => {
   describe('board', () => {
@@ -19,7 +19,7 @@ describe('redraw', () => {
         </vaadin-board>
       `);
       row = board.firstElementChild;
-      await onceResized(row);
+      await nextResize(row);
     });
 
     it('should trigger layout after board style is changed', () => {
@@ -49,7 +49,7 @@ describe('redraw', () => {
           <div>top D</div>
         </vaadin-board-row>
       `);
-      await onceResized(row);
+      await nextResize(row);
     });
 
     it('should trigger layout after board row style is changed', () => {
@@ -85,7 +85,7 @@ describe('redraw', () => {
       `);
       row = board.querySelector('#nested');
 
-      await onceResized(row);
+      await nextResize(row);
     });
 
     it('should trigger layout for nested rows after board style is changed', () => {
@@ -199,7 +199,7 @@ describe('redraw', () => {
       expect(first.className).to.equal('');
 
       container.style.width = '1001px';
-      await onceResized(first);
+      await nextResize(first);
       expect(first.className).to.equal('large');
     });
 

packages/charts/test/chart-element.test.js

@@ -1,29 +1,8 @@
 import { expect } from '@vaadin/chai-plugins';
-import { aTimeout, fixtureSync, nextFrame, nextRender, oneEvent } from '@vaadin/testing-helpers';
+import { aTimeout, fixtureSync, nextFrame, nextRender, nextResize, oneEvent } from '@vaadin/testing-helpers';
 import sinon from 'sinon';
 import '../vaadin-chart.js';
 
-/**
- * Resolves once the function is invoked on the given object.
- */
-function onceInvoked(object, functionName) {
-  return new Promise((resolve) => {
-    sinon.replace(object, functionName, (...args) => {
-      sinon.restore();
-      object[functionName](...args);
-      resolve();
-    });
-  });
-}
-
-/**
- * Resolves once the ResizeObserver in AvatarGroup has processed a resize.
- */
-async function onceResized(el) {
-  // Wait for the _onResize function to be invoked by the ResizeObserver
-  await onceInvoked(el, '_onResize');
-}
-
 describe('vaadin-chart', () => {
   describe('custom element definition', () => {
     let chart, tagName;
@@ -346,7 +325,7 @@ describe('vaadin-chart', () => {
       expect(charts[1].configuration.chartWidth).to.be.equal(500);
 
       layout.style.width = '500px';
-      await onceResized(charts[0]);
+      await nextResize(charts[0]);
 
       expect(layout.getBoundingClientRect().width).to.be.equal(500);
       expect(charts[0].configuration.chartWidth).to.be.equal(250);
@@ -359,7 +338,7 @@ describe('vaadin-chart', () => {
       expect(charts[1].configuration.chartHeight).to.be.equal(300);
 
       layout.style.height = '200px';
-      await onceResized(charts[0]);
+      await nextResize(charts[0]);
 
       expect(layout.getBoundingClientRect().height).to.be.equal(200);
       expect(charts[0].configuration.chartHeight).to.be.equal(200);

packages/combo-box/test/interactions.common.js

@@ -250,7 +250,9 @@ describe('interactions', () => {
       comboBox.open();
       comboBox.close();
       await aTimeout(0);
+      await sendKeys({ down: 'Shift' });
       await sendKeys({ press: 'Tab' });
+      await sendKeys({ up: 'Shift' });
       expect(input.inputMode).to.equal('');
     });
   });

packages/combo-box/test/keyboard.common.js

@@ -126,10 +126,12 @@ describe('keyboard', () => {
       expect(getFocusedIndex()).to.equal(0);
     });
 
-    it('should tab to the next focusable', async () => {
+    it('should tab to the prev focusable', async () => {
+      await sendKeys({ down: 'Shift' });
       await sendKeys({ press: 'Tab' });
+      await sendKeys({ up: 'Shift' });
 
-      expect(document.activeElement).to.equal(document.body);
+      expect(document.activeElement).to.be.oneOf([document.body, document.documentElement]);
     });
 
     describe('focusable items content', () => {