Bug 1312236 - Fix Tree component tests after upgrade to React 15 r=fitzgen
authorJarda Snajdr <jsnajdr@gmail.com>
Mon, 28 Nov 2016 14:38:00 +0100
changeset 324660 e50389904bee75f75f391b5ea18246a7a5591272
parent 324659 98b965a62c11f6b92af704089ea2c6f2945489cc
child 324661 ea48aaafb70a4cb5b4513c2c1eb0dda09a56e9e6
push id24
push usermaklebus@msu.edu
push dateTue, 20 Dec 2016 03:11:33 +0000
reviewersfitzgen
bugs1312236
milestone53.0a1
Bug 1312236 - Fix Tree component tests after upgrade to React 15 r=fitzgen MozReview-Commit-ID: 1hHF3JLg4W
devtools/client/shared/components/test/mochitest/head.js
devtools/client/shared/components/test/mochitest/test_HSplitBox_01.html
devtools/client/shared/components/test/mochitest/test_frame_01.html
devtools/client/shared/components/test/mochitest/test_stack-trace.html
devtools/client/shared/components/test/mochitest/test_tree_05.html
devtools/client/shared/components/test/mochitest/test_tree_06.html
devtools/client/shared/components/test/mochitest/test_tree_07.html
devtools/client/shared/components/test/mochitest/test_tree_08.html
devtools/client/shared/components/test/mochitest/test_tree_09.html
devtools/client/shared/components/test/mochitest/test_tree_10.html
devtools/client/shared/components/test/mochitest/test_tree_11.html
--- a/devtools/client/shared/components/test/mochitest/head.js
+++ b/devtools/client/shared/components/test/mochitest/head.js
@@ -49,22 +49,16 @@ function onNextAnimationFrame(fn) {
 }
 
 function setState(component, newState) {
   return new Promise(resolve => {
     component.setState(newState, onNextAnimationFrame(resolve));
   });
 }
 
-function setProps(component, newProps) {
-  return new Promise(resolve => {
-    component.setProps(newProps, onNextAnimationFrame(resolve));
-  });
-}
-
 function dumpn(msg) {
   dump(`SHARED-COMPONENTS-TEST: ${msg}\n`);
 }
 
 /**
  * Tree
  */
 
--- a/devtools/client/shared/components/test/mochitest/test_HSplitBox_01.html
+++ b/devtools/client/shared/components/test/mochitest/test_HSplitBox_01.html
@@ -34,37 +34,43 @@ window.onload = Task.async(function* () 
   try {
     const React = browserRequire("devtools/client/shared/vendor/react");
     const ReactDOM = browserRequire("devtools/client/shared/vendor/react-dom");
 
     let HSplitBox = React.createFactory(browserRequire("devtools/client/shared/components/h-split-box"));
     ok(HSplitBox, "Should get HSplitBox");
 
     const newSizes = [];
-    const box = ReactDOM.render(HSplitBox({
-      start: "hello!",
-      end: "world!",
-      startWidth: .5,
-      onResize(newSize) {
-        newSizes.push(newSize);
-      },
-    }), window.document.body);
+
+    function renderBox(props) {
+      const boxProps = Object.assign({
+        start: "hello!",
+        end: "world!",
+        startWidth: .5,
+        onResize(newSize) {
+          newSizes.push(newSize);
+        }
+      }, props);
+      return ReactDOM.render(HSplitBox(boxProps), window.document.body);
+    }
+
+    const box = renderBox();
 
     // Test that we properly rendered our two panes.
 
     let panes = document.querySelectorAll(".h-split-box-pane");
     is(panes.length, 2, "Should get two panes");
     is(panes[0].style.flexGrow, "0.5", "Each pane should have .5 width");
     is(panes[1].style.flexGrow, "0.5", "Each pane should have .5 width");
     is(panes[0].textContent.trim(), "hello!", "First pane should be hello");
     is(panes[1].textContent.trim(), "world!", "Second pane should be world");
 
     // Now change the left width and assert that the changes are reflected.
 
-    yield setProps(box, { startWidth: .25 });
+    renderBox({ startWidth: .25 });
     panes = document.querySelectorAll(".h-split-box-pane");
     is(panes.length, 2, "Should still have two panes");
     is(panes[0].style.flexGrow, "0.25", "First pane's width should be .25");
     is(panes[1].style.flexGrow, "0.75", "Second pane's width should be .75");
 
     // Mouse moves without having grabbed the splitter should have no effect.
 
     let container = document.querySelector(".h-split-box");
--- a/devtools/client/shared/components/test/mochitest/test_frame_01.html
+++ b/devtools/client/shared/components/test/mochitest/test_frame_01.html
@@ -285,19 +285,17 @@ window.onload = Task.async(function* () 
       line: "1",
       shouldLink: true,
       tooltip: "View source in Debugger → http://www.cnn.com/:1",
     });
 
     function* checkFrameComponent(input, expected) {
       let props = Object.assign({ onClick: () => {} }, input);
       let frame = ReactDOM.render(Frame(props), window.document.body);
-      yield forceRender(frame);
-
-      let el = frame.getDOMNode();
+      let el = ReactDOM.findDOMNode(frame);
       let { source } = input.frame;
       checkFrameString(Object.assign({ el, source }, expected));
     }
 
   } catch (e) {
     ok(false, "Got an error: " + DevToolsUtils.safeErrorString(e));
   } finally {
     SimpleTest.finish();
--- a/devtools/client/shared/components/test/mochitest/test_stack-trace.html
+++ b/devtools/client/shared/components/test/mochitest/test_stack-trace.html
@@ -45,22 +45,22 @@ window.onload = function () {
     let props = {
       stacktrace,
       onViewSourceInDebugger: () => {}
     };
 
     let trace = ReactDOM.render(StackTrace(props), window.document.body);
     yield forceRender(trace);
 
-    let traceEl = trace.getDOMNode();
+    let traceEl = ReactDOM.findDOMNode(trace);
     ok(traceEl, "Rendered StackTrace has an element");
 
     // Get the child nodes and filter out the text-only whitespace ones
     let frameEls = Array.from(traceEl.childNodes)
-      .filter(n => n.className.includes("frame"));
+      .filter(n => n.className && n.className.includes("frame"));
     ok(frameEls, "Rendered StackTrace has frames");
     is(frameEls.length, 3, "StackTrace has 3 frames");
 
     // Check the top frame, function name should be anonymous
     checkFrameString({
       el: frameEls[0],
       functionName: "<anonymous>",
       source: "http://myfile.com/mahscripts.js",
--- a/devtools/client/shared/components/test/mochitest/test_tree_05.html
+++ b/devtools/client/shared/components/test/mochitest/test_tree_05.html
@@ -18,24 +18,31 @@ Test focusing with the Tree component.
 <script type="application/javascript;version=1.8">
 
 window.onload = Task.async(function* () {
   try {
     const ReactDOM = browserRequire("devtools/client/shared/vendor/react-dom");
     const React = browserRequire("devtools/client/shared/vendor/react");
     const { Simulate } = React.addons.TestUtils;
     const Tree = React.createFactory(browserRequire("devtools/client/shared/components/tree"));
-    const tree = ReactDOM.render(Tree(Object.assign({}, TEST_TREE_INTERFACE, {
-      onFocus: x => setProps(tree, { focused: x }),
-    })), window.document.body);
+
+    function renderTree(props) {
+      const treeProps = Object.assign({},
+        TEST_TREE_INTERFACE,
+        { onFocus: x => renderTree({ focused: x }) },
+        props
+      );
+      return ReactDOM.render(Tree(treeProps), window.document.body);
+    }
+
+    const tree = renderTree();
 
     TEST_TREE.expanded = new Set("ABCDEFGHIJKLMNO".split(""));
-    yield setProps(tree, {
-      focused: "G",
-    });
+
+    renderTree({ focused: "G" });
 
     isRenderedTree(document.body.textContent, [
       "A:false",
       "-B:false",
       "--E:false",
       "---K:false",
       "---L:false",
       "--F:false",
--- a/devtools/client/shared/components/test/mochitest/test_tree_06.html
+++ b/devtools/client/shared/components/test/mochitest/test_tree_06.html
@@ -17,29 +17,34 @@ Test keyboard navigation with the Tree c
 <script src="head.js" type="application/javascript;version=1.8"></script>
 <script type="application/javascript;version=1.8">
 window.onload = Task.async(function* () {
   try {
     const ReactDOM = browserRequire("devtools/client/shared/vendor/react-dom");
     const React = browserRequire("devtools/client/shared/vendor/react");
     const { Simulate } = React.addons.TestUtils;
     const Tree = React.createFactory(browserRequire("devtools/client/shared/components/tree"));
-    const tree = ReactDOM.render(Tree(Object.assign({}, TEST_TREE_INTERFACE, {
-      onFocus: x => setProps(tree, { focused: x }),
-    })), window.document.body);
+
+    function renderTree(props) {
+      const treeProps = Object.assign({},
+        TEST_TREE_INTERFACE,
+        { onFocus: x => renderTree({ focused: x }) },
+        props
+      );
+      return ReactDOM.render(Tree(treeProps), window.document.body);
+    }
+
+    const tree = renderTree();
 
     TEST_TREE.expanded = new Set("ABCDEFGHIJKLMNO".split(""));
 
     // UP ----------------------------------------------------------------------
 
     info("Up to the previous sibling.");
-
-    yield setProps(tree, {
-      focused: "L"
-    });
+    renderTree({ focused: "L" });
     Simulate.keyDown(document.querySelector(".tree"), { key: "ArrowUp" });
     yield forceRender(tree);
 
     isRenderedTree(document.body.textContent, [
       "A:false",
       "-B:false",
       "--E:false",
       "---K:true",
@@ -52,17 +57,16 @@ window.onload = Task.async(function* () 
       "-D:false",
       "--J:false",
       "M:false",
       "-N:false",
       "--O:false",
     ], "After the UP, K should be focused.");
 
     info("Up to the parent.");
-
     Simulate.keyDown(document.querySelector(".tree"), { key: "ArrowUp" });
     yield forceRender(tree);
 
     isRenderedTree(document.body.textContent, [
       "A:false",
       "-B:false",
       "--E:true",
       "---K:false",
@@ -75,20 +79,17 @@ window.onload = Task.async(function* () 
       "-D:false",
       "--J:false",
       "M:false",
       "-N:false",
       "--O:false",
     ], "After the UP, E should be focused.");
 
     info("Try and navigate up, past the first item.");
-
-    yield setProps(tree, {
-      focused: "A"
-    });
+    renderTree({ focused: "A" });
     Simulate.keyDown(document.querySelector(".tree"), { key: "ArrowUp" });
     yield forceRender(tree);
 
     isRenderedTree(document.body.textContent, [
       "A:true",
       "-B:false",
       "--E:false",
       "---K:false",
@@ -102,22 +103,18 @@ window.onload = Task.async(function* () 
       "--J:false",
       "M:false",
       "-N:false",
       "--O:false",
     ], "After the UP, A should be focused and we shouldn't have overflowed past it.");
 
     // DOWN --------------------------------------------------------------------
 
-    yield setProps(tree, {
-      focused: "K"
-    });
-
     info("Down to next sibling.");
-
+    renderTree({ focused: "K" });
     Simulate.keyDown(document.querySelector(".tree"), { key: "ArrowDown" });
     yield forceRender(tree);
 
     isRenderedTree(document.body.textContent, [
       "A:false",
       "-B:false",
       "--E:false",
       "---K:false",
@@ -130,17 +127,16 @@ window.onload = Task.async(function* () 
       "-D:false",
       "--J:false",
       "M:false",
       "-N:false",
       "--O:false",
     ], "After the DOWN, L should be focused.");
 
     info("Down to parent's next sibling.");
-
     Simulate.keyDown(document.querySelector(".tree"), { key: "ArrowDown" });
     yield forceRender(tree);
 
     isRenderedTree(document.body.textContent, [
       "A:false",
       "-B:false",
       "--E:false",
       "---K:false",
@@ -153,20 +149,17 @@ window.onload = Task.async(function* () 
       "-D:false",
       "--J:false",
       "M:false",
       "-N:false",
       "--O:false",
     ], "After the DOWN, F should be focused.");
 
     info("Try and go down past the last item.");
-
-    yield setProps(tree, {
-      focused: "O"
-    });
+    renderTree({ focused: "O" });
     Simulate.keyDown(document.querySelector(".tree"), { key: "ArrowDown" });
     yield forceRender(tree);
 
     isRenderedTree(document.body.textContent, [
       "A:false",
       "-B:false",
       "--E:false",
       "---K:false",
@@ -181,20 +174,17 @@ window.onload = Task.async(function* () 
       "M:false",
       "-N:false",
       "--O:true",
     ], "After the DOWN, O should still be focused and we shouldn't have overflowed past it.");
 
     // LEFT --------------------------------------------------------------------
 
     info("Left to go to parent.");
-
-    yield setProps(tree, {
-      focused: "L"
-    })
+    renderTree({ focused: "L" });
     Simulate.keyDown(document.querySelector(".tree"), { key: "ArrowLeft" });
     yield forceRender(tree);
 
     isRenderedTree(document.body.textContent, [
       "A:false",
       "-B:false",
       "--E:true",
       "---K:false",
@@ -207,17 +197,16 @@ window.onload = Task.async(function* () 
       "-D:false",
       "--J:false",
       "M:false",
       "-N:false",
       "--O:false",
     ], "After the LEFT, E should be focused.");
 
     info("Left to collapse children.");
-
     Simulate.keyDown(document.querySelector(".tree"), { key: "ArrowLeft" });
     yield forceRender(tree);
 
     isRenderedTree(document.body.textContent, [
       "A:false",
       "-B:false",
       "--E:true",
       "--F:false",
@@ -230,17 +219,16 @@ window.onload = Task.async(function* () 
       "M:false",
       "-N:false",
       "--O:false",
     ], "After the LEFT, E's children should be collapsed.");
 
     // RIGHT -------------------------------------------------------------------
 
     info("Right to expand children.");
-
     Simulate.keyDown(document.querySelector(".tree"), { key: "ArrowRight" });
     yield forceRender(tree);
 
     isRenderedTree(document.body.textContent, [
       "A:false",
       "-B:false",
       "--E:true",
       "---K:false",
@@ -253,17 +241,16 @@ window.onload = Task.async(function* () 
       "-D:false",
       "--J:false",
       "M:false",
       "-N:false",
       "--O:false",
     ], "After the RIGHT, E's children should be expanded again.");
 
     info("Right to go to next item.");
-
     Simulate.keyDown(document.querySelector(".tree"), { key: "ArrowRight" });
     yield forceRender(tree);
 
     isRenderedTree(document.body.textContent, [
       "A:false",
       "-B:false",
       "--E:false",
       "---K:true",
@@ -285,16 +272,17 @@ window.onload = Task.async(function* () 
       { key: "ArrowDown", altKey: true },
       { key: "ArrowDown", ctrlKey: true },
       { key: "ArrowDown", metaKey: true },
       { key: "ArrowDown", shiftKey: true },
     ];
     for (let key of keysWithModifier) {
       Simulate.keyDown(document.querySelector(".tree"), key);
       yield forceRender(tree);
+
       isRenderedTree(document.body.textContent, [
         "A:false",
         "-B:false",
         "--E:false",
         "---K:true",
         "---L:false",
         "--F:false",
         "--G:false",
--- a/devtools/client/shared/components/test/mochitest/test_tree_07.html
+++ b/devtools/client/shared/components/test/mochitest/test_tree_07.html
@@ -17,30 +17,30 @@ Test that arrows get the open attribute 
 <pre id="test">
 <script src="head.js" type="application/javascript;version=1.8"></script>
 <script type="application/javascript;version=1.8">
 window.onload = Task.async(function* () {
   try {
     const ReactDOM = browserRequire("devtools/client/shared/vendor/react-dom");
     const React = browserRequire("devtools/client/shared/vendor/react");
     const Tree = React.createFactory(browserRequire("devtools/client/shared/components/tree"));
-    const tree = ReactDOM.render(Tree(TEST_TREE_INTERFACE), window.document.body);
 
-    yield setProps(tree, {
+    const treeProps = Object.assign({}, TEST_TREE_INTERFACE, {
       renderItem: (item, depth, focused, arrow) => {
         return React.DOM.div(
           {
             id: item,
             style: { marginLeft: depth * 16 + "px" }
           },
           arrow,
           item
         );
       }
     });
+    const tree = ReactDOM.render(Tree(treeProps), window.document.body);
 
     TEST_TREE.expanded = new Set("ABCDEFGHIJKLMNO".split(""));
     yield forceRender(tree);
 
     let arrows = document.querySelectorAll(".arrow");
     for (let a of arrows) {
       ok(a.classList.contains("open"), "Every arrow should be open.");
     }
--- a/devtools/client/shared/components/test/mochitest/test_tree_08.html
+++ b/devtools/client/shared/components/test/mochitest/test_tree_08.html
@@ -19,19 +19,27 @@ other inputs.
 <script src="head.js" type="application/javascript;version=1.8"></script>
 <script type="application/javascript;version=1.8">
 window.onload = Task.async(function* () {
   try {
     const ReactDOM = browserRequire("devtools/client/shared/vendor/react-dom");
     const React = browserRequire("devtools/client/shared/vendor/react");
     const { Simulate } = React.addons.TestUtils;
     const Tree = React.createFactory(browserRequire("devtools/client/shared/components/tree"));
-    const tree = ReactDOM.render(Tree(Object.assign({}, TEST_TREE_INTERFACE, {
-      onFocus: x => setProps(tree, { focused: x }),
-    })), window.document.body);
+
+    function renderTree(props) {
+      const treeProps = Object.assign({},
+        TEST_TREE_INTERFACE,
+        { onFocus: x => renderTree({ focused: x }) },
+        props
+      );
+      return ReactDOM.render(Tree(treeProps), window.document.body);
+    }
+
+    const tree = renderTree();
 
     const input = document.createElement("input");
     document.body.appendChild(input);
 
     input.focus();
     is(document.activeElement, input, "The text input should be focused.");
 
     Simulate.click(document.querySelector(".tree-node"));
--- a/devtools/client/shared/components/test/mochitest/test_tree_09.html
+++ b/devtools/client/shared/components/test/mochitest/test_tree_09.html
@@ -25,34 +25,39 @@ window.onload = Task.async(function* () 
     const Tree = React.createFactory(browserRequire("devtools/client/shared/components/tree"));
 
     let numberOfExpands = 0;
     let lastExpandedItem = null;
 
     let numberOfCollapses = 0;
     let lastCollapsedItem = null;
 
-    const tree = ReactDOM.render(Tree(Object.assign({}, TEST_TREE_INTERFACE, {
-      autoExpandDepth: 0,
-      onExpand: item => {
-        lastExpandedItem = item;
-        numberOfExpands++;
-        TEST_TREE.expanded.add(item);
-      },
-      onCollapse: item => {
-        lastCollapsedItem = item;
-        numberOfCollapses++;
-        TEST_TREE.expanded.delete(item);
-      },
-      onFocus: item => setProps(tree, { focused: item }),
-    })), window.document.body);
+    function renderTree(props) {
+      const treeProps = Object.assign({},
+        TEST_TREE_INTERFACE,
+        {
+          autoExpandDepth: 0,
+          onExpand: item => {
+            lastExpandedItem = item;
+            numberOfExpands++;
+            TEST_TREE.expanded.add(item);
+          },
+          onCollapse: item => {
+            lastCollapsedItem = item;
+            numberOfCollapses++;
+            TEST_TREE.expanded.delete(item);
+          },
+          onFocus: item => renderTree({ focused: item })
+        },
+        props
+      );
+      return ReactDOM.render(Tree(treeProps), window.document.body);
+    }
 
-    yield setProps(tree, {
-      focused: "A"
-    });
+    const tree = renderTree({ focused: "A" });
 
     is(lastExpandedItem, null);
     is(lastCollapsedItem, null);
 
     // Expand "A" via the keyboard and then let the component re-render.
     Simulate.keyDown(document.querySelector(".tree"), { key: "ArrowRight" });
     yield forceRender(tree);
 
--- a/devtools/client/shared/components/test/mochitest/test_tree_10.html
+++ b/devtools/client/shared/components/test/mochitest/test_tree_10.html
@@ -19,23 +19,26 @@ Test that when an item in the Tree compo
 <script type="application/javascript;version=1.8">
 window.onload = Task.async(function* () {
   try {
     const ReactDOM = browserRequire("devtools/client/shared/vendor/react-dom");
     const React = browserRequire("devtools/client/shared/vendor/react");
     const { Simulate } = React.addons.TestUtils;
     const Tree = React.createFactory(browserRequire("devtools/client/shared/components/tree"));
 
-    const tree = ReactDOM.render(Tree(Object.assign({
-      autoExpandDepth: 1
-    }, TEST_TREE_INTERFACE)), window.document.body);
+    function renderTree(props) {
+      const treeProps = Object.assign({},
+        TEST_TREE_INTERFACE,
+        { autoExpandDepth: 1 },
+        props
+      );
+      return ReactDOM.render(Tree(treeProps), window.document.body);
+    }
 
-    yield setProps(tree, {
-      focused: "A"
-    });
+    const tree = renderTree({ focused: "A" });
 
     isRenderedTree(document.body.textContent, [
       "A:true",
       "-B:false",
       "-C:false",
       "-D:false",
       "M:false",
       "-N:false",
--- a/devtools/client/shared/components/test/mochitest/test_tree_11.html
+++ b/devtools/client/shared/components/test/mochitest/test_tree_11.html
@@ -32,27 +32,31 @@ window.onload = Task.async(function* () 
   try {
     const ReactDOM = browserRequire("devtools/client/shared/vendor/react-dom");
     const React = browserRequire("devtools/client/shared/vendor/react");
     const { Simulate } = React.addons.TestUtils;
     const Tree = React.createFactory(browserRequire("devtools/client/shared/components/tree"));
 
     TEST_TREE.expanded = new Set("ABCDEFGHIJKLMNO".split(""));
 
-    const tree = ReactDOM.render(Tree(TEST_TREE_INTERFACE), window.document.body);
+    function renderTree(props) {
+      const treeProps = Object.assign({},
+        TEST_TREE_INTERFACE,
+        {
+          itemHeight: 10,
+          onFocus: item => renderTree({ focused: item })
+        },
+        props
+      );
+      return ReactDOM.render(Tree(treeProps), window.document.body);
+    }
 
-    yield setProps(tree, {
-      itemHeight: 10,
-      onFocus: item => setProps(tree, { focused: item }),
-      focused: "K",
-    });
-    yield setState(tree, {
-      scroll: 10,
-    });
-    yield forceRender(tree);
+    const tree = renderTree({ focused: "K" });
+
+    tree.setState({ scroll: 10 });
 
     isRenderedTree(document.body.textContent, [
       "A:false",
       "-B:false",
       "--E:false",
       "---K:true",
       "---L:false",
     ], "Should render initial correctly");