test: refactor, reduce using timeouts

test/accessibility.test.js

@@ -1,5 +1,5 @@
 import { expect } from '@esm-bundle/chai';
-import { fixtureSync } from '@open-wc/testing-helpers';
+import { fixtureSync, nextFrame } from '@open-wc/testing-helpers';
 import { flushGrid } from './helpers.js';
 import '../vaadin-grid.js';
 import '../vaadin-grid-column-group.js';
@@ -194,17 +194,14 @@ describe('accessibility', () => {
         expect(grid.$.table.getAttribute('aria-colcount')).to.equal('2');
       });
 
-      it('should update aria-colcount when column is added', (done) => {
+      it('should update aria-colcount when column is added', async () => {
         const template = document.createElement('template');
         template.innerHTML = '[[item]]';
         const column = document.createElement('vaadin-grid-column');
         column.appendChild(template);
         grid.appendChild(column);
-
-        setTimeout(() => {
-          expect(grid.$.table.getAttribute('aria-colcount')).to.equal('3');
-          done();
-        });
+        await nextFrame();
+        expect(grid.$.table.getAttribute('aria-colcount')).to.equal('3');
       });
     });
 

test/array-data-provider.test.js

@@ -1,7 +1,7 @@
 import { expect } from '@esm-bundle/chai';
 import sinon from 'sinon';
 import { fixtureSync, nextFrame } from '@open-wc/testing-helpers';
-import { click, flushGrid, getCellContent, getRows, getRowCells, listenOnce } from './helpers.js';
+import { click, flushGrid, getCellContent, getRows, getRowCells } from './helpers.js';
 import '../vaadin-grid.js';
 import '../vaadin-grid-filter.js';
 import '../vaadin-grid-sorter.js';
@@ -224,45 +224,28 @@ describe('invalid paths', () => {
   describe('invalid filters paths', () => {
     let filter;
 
-    beforeEach((done) => {
+    beforeEach(() => {
       filter = grid.querySelector('vaadin-grid-filter');
-      listenOnce(grid, 'filter-changed', () => {
-        done();
-      });
       filter.path = '';
+      filter._debouncerFilterChanged.flush();
     });
 
-    it('should warn about invalid path with undefined parent property', (done) => {
-      listenOnce(filter, 'filter-changed', () => {
-        setTimeout(() => {
-          expect(console.warn.called).to.be.true;
-          done();
-        });
-      });
-
+    it('should warn about invalid path with undefined parent property', () => {
       filter.path = 'foo.bar';
+      filter._debouncerFilterChanged.flush();
+      expect(console.warn.called).to.be.true;
     });
 
-    it('should not warn about undefined values with defined parent property', (done) => {
-      listenOnce(filter, 'filter-changed', () => {
-        setTimeout(() => {
-          expect(console.warn.called).to.be.false;
-          done();
-        });
-      });
-
+    it('should not warn about undefined values with defined parent property', () => {
       filter.path = 'name.foo';
+      filter._debouncerFilterChanged.flush();
+      expect(console.warn.called).to.be.false;
     });
 
-    it('should not warn about invalid path without dots', (done) => {
-      listenOnce(filter, 'filter-changed', () => {
-        setTimeout(() => {
-          expect(console.warn.called).to.be.false;
-          done();
-        });
-      });
-
+    it('should not warn about invalid path without dots', () => {
       filter.path = 'foobar';
+      filter._debouncerFilterChanged.flush();
+      expect(console.warn.called).to.be.false;
     });
   });
 });

test/basic.test.js

@@ -9,7 +9,6 @@ import {
   getCellContent,
   getFirstVisibleItem,
   infiniteDataProvider,
-  listenOnce,
   scrollToEnd
 } from './helpers.js';
 import '@polymer/iron-list/iron-list.js';
@@ -68,14 +67,11 @@ describe('basic features', () => {
     });
   });
 
-  it('should notify `size` property', (done) => {
-    expect(grid.size).not.equal(10);
-
-    listenOnce(grid, 'size-changed', () => {
-      expect(grid.size).equal(10);
-      done();
-    });
+  it('should notify `size` property', () => {
+    const spy = sinon.spy();
+    grid.addEventListener('size-changed', spy);
     grid.size = 10;
+    expect(spy.calledOnce).to.be.true;
   });
 
   it('should not warn on init', (done) => {

test/class-name-generator.test.js

@@ -1,6 +1,6 @@
 import { expect } from '@esm-bundle/chai';
 import sinon from 'sinon';
-import { fixtureSync } from '@open-wc/testing-helpers';
+import { fixtureSync, nextFrame } from '@open-wc/testing-helpers';
 import { flushGrid, getContainerCell, getRows, infiniteDataProvider, scrollToEnd } from './helpers.js';
 import '../vaadin-grid.js';
 
@@ -55,13 +55,11 @@ describe('class name generator', () => {
     assertClassList(getContainerCell(grid.$.items, 10, 0), ['10', 'foo10', 'col0']);
   });
 
-  it('should be called for details cell with undefined column', (done) => {
+  it('should be called for details cell with undefined column', async () => {
     grid.rowDetailsRenderer = () => {};
     grid.cellClassNameGenerator = (column, model) => model.index + ' ' + column;
-    requestAnimationFrame(() => {
-      assertClassList(getContainerCell(grid.$.items, 0, 2), ['0', 'undefined']);
-      done();
-    });
+    await nextFrame();
+    assertClassList(getContainerCell(grid.$.items, 0, 2), ['0', 'undefined']);
   });
 
   it('should add classes when loading new items', function (done) {

test/column-auto-width.test.js

@@ -1,6 +1,6 @@
 import { expect } from '@esm-bundle/chai';
 import sinon from 'sinon';
-import { fixtureSync, oneEvent } from '@open-wc/testing-helpers';
+import { fixtureSync, nextFrame, oneEvent } from '@open-wc/testing-helpers';
 import { flushGrid } from './helpers.js';
 import '../vaadin-grid.js';
 import '../vaadin-grid-tree-column.js';
@@ -35,6 +35,14 @@ describe('column auto-width', function () {
     }
   }
 
+  function recalculateWidths() {
+    return new Promise((resolve) => {
+      whenColumnWidthsCalculated(() => {
+        resolve();
+      });
+    });
+  }
+
   beforeEach(async () => {
     grid = fixtureSync(`
       <vaadin-grid style="width: 600px; height: 200px;" hidden>
@@ -52,56 +60,48 @@ describe('column auto-width', function () {
     await oneEvent(grid, 'animationend');
   });
 
-  it('should have correct column widths when items are set', (done) => {
+  it('should have correct column widths when items are set', async () => {
     grid.items = testItems;
 
-    whenColumnWidthsCalculated(() => {
-      expectColumnWidthsToBeOk(columns);
-      done();
-    });
+    await recalculateWidths();
+    expectColumnWidthsToBeOk(columns);
   });
 
-  it('should have correct column widths when the grid is visually scaled', (done) => {
+  it('should have correct column widths when the grid is visually scaled', async () => {
     grid.style.transform = 'scale(0.5)';
     grid.items = testItems;
 
-    whenColumnWidthsCalculated(() => {
-      expectColumnWidthsToBeOk(columns);
-      done();
-    });
+    await recalculateWidths();
+    expectColumnWidthsToBeOk(columns);
   });
 
-  it('should have correct column widths when using lazy dataProvider', (done) => {
+  it('should have correct column widths when using lazy dataProvider', async () => {
     grid.dataProvider = (params, callback) => {
       requestAnimationFrame(() => {
         callback(testItems.slice(0, params.pageSize), testItems.length);
       });
     };
     spy.resetHistory();
     expect(grid._recalculateColumnWidths.called).to.be.false;
-    whenColumnWidthsCalculated(() => {
-      expectColumnWidthsToBeOk(columns);
-      done();
-    });
+    await recalculateWidths();
+    expectColumnWidthsToBeOk(columns);
   });
 
-  it('should have correct column widths once visible', (done) => {
+  it('should have correct column widths once visible', async () => {
     grid.hidden = true;
     grid.items = testItems;
 
-    requestAnimationFrame(() => {
-      grid.hidden = false;
+    await nextFrame();
+    grid.hidden = false;
 
-      spy.resetHistory();
-      expect(grid._recalculateColumnWidths.called).to.be.false;
-      whenColumnWidthsCalculated(() => {
-        expectColumnWidthsToBeOk(columns);
-        done();
-      });
-    });
+    spy.resetHistory();
+    expect(grid._recalculateColumnWidths.called).to.be.false;
+
+    await recalculateWidths();
+    expectColumnWidthsToBeOk(columns);
   });
 
-  it('should have correct column widths when using renderers', (done) => {
+  it('should have correct column widths when using renderers', async () => {
     columns[0].renderer = function (root, column, model) {
       root.textContent = model.index;
     };
@@ -110,10 +110,8 @@ describe('column auto-width', function () {
     };
     grid.items = testItems;
 
-    whenColumnWidthsCalculated(() => {
-      expectColumnWidthsToBeOk(columns, [42, 62, 84, 107]);
-      done();
-    });
+    await recalculateWidths();
+    expectColumnWidthsToBeOk(columns, [42, 62, 84, 107]);
   });
 });
 

test/column-reordering.test.js

@@ -11,7 +11,6 @@ import {
   getRows,
   getRowCells,
   infiniteDataProvider,
-  listenOnce,
   makeSoloTouchEvent
 } from './helpers.js';
 import '../vaadin-grid.js';
@@ -179,23 +178,31 @@ describe('reordering simple grid', () => {
     expect(e.defaultPrevented).to.be.false;
   });
 
-  it('should start reordering after 300ms after touchstart', (done) => {
-    const rect = headerContent[0].getBoundingClientRect();
-    makeSoloTouchEvent('touchstart', { x: rect.left, y: rect.top }, headerContent[0]);
-    setTimeout(() => {
+  describe('touch gesture delay', () => {
+    let clock;
+
+    beforeEach(() => {
+      clock = sinon.useFakeTimers();
+    });
+
+    afterEach(() => {
+      clock.restore();
+    });
+
+    it('should start reordering after 300ms after touchstart', () => {
+      const rect = headerContent[0].getBoundingClientRect();
+      makeSoloTouchEvent('touchstart', { x: rect.left, y: rect.top }, headerContent[0]);
+      clock.tick(500);
       expect(grid.hasAttribute('reordering')).to.be.true;
-      done();
-    }, 500);
-  });
+    });
 
-  it('should not start reordering after 300ms after touchstart', (done) => {
-    const rect = headerContent[0].getBoundingClientRect();
-    makeSoloTouchEvent('touchstart', { x: rect.left, y: rect.top }, headerContent[0]);
-    makeSoloTouchEvent('touchend', { x: 0, y: 0 }, headerContent[0]);
-    setTimeout(() => {
+    it('should not start reordering after 300ms after touchend', () => {
+      const rect = headerContent[0].getBoundingClientRect();
+      makeSoloTouchEvent('touchstart', { x: rect.left, y: rect.top }, headerContent[0]);
+      makeSoloTouchEvent('touchend', { x: 0, y: 0 }, headerContent[0]);
+      clock.tick(500);
       expect(grid.hasAttribute('reordering')).to.be.false;
-      done();
-    }, 500);
+    });
   });
 
   it('should not start reordering on resize handle move', () => {
@@ -292,13 +299,13 @@ describe('reordering simple grid', () => {
       expect(calls.length).to.equal(columnCount);
     });
 
-    it('should fire `column-reorder` event with columns', (done) => {
-      listenOnce(grid, 'column-reorder', (e) => {
-        expect(e.detail.columns.map((column) => column.getAttribute('index'))).to.eql(['2', '1', '3', '4']);
-        done();
-      });
-
+    it('should fire `column-reorder` event with columns', () => {
+      const spy = sinon.spy();
+      grid.addEventListener('column-reorder', spy);
       dragAndDropOver(headerContent[0], headerContent[1]);
+      expect(spy.calledOnce).to.be.true;
+      const e = spy.firstCall.args[0];
+      expect(e.detail.columns.map((column) => column.getAttribute('index'))).to.eql(['2', '1', '3', '4']);
     });
   });
 

test/helpers.js

@@ -286,3 +286,7 @@ export const fire = (type, detail, options) => {
   node.dispatchEvent(event);
   return event;
 };
+
+export const isIOS =
+  (/iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream) ||
+  (navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1);