Bug 1611096 - Fix tests relying on newRoot mutations r=rcaliman

Depends on D62623

`new-root` is no longer a mutation, but an event emitted by the `walker` actor.
Tests watching for mutations should be updated accordingly. They also need to call watchRootNode explicitly.

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

devtools/client/framework/test/browser_toolbox_window_reload_target.js

@@ -112,18 +112,21 @@ async function testReload(shortcut, toolbox) {
         for (const { type } of mutations) {
           if (type === "documentUnload") {
             this._isDocumentUnloaded = true;
-          } else if (type === "newRoot") {
-            this._isNewRooted = true;
           }
         }
       },
+      onNewRootNode() {
+        this._isNewRooted = true;
+      },
       isReady() {
         return this._isDocumentUnloaded && this._isNewRooted;
       },
     };
 
     observer.onMutation = observer.onMutation.bind(observer);
+    observer.onNewRootNode = observer.onNewRootNode.bind(observer);
     walker.on("mutations", observer.onMutation);
+    walker.watchRootNode(observer.onNewRootNode);
 
     // If we have a jsdebugger panel, wait for it to complete its reload
     const jsdebugger = toolbox.getPanel("jsdebugger");
@@ -137,6 +140,7 @@ async function testReload(shortcut, toolbox) {
       // Wait for the documentUnload and newRoot were fired.
       await waitUntil(() => observer.isReady());
       walker.off("mutations", observer.onMutation);
+      walker.unwatchRootNode(observer.onNewRootNode);
       await onReloaded;
       resolve();
     };

devtools/client/inspector/test/browser_inspector_remove-iframe-during-load.js

@@ -27,7 +27,6 @@ add_task(async function() {
 
   // Create/remove an extra one now, after the load event.
   info("Creating and removing an iframe.");
-  const onMarkupLoaded = inspector.once("markuploaded");
   testActor.eval(
     "new " +
       function() {
@@ -42,9 +41,6 @@ add_task(async function() {
     "The after-load iframe should have been removed."
   );
 
-  info("Waiting for markup-view to load.");
-  await onMarkupLoaded;
-
   // Assert that the markup-view is displayed and works
   ok(!(await testActor.hasNode("iframe")), "Iframe has been removed.");
   is(

devtools/server/tests/chrome/inspector-helpers.js

@@ -1,6 +1,6 @@
 /* exported attachURL, promiseDone,
-   promiseOnce, isNewRoot,
-   waitForMutation, addTest, addAsyncTest,
+   promiseOnce,
+   addTest, addAsyncTest,
    runNextTest, _documentWalker */
 "use strict";
 
@@ -107,32 +107,6 @@ function promiseDone(currentPromise) {
   });
 }
 
-// Mutation list testing
-
-function isNewRoot(change) {
-  return change.type === "newRoot";
-}
-
-// Load mutations aren't predictable, so keep accumulating mutations until
-// the one we're looking for shows up.
-function waitForMutation(walker, test, mutations = []) {
-  return new Promise(resolve => {
-    for (const change of mutations) {
-      if (test(change)) {
-        resolve(mutations);
-      }
-    }
-
-    walker.once("mutations", newMutations => {
-      waitForMutation(walker, test, mutations.concat(newMutations)).then(
-        finalMutations => {
-          resolve(finalMutations);
-        }
-      );
-    });
-  });
-}
-
 var _tests = [];
 function addTest(test) {
   _tests.push(test);

devtools/server/tests/chrome/test_inspector-dead-nodes.html

@@ -21,12 +21,25 @@ window.onload = function() {
 let gWalker = null;
 let gDoc = null;
 
+async function reloadTarget() {
+  const onNewRootAvailable = gWalker.once("root-available");
+  gDoc.defaultView.location.reload();
+  await onNewRootAvailable;
+}
+
 addAsyncTest(async function() {
   const url = document.getElementById("inspectorContent").href;
   const { target, doc } = await attachURL(url);
   gDoc = doc;
   const inspector = await target.getFront("inspector");
   gWalker = inspector.walker;
+
+  info("Start watching for root nodes and wait for the initial root node");
+  let watchRootNodeResolve;
+  const onInitialRootNodePromise = new Promise(r => (watchRootNodeResolve = r));
+  gWalker.watchRootNode(() => watchRootNodeResolve());
+  await onInitialRootNodePromise;
+
   runNextTest();
 });
 
@@ -35,10 +48,9 @@ addAsyncTest(async function() {
     "walker.children(nodeFront) before the load completes shouldn't fail");
 
   const nodeFront = await gWalker.querySelector(gWalker.rootNode, "body");
-  const newRoot = waitForMutation(gWalker, isNewRoot);
-  gDoc.defaultView.location.reload();
+
+  await reloadTarget();
   await gWalker.children(nodeFront);
-  await newRoot;
 
   ok(true, "The call to walker.children() didn't fail");
   runNextTest();
@@ -49,10 +61,8 @@ addAsyncTest(async function() {
     "walker.nextSibling(nodeFront) before the load completes shouldn't fail");
 
   const nodeFront = await gWalker.querySelector(gWalker.rootNode, "h1");
-  const newRoot = waitForMutation(gWalker, isNewRoot);
-  gDoc.defaultView.location.reload();
+  await reloadTarget();
   await gWalker.nextSibling(nodeFront);
-  await newRoot;
 
   ok(true, "The call to walker.nextSibling() didn't fail");
   runNextTest();
@@ -63,10 +73,8 @@ addAsyncTest(async function() {
     "walker.previousSibling(nodeFront) before the load completes shouldn't fail");
 
   const nodeFront = await gWalker.querySelector(gWalker.rootNode, "h1");
-  const newRoot = waitForMutation(gWalker, isNewRoot);
-  gDoc.defaultView.location.reload();
+  await reloadTarget();
   await gWalker.previousSibling(nodeFront);
-  await newRoot;
 
   ok(true, "The call to walker.previousSibling() didn't fail");
   runNextTest();
@@ -78,10 +86,8 @@ addAsyncTest(async function() {
     "shouldn't fail");
 
   const nodeFront = await gWalker.querySelector(gWalker.rootNode, "h1");
-  const newRoot = waitForMutation(gWalker, isNewRoot);
-  gDoc.defaultView.location.reload();
+  await reloadTarget();
   await gWalker.addPseudoClassLock(nodeFront, ":hover");
-  await newRoot;
 
   ok(true, "The call to walker.addPseudoClassLock() didn't fail");
   runNextTest();
@@ -93,10 +99,8 @@ addAsyncTest(async function() {
     "shouldn't fail");
 
   const nodeFront = await gWalker.querySelector(gWalker.rootNode, "h1");
-  const newRoot = waitForMutation(gWalker, isNewRoot);
-  gDoc.defaultView.location.reload();
+  await reloadTarget();
   await gWalker.removePseudoClassLock(nodeFront, ":hover");
-  await newRoot;
 
   ok(true, "The call to walker.removePseudoClassLock() didn't fail");
   runNextTest();
@@ -108,10 +112,8 @@ addAsyncTest(async function() {
     "shouldn't fail");
 
   const nodeFront = await gWalker.querySelector(gWalker.rootNode, "h1");
-  const newRoot = waitForMutation(gWalker, isNewRoot);
-  gDoc.defaultView.location.reload();
+  await reloadTarget();
   await gWalker.clearPseudoClassLocks(nodeFront);
-  await newRoot;
 
   ok(true, "The call to walker.clearPseudoClassLocks() didn't fail");
   runNextTest();
@@ -122,10 +124,8 @@ addAsyncTest(async function() {
     "walker.innerHTML(nodeFront) before the load completes shouldn't fail");
 
   const nodeFront = await gWalker.querySelector(gWalker.rootNode, "h1");
-  const newRoot = waitForMutation(gWalker, isNewRoot);
-  gDoc.defaultView.location.reload();
+  await reloadTarget();
   await gWalker.innerHTML(nodeFront);
-  await newRoot;
 
   ok(true, "The call to walker.innerHTML() didn't fail");
   runNextTest();
@@ -136,10 +136,8 @@ addAsyncTest(async function() {
     "walker.setInnerHTML(nodeFront) before the load completes shouldn't fail");
 
   const nodeFront = await gWalker.querySelector(gWalker.rootNode, "h1");
-  const newRoot = waitForMutation(gWalker, isNewRoot);
-  gDoc.defaultView.location.reload();
+  await reloadTarget();
   await gWalker.setInnerHTML(nodeFront, "<span>innerHTML changed</span>");
-  await newRoot;
 
   ok(true, "The call to walker.setInnerHTML() didn't fail");
   runNextTest();
@@ -150,10 +148,8 @@ addAsyncTest(async function() {
     "walker.outerHTML(nodeFront) before the load completes shouldn't fail");
 
   const nodeFront = await gWalker.querySelector(gWalker.rootNode, "h1");
-  const newRoot = waitForMutation(gWalker, isNewRoot);
-  gDoc.defaultView.location.reload();
+  await reloadTarget();
   await gWalker.outerHTML(nodeFront);
-  await newRoot;
 
   ok(true, "The call to walker.outerHTML() didn't fail");
   runNextTest();
@@ -164,10 +160,8 @@ addAsyncTest(async function() {
     "walker.setOuterHTML(nodeFront) before the load completes shouldn't fail");
 
   const nodeFront = await gWalker.querySelector(gWalker.rootNode, "h1");
-  const newRoot = waitForMutation(gWalker, isNewRoot);
-  gDoc.defaultView.location.reload();
+  await reloadTarget();
   await gWalker.setOuterHTML(nodeFront, "<h1><span>innerHTML changed</span></h1>");
-  await newRoot;
 
   ok(true, "The call to walker.setOuterHTML() didn't fail");
   runNextTest();
@@ -179,11 +173,9 @@ addAsyncTest(async function() {
     "fail");
 
   const nodeFront = await gWalker.querySelector(gWalker.rootNode, "h1");
-  const newRoot = waitForMutation(gWalker, isNewRoot);
-  gDoc.defaultView.location.reload();
+  await reloadTarget();
   await gWalker.insertAdjacentHTML(nodeFront, "afterEnd",
     "<span>new adjacent HTML</span>");
-  await newRoot;
 
   ok(true, "The call to walker.insertAdjacentHTML() didn't fail");
   runNextTest();
@@ -194,15 +186,13 @@ addAsyncTest(async function() {
     "walker.removeNode(nodeFront) before the load completes should throw");
 
   const nodeFront = await gWalker.querySelector(gWalker.rootNode, "h1");
-  const newRoot = waitForMutation(gWalker, isNewRoot);
-  gDoc.defaultView.location.reload();
+  await reloadTarget();
   let hasThrown = false;
   try {
     await gWalker.removeNode(nodeFront);
   } catch (e) {
     hasThrown = true;
   }
-  await newRoot;
 
   ok(hasThrown, "The call to walker.removeNode() threw");
   runNextTest();
@@ -215,15 +205,13 @@ addAsyncTest(async function() {
   const nodeFront1 = await gWalker.querySelector(gWalker.rootNode, "h1");
   const nodeFront2 = await gWalker.querySelector(gWalker.rootNode, "#longstring");
   const nodeFront3 = await gWalker.querySelector(gWalker.rootNode, "#shortstring");
-  const newRoot = waitForMutation(gWalker, isNewRoot);
-  gDoc.defaultView.location.reload();
+  await reloadTarget();
   let hasThrown = false;
   try {
     await gWalker.removeNodes([nodeFront1, nodeFront2, nodeFront3]);
   } catch (e) {
     hasThrown = true;
   }
-  await newRoot;
 
   ok(hasThrown, "The call to walker.removeNodes() threw");
   runNextTest();
@@ -236,10 +224,8 @@ addAsyncTest(async function() {
 
   const nodeFront = await gWalker.querySelector(gWalker.rootNode, "h1");
   const newParentFront = await gWalker.querySelector(gWalker.rootNode, "#longlist");
-  const newRoot = waitForMutation(gWalker, isNewRoot);
-  gDoc.defaultView.location.reload();
+  await reloadTarget();
   await gWalker.insertBefore(nodeFront, newParentFront);
-  await newRoot;
 
   ok(true, "The call to walker.insertBefore() didn't fail");
   runNextTest();
@@ -253,10 +239,8 @@ addAsyncTest(async function() {
   const nodeFront = await gWalker.querySelector(gWalker.rootNode, "h1");
   const newParentFront = await gWalker.querySelector(gWalker.rootNode, "#longlist");
   const siblingFront = await gWalker.querySelector(gWalker.rootNode, "#b");
-  const newRoot = waitForMutation(gWalker, isNewRoot);
-  gDoc.defaultView.location.reload();
+  await reloadTarget();
   await gWalker.insertBefore(nodeFront, newParentFront, siblingFront);
-  await newRoot;
 
   ok(true, "The call to walker.insertBefore() didn't fail");
   runNextTest();
@@ -267,10 +251,8 @@ addAsyncTest(async function() {
     "walker.editTagName(nodeFront) before the load completes shouldn't fail");
 
   const nodeFront = await gWalker.querySelector(gWalker.rootNode, "h1");
-  const newRoot = waitForMutation(gWalker, isNewRoot);
-  gDoc.defaultView.location.reload();
+  await reloadTarget();
   await gWalker.editTagName(nodeFront, "h2");
-  await newRoot;
 
   ok(true, "The call to walker.editTagName() didn't fail");
   runNextTest();
@@ -281,10 +263,8 @@ addAsyncTest(async function() {
     "walker.hideNode(nodeFront) before the load completes shouldn't fail");
 
   const nodeFront = await gWalker.querySelector(gWalker.rootNode, "h1");
-  const newRoot = waitForMutation(gWalker, isNewRoot);
-  gDoc.defaultView.location.reload();
+  await reloadTarget();
   await gWalker.hideNode(nodeFront);
-  await newRoot;
 
   ok(true, "The call to walker.hideNode() didn't fail");
   runNextTest();
@@ -295,10 +275,8 @@ addAsyncTest(async function() {
     "walker.unhideNode(nodeFront) before the load completes shouldn't fail");
 
   const nodeFront = await gWalker.querySelector(gWalker.rootNode, "h1");
-  const newRoot = waitForMutation(gWalker, isNewRoot);
-  gDoc.defaultView.location.reload();
+  await reloadTarget();
   await gWalker.unhideNode(nodeFront);
-  await newRoot;
 
   ok(true, "The call to walker.unhideNode() didn't fail");
   runNextTest();
@@ -309,10 +287,8 @@ addAsyncTest(async function() {
     "walker.releaseNode(nodeFront) before the load completes shouldn't fail");
 
   const nodeFront = await gWalker.querySelector(gWalker.rootNode, "h1");
-  const newRoot = waitForMutation(gWalker, isNewRoot);
-  gDoc.defaultView.location.reload();
+  await reloadTarget();
   await gWalker.releaseNode(nodeFront);
-  await newRoot;
 
   ok(true, "The call to walker.releaseNode() didn't fail");
   runNextTest();
@@ -323,10 +299,8 @@ addAsyncTest(async function() {
     "walker.querySelector(nodeFront) before the load completes shouldn't fail");
 
   const nodeFront = await gWalker.querySelector(gWalker.rootNode, "body");
-  const newRoot = waitForMutation(gWalker, isNewRoot);
-  gDoc.defaultView.location.reload();
+  await reloadTarget();
   await gWalker.querySelector(nodeFront, "h1");
-  await newRoot;
 
   ok(true, "The call to walker.querySelector() didn't fail");
   runNextTest();

devtools/server/tests/chrome/test_inspector-reload.html

@@ -28,24 +28,41 @@ addTest(async function setup() {
   gInspectee = doc;
   const walker = inspector.walker;
   gWalker = await inspector.getWalker();
+
   ok(walker === gWalker, "getWalker() twice should return the same walker.");
   runNextTest();
 });
 
-addTest(function testReload() {
+addTest(async function testReload() {
   const oldRootID = gWalker.rootNode.actorID;
-  // Load a node to populate the tree a bit.
-  promiseDone(gWalker.querySelector(gWalker.rootNode, "#a").then(front => {
-    gInspectee.defaultView.location.reload();
-    return waitForMutation(gWalker, isNewRoot);
-  }).then(() => {
-    ok(gWalker.rootNode.actorID != oldRootID, "Root node should have changed.");
-  }).then(() => {
-    // Make sure we can still access the document
-    return gWalker.querySelector(gWalker.rootNode, "#a");
-  }).then(front => {
-    ok(front.actorID, "Got a new actor ID");
-  }).then(runNextTest));
+
+  // watchRootNodeResolve will be assigned to different promises throughout the
+  // test to be able to await on individual calls of the watchRootNode callback.
+  let watchRootNodeResolve;
+
+  info("Start watching for root nodes and wait for the initial root node");
+  const onInitialRootNodePromise = new Promise(r => (watchRootNodeResolve = r));
+  const onInitialNewRootAvailable = gWalker.once("root-available");
+  gWalker.watchRootNode(() => watchRootNodeResolve());
+  await Promise.all([onInitialNewRootAvailable, onInitialRootNodePromise]);
+
+  info("Retrieve the node front for the selector `#a`");
+  const nodeFront = await gWalker.querySelector(gWalker.rootNode, "#a");
+  ok(nodeFront.actorID, "Node front has a valid actor ID");
+
+  info("Reload the page and wait for the newRoot mutation");
+  const onNewRootNodePromise = new Promise(r => (watchRootNodeResolve = r));
+  const onNewRootAvailable = gWalker.once("root-available");
+
+  gInspectee.defaultView.location.reload();
+  await Promise.all([onNewRootAvailable, onNewRootNodePromise]);
+
+  info("Retrieve the (new) node front for the selector `#a`");
+  const newNodeFront = await gWalker.querySelector(gWalker.rootNode, "#a");
+  ok(newNodeFront.actorID, "Got a new actor ID");
+  ok(gWalker.rootNode.actorID != oldRootID, "Root node should have changed.");
+
+  runNextTest();
 });
 
 addTest(function cleanup() {