Update tests for improved scaling

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

@@ -5,6 +5,17 @@ import { click } from '@ember/test-helpers';
 import { mouseDown, mouseMove, mouseUp } from '../../helpers/mouse';
 import { getScale } from '../../helpers/element';
 
+function computedStyleInPixels(target, property) {
+  let stringValue = window.getComputedStyle(target)[property];
+  let numberValue = Number(stringValue.substring(0, stringValue.length - 2));
+  if (isNaN(numberValue)) {
+    throw new Error(
+      `computedStyleInPixels failed to convert the computed style property of '${property}' into a Number. Value was '${stringValue}'`
+    );
+  }
+  return numberValue;
+}
+
 export const SortPage = PageObject.extend({
   indicator: {
     scope: '[data-test-sort-indicator]',
@@ -29,18 +40,52 @@ const Header = PageObject.extend({
 
   /**
    * Retrieves selected header cell width.
+   *
+   * Deprecated: offsetWidth returns a rounded integer, and so can
+   * result in unreliable tests. Use logicalWidth.
    */
   get width() {
     return findElement(this).offsetWidth;
   },
 
   /**
    * Retrieves selected header cell height.
+   *
+   * Deprecated: offsetHeight returns a rounded integer, and so can
+   * result in unreliable tests. Use logicalHeight.
    */
   get height() {
     return findElement(this).offsetHeight;
   },
 
+  /**
+   * Retrieves the logical width of the selected header cell.
+   */
+  get logicalWidth() {
+    return computedStyleInPixels(findElement(this), 'width');
+  },
+
+  /**
+   * Retrieves the logical height of the selected header cell.
+   */
+  get logicalHeight() {
+    return computedStyleInPixels(findElement(this), 'height');
+  },
+
+  /**
+   * Retrieves the rendered width of the selected header cell.
+   */
+  get renderedWidth() {
+    return findElement(this).getBoundingClientRect().width;
+  },
+
+  /**
+   * Retrieves the rendered height of the selected header cell.
+   */
+  get renderedHeight() {
+    return findElement(this).getBoundingClientRect().height;
+  },
+
   get isLeaf() {
     return findElement(this).dataset.testLeafHeader;
   },
@@ -58,10 +103,24 @@ const Header = PageObject.extend({
 
   contextMenu: triggerable('contextmenu'),
 
-  /**
-   * Resizes this column by dragging right border several pixels.
+  /*
+   * This API is deprecated, prefer the more explicit resizeLogicalSize.
    */
   async resize(targetSize) {
+    await this.resizeLogicalSize(targetSize);
+  },
+
+  async resizeLogicalSize(targetSize) {
+    let renderedTargetSize =
+      targetSize / getScale(document.getElementById('ember-testing-container').firstElementChild);
+    await this.resizeRenderedSize(renderedTargetSize);
+  },
+
+  /**
+   * Resizes this column by dragging right border several pixels,
+   * unless the column is fixed right in quick case it drags left.
+   */
+  async resizeRenderedSize(targetSize) {
     let resizeHandle = findElement(this, '.et-header-resize-area');
 
     if (!resizeHandle) {
@@ -70,16 +129,30 @@ const Header = PageObject.extend({
 
     let box = resizeHandle.getBoundingClientRect();
     let startX = (box.right + box.left) / 2;
-    let deltaX = (targetSize - this.width) / getScale(resizeHandle);
+    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, 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 = startX;
+    for (let steps = 5; steps > 0; steps--) {
+      await mouseMove(resizeHandle, current, 0);
+      current = current + (finalX - current) / steps;
+    }
+    await mouseMove(resizeHandle, finalX, 0);
+    await mouseUp(resizeHandle);
   },
 
   /**

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

@@ -50,18 +50,52 @@ export default PageObject.extend({
 
   /**
    * Returns the table width.
+   *
+   * Deprecated: offsetWidth returns a rounded integer, and so can
+   * result in unreliable tests. Use logicalWidth.
    */
   get width() {
     return findElement(this, 'table').offsetWidth;
   },
 
+  /**
+   * Retrieves the logical width of the table.
+   */
+  get logicalWidth() {
+    return window.getComputedStyle(findElement(this, 'table')).width;
+  },
+
+  /**
+   * Retrieves the rendered width of the table.
+   */
+  get renderedWidth() {
+    return findElement(this, 'table').getBoundingClientRect().width;
+  },
+
   /**
    * Returns the table container width.
+   *
+   * Deprecated: offsetWidth returns a rounded integer, and so can
+   * result in unreliable tests. Use logicalWidth.
    */
   get containerWidth() {
     return findElement(this).offsetWidth;
   },
 
+  /**
+   * Retrieves the logical width of the container.
+   */
+  get logicalContainerWidth() {
+    return window.getComputedStyle(findElement(this)).width;
+  },
+
+  /**
+   * Retrieves the rendered width of the container.
+   */
+  get renderedContainerWidth() {
+    return findElement(this).getBoundingClientRect().width;
+  },
+
   /**
    * Returns the specified scroll indicator element
    */

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'
+    );
   });
 }