Magic-Mirror/gecko-dev
1
0
Fork 0
mirror of https://github.com/mozilla/gecko-dev.git synced 2024-10-20 08:45:46 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Bug 1318060 - Add tests to ensure the right nodes are highlighted on hover. r=Honza

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

--HG--
extra : rebase_source : d4aeb86669c48deb6480266c51cd7a5b4ed2c16b
This commit is contained in:
Matt R 2019-04-08 11:29:25 +02:00
parent a8bb98e28b
commit 1e9af5ab47
4 changed files with 88 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
devtools/client/dom/test/browser.ini
View File

@ -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]

58
devtools/client/dom/test/browser_dom_nodes_highlight.js Normal file
View File

@ -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");
});

10
devtools/client/dom/test/head.js
View File

@ -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.

18
devtools/client/dom/test/page_dom_nodes.html Normal file
View File

@ -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>