devtools/client/shared/test/helper_html_tooltip.js

   1 /* Any copyright is dedicated to the Public Domain.
   2    http://creativecommons.org/publicdomain/zero/1.0/ */
   3 /* eslint no-unused-vars: [2, {"vars": "local", "args": "none"}] */
   4 /* import-globals-from ../../shared/test/shared-head.js */
   5
   6 "use strict";
   7
   8 /**
   9  * Helper methods for the HTMLTooltip integration tests.
  10  */
  11
  12 /**
  13  * Display an existing HTMLTooltip on an anchor and properly wait for the popup to be
  14  * repainted.
  15  *
  16  * @param {HTMLTooltip} tooltip
  17  *        The tooltip instance to display
  18  * @param {Node} anchor
  19  *        The anchor that should be used to display the tooltip
  20  * @param {Object} see HTMLTooltip:show documentation
  21  * @return {Promise} promise that resolves when reflow and repaint are done.
  22  */
  23 async function showTooltip(tooltip, anchor, { position, x, y } = {}) {
  24   await tooltip.show(anchor, { position, x, y });
  25   await waitForReflow(tooltip);
  26
  27   // Wait for next tick. Tooltip tests sometimes fail to successively hide and
  28   // show tooltips on Win32 debug.
  29   await waitForTick();
  30 }
  31
  32 /**
  33  * Hide an existing HTMLTooltip. After the tooltip "hidden" event has been fired
  34  * a reflow will be triggered.
  35  *
  36  * @param {HTMLTooltip} tooltip
  37  *        The tooltip instance to hide
  38  * @return {Promise} promise that resolves when "hidden" has been fired, reflow
  39  *         and repaint done.
  40  */
  41 async function hideTooltip(tooltip) {
  42   const onPopupHidden = tooltip.once("hidden");
  43   tooltip.hide();
  44   await onPopupHidden;
  45   await waitForReflow(tooltip);
  46
  47   // Wait for next tick. Tooltip tests sometimes fail to successively hide and
  48   // show tooltips on Win32 debug.
  49   await waitForTick();
  50 }
  51
  52 /**
  53  * Forces the reflow of an HTMLTooltip document and waits for the next repaint.
  54  *
  55  * @param {HTMLTooltip} the tooltip to reflow
  56  * @return {Promise} a promise that will resolve after the reflow and repaint
  57  *         have been executed.
  58  */
  59 function waitForReflow(tooltip) {
  60   const { doc } = tooltip;
  61   return new Promise(resolve => {
  62     doc.documentElement.offsetWidth;
  63     doc.defaultView.requestAnimationFrame(resolve);
  64   });
  65 }
  66
  67 /**
  68  * Test helper designed to check that a tooltip is displayed at the expected
  69  * position relative to an anchor, given a set of expectations.
  70  *
  71  * @param {HTMLTooltip} tooltip
  72  *        The HTMLTooltip instance to check
  73  * @param {Node} anchor
  74  *        The tooltip's anchor
  75  * @param {Object} expected
  76  *        - {String} position : "top" or "bottom"
  77  *        - {Boolean} leftAligned
  78  *        - {Number} width: expected tooltip width
  79  *        - {Number} height: expected tooltip height
  80  */
  81 function checkTooltipGeometry(
  82   tooltip,
  83   anchor,
  84   { position, leftAligned = true, height, width } = {}
  85 ) {
  86   info("Check the tooltip geometry matches expected position and dimensions");
  87   const tooltipRect = tooltip.container.getBoundingClientRect();
  88   const anchorRect = anchor.getBoundingClientRect();
  89
  90   if (position === "top") {
  91     is(
  92       tooltipRect.bottom,
  93       Math.round(anchorRect.top),
  94       "Tooltip is above the anchor"
  95     );
  96   } else if (position === "bottom") {
  97     is(
  98       tooltipRect.top,
  99       Math.round(anchorRect.bottom),
 100       "Tooltip is below the anchor"
 101     );
 102   } else {
 103     ok(false, "Invalid position provided to checkTooltipGeometry");
 104   }
 105
 106   if (leftAligned) {
 107     is(
 108       tooltipRect.left,
 109       Math.round(anchorRect.left),
 110       "Tooltip left-aligned with the anchor"
 111     );
 112   }
 113
 114   is(tooltipRect.height, height, "Tooltip has the expected height");
 115   is(tooltipRect.width, width, "Tooltip has the expected width");
 116 }