Add test waiters

Author: lukemelia

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

@@ -2,8 +2,9 @@ import Component from '@glimmer/component';
 import { reads } from 'macro-decorators';
 import { cached, 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 {
@@ -58,16 +59,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 { isTesting } from '@embroider/macros';
 import { cached } from '@glimmer/tracking';
 
 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;
@@ -118,6 +119,7 @@ class ScrollView extends Component {
   _touchStartWasDecelerating = false;
   _touchStartWasDragging = false;
   _preventClickWhileDecelerating = false;
+  _measurementWaiterToken = null;
 
   @service('scroll-position-memory')
   memory;
@@ -481,29 +483,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() {
@@ -674,6 +681,19 @@ class ScrollView extends Component {
   _isScrollingForWaiter() {
     return !this._lastIsScrolling;
   }
+
+  _beginMeasurementWaiter() {
+    if (!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';