From 1e9af5ab4752511486a856813773d1064c42227f Mon Sep 17 00:00:00 2001
From: Matt R <matthieu.rigolot@gmail.com>
Date: Mon, 8 Apr 2019 11:29:25 +0200
Subject: [PATCH] Bug 1318060 - Add tests to ensure the right nodes are
 highlighted on hover. r=Honza

Differential Revision: https://phabricator.services.mozilla.com/D26486

--HG--
extra : rebase_source : d4aeb86669c48deb6480266c51cd7a5b4ed2c16b
---
 devtools/client/dom/test/browser.ini          |  2 +
 .../dom/test/browser_dom_nodes_highlight.js   | 58 +++++++++++++++++++
 devtools/client/dom/test/head.js              | 10 ++++
 devtools/client/dom/test/page_dom_nodes.html  | 18 ++++++
 4 files changed, 88 insertions(+)
 create mode 100644 devtools/client/dom/test/browser_dom_nodes_highlight.js
 create mode 100644 devtools/client/dom/test/page_dom_nodes.html

diff --git a/devtools/client/dom/test/browser.ini b/devtools/client/dom/test/browser.ini
index c34872ea0a9c..408b41050aec 100644
--- a/devtools/client/dom/test/browser.ini
+++ b/devtools/client/dom/test/browser.ini
@@ -5,6 +5,7 @@ support-files =
   head.js
   page_array.html
   page_basic.html
+  page_dom_nodes.html
   !/devtools/client/shared/test/frame-script-utils.js
   !/devtools/client/shared/test/shared-head.js
   !/devtools/client/shared/test/telemetry-test-helpers.js
@@ -12,3 +13,4 @@ support-files =
 [browser_dom_array.js]
 [browser_dom_basic.js]
 [browser_dom_refresh.js]
+[browser_dom_nodes_highlight.js]
diff --git a/devtools/client/dom/test/browser_dom_nodes_highlight.js b/devtools/client/dom/test/browser_dom_nodes_highlight.js
new file mode 100644
index 000000000000..2e37d1273ee5
--- /dev/null
+++ b/devtools/client/dom/test/browser_dom_nodes_highlight.js
@@ -0,0 +1,58 @@
+/* Any copyright is dedicated to the Public Domain.
+ * http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+const TEST_PAGE_URL = URL_ROOT + "page_dom_nodes.html";
+
+/**
+ * Checks whether hovering nodes highlight them in the content page
+ */
+add_task(async function() {
+  info("Test DOM panel node highlight started");
+
+  const { panel } = await addTestTab(TEST_PAGE_URL);
+  const toolbox = gDevTools.getToolbox(panel.target);
+
+  info("Highlight the node by moving the cursor on it");
+  let node = getRowByIndex(panel, 2).querySelector(".objectBox-node");
+  // the inspector should be initialized first and then the node should
+  // highlight after the hover effect.
+  let onNodeHighlight = toolbox.target.once("inspector")
+    .then(inspector => inspector.highlighter.once("node-highlight"));
+  EventUtils.synthesizeMouseAtCenter(node, {
+    type: "mouseover",
+  }, node.ownerDocument.defaultView);
+  let nodeFront = await onNodeHighlight;
+  is(nodeFront.displayName, "h1", "The correct node was highlighted");
+
+  info("Unhighlight the node by moving away from the node");
+  let onNodeUnhighlight = toolbox.highlighter.once("node-unhighlight");
+  const btn = toolbox.doc.querySelector("#toolbox-meatball-menu-button");
+  EventUtils.synthesizeMouseAtCenter(btn, {
+    type: "mouseover",
+  }, btn.ownerDocument.defaultView);
+  await onNodeUnhighlight;
+  ok(true, "node-unhighlight event was fired when moving away from the node");
+
+  info("Expand specified row and wait till children are displayed");
+  await expandRow(panel, "_b");
+
+  info("Highlight the node by moving the cursor on it");
+  node = getRowByIndex(panel, 3).querySelector(".objectBox-node");
+
+  EventUtils.synthesizeMouseAtCenter(node, {
+    type: "mouseover",
+  }, node.ownerDocument.defaultView);
+  onNodeHighlight = toolbox.highlighter.once("node-highlight");
+  nodeFront = await onNodeHighlight;
+  is(nodeFront.displayName, "h2", "The correct node was highlighted");
+
+  info("Unhighlight the node by moving away from the node");
+  EventUtils.synthesizeMouseAtCenter(btn, {
+    type: "mouseover",
+  }, btn.ownerDocument.defaultView);
+  onNodeUnhighlight = toolbox.highlighter.once("node-unhighlight");
+  await onNodeUnhighlight;
+  ok(true, "node-unhighlight event was fired when moving away from the node");
+});
diff --git a/devtools/client/dom/test/head.js b/devtools/client/dom/test/head.js
index 2a987a6b6a44..965ac31a80c3 100644
--- a/devtools/client/dom/test/head.js
+++ b/devtools/client/dom/test/head.js
@@ -91,6 +91,16 @@ function getRowByLabel(panel, text) {
   return label ? label.closest(".treeRow") : null;
 }
 
+/**
+ * Returns tree row with specified index.
+ */
+function getRowByIndex(panel, id) {
+  const doc = panel.panelWin.document;
+  const labels = [...doc.querySelectorAll(".treeLabel")];
+  const label = labels.find((node, i) => i == id);
+  return label ? label.closest(".treeRow") : null;
+}
+
 /**
  * Returns the children (tree row text) of the specified object name as an
  * array.
diff --git a/devtools/client/dom/test/page_dom_nodes.html b/devtools/client/dom/test/page_dom_nodes.html
new file mode 100644
index 000000000000..33d0655f9dc7
--- /dev/null
+++ b/devtools/client/dom/test/page_dom_nodes.html
@@ -0,0 +1,18 @@
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8"/>
+    <title>DOM test hovering nodes page</title>
+  </head>
+  <body>
+    <h1 id="a">Node highlight test</h1>
+    <h2 id="b">Node highlight test inside object</h2>
+    <script>
+      "use strict";
+      window._a = document.getElementById("a");
+      window._b = {_data: document.getElementById("b")};
+    </script>
+  </body>
+</html>