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
--- 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) {