Bug 1416824 - Patch 1: React 16 Require statements and paths r=nchevobbe
☠☠ backed out by 10e735083a7c ☠ ☠
authorMike Ratcliffe <mratcliffe@mozilla.com>
Wed, 07 Feb 2018 16:31:57 +0000
changeset 402797 f52006e2a1dcbc7994eb2f795140f592cc4d148b
parent 402796 dff05b1676b1aef24aca19027ef2b4e87cc4ed46
child 402798 b2aebf1d7ee7e9bb2c6d0b58ba8bf5c1323874b0
push id33404
push usershindli@mozilla.com
push dateThu, 08 Feb 2018 10:03:18 +0000
treeherdermozilla-central@06b5d7476ebd [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersnchevobbe
bugs1416824
milestone60.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1416824 - Patch 1: React 16 Require statements and paths r=nchevobbe MozReview-Commit-ID: 7BDgpYfLZLH
devtools/client/jsonview/viewer-config.js
devtools/client/netmonitor/test/require-helper.js
devtools/client/responsive.html/test/browser/head.js
devtools/client/shared/browser-loader.js
devtools/client/shared/components/test/mochitest/head.js
devtools/client/shared/components/test/mochitest/test_tree_06.html
devtools/client/shared/components/test/mochitest/test_tree_09.html
devtools/client/shared/components/test/mochitest/test_tree_11.html
devtools/client/webconsole/new-console-output/test/helpers.js
devtools/client/webconsole/new-console-output/test/require-helper.js
--- a/devtools/client/jsonview/viewer-config.js
+++ b/devtools/client/jsonview/viewer-config.js
@@ -36,13 +36,17 @@ require.config({
     "devtools/client/shared/vendor/react-dom":
       JSONView.debug
       ? "resource://devtools-client-shared/vendor/react-dom-dev"
       : "resource://devtools-client-shared/vendor/react-dom",
     "devtools/client/shared/vendor/react-prop-types":
       JSONView.debug
       ? "resource://devtools-client-shared/vendor/react-prop-types-dev"
       : "resource://devtools-client-shared/vendor/react-prop-types",
+    "devtools/client/shared/vendor/react-dom-test-utils":
+      JSONView.debug
+      ? "resource://devtools-client-shared/vendor/react-dom-test-utils-dev"
+      : "resource://devtools-client-shared/vendor/react-dom-test-utils",
   }
 });
 
 // Load the main panel module
 requirejs(["json-viewer"]);
--- a/devtools/client/netmonitor/test/require-helper.js
+++ b/devtools/client/netmonitor/test/require-helper.js
@@ -7,22 +7,18 @@ const requireHacker = require("require-h
 
 requireHacker.global_hook("default", path => {
   switch (path) {
     // For Enzyme
     case "react-dom":
       return `const React = require('devtools/client/shared/vendor/react-dev'); module.exports = React`;
     case "react-dom/server":
       return `const React = require('devtools/client/shared/vendor/react-dev'); module.exports = React`;
-    // TODO: Enzyme uses the require paths to choose which adapters are
-    // needed... we need to use react-addons-test-utils instead of
-    // react-dom/test-utils as the path until we upgrade to React 16+
-    // https://bugzil.la/1416824
     case "react-addons-test-utils":
-      return `const ReactDOM = require('devtools/client/shared/vendor/react-dom'); module.exports = ReactDOM.TestUtils`;
+      return `const TestUtils = require('devtools/client/shared/vendor/react-dom-test-utils'); module.exports = TestUtils`;
     // Use react-dev. This would be handled by browserLoader in Firefox.
     case "react":
     case "devtools/client/shared/vendor/react":
       return `const React = require('devtools/client/shared/vendor/react-dev'); module.exports = React`;
     // For Rep's use of AMD
     case "devtools/client/shared/vendor/react.default":
       return `const React = require('devtools/client/shared/vendor/react-dev'); module.exports = React`;
   }
--- a/devtools/client/responsive.html/test/browser/head.js
+++ b/devtools/client/responsive.html/test/browser/head.js
@@ -186,18 +186,17 @@ function getElRect(selector, win) {
   return el.getBoundingClientRect();
 }
 
 /**
  * Drag an element identified by 'selector' by [x,y] amount. Returns
  * the rect of the dragged element as it was before drag.
  */
 function dragElementBy(selector, x, y, win) {
-  let ReactDOM = win.require("devtools/client/shared/vendor/react-dom");
-  let { Simulate } = ReactDOM.TestUtils;
+  let { Simulate } = win.require("devtools/client/shared/vendor/react-dom-test-utils");
   let rect = getElRect(selector, win);
   let startPoint = {
     clientX: Math.floor(rect.left + rect.width / 2),
     clientY: Math.floor(rect.top + rect.height / 2),
   };
   let endPoint = [ startPoint.clientX + x, startPoint.clientY + y ];
 
   let elem = win.document.querySelector(selector);
@@ -223,36 +222,35 @@ async function testViewportResize(ui, se
   is(endRect.left - startRect.left, expectedHandleMove[0],
     `The x move of ${selector} is as expected`);
   is(endRect.top - startRect.top, expectedHandleMove[1],
     `The y move of ${selector} is as expected`);
 }
 
 function openDeviceModal({ toolWindow }) {
   let { document } = toolWindow;
-  let ReactDOM = toolWindow.require("devtools/client/shared/vendor/react-dom");
-  let { Simulate } = ReactDOM.TestUtils;
+  let { Simulate } = toolWindow.require("devtools/client/shared/vendor/react-dom-test-utils");
   let select = document.querySelector(".viewport-device-selector");
   let modal = document.querySelector("#device-modal-wrapper");
 
   info("Checking initial device modal state");
   ok(modal.classList.contains("closed") && !modal.classList.contains("opened"),
     "The device modal is closed by default.");
 
   info("Opening device modal through device selector.");
   select.value = OPEN_DEVICE_MODAL_VALUE;
   Simulate.change(select);
   ok(modal.classList.contains("opened") && !modal.classList.contains("closed"),
     "The device modal is displayed.");
 }
 
 function changeSelectValue({ toolWindow }, selector, value) {
   let { document } = toolWindow;
-  let ReactDOM = toolWindow.require("devtools/client/shared/vendor/react-dom");
-  let { Simulate } = ReactDOM.TestUtils;
+  let { Simulate } =
+    toolWindow.require("devtools/client/shared/vendor/react-dom-test-utils");
 
   info(`Selecting ${value} in ${selector}.`);
 
   let select = document.querySelector(selector);
   isnot(select, null, `selector "${selector}" should match an existing element.`);
 
   let option = [...select.options].find(o => o.value === String(value));
   isnot(option, undefined, `value "${value}" should match an existing option.`);
@@ -382,18 +380,18 @@ async function testUserAgentFromBrowser(
   is(ua, expected, `UA should be set to ${expected}`);
 }
 
 /**
  * Assuming the device modal is open and the device adder form is shown, this helper
  * function adds `device` via the form, saves it, and waits for it to appear in the store.
  */
 function addDeviceInModal(ui, device) {
-  let ReactDOM = ui.toolWindow.require("devtools/client/shared/vendor/react-dom");
-  let { Simulate } = ReactDOM.TestUtils;
+  let { Simulate } =
+    ui.toolWindow.require("devtools/client/shared/vendor/react-dom-test-utils");
   let { store, document } = ui.toolWindow;
 
   let nameInput = document.querySelector("#device-adder-name input");
   let [ widthInput, heightInput ] = document.querySelectorAll("#device-adder-size input");
   let pixelRatioInput = document.querySelector("#device-adder-pixel-ratio input");
   let userAgentInput = document.querySelector("#device-adder-user-agent input");
   let touchInput = document.querySelector("#device-adder-touch input");
 
--- a/devtools/client/shared/browser-loader.js
+++ b/devtools/client/shared/browser-loader.js
@@ -103,16 +103,18 @@ function BrowserLoaderBuilder({ baseURI,
     dynamicPaths["devtools/client/shared/vendor/react"] =
       "resource://devtools/client/shared/vendor/react-dev";
     dynamicPaths["devtools/client/shared/vendor/react-dom"] =
       "resource://devtools/client/shared/vendor/react-dom-dev";
     dynamicPaths["devtools/client/shared/vendor/react-dom-server"] =
       "resource://devtools/client/shared/vendor/react-dom-server-dev";
     dynamicPaths["devtools/client/shared/vendor/react-prop-types"] =
       "resource://devtools/client/shared/vendor/react-prop-types-dev";
+    dynamicPaths["devtools/client/shared/vendor/react-dom-test-utils"] =
+      "resource://devtools/client/shared/vendor/react-dom-test-utils-dev";
   }
 
   const opts = {
     sharedGlobal: true,
     sandboxPrototype: window,
     sandboxName: "DevTools (UI loader)",
     paths: Object.assign({}, dynamicPaths, loaderOptions.paths),
     invisibleToDebugger: loaderOptions.invisibleToDebugger,
--- a/devtools/client/shared/components/test/mochitest/head.js
+++ b/devtools/client/shared/components/test/mochitest/head.js
@@ -21,20 +21,20 @@ var { TargetFactory } = require("devtool
 var { Toolbox } = require("devtools/client/framework/toolbox");
 
 flags.testing = true;
 var { require: browserRequire } = BrowserLoader({
   baseURI: "resource://devtools/client/shared/",
   window
 });
 
-let React = browserRequire("devtools/client/shared/vendor/react");
-let ReactDOM = browserRequire("devtools/client/shared/vendor/react-dom");
-let dom = browserRequire("devtools/client/shared/vendor/react-dom-factories");
-let TestUtils = ReactDOM.TestUtils;
+const React = browserRequire("devtools/client/shared/vendor/react");
+const ReactDOM = browserRequire("devtools/client/shared/vendor/react-dom");
+const dom = browserRequire("devtools/client/shared/vendor/react-dom-factories");
+const TestUtils = browserRequire("devtools/client/shared/vendor/react-dom-test-utils");
 
 var EXAMPLE_URL = "http://example.com/browser/browser/devtools/shared/test/";
 
 function forceRender(comp) {
   return setState(comp, {})
     .then(() => setState(comp, {}));
 }
 
--- a/devtools/client/shared/components/test/mochitest/test_tree_06.html
+++ b/devtools/client/shared/components/test/mochitest/test_tree_06.html
@@ -15,17 +15,17 @@ Test keyboard navigation with the Tree c
 <body>
 <pre id="test">
 <script src="head.js" type="application/javascript"></script>
 <script type="application/javascript">
 window.onload = Task.async(function* () {
   try {
     const ReactDOM = browserRequire("devtools/client/shared/vendor/react-dom");
     const { createFactory } = browserRequire("devtools/client/shared/vendor/react");
-    const { Simulate } = ReactDOM.TestUtils;
+    const { Simulate } = browserRequire("devtools/client/shared/vendor/react-dom-test-utils");
     const Tree = createFactory(browserRequire("devtools/client/shared/components/VirtualizedTree"));
 
     function renderTree(props) {
       const treeProps = Object.assign({},
         TEST_TREE_INTERFACE,
         { onFocus: x => renderTree({ focused: x }) },
         props
       );
--- a/devtools/client/shared/components/test/mochitest/test_tree_09.html
+++ b/devtools/client/shared/components/test/mochitest/test_tree_09.html
@@ -16,17 +16,17 @@ Test that when an item in the Tree compo
 <body>
 <pre id="test">
 <script src="head.js" type="application/javascript"></script>
 <script type="application/javascript">
 window.onload = Task.async(function* () {
   try {
     const ReactDOM = browserRequire("devtools/client/shared/vendor/react-dom");
     const { createFactory } = browserRequire("devtools/client/shared/vendor/react");
-    const { Simulate } = ReactDOM.TestUtils;
+    const { Simulate } = browserRequire("devtools/client/shared/vendor/react-dom-test-utils");
     const Tree = createFactory(browserRequire("devtools/client/shared/components/VirtualizedTree"));
 
     let numberOfExpands = 0;
     let lastExpandedItem = null;
 
     let numberOfCollapses = 0;
     let lastCollapsedItem = null;
 
--- a/devtools/client/shared/components/test/mochitest/test_tree_11.html
+++ b/devtools/client/shared/components/test/mochitest/test_tree_11.html
@@ -27,17 +27,17 @@ Test that when an item in the Tree compo
 <body>
 <pre id="test">
 <script src="head.js" type="application/javascript"></script>
 <script type="application/javascript">
 window.onload = Task.async(function* () {
   try {
     const ReactDOM = browserRequire("devtools/client/shared/vendor/react-dom");
     const { createFactory } = browserRequire("devtools/client/shared/vendor/react");
-    const { Simulate } = ReactDOM.TestUtils;
+    const { Simulate } = browserRequire("devtools/client/shared/vendor/react-dom-test-utils");
     const Tree = createFactory(browserRequire("devtools/client/shared/components/VirtualizedTree"));
 
     TEST_TREE.expanded = new Set("ABCDEFGHIJKLMNO".split(""));
 
     function renderTree(props) {
       const treeProps = Object.assign({},
         TEST_TREE_INTERFACE,
         {
--- a/devtools/client/webconsole/new-console-output/test/helpers.js
+++ b/devtools/client/webconsole/new-console-output/test/helpers.js
@@ -2,17 +2,17 @@
    http://creativecommons.org/publicdomain/zero/1.0/ */
 
 "use strict";
 
 let ReactDOM = require("devtools/client/shared/vendor/react-dom");
 let React = require("devtools/client/shared/vendor/react");
 const dom = require("devtools/client/shared/vendor/react-dom-factories");
 const { createElement } = React;
-const TestUtils = ReactDOM.TestUtils;
+const TestUtils = require("devtools/client/shared/vendor/react-dom-test-utils");
 
 const reduxActions = require("devtools/client/webconsole/new-console-output/actions/index");
 const { configureStore } = require("devtools/client/webconsole/new-console-output/store");
 const { IdGenerator } = require("devtools/client/webconsole/new-console-output/utils/id-generator");
 const { stubPackets } = require("devtools/client/webconsole/new-console-output/test/fixtures/stubs/index");
 const {
   getAllMessagesById,
 } = require("devtools/client/webconsole/new-console-output/selectors/messages");
--- a/devtools/client/webconsole/new-console-output/test/require-helper.js
+++ b/devtools/client/webconsole/new-console-output/test/require-helper.js
@@ -6,22 +6,18 @@ const requireHacker = require("require-h
 
 requireHacker.global_hook("default", path => {
   switch (path) {
     // For Enzyme
     case "react-dom":
       return `const ReactDOM = require('devtools/client/shared/vendor/react-dom'); module.exports = ReactDOM`;
     case "react-dom/server":
       return `const ReactDOMServer = require('devtools/client/shared/vendor/react-dom-server'); module.exports = ReactDOMServer`;
-    // TODO: Enzyme uses the require paths to choose which adapters are
-    // needed... we need to use react-addons-test-utils instead of
-    // react-dom/test-utils as the path until we upgrade to React 16+
-    // https://bugzil.la/1416824
     case "react-addons-test-utils":
-      return `const ReactDOM = require('devtools/client/shared/vendor/react-dom'); module.exports = ReactDOM.TestUtils`;
+      return `const TestUtils = require('devtools/client/shared/vendor/react-dom-test-utils'); module.exports = TestUtils`;
     case "react-redux":
       return `const ReactRedux = require('devtools/client/shared/vendor/react-redux'); module.exports = ReactRedux`;
     // Use react-dev. This would be handled by browserLoader in Firefox.
     case "react":
     case "devtools/client/shared/vendor/react":
       return `const React = require('devtools/client/shared/vendor/react-dev'); module.exports = React`;
     // For Rep's use of AMD
     case "devtools/client/shared/vendor/react.default":