test: replace onceResized with nextResize (#8387) (#8393)

vaadin · Dec 23, 2024 · 5ec75b7 · 5ec75b7
1 parent 5740425
commit 5ec75b7
Show file tree

Hide file tree

Showing 21 changed files with 139 additions and 376 deletions.
diff --git a/packages/app-layout/test/app-layout.test.js b/packages/app-layout/test/app-layout.test.js
@@ -6,31 +6,13 @@ import {
   makeSoloTouchEvent,
   nextFrame,
   nextRender,
+  nextResize,
   oneEvent,
 } from '@vaadin/testing-helpers';
 import sinon from 'sinon';
 import '../vaadin-app-layout.js';
 import '../vaadin-drawer-toggle.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 has processed a resize.
- */
-async function onceResized(layout) {
-  await onceInvoked(layout, '_updateOffsetSize');
-}
+import './not-animated-styles.js';
 
 describe('vaadin-app-layout', () => {
   let layout;
@@ -110,12 +92,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);
       });
@@ -164,12 +146,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);
       });
@@ -198,7 +180,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();
     }
 
@@ -291,7 +273,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');

diff --git a/packages/app-layout/test/not-animated-styles.js b/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;
+    }
+  `,
+);
diff --git a/packages/avatar-group/test/avatar-group.test.js b/packages/avatar-group/test/avatar-group.test.js
@@ -4,33 +4,14 @@ import {
   escKeyDown,
   fixtureSync,
   nextRender,
+  nextResize,
   oneEvent,
   spaceKeyDown,
   tabKeyDown,
 } from '@vaadin/testing-helpers';
 import sinon from 'sinon';
 import '../vaadin-avatar-group.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(group) {
-  await onceInvoked(group, '__setItemsInView');
-}
-
 describe('avatar-group', () => {
   let group;
 
@@ -189,15 +170,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');
@@ -217,7 +198,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');
@@ -226,27 +207,27 @@ describe('avatar-group', () => {
     it('should always show at least two avatars', async () => {
       group.set('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');
@@ -257,27 +238,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;
     });

diff --git a/packages/board/test/helpers.js b/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)));
 }
diff --git a/packages/board/test/redraw.test.js b/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');
     });
 

diff --git a/packages/charts/test/chart-element.test.js b/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);