test: fix clickOver test; scaleFactor part didn't work

Author: jacobq

tests/helpers/click-over.js

@@ -2,45 +2,23 @@ import { getRootElement, triggerEvent } from '@ember/test-helpers';
 import debug from 'debug';
 const log = debug('ember-cli-plotly:test');
 
-function getScaleFactor(element) {
-  const { transform } = window.getComputedStyle(element);
-  let scaleFactor = 1;
-  if (transform === 'none') {
-    log(`no transformation applied; keeping default scaleFactor of ${scaleFactor}`);
-  } else {
-    const matchResults = transform.match(/matrix\((.*)\)/);
-    if (matchResults) {
-      const matrixConstants = matchResults[1].split(',').map(parseFloat);
-      if (matrixConstants[0] === matrixConstants[3]) {
-        scaleFactor = matrixConstants[0];
-      } else {
-        log('not sure how to determine scale factor from this matrix');
-      }
-    } else {
-      log('unknown transformation');
-    }
-  }
-  return scaleFactor;
-}
-
-function getCoordinates(target, container, scaleFactor) {
+/// returns coordinates relative to viewport (e.g. `clientX` & `clientY`)
+function getCoordinates(target, container) {
   container = container || target;
-  scaleFactor = scaleFactor || 1;
   const containerRect = container.getBoundingClientRect();
   const c = {
     x: containerRect.x, // containerRect.left + containerRect.width/2,
-    y: containerRect.y  //containerRect.top + containerRect.height/2
+    y: containerRect.y, // containerRect.top +  containerRect.height/2
   };
-
   const targetRect = target.getBoundingClientRect();
   const t = {
     x: targetRect.x + targetRect.width/2,
     y: targetRect.y + targetRect.height/2
   };
 
   const coordinates = {
-    x: c.x + (t.x - c.x - targetRect.width/2)/scaleFactor,
-    y: c.y + (t.y - c.y - targetRect.height/2)/scaleFactor,
+    x: c.x + (t.x - c.x - targetRect.width/2),
+    y: c.y + (t.y - c.y - targetRect.height/2),
   };
   log('coordinates', coordinates, containerRect, targetRect);
   return coordinates;
@@ -55,28 +33,30 @@ function getCoordinates(target, container, scaleFactor) {
      will not result in the `plotly_click` event that would come from
      a real pointer click at that same screen location.
      See https://community.plot.ly/t/how-to-simulate-mouse-events-e-g-click/8828
-   - It seems to be incompatible with `transform: scale(0.5)`, which
-     is applied by default to `#ember-testing`
+
 
   @public
   @param {Element} target the element or selector to click "over"
   @return {Promise<void>} resolves after settling
 */
-export default function clickOver(target) {
-  return async function() {
-    const root = getRootElement();
-    const scaleFactor = getScaleFactor(root);
-    const { x, y } = getCoordinates(target, root, scaleFactor);
-    const mouseEventProps = {
-      clientX: x,
-      clientY: y
-    };
-    const clickElement = document.elementFromPoint(x, y);
-    if (!clickElement) {
-      throw new Error(`Could not identify element at (${x},${y})`, clickElement);
-    }
-    await triggerEvent(clickElement, 'mousedown', mouseEventProps);
-    await triggerEvent(document, 'mouseup', mouseEventProps);
-    log('clickOver done', root, scaleFactor, mouseEventProps);
-  }();
+export default async function clickOver(target) {
+  const root = getRootElement();
+  const { x, y } = getCoordinates(target, root);
+  const mouseEventProps = {
+    clientX: x,
+    clientY: y,
+  };
+  // elementFromPoint only works for points that are within the viewport
+  if (x > window.innerWidth || y > window.innerHeight) {
+    window.scrollTo(x, y);
+    // start over since the viewport changed (and thus coordinates changed)
+    return clickOver(target);
+  }
+  const clickElement = document.elementFromPoint(x, y);
+  if (!clickElement) {
+    throw new Error(`Could not identify element at (${x},${y})`, clickElement);
+  }
+  await triggerEvent(clickElement, 'mousedown', mouseEventProps);
+  await triggerEvent(document, 'mouseup', mouseEventProps);
+  log('clickOver done', root, mouseEventProps);
 }

tests/integration/components/plot-ly-test.js

@@ -77,20 +77,11 @@ module('Integration | Component | plot-ly', function (hooks) {
          size: 32
        }
       }],
-      // FIXME: plotly.js seems to break under `transform: scale(...)`
-      // so we're "cheating" by moving the dot toward the "top left" of the plot area
-      // so we can compensate our click location for it
       chartLayout: {
-        xaxis: {
-          range: [-1, 15]
-        },
-        yaxis: {
-          range: [-8, 1]
-        }
       },
       plotlyEvents: ['plotly_click', 'plotly_restyle'],
-      onPlotlyEvent(eventName) {
-        log(`onPlotlyEvent('${eventName}') fired`);
+      onPlotlyEvent(eventName, ...otherArgs) {
+        log(`onPlotlyEvent('${eventName}') fired`, ...otherArgs);
         assert.equal('plotly_click', eventName, 'Should receive plotly_click event');
         done();
       }