Enhance test and deal with page scale issues

Addepar · Jan 28, 2021 · 5d0904a · 5d0904a
1 parent eda08f2
commit 5d0904a
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 4 deletions.
diff --git a/addon-test-support/pages/ember-table.js b/addon-test-support/pages/ember-table.js
@@ -84,6 +84,23 @@ export default PageObject.extend({
     return overflow.offsetWidth - overflow.clientWidth;
   },
 
+  /**
+   * Returns the height of the visible portion of the footer
+   */
+  visibleFooterHeight() {
+    let footerCells = findElement(this, 'tfoot td', { multiple: true });
+
+    if (footerCells.length > 0) {
+      let firstFooterCellRect = footerCells[0].getBoundingClientRect();
+      let overflow = this.overflow();
+      let overflowRect = overflow.getBoundingClientRect();
+      let scale = overflow.offsetHeight / overflowRect.height;
+      return scale * (overflowRect.height - (firstFooterCellRect.y - overflowRect.y));
+    }
+
+    return 0;
+  },
+
   /**
    * Selects a row in the body
    *

diff --git a/addon/components/-private/scroll-indicators/component.js b/addon/components/-private/scroll-indicators/component.js
@@ -208,8 +208,9 @@ export default Component.extend({
     let footerCell = table.querySelector('tfoot td');
     if (footerCell) {
       let footerCellY = footerCell.getBoundingClientRect().y;
-      let overflowY = el.getBoundingClientRect().y;
-      visibleFooterHeight = overflowHeight - (footerCellY - overflowY);
+      let overflowRect = el.getBoundingClientRect();
+      let scale = overflowHeight / overflowRect.height;
+      visibleFooterHeight = scale * (overflowRect.height - (footerCellY - overflowRect.y));
     }
 
     this.setProperties({

diff --git a/tests/integration/components/scroll-indicators-test.js b/tests/integration/components/scroll-indicators-test.js
@@ -199,10 +199,34 @@ module('Integration | scroll indicators', function() {
 
       await generateTable(this, {
         rowCount: 100,
-        footerRowCount: 2,
+        footerRowCount: 10,
       });
 
-      assert.ok(isOffset('bottom', table.footer.height), 'bottom indicator is above footer');
+      // sanity check: footer rows are restricted to 50% of table height when
+      // scrolled to the top, so bottom rows are hidden
+      assert.ok(
+        table.visibleFooterHeight() < table.footer.height,
+        'part of footer is obscured before scrolling'
+      );
+
+      assert.ok(
+        isOffset('bottom', table.visibleFooterHeight()),
+        'bottom indicator is positioned above footer before scrolling'
+      );
+
+      // scroll _almost_ all the way down
+      let overflow = await table.overflow();
+      let maxScroll = overflow.scrollHeight - overflow.clientHeight;
+
+      // the `2` here is because qunit runs at 1/2 scale
+      await scrollTo('[data-test-ember-table-overflow]', 0, maxScroll - 2);
+
+      // all but the last pixel of the footer is now visible, so the bottom
+      // indicator needs to placed higher
+      assert.ok(
+        isOffset('bottom', table.footer.height - 1),
+        'bottom indicator is positioned above footer after scrolling'
+      );
     });
 
     test('negative table margins do not break scroll indicators', async function(assert) {