Bug 1758110 - [devtools] Better assert the actual content of the source tree. r=bomsy

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

devtools/client/debugger/test/mochitest/browser_dbg-settings-disable-javascript.js

@@ -25,7 +25,7 @@ add_task(async function() {
   });
 
   info("Waiting for reload triggered by disabling javascript");
-  await waitForSourceCount(dbg, 0);
+  await waitForSourcesInSourceTree(dbg, [], { noExpand: true });
 
   info("Wait for DevTools to be reloaded");
   await waitForDevToolsReload();

devtools/client/debugger/test/mochitest/browser_dbg-sourcemaps.js

@@ -22,14 +22,27 @@ add_task(async function() {
     selectors: { getBreakpointCount },
   } = dbg;
 
-  ok(true, "Original sources exist");
-  const bundleSrc = findSource(dbg, "bundle.js");
-
   // Check that the original sources appear in the source tree
+  info("Before opening the page directory, no source are displayed");
+  await waitForSourcesInSourceTree(dbg, [], { noExpand: true });
   await clickElement(dbg, "sourceDirectoryLabel", 4);
-  await assertSourceCount(dbg, 9);
+  info(
+    "After opening the page directory, only all original sources (entry, output, time2, opts). (bundle is still hidden)"
+  );
+  await waitForSourcesInSourceTree(
+    dbg,
+    ["entry.js", "output.js", "times2.js", "opts.js"],
+    { noExpand: true }
+  );
+  info("Expand the page folder and assert that the bundle appears");
+  await clickElement(dbg, "sourceDirectoryLabel", 3);
+  await waitForSourcesInSourceTree(
+    dbg,
+    ["entry.js", "output.js", "times2.js", "opts.js", "bundle.js"],
+    { noExpand: true }
+  );
 
-  await selectSource(dbg, bundleSrc);
+  await selectSource(dbg, "bundle.js");
 
   await clickGutter(dbg, 70);
   await waitForBreakpointCount(dbg, 1);
@@ -37,7 +50,6 @@ add_task(async function() {
 
   await clickGutter(dbg, 70);
   await waitForBreakpointCount(dbg, 0);
-  is(dbg.selectors.getBreakpointCount(), 0, "No breakpoints exists");
 
   const entrySrc = findSource(dbg, "entry.js");
 

devtools/client/debugger/test/mochitest/browser_dbg-sources-arrow-keys.js

@@ -4,7 +4,10 @@
 
 "use strict";
 
-// Test keyboard arrow behaviour
+/**
+ * Test keyboard arrow behaviour on the SourceTree with a nested folder
+ * that we manually expand/collapse via arrow keys.
+ */
 add_task(async function() {
   const dbg = await initDebugger(
     "doc-sources.html",
@@ -14,8 +17,15 @@ add_task(async function() {
     "long.js"
   );
 
+  // Before clicking on the source label, no source is displayed
+  await waitForSourcesInSourceTree(dbg, [], { noExpand: true });
   await clickElement(dbg, "sourceDirectoryLabel", 3);
-  await assertSourceCount(dbg, 8);
+  // Right after, all sources, but the nested one are displayed
+  await waitForSourcesInSourceTree(
+    dbg,
+    ["doc-sources.html", "simple1.js", "simple2.js", "long.js"],
+    { noExpand: true }
+  );
 
   // Right key on open dir
   await pressKey(dbg, "Right");
@@ -23,12 +33,10 @@ add_task(async function() {
 
   // Right key on closed dir
   await pressKey(dbg, "Right");
-  await assertSourceCount(dbg, 8);
   await assertNodeIsFocused(dbg, 4);
 
   // Left key on a open dir
   await pressKey(dbg, "Left");
-  await assertSourceCount(dbg, 8);
   await assertNodeIsFocused(dbg, 4);
 
   // Down key on a closed dir
@@ -36,11 +44,28 @@ add_task(async function() {
   await assertNodeIsFocused(dbg, 4);
 
   // Right key on a source
+  // We are focused on the nested source and up to this point we still display only the 4 initial sources
+  await waitForSourcesInSourceTree(
+    dbg,
+    ["doc-sources.html", "simple1.js", "simple2.js", "long.js"],
+    { noExpand: true }
+  );
   await pressKey(dbg, "Right");
   await assertNodeIsFocused(dbg, 4);
+  // Now, the nested source is also displayed
+  await waitForSourcesInSourceTree(
+    dbg,
+    [
+      "doc-sources.html",
+      "simple1.js",
+      "simple2.js",
+      "long.js",
+      "nested-source.js",
+    ],
+    { noExpand: true }
+  );
 
   // Down key on a source
-  await waitForSourceCount(dbg, 9);
   await pressKey(dbg, "Down");
   await assertNodeIsFocused(dbg, 5);
 
@@ -58,8 +83,25 @@ add_task(async function() {
   await assertNodeIsFocused(dbg, 4);
 
   // Left key on a closed dir
+  // We are about to close the nested folder, the nested source is about to disappear
+  await waitForSourcesInSourceTree(
+    dbg,
+    [
+      "doc-sources.html",
+      "simple1.js",
+      "simple2.js",
+      "long.js",
+      "nested-source.js",
+    ],
+    { noExpand: true }
+  );
   await pressKey(dbg, "Left");
-  await assertSourceCount(dbg, 8);
+  // And it disappeared
+  await waitForSourcesInSourceTree(
+    dbg,
+    ["doc-sources.html", "simple1.js", "simple2.js", "long.js"],
+    { noExpand: true }
+  );
   await pressKey(dbg, "Left");
   await assertNodeIsFocused(dbg, 3);
 

devtools/client/debugger/test/mochitest/browser_dbg-sources-named-eval.js

@@ -2,7 +2,8 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at <http://mozilla.org/MPL/2.0/>. */
 
-// Make sure named eval sources appear in the list.
+// Make sure named eval sources appear in the Debugger
+// and we show proper source text content
 
 "use strict";
 
@@ -15,19 +16,37 @@ add_task(async function() {
     "long.js"
   );
 
-  info(`>>> contentTask: evaluate evaled.js\n`);
-  SpecialPowers.spawn(gBrowser.selectedBrowser, [], function() {
-    content.eval("window.evaledFunc = function() {} //# sourceURL=evaled.js");
+  info("Assert that all page sources appear in the source tree");
+  await waitForSourcesInSourceTree(dbg, [
+    "doc-sources.html",
+    "simple1.js",
+    "simple2.js",
+    "nested-source.js",
+    "long.js",
+  ]);
+
+  info(`>>> contentTask: evaluate evaled.js`);
+  await SpecialPowers.spawn(gBrowser.selectedBrowser, [], function() {
+    content.eval(
+      `window.evaledFunc = function() {};
+//# sourceURL=evaled.js
+`
+    );
   });
 
-  await waitForSourceCount(dbg, 3);
-  ok(true);
-});
+  info("Assert that the evaled source appear in the source tree");
+  await waitForSourcesInSourceTree(dbg, [
+    "doc-sources.html",
+    "simple1.js",
+    "simple2.js",
+    "nested-source.js",
+    "long.js",
+    "evaled.js",
+  ]);
 
-async function waitForSourceCount(dbg, i) {
-  // We are forced to wait until the DOM nodes appear because the
-  // source tree batches its rendering.
-  await waitUntil(() => {
-    return findAllElements(dbg, "sourceNodes").length === i;
-  }, `waiting for source count ${i}`);
-}
+  info("Wait for the evaled source");
+  await waitForSource(dbg, "evaled.js");
+  await selectSource(dbg, "evaled.js");
+
+  assertTextContentOnLine(dbg, 1, "window.evaledFunc = function() {};");
+});

devtools/client/debugger/test/mochitest/browser_dbg-sources-querystring.js

@@ -2,7 +2,9 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at <http://mozilla.org/MPL/2.0/>. */
 
-// Tests that the source tree works.
+// /!\ This test is currently skiped and fails in many ways /!\
+
+// Tests that the source tree works with sources having query strings
 
 "use strict";
 
@@ -13,19 +15,21 @@ add_task(async function() {
     "simple1.js?x=2"
   );
 
-  // Expand nodes and make sure more sources appear.
-  await assertSourceCount(dbg, 2);
-  await clickElement(dbg, "sourceDirectoryLabel", 2);
+  // Expand nodes and make sure the two sources appear.
+  await waitForSourcesInSourceTree(dbg, [], { noExpand: true });
+  await clickElement(dbg, "sourceDirectoryLabel", 3);
+  await waitForSourcesInSourceTree(dbg, ["simple1.js?x=1", "simple1.js?x=2"], {
+    noExpand: true,
+  });
 
-  is(getLabel(dbg, 3), "simple1.js?x=1", "simple1.js?x=1 exists");
-  is(getLabel(dbg, 4), "simple1.js?x=2", "simple1.js?x=2 exists");
+  is(getLabel(dbg, 4), "simple1.js?x=1", "simple1.js?x=1 exists");
+  is(getLabel(dbg, 5), "simple1.js?x=2", "simple1.js?x=2 exists");
 
-  const source = findSource(dbg, "simple1.js?x=1");
-  await selectSource(dbg, source);
+  await selectSource(dbg, "simple1.js?x=1");
   const tab = findElement(dbg, "activeTab");
   is(tab.innerText, "simple1.js?x=1", "Tab label is simple1.js?x=1");
   await addBreakpoint(dbg, "simple1.js?x=1", 6);
-  assertBreakpointHeading(dbg, "simple1.js?x=1", 2);
+  assertBreakpointHeading(dbg, "simple1.js?x=1", 0);
 
   // pretty print the source and check the tab text
   clickElement(dbg, "prettyPrintButton");
@@ -33,12 +37,14 @@ add_task(async function() {
 
   const prettyTab = findElement(dbg, "activeTab");
   is(prettyTab.innerText, "simple1.js?x=1", "Tab label is simple1.js?x=1");
+  // /!\ this test is skiped and this assertion fails:
   ok(prettyTab.querySelector("img.prettyPrint"));
-  assertBreakpointHeading(dbg, "simple1.js?x=1", 2);
+  assertBreakpointHeading(dbg, "simple1.js?x=1", 0);
 
   // assert quick open works with queries
   pressKey(dbg, "quickOpen");
   type(dbg, "simple1.js?x");
+  // /!\ this test is skiped and this assertion fails:
   ok(findElement(dbg, "resultItems")[0].innerText.includes("simple.js?x=1"));
 });
 
@@ -49,6 +55,7 @@ function getLabel(dbg, index) {
 }
 
 function assertBreakpointHeading(dbg, label, index) {
-  const breakpointHeading = findElement(dbg, "breakpointItem", index).innerText;
+  const breakpointHeading = findAllElements(dbg, "breakpointHeadings")[index]
+    .innerText;
   is(breakpointHeading, label, `Breakpoint heading is ${label}`);
 }

devtools/client/debugger/test/mochitest/browser_dbg-sources.js

@@ -19,17 +19,38 @@ add_task(async function() {
   } = dbg;
 
   // Expand nodes and make sure more sources appear.
-  await assertSourceCount(dbg, 3);
   is(
     findElement(dbg, "sourceNode", 1).textContent.trim(),
     "Main Thread",
     "Main thread is labeled properly"
   );
+  info("Before interacting with the source tree, no source are displayed");
+  await waitForSourcesInSourceTree(dbg, [], { noExpand: true });
   await clickElement(dbg, "sourceDirectoryLabel", 3);
+  info(
+    "After clicking on the directory, all sources but the nested one are displayed"
+  );
+  await waitForSourcesInSourceTree(
+    dbg,
+    ["doc-sources.html", "simple1.js", "simple2.js", "long.js"],
+    { noExpand: true }
+  );
 
-  await assertSourceCount(dbg, 8);
   await clickElement(dbg, "sourceDirectoryLabel", 4);
-  await assertSourceCount(dbg, 9);
+  info(
+    "After clicing on the nested directory, the nested source is also displayed"
+  );
+  await waitForSourcesInSourceTree(
+    dbg,
+    [
+      "doc-sources.html",
+      "simple1.js",
+      "simple2.js",
+      "long.js",
+      "nested-source.js",
+    ],
+    { noExpand: true }
+  );
 
   const selected = waitForDispatch(dbg.store, "SET_SELECTED_LOCATION");
   await clickElement(dbg, "sourceNode", 5);
@@ -47,13 +68,25 @@ add_task(async function() {
   await assertNodeIsFocused(dbg, 5);
 
   // Make sure new sources appear in the list.
-  SpecialPowers.spawn(gBrowser.selectedBrowser, [], function() {
+  await SpecialPowers.spawn(gBrowser.selectedBrowser, [], function() {
     const script = content.document.createElement("script");
     script.src = "math.min.js";
     content.document.body.appendChild(script);
   });
 
-  await waitForSourceCount(dbg, 10);
+  info("After adding math.min.js, we got a new source displayed");
+  await waitForSourcesInSourceTree(
+    dbg,
+    [
+      "doc-sources.html",
+      "simple1.js",
+      "simple2.js",
+      "long.js",
+      "nested-source.js",
+      "math.min.js",
+    ],
+    { noExpand: true }
+  );
   await assertNodeIsFocused(dbg, 5);
   is(
     getSourceNodeLabel(dbg, 8),

devtools/client/debugger/test/mochitest/shared-head.js

@@ -1481,6 +1481,10 @@ const selectors = {
   editorFooter: ".editor-pane .source-footer",
   sourceNode: i => `.sources-list .tree-node:nth-child(${i}) .node`,
   sourceNodes: ".sources-list .tree-node",
+  sourceTreeThreads: '.sources-list .tree-node[aria-level="1"]',
+  sourceTreeThreadsNodes:
+    '.sources-list .tree-node[aria-level="1"] > .node > span:nth-child(1)',
+  sourceTreeFiles: ".sources-list .tree-node[data-expandable=false]",
   threadSourceTree: i => `.threads-list .sources-pane:nth-child(${i})`,
   threadSourceTreeHeader: i =>
     `${selectors.threadSourceTree(i)} .thread-header`,
@@ -1978,18 +1982,44 @@ async function waitForBreakableLine(dbg, source, lineNumber) {
   );
 }
 
-async function waitForSourceCount(dbg, i) {
-  // We are forced to wait until the DOM nodes appear because the
-  // source tree batches its rendering.
-  info(`waiting for ${i} sources`);
+async function expandSourceTree(dbg) {
+  const rootNodes = dbg.win.document.querySelectorAll(
+    selectors.sourceTreeThreadsNodes
+  );
+  for (const rootNode of rootNodes) {
+    await expandAllSourceNodes(dbg, rootNode);
+    await wait(250);
+  }
+}
+
+async function waitForSourceTreeThreadsCount(dbg, i) {
+  info(`waiting for ${i} threads in the source tree`);
   await waitUntil(() => {
-    return findAllElements(dbg, "sourceNodes").length === i;
+    return findAllElements(dbg, "sourceTreeThreads").length === i;
   });
 }
 
-async function assertSourceCount(dbg, count) {
-  await waitForSourceCount(dbg, count);
-  is(findAllElements(dbg, "sourceNodes").length, count, `${count} sources`);
+async function waitForSourcesInSourceTree(
+  dbg,
+  sources,
+  { noExpand = false } = {}
+) {
+  info(`waiting for ${sources.length} files in the source tree`);
+  await waitFor(async () => {
+    if (!noExpand) {
+      await expandSourceTree(dbg);
+    }
+    // Replace some non visible space characters that prevents Array.includes from working correctly
+    const displayedSources = [...findAllElements(dbg, "sourceTreeFiles")].map(
+      e => {
+        return e.textContent.trim().replace(/^[\s\u200b]*/g, "");
+      }
+    );
+    return (
+      displayedSources.length == sources.length &&
+      sources.every(source => displayedSources.includes(source))
+    );
+  });
 }
 
 async function waitForNodeToGainFocus(dbg, index) {