Bug 1318060 - Added tests to ensure the right nodes are highlighted on hover; r?honza
MozReview-Commit-ID: GDyUkb7hJIb
--- a/devtools/client/dom/test/browser.ini
+++ b/devtools/client/dom/test/browser.ini
@@ -1,12 +1,14 @@
[DEFAULT]
tags = devtools
subsuite = devtools
support-files =
head.js
page_array.html
page_basic.html
+ page_hover_nodes.html
!/devtools/client/framework/test/shared-head.js
[browser_dom_array.js]
[browser_dom_basic.js]
[browser_dom_refresh.js]
+[browser_dom_nodes_highlight.js]
new file mode 100644
--- /dev/null
+++ b/devtools/client/dom/test/browser_dom_nodes_highlight.js
@@ -0,0 +1,47 @@
+/* -*- indent-tabs-mode: nil; js-indent-level: 2 -*- */
+/* vim: set ts=2 et sw=2 tw=80: */
+/* Any copyright is dedicated to the Public Domain.
+ * http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+const TEST_PAGE_URL = URL_ROOT + "page_hover_nodes.html";
+
+/**
+ * Checks whether hovering nodes highlight them in the content page
+ */
+add_task(function* () {
+ info("Test DOM panel node highlight started");
+
+ let { panel } = yield 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");
+ let onNodeHighlight = toolbox.once("node-highlight");
+ EventUtils.synthesizeMouseAtCenter(node, {type: "mouseover"}, node.ownerDocument.defaultView);
+ let nodeFront = yield onNodeHighlight;
+ ok(nodeFront.displayName, "h1", "The correct node was highlighted");
+
+ info("Unhighlight the node by moving away from the node");
+ let onNodeUnhighlight = toolbox.once("node-unhighlight");
+ let btn = toolbox.doc.querySelector(".toolbox-dock-button");
+ EventUtils.synthesizeMouseAtCenter(btn, {type: "mouseover"}, btn.ownerDocument.defaultView);
+ yield onNodeUnhighlight;
+ ok(true, "node-unhighlight event was fired when moving away from the node");
+
+ info("Expand specified row and wait till children are displayed");
+ yield expandRow(panel, "_b");
+
+ info("Highlight the node by moving the cursor on it");
+ node = getRowByIndex(panel, 3).querySelector(".objectBox");
+
+ EventUtils.synthesizeMouseAtCenter(node, {type: "mouseover"}, node.ownerDocument.defaultView);
+ nodeFront = yield onNodeHighlight;
+ ok(nodeFront, "h2", "The correct node was highlighted");
+
+ info("Unhighlight the node by moving away from the node");
+ EventUtils.synthesizeMouseAtCenter(btn, {type: "mouseover"}, btn.ownerDocument.defaultView);
+ yield onNodeUnhighlight;
+ ok(true, "node-unhighlight event was fired when moving away from the node");
+});
--- a/devtools/client/dom/test/head.js
+++ b/devtools/client/dom/test/head.js
@@ -93,16 +93,26 @@ function synthesizeMouseClickSoon(panel,
function getRowByLabel(panel, text) {
let doc = panel.panelWin.document;
let labels = [...doc.querySelectorAll(".treeLabel")];
let label = labels.find(node => node.textContent == text);
return label ? label.closest(".treeRow") : null;
}
/**
+ * Returns tree row with specified index.
+ */
+function getRowByIndex(panel, id) {
+ let doc = panel.panelWin.document;
+ let labels = [...doc.querySelectorAll(".treeLabel")];
+ let 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.
*/
function getAllRowsForLabel(panel, text) {
let rootObjectLevel;
let node;
let result = [];
let doc = panel.panelWin.document;
new file mode 100644
--- /dev/null
+++ b/devtools/client/dom/test/page_hover_nodes.html
@@ -0,0 +1,19 @@
+<!-- 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 type="text/javascript">
+ "use strict";
+ window._a = document.getElementById('a');
+ window._b = {_data: document.getElementById('b')};
+ </script>
+ </body>
+</html>
+