1 files changed, 93 insertions, 0 deletions
diff --git a/devtools/client/inspector/test/browser_inspector_addNode_03.js b/devtools/client/inspector/test/browser_inspector_addNode_03.js
new file mode 100644
index 0000000000..abc50d2969
--- /dev/null
+++ b/devtools/client/inspector/test/browser_inspector_addNode_03.js
@@ -0,0 +1,93 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that adding nodes does work as expected: the parent node remains selected and the
+// new node is created inside the parent.
+
+const TEST_URL = URL_ROOT + "doc_inspector_add_node.html";
+const PARENT_TREE_LEVEL = 3;
+
+add_task(async function () {
+  const { inspector } = await openInspectorForURL(TEST_URL);
+
+  info("Adding a node in an element that has no children and is collapsed");
+  let parentNode = await getNodeFront("#foo", inspector);
+  await selectNode(parentNode, inspector);
+  await testAddNode(parentNode, inspector);
+
+  info(
+    "Adding a node in an element with children but that has not been expanded yet"
+  );
+  parentNode = await getNodeFront("#bar", inspector);
+  await selectNode(parentNode, inspector);
+  await testAddNode(parentNode, inspector);
+
+  info(
+    "Adding a node in an element with children that has been expanded then collapsed"
+  );
+  // Select again #bar and collapse it.
+  parentNode = await getNodeFront("#bar", inspector);
+  await selectNode(parentNode, inspector);
+  collapseNode(parentNode, inspector);
+  await testAddNode(parentNode, inspector);
+
+  info("Adding a node in an element with children that is expanded");
+  parentNode = await getNodeFront("#bar", inspector);
+  await selectNode(parentNode, inspector);
+  await testAddNode(parentNode, inspector);
+});
+
+async function testAddNode(parentNode, inspector) {
+  const btn = inspector.panelDoc.querySelector("#inspector-element-add-button");
+  const parentContainer = inspector.markup.getContainer(parentNode);
+
+  is(
+    parseInt(parentContainer.tagLine.getAttribute("aria-level"), 10),
+    PARENT_TREE_LEVEL,
+    "The parent aria-level is up to date."
+  );
+
+  info(
+    "Clicking 'add node' and expecting a markup mutation and a new container"
+  );
+  const onMutation = inspector.once("markupmutation");
+  const onNewContainer = inspector.once("container-created");
+  btn.click();
+  let mutations = await onMutation;
+  await onNewContainer;
+
+  // We are only interested in childList mutations here. Filter everything else out as
+  // there may be unrelated mutations (e.g. "events") grouped in.
+  mutations = mutations.filter(({ type }) => type === "childList");
+
+  is(mutations.length, 1, "There is one mutation only");
+  is(mutations[0].added.length, 1, "There is one new node only");
+
+  const newNode = mutations[0].added[0];
+
+  is(
+    parentNode,
+    inspector.selection.nodeFront,
+    "The parent node is still selected"
+  );
+  is(
+    newNode.parentNode(),
+    parentNode,
+    "The new node is inside the right parent"
+  );
+
+  const newNodeContainer = inspector.markup.getContainer(newNode);
+
+  is(
+    parseInt(newNodeContainer.tagLine.getAttribute("aria-level"), 10),
+    PARENT_TREE_LEVEL + 1,
+    "The child aria-level is up to date."
+  );
+}
+
+function collapseNode(node, inspector) {
+  const container = inspector.markup.getContainer(node);
+  container.setExpanded(false);
+}