Add test waiters

Author: lukemelia

addon/components/collection-scroll-view/collection-items/index.js

@@ -6,11 +6,14 @@ import identity from 'ember-collection/utils/identity';
 import { tracked } from '@glimmer/tracking';
 import { reads } from 'macro-decorators';
 
-function isElementInViewport (el) {
-    let rect = el.getBoundingClientRect();
-    let windowHeight = (window.innerHeight || document.documentElement.clientHeight);
-    return (rect.top > 0 && rect.top < windowHeight) ||
-      (rect.bottom > 0 && rect.bottom < windowHeight);
+function isElementInViewport(el) {
+  let rect = el.getBoundingClientRect();
+  let windowHeight =
+    window.innerHeight || document.documentElement.clientHeight;
+  return (
+    (rect.top > 0 && rect.top < windowHeight) ||
+    (rect.bottom > 0 && rect.bottom < windowHeight)
+  );
 }
 
 let scrollViewCollectionItemsCellCounter = 0;
@@ -164,7 +167,11 @@ export default class CollectionScrollViewCollectionItems extends Component {
       let itemIndex = newItems[i];
       let item = items[itemIndex];
       let itemKey = identity(item);
-      let style = cellLayout.formatItemStyle(itemIndex, clientWidth, clientHeight);
+      let style = cellLayout.formatItemStyle(
+        itemIndex,
+        clientWidth,
+        clientHeight
+      );
       const cell = new Cell(itemKey, item, itemIndex, style);
       cellMap[itemKey] = cell;
       cells.pushObject(cell);
@@ -179,7 +186,9 @@ export default class CollectionScrollViewCollectionItems extends Component {
       for (let i = 0; i < cells.length; i++) {
         const cell = cells[i];
         if (cell.needsReflow) {
-          let element = document.querySelector(`[data-collection-scroll-view-cell-container-id="${cell.containerId}"]`);
+          let element = document.querySelector(
+            `[data-collection-scroll-view-cell-container-id="${cell.containerId}"]`
+          );
           if (element && isElementInViewport(element)) {
             let display = element.style.display;
             element.style.display = 'none';

addon/components/collection-scroll-view/index.js

@@ -3,8 +3,9 @@ import { reads } from 'macro-decorators';
 import { cached } from 'ember-cached-decorator-polyfill';
 import { tracked } from '@glimmer/tracking';
 import { action } from '@ember/object';
-import { next, schedule } from '@ember/runloop';
+import { next, schedule, run } from '@ember/runloop';
 import { ref } from 'ember-ref-bucket';
+import { invokeResizeCallback } from 'yapp-scroll-view/utils/resize-observer-waiter';
 
 /* A component which integrates a ScrollView with ember-collection */
 export default class CollectionScrollView extends Component {
@@ -59,16 +60,24 @@ export default class CollectionScrollView extends Component {
 
   @action
   updateHeaderDimensions(scrollViewApi, entry) {
-    let isFirstMeasure = !this.headerDimensions;
-    this.headerDimensions = {
-      width: entry.contentRect.width,
-      height: entry.contentRect.height,
-    };
-
-    // If an initialScrollTop was set we need to apply it after the collections rows render
-    if (isFirstMeasure && this.args.initialScrollTop) {
-      next(scrollViewApi, scrollViewApi.scrollTo, this.args.initialScrollTop);
-    }
+    invokeResizeCallback(() => {
+      run(() => {
+        let isFirstMeasure = !this.headerDimensions;
+        this.headerDimensions = {
+          width: entry.contentRect.width,
+          height: entry.contentRect.height,
+        };
+
+        // If an initialScrollTop was set we need to apply it after the collections rows render
+        if (isFirstMeasure && this.args.initialScrollTop) {
+          next(
+            scrollViewApi,
+            scrollViewApi.scrollTo,
+            this.args.initialScrollTop
+          );
+        }
+      });
+    });
   }
 
   @action

addon/components/scroll-view.js

@@ -18,6 +18,7 @@ import Ember from 'ember';
 import { cached } from 'ember-cached-decorator-polyfill';
 
 let waiter = buildWaiter('yapp-scroll-view:scrolling');
+let measurementWaiter = buildWaiter('yapp-scroll-view:measurement');
 
 const FIELD_REGEXP = /input|textarea|select/i;
 const MEASUREMENT_INTERVAL = 250;
@@ -114,6 +115,7 @@ class ScrollView extends Component {
   _isScrolling = false;
   _touchStartTimeStamp = null;
   _lastIsScrolling = false;
+  _measurementWaiterToken = null;
 
   @service('scroll-position-memory')
   memory;
@@ -404,8 +406,8 @@ class ScrollView extends Component {
       }
     }
     let lastIsInViewport = true;
+    // eslint-disable-next-line no-constant-condition
     while (true) {
-      // eslint-disable-line no-constant-condition
       await timeout(
         lastIsInViewport
           ? MEASUREMENT_INTERVAL
@@ -419,29 +421,34 @@ class ScrollView extends Component {
   });
 
   measureClientAndContent() {
-    if (!this.scrollViewElement) {
-      return;
-    }
-    this._lastMeasurement = +new Date();
-    let { clientWidth, clientHeight, contentHeight } =
-      this.getCurrentClientAndContentSizes();
-
-    if (
-      !this.hasClientOrContentSizeChanged(
+    this._beginMeasurementWaiter();
+    try {
+      if (!this.scrollViewElement) {
+        return;
+      }
+      this._lastMeasurement = +new Date();
+      let { clientWidth, clientHeight, contentHeight } =
+        this.getCurrentClientAndContentSizes();
+
+      if (
+        !this.hasClientOrContentSizeChanged(
+          clientWidth,
+          clientHeight,
+          contentHeight
+        )
+      ) {
+        return;
+      }
+      join(
+        this,
+        this.applyNewMeasurements,
         clientWidth,
         clientHeight,
         contentHeight
-      )
-    ) {
-      return;
+      );
+    } finally {
+      this._endMeasurementWaiter();
     }
-    join(
-      this,
-      this.applyNewMeasurements,
-      clientWidth,
-      clientHeight,
-      contentHeight
-    );
   }
 
   getCurrentClientAndContentSizes() {
@@ -612,6 +619,19 @@ class ScrollView extends Component {
   _isScrollingForWaiter() {
     return !this._lastIsScrolling;
   }
+
+  _beginMeasurementWaiter() {
+    if (DEBUG && Ember.testing && !this._measurementWaiterToken) {
+      this._measurementWaiterToken = measurementWaiter.beginAsync();
+    }
+  }
+
+  _endMeasurementWaiter() {
+    if (this._measurementWaiterToken) {
+      measurementWaiter.endAsync(this._measurementWaiterToken);
+      this._measurementWaiterToken = null;
+    }
+  }
 }
 
 export default ScrollView;

addon/utils/resize-observer-waiter.js

@@ -0,0 +1,23 @@
+import { buildWaiter } from '@ember/test-waiters';
+
+const waiter = buildWaiter('yapp-scroll-view:resize-observer');
+
+export function invokeResizeCallback(callback) {
+  let token;
+
+  if (waiter && typeof waiter.beginAsync === 'function') {
+    token = waiter.beginAsync();
+  }
+
+  try {
+    return callback();
+  } finally {
+    if (token) {
+      waiter.endAsync(token);
+    }
+  }
+}
+
+export function _resizeObserverWaiterForTesting() {
+  return waiter;
+}

app/utils/resize-observer-waiter.js

@@ -0,0 +1,4 @@
+export {
+  invokeResizeCallback,
+  _resizeObserverWaiterForTesting,
+} from 'yapp-scroll-view/utils/resize-observer-waiter';

yarn.lock

@@ -5932,9 +5932,9 @@ can-symlink@^1.0.0:
     tmp "0.0.28"
 
 caniuse-lite@^1.0.30000844, caniuse-lite@^1.0.30001400, caniuse-lite@^1.0.30001517:
-  version "1.0.30001522"
-  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001522.tgz#44b87a406c901269adcdb834713e23582dd71856"
-  integrity sha512-TKiyTVZxJGhsTszLuzb+6vUZSjVOAhClszBr2Ta2k9IwtNBT/4dzmL6aywt0HCgEZlmwJzXJd8yNiob6HgwTRg==
+  version "1.0.30001751"
+  resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001751.tgz"
+  integrity sha512-A0QJhug0Ly64Ii3eIqHu5X51ebln3k4yTUkY1j8drqpWHVreg/VLijN48cZ1bYPiqOQuqpkIKnzr/Ul8V+p6Cw==
 
 capture-exit@^2.0.0:
   version "2.0.0"