1 files changed, 116 insertions, 0 deletions
diff --git a/devtools/client/shared/test/helper_html_tooltip.js b/devtools/client/shared/test/helper_html_tooltip.js
new file mode 100644
index 0000000000..24b28ad702
--- /dev/null
+++ b/devtools/client/shared/test/helper_html_tooltip.js
@@ -0,0 +1,116 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+/* eslint no-unused-vars: [2, {"vars": "local", "args": "none"}] */
+/* import-globals-from ../../shared/test/shared-head.js */
+
+"use strict";
+
+/**
+ * Helper methods for the HTMLTooltip integration tests.
+ */
+
+/**
+ * Display an existing HTMLTooltip on an anchor and properly wait for the popup to be
+ * repainted.
+ *
+ * @param {HTMLTooltip} tooltip
+ *        The tooltip instance to display
+ * @param {Node} anchor
+ *        The anchor that should be used to display the tooltip
+ * @param {Object} see HTMLTooltip:show documentation
+ * @return {Promise} promise that resolves when reflow and repaint are done.
+ */
+async function showTooltip(tooltip, anchor, { position, x, y } = {}) {
+  await tooltip.show(anchor, { position, x, y });
+  await waitForReflow(tooltip);
+
+  // Wait for next tick. Tooltip tests sometimes fail to successively hide and
+  // show tooltips on Win32 debug.
+  await waitForTick();
+}
+
+/**
+ * Hide an existing HTMLTooltip. After the tooltip "hidden" event has been fired
+ * a reflow will be triggered.
+ *
+ * @param {HTMLTooltip} tooltip
+ *        The tooltip instance to hide
+ * @return {Promise} promise that resolves when "hidden" has been fired, reflow
+ *         and repaint done.
+ */
+async function hideTooltip(tooltip) {
+  const onPopupHidden = tooltip.once("hidden");
+  tooltip.hide();
+  await onPopupHidden;
+  await waitForReflow(tooltip);
+
+  // Wait for next tick. Tooltip tests sometimes fail to successively hide and
+  // show tooltips on Win32 debug.
+  await waitForTick();
+}
+
+/**
+ * Forces the reflow of an HTMLTooltip document and waits for the next repaint.
+ *
+ * @param {HTMLTooltip} the tooltip to reflow
+ * @return {Promise} a promise that will resolve after the reflow and repaint
+ *         have been executed.
+ */
+function waitForReflow(tooltip) {
+  const { doc } = tooltip;
+  return new Promise(resolve => {
+    doc.documentElement.offsetWidth;
+    doc.defaultView.requestAnimationFrame(resolve);
+  });
+}
+
+/**
+ * Test helper designed to check that a tooltip is displayed at the expected
+ * position relative to an anchor, given a set of expectations.
+ *
+ * @param {HTMLTooltip} tooltip
+ *        The HTMLTooltip instance to check
+ * @param {Node} anchor
+ *        The tooltip's anchor
+ * @param {Object} expected
+ *        - {String} position : "top" or "bottom"
+ *        - {Boolean} leftAligned
+ *        - {Number} width: expected tooltip width
+ *        - {Number} height: expected tooltip height
+ */
+function checkTooltipGeometry(
+  tooltip,
+  anchor,
+  { position, leftAligned = true, height, width } = {}
+) {
+  info("Check the tooltip geometry matches expected position and dimensions");
+  const tooltipRect = tooltip.container.getBoundingClientRect();
+  const anchorRect = anchor.getBoundingClientRect();
+
+  if (position === "top") {
+    is(
+      tooltipRect.bottom,
+      Math.round(anchorRect.top),
+      "Tooltip is above the anchor"
+    );
+  } else if (position === "bottom") {
+    is(
+      tooltipRect.top,
+      Math.round(anchorRect.bottom),
+      "Tooltip is below the anchor"
+    );
+  } else {
+    ok(false, "Invalid position provided to checkTooltipGeometry");
+  }
+
+  if (leftAligned) {
+    is(
+      tooltipRect.left,
+      Math.round(anchorRect.left),
+      "Tooltip left-aligned with the anchor"
+    );
+  }
+
+  is(tooltipRect.height, height, "Tooltip has the expected height");
+  is(tooltipRect.width, width, "Tooltip has the expected width");
+}