Bug 1315794 - migrate aboutdebugging to React 15.3.2;r=linclark draft
authorJulian Descottes <jdescottes@mozilla.com>
Mon, 07 Nov 2016 22:30:03 +0100
changeset 434987 0f6ac42b6828428d2606d9f52fcbf176bab949d3
parent 434636 908557c762f798605a2f96e4c943791cbada1b50
child 536187 aecad0eccd3911e4a465d93a6073c1c35d958459
push id34904
push userjdescottes@mozilla.com
push dateMon, 07 Nov 2016 22:07:02 +0000
reviewerslinclark
bugs1315794
milestone52.0a1
Bug 1315794 - migrate aboutdebugging to React 15.3.2;r=linclark Use ReactDOM.render instead of React.render (same for unmountComponentAtNode) Update tests to observe both childList and characterData mutations when expecting only text changes. MozReview-Commit-ID: ILTgypkpZRz
devtools/client/aboutdebugging/initializer.js
devtools/client/aboutdebugging/test/browser_addons_reload.js
devtools/client/aboutdebugging/test/browser_tabs.js
devtools/client/aboutdebugging/test/head.js
--- a/devtools/client/aboutdebugging/initializer.js
+++ b/devtools/client/aboutdebugging/initializer.js
@@ -19,18 +19,18 @@ loader.lazyRequireGetter(this, "Debugger
 loader.lazyRequireGetter(this, "Telemetry",
   "devtools/client/shared/telemetry");
 
 const { require } = BrowserLoader({
   baseURI: "resource://devtools/client/aboutdebugging/",
   window
 });
 
-const { createFactory, render, unmountComponentAtNode } =
-  require("devtools/client/shared/vendor/react");
+const { createFactory } = require("devtools/client/shared/vendor/react");
+const { render, unmountComponentAtNode } = require("devtools/client/shared/vendor/react-dom");
 
 const AboutDebuggingApp = createFactory(require("./components/aboutdebugging"));
 
 var AboutDebugging = {
   init() {
     if (!DebuggerServer.initialized) {
       DebuggerServer.init();
       DebuggerServer.addBrowserActors();
--- a/devtools/client/aboutdebugging/test/browser_addons_reload.js
+++ b/devtools/client/aboutdebugging/test/browser_addons_reload.js
@@ -165,18 +165,18 @@ add_task(function* reloadButtonRefreshes
   info(`addon installed: ${addon.id}`);
   yield onAddonListUpdated;
 
   const newName = "Temporary web extension (updated)";
   tempExt.writeManifest(Object.assign({}, manifestBase, {name: newName}));
 
   // Wait for the add-on list to be updated with the reloaded name.
   const onReInstall = promiseAddonEvent("onInstalled");
-  const onAddonReloaded = waitForMutation(getAddonList(document),
-                                          { childList: true, subtree: true });
+  const onAddonReloaded = waitForContentMutation(getAddonList(document));
+
   const reloadButton = getReloadButton(document, manifestBase.name);
   reloadButton.click();
 
   yield onAddonReloaded;
   const [reloadedAddon] = yield onReInstall;
   // Make sure the name was updated correctly.
   const allAddons = [...document.querySelectorAll("#addons .target-name")]
     .map(element => element.textContent);
--- a/devtools/client/aboutdebugging/test/browser_tabs.js
+++ b/devtools/client/aboutdebugging/test/browser_tabs.js
@@ -34,17 +34,17 @@ add_task(function* () {
   let newNames = [...tabsElement.querySelectorAll(".target-name")];
   newNames = newNames.filter(node => !names.includes(node));
   is(newNames.length, 1, "A new tab appeared in the list");
   let newTabTarget = newNames[0];
 
   // Then wait for title update, but on slow test runner, the title may already
   // be set to the expected value
   if (newTabTarget.textContent != "foo") {
-    yield waitForMutation(newTabTarget, { childList: true });
+    yield waitForContentMutation(newTabTarget);
   }
 
   // Check that the new tab appears in the UI
   is(newTabTarget.textContent, "foo", "The tab title got updated");
   is(newTabTarget.title, TAB_URL, "The tab tooltip is the url");
 
   // Finally, close the tab
   let onTabsUpdate = waitForMutation(tabsElement, { childList: true });
--- a/devtools/client/aboutdebugging/test/head.js
+++ b/devtools/client/aboutdebugging/test/head.js
@@ -1,14 +1,14 @@
 /* Any copyright is dedicated to the Public Domain.
    http://creativecommons.org/publicdomain/zero/1.0/ */
 
 /* eslint-env browser */
 /* exported openAboutDebugging, changeAboutDebuggingHash, closeAboutDebugging,
-   installAddon, uninstallAddon, waitForMutation, assertHasTarget,
+   installAddon, uninstallAddon, waitForMutation, waitForContentMutation, assertHasTarget,
    getServiceWorkerList, getTabList, openPanel, waitForInitialAddonList,
    waitForServiceWorkerRegistered, unregisterServiceWorker,
    waitForDelayedStartupFinished, setupTestAboutDebuggingWebExtension,
    waitForServiceWorkerActivation */
 /* import-globals-from ../../framework/test/shared-head.js */
 
 "use strict";
 
@@ -225,16 +225,32 @@ function waitForMutation(target, mutatio
       observer.disconnect();
       resolve();
     });
     observer.observe(target, mutationOptions);
   });
 }
 
 /**
+ * Returns a promise that will resolve after receiving a mutation in the subtree of the
+ * provided target. Depending on the current React implementation, a text change might be
+ * observable as a childList mutation or a characterData mutation.
+ *
+ * @param {Node} target
+ * @return {Promise}
+ */
+function waitForContentMutation(target) {
+  return waitForMutation(target, {
+    characterData: true,
+    childList: true,
+    subtree: true
+  });
+}
+
+/**
  * Checks if an about:debugging TargetList element contains a Target element
  * corresponding to the specified name.
  * @param {Boolean} expected
  * @param {Document} document
  * @param {String} type
  * @param {String} name
  */
 function assertHasTarget(expected, document, type, name) {