Clean up tests ahead of offset fixes

addon-test-support/pages/-private/ember-table-header.js

@@ -29,18 +29,37 @@ const Header = PageObject.extend({
 
   /**
    * Retrieves selected header cell width.
+   *
+   * offsetWidth returns a rounded integer, and so can
+   * result in unreliable tests.
+   *
+   * @returns {number}
    */
   get width() {
     return findElement(this).offsetWidth;
   },
 
   /**
    * Retrieves selected header cell height.
+   *
+   * offsetHeight returns a rounded integer, and so can
+   * result in unreliable tests.
+   *
+   * @returns {number}
    */
   get height() {
     return findElement(this).offsetHeight;
   },
 
+  /**
+   * Retrieves the rendered width of the selected header cell.
+   *
+   * @returns {number}
+   */
+  get renderedWidth() {
+    return findElement(this).getBoundingClientRect().width;
+  },
+
   get isLeaf() {
     return findElement(this).dataset.testLeafHeader;
   },
@@ -59,27 +78,58 @@ const Header = PageObject.extend({
   contextMenu: triggerable('contextmenu'),
 
   /**
-   * Resizes this column by dragging right border several pixels.
+   * Resize the table header. This API isn't clear about if a logical
+   * or rendered size is being passed. It defers to the more explicit
+   * logicalResize which should probably be preferred in future use.
    */
   async resize(targetSize) {
-    let resizeHandle = findElement(this, '.et-header-resize-area');
+    await this.logicalResize(targetSize);
+  },
+
+  async logicalResize(targetSize) {
+    let renderedTargetSize =
+      targetSize * getScale(document.getElementById('ember-testing-container').firstElementChild);
+    await this.renderedResize(renderedTargetSize);
+  },
+
+  /**
+   * Resizes this column by dragging right border several pixels,
+   * unless the column is fixed right in quick case it drags left.
+   */
+  async renderedResize(targetSize) {
+    let resizeHandle = findElement(this, '[data-test-resize-handle]');
 
     if (!resizeHandle) {
       return;
     }
 
     let box = resizeHandle.getBoundingClientRect();
     let startX = (box.right + box.left) / 2;
-    let deltaX = (targetSize - this.width) / getScale(resizeHandle);
+    let y = box.top + (box.bottom - box.top) / 2;
+    let deltaX = targetSize - this.renderedWidth;
 
     if (this.isFixedRight) {
       deltaX = -deltaX;
     }
 
-    await mouseDown(resizeHandle, startX, resizeHandle.clientHeight / 2);
-    await mouseMove(resizeHandle, startX + 20, resizeHandle.clientHeight / 2);
-    await mouseMove(resizeHandle, startX + deltaX, resizeHandle.clientHeight / 2);
-    await mouseUp(resizeHandle, startX + deltaX, resizeHandle.clientHeight / 2);
+    let finalX = startX + deltaX;
+
+    await mouseDown(resizeHandle, startX, y);
+
+    /**
+     * Below a certain number of steps, Hammer (the gesture library
+     * which recognizes panning) will not pick up the pointermove
+     * events emitted by `mouseMove` before the gestrure completes.
+     *
+     * 5 seems a reasonable number.
+     */
+    let current = startX;
+    for (let steps = 5; steps > 0; steps--) {
+      await mouseMove(resizeHandle, current, y);
+      current = current + (finalX - current) / steps;
+    }
+    await mouseMove(resizeHandle, finalX, y);
+    await mouseUp(resizeHandle, finalX, y);
   },
 
   /**

addon-test-support/pages/ember-table.js

@@ -50,13 +50,23 @@ export default PageObject.extend({
 
   /**
    * Returns the table width.
+   *
+   * offsetWidth returns a rounded integer, and so can
+   * result in unreliable tests.
+   *
+   * @returns {number}
    */
   get width() {
     return findElement(this, 'table').offsetWidth;
   },
 
   /**
    * Returns the table container width.
+   *
+   * offsetWidth returns a rounded integer, and so can
+   * result in unreliable tests.
+   *
+   * @returns {number}
    */
   get containerWidth() {
     return findElement(this).offsetWidth;

tests/integration/components/headers/reorder-test.js

@@ -11,7 +11,6 @@ import { parameterizedComponentModule } from '../../../helpers/module';
 import { find, findAll } from '@ember/test-helpers';
 import scrollTo from '../../../helpers/scroll-to';
 import { mouseDown, mouseMove, mouseUp } from 'ember-table/test-support/helpers/mouse';
-import { getScale } from 'ember-table/test-support/helpers/element';
 
 import TablePage from 'ember-table/test-support/pages/ember-table';
 import { toBase26 } from 'dummy/utils/base-26';
@@ -21,24 +20,41 @@ const table = new TablePage();
 export async function scrollToEdge(targetElement, edgeOffset, direction) {
   let targetElementRight = targetElement.getBoundingClientRect().right;
   let container = find('.ember-table');
-  let scale = getScale(container);
-  let edge;
 
+  let initialTargetX, finalTargetX;
   if (direction === 'right') {
-    await mouseDown(targetElement, targetElementRight - 30, 0);
-    await mouseMove(targetElement, targetElementRight - 20, 0);
-    await mouseMove(targetElement, targetElementRight - 10, 0);
-
-    edge = container.getBoundingClientRect().right - edgeOffset / scale;
+    initialTargetX = targetElementRight - 5;
+    finalTargetX = container.getBoundingClientRect().right - edgeOffset;
+    if (initialTargetX >= finalTargetX) {
+      throw new Error(
+        'When dragging right, the starting position X must be smaller than the ending position'
+      );
+    }
   } else {
-    await mouseDown(targetElement, targetElementRight - 10, 0);
-    await mouseMove(targetElement, targetElementRight - 20, 0);
-    await mouseMove(targetElement, targetElementRight - 30, 0);
-
-    edge = container.getBoundingClientRect().left + edgeOffset / scale;
+    initialTargetX = targetElementRight - 5;
+    finalTargetX = container.getBoundingClientRect().left + edgeOffset;
+    if (initialTargetX <= finalTargetX) {
+      throw new Error(
+        'When dragging left, the starting position X must be greater than the ending position'
+      );
+    }
   }
 
-  await mouseMove(targetElement, edge, 0);
+  await mouseDown(targetElement, initialTargetX, 0);
+
+  /*
+   * Below a certain number of steps, Hammer (the gesture library
+   * which recognizes panning) will not pick up the pointermove
+   * events emitted by `mouseMove` before the gestrure completes.
+   *
+   * 5 seems a reasonable number.
+   */
+  let current = initialTargetX;
+  for (let steps = 5; steps > 0; steps--) {
+    await mouseMove(targetElement, current, 0);
+    current = current + (finalTargetX - current) / steps;
+  }
+  await mouseMove(targetElement, finalTargetX, 0);
   await mouseUp(targetElement);
 }
 

tests/integration/components/headers/resize-test.js

@@ -69,14 +69,17 @@ module('Integration | header | resize', function() {
     });
 
     test('column resize action is sent up to controller', async function(assert) {
-      this.set('onResize', function(column) {
-        assert.equal(column.name, 'B', 'action is sent to controller after resizing');
+      let calls = [];
+      this.set('onResize', (...args) => {
+        calls.push(args);
       });
 
       await generateTable(this, { widthConstraint: 'eq-container' });
 
       let originalWidth = table.headers.objectAt(1).width;
-      await table.headers.objectAt(1).resize(originalWidth + 20);
+      await table.headers.objectAt(1).resize(originalWidth + 30);
+      assert.equal(calls.length, 1, 'resize called once');
+      assert.equal(calls[0][0].name, 'B', 'The correct resized column ("B") is passed');
     });
 
     test('can disable resize per column', async function(assert) {

tests/unit/-private/table-sticky-polyfill-test.js

@@ -134,7 +134,11 @@ function verifyMultiLineHeader(assert) {
   firstTableCellOfEachHeaderRow.forEach(cell => {
     let firstCellRect = cell.getBoundingClientRect();
     expectedOffset += firstCellRect.height;
-    assert.equal(expectedOffset, firstCellRect.bottom);
+    assert.equal(
+      expectedOffset,
+      firstCellRect.bottom,
+      'bottom of the cell matches based on expected offset'
+    );
   });
 }