diff options
| author | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-28 14:29:10 +0000 |
|---|---|---|
| committer | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-28 14:29:10 +0000 |
| commit | 2aa4a82499d4becd2284cdb482213d541b8804dd (patch) | |
| tree | b80bf8bf13c3766139fbacc530efd0dd9d54394c /devtools/client/shared/test/browser_treeWidget_mouse_interaction.js | |
| parent | Initial commit. (diff) | |
| download | firefox-upstream.tar.xz firefox-upstream.zip | |
Adding upstream version 86.0.1.upstream/86.0.1upstream
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'devtools/client/shared/test/browser_treeWidget_mouse_interaction.js')
| -rw-r--r-- | devtools/client/shared/test/browser_treeWidget_mouse_interaction.js | 182 |
1 files changed, 182 insertions, 0 deletions
diff --git a/devtools/client/shared/test/browser_treeWidget_mouse_interaction.js b/devtools/client/shared/test/browser_treeWidget_mouse_interaction.js new file mode 100644 index 0000000000..caffdcce10 --- /dev/null +++ b/devtools/client/shared/test/browser_treeWidget_mouse_interaction.js @@ -0,0 +1,182 @@ +/* Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ */ + +"use strict"; + +// Tests that mouse interaction works fine with tree widget + +const TEST_URI = + "data:text/html;charset=utf-8,<head>" + + "<link rel='stylesheet' type='text/css' href='chrome://devtools/skin/widg" + + "ets.css'></head><body><div></div><span></span></body>"; +const { TreeWidget } = require("devtools/client/shared/widgets/TreeWidget"); + +add_task(async function() { + await SpecialPowers.pushPrefEnv({ + set: [["security.allow_unsafe_parent_loads", true]], + }); + + await addTab("about:blank"); + const { host, doc } = await createHost("bottom", TEST_URI); + + // Creating a host is not correctly waiting when DevTools run in content frame + // See Bug 1571421. + await wait(1000); + + const tree = new TreeWidget(doc.querySelector("div"), { + defaultType: "store", + }); + + populateTree(tree, doc); + await testMouseInteraction(tree); + + tree.destroy(); + host.destroy(); + gBrowser.removeCurrentTab(); +}); + +function populateTree(tree, doc) { + tree.add([ + { + id: "level1", + label: "Level 1", + }, + { + id: "level2-1", + label: "Level 2", + }, + { + id: "level3-1", + label: "Level 3 - Child 1", + type: "dir", + }, + ]); + tree.add([ + "level1", + "level2-1", + { id: "level3-2", label: "Level 3 - Child 2" }, + ]); + tree.add([ + "level1", + "level2-1", + { id: "level3-3", label: "Level 3 - Child 3" }, + ]); + tree.add([ + "level1", + { + id: "level2-2", + label: "Level 2.1", + }, + { + id: "level3-1", + label: "Level 3.1", + }, + ]); + tree.add([ + { + id: "level1", + label: "Level 1", + }, + { + id: "level2", + label: "Level 2", + }, + { + id: "level3", + label: "Level 3", + type: "js", + }, + ]); + tree.add(["level1.1", "level2", { id: "level3", type: "url" }]); + + // Adding a new non text item in the tree. + const node = doc.createElement("div"); + node.textContent = "Foo Bar"; + node.className = "foo bar"; + tree.add([ + { + id: "level1.2", + node: node, + attachment: { + foo: "bar", + }, + }, + ]); +} + +// Sends a click event on the passed DOM node in an async manner +function click(node) { + const win = node.ownerDocument.defaultView; + executeSoon(() => EventUtils.synthesizeMouseAtCenter(node, {}, win)); +} + +/** + * Tests if clicking the tree items does the expected behavior + */ +async function testMouseInteraction(tree) { + info("Testing mouse interaction with the tree"); + let event; + const pass = (d, a) => event.resolve([d, a]); + + ok(!tree.selectedItem, "Nothing should be selected beforehand"); + + tree.once("select", pass); + const node = tree.root.children.firstChild.firstChild; + info("clicking on first top level item"); + event = defer(); + ok( + !node.classList.contains("theme-selected"), + "Node should not have selected class before clicking" + ); + click(node); + let [data, attachment] = await event.promise; + ok( + node.classList.contains("theme-selected"), + "Node has selected class after click" + ); + is(data[0], "level1.2", "Correct tree path is emitted"); + ok(attachment && attachment.foo, "Correct attachment is emitted"); + is(attachment.foo, "bar", "Correct attachment value is emitted"); + + info("clicking second top level item with children to check if it expands"); + const node2 = tree.root.children.firstChild.nextSibling.firstChild; + event = defer(); + // node should not have selected class + ok( + !node2.classList.contains("theme-selected"), + "New node should not have selected class before clicking" + ); + ok( + !node2.hasAttribute("expanded"), + "New node is not expanded before clicking" + ); + tree.once("select", pass); + click(node2); + [data, attachment] = await event.promise; + ok( + node2.classList.contains("theme-selected"), + "New node has selected class after clicking" + ); + is(data[0], "level1", "Correct tree path is emitted for new node"); + ok(!attachment, "null attachment should be emitted for new node"); + ok(node2.hasAttribute("expanded"), "New node expanded after click"); + + ok( + !node.classList.contains("theme-selected"), + "Old node should not have selected class after the click on new node" + ); + + // clicking again should just collapse + // this will not emit "select" event + event = defer(); + node2.addEventListener( + "click", + () => { + executeSoon(() => event.resolve(null)); + }, + { once: true } + ); + click(node2); + await event.promise; + ok(!node2.hasAttribute("expanded"), "New node collapsed after click again"); +} |