Test that elements are tracked by tree devtool

The test is currently failing because text elements are not reported in some cases.

src/isomorphic/devtools/__tests__/ReactComponentTreeDevtool-test.js

@@ -160,6 +160,7 @@ describe('ReactComponentTreeDevtool', () => {
       var element = <div><Foo /><Baz /><Qux /></div>;
       var tree = {
         displayName: 'div',
+        element,
         children: [{
           displayName: 'Bar',
           children: [],
@@ -203,6 +204,7 @@ describe('ReactComponentTreeDevtool', () => {
       var element = <div><Foo /><Baz /><Qux /></div>;
       var tree = {
         displayName: 'div',
+        element,
         children: [{
           displayName: 'Bar',
           children: [],
@@ -233,6 +235,7 @@ describe('ReactComponentTreeDevtool', () => {
       var element = <div><Foo /><Baz /><Qux /></div>;
       var tree = {
         displayName: 'div',
+        element,
         children: [{
           displayName: 'Bar',
           children: [],
@@ -265,6 +268,7 @@ describe('ReactComponentTreeDevtool', () => {
           displayName: 'p',
           children: [{
             displayName: 'span',
+            element: <span>Hi!</span>,
             children: [{
               displayName: '#text',
               text: 'Hi!',
@@ -275,6 +279,7 @@ describe('ReactComponentTreeDevtool', () => {
           }],
         }, {
           displayName: 'hr',
+          element: <hr />,
           children: [],
         }],
       };
@@ -291,8 +296,10 @@ describe('ReactComponentTreeDevtool', () => {
       var element = <Foo />;
       var tree = {
         displayName: 'Foo',
+        element,
         children: [{
           displayName: 'div',
+          element: <div />,
           children: [],
         }],
       };
@@ -333,34 +340,43 @@ describe('ReactComponentTreeDevtool', () => {
       var element = <Baz />;
       var tree = {
         displayName: 'Baz',
+        element,
         children: [{
           displayName: 'div',
           children: [{
             displayName: 'Foo',
+            element: <Foo />,
             children: [{
               displayName: 'Qux',
+              element: <Qux />,
               children: [],
             }],
           }, {
             displayName: 'Bar',
+            element: <Bar><span>Hi,</span>Mom</Bar>,
             children: [{
               displayName: 'h1',
               children: [{
                 displayName: 'span',
+                element: <span>Hi,</span>,
                 children: [{
                   displayName: '#text',
+                  element: 'Hi,',
                   text: 'Hi,',
                 }],
               }, {
                 displayName: '#text',
                 text: 'Mom',
+                element: 'Mom',
               }],
             }],
           }, {
             displayName: 'a',
+            element: <a href="#">Click me.</a>,
             children: [{
               displayName: '#text',
               text: 'Click me.',
+              element: 'Click me.',
             }],
           }],
         }],
@@ -400,6 +416,7 @@ describe('ReactComponentTreeDevtool', () => {
       var element = <div>{'1'}{2}</div>;
       var tree = {
         displayName: 'div',
+        element,
         children: [{
           displayName: '#text',
           text: '1',
@@ -415,6 +432,7 @@ describe('ReactComponentTreeDevtool', () => {
       var element = <div>{'1'}</div>;
       var tree = {
         displayName: 'div',
+        element,
         children: [{
           displayName: '#text',
           text: '1',
@@ -427,6 +445,7 @@ describe('ReactComponentTreeDevtool', () => {
       var element = <div>{42}</div>;
       var tree = {
         displayName: 'div',
+        element,
         children: [{
           displayName: '#text',
           text: '42',
@@ -439,6 +458,7 @@ describe('ReactComponentTreeDevtool', () => {
       var element = <div>{0}</div>;
       var tree = {
         displayName: 'div',
+        element,
         children: [{
           displayName: '#text',
           text: '0',
@@ -462,16 +482,21 @@ describe('ReactComponentTreeDevtool', () => {
       );
       var tree = {
         displayName: 'div',
+        element,
         children: [{
           displayName: '#text',
           text: 'hi',
+          element: 'hi',
         }, {
           displayName: '#text',
           text: '42',
+          element: 42,
         }, {
           displayName: 'Foo',
+          element: <Foo />,
           children: [{
             displayName: 'div',
+            element: <div />,
             children: [],
           }],
         }],

src/isomorphic/devtools/__tests__/ReactComponentTreeDevtool-test.native.js

@@ -137,6 +137,7 @@ describe('ReactComponentTreeDevtool', () => {
       var element = <View><Foo /><Baz /><Qux /></View>;
       var tree = {
         displayName: 'View',
+        element,
         children: [{
           displayName: 'Bar',
           children: [],
@@ -273,20 +274,25 @@ describe('ReactComponentTreeDevtool', () => {
       );
       var tree = {
         displayName: 'View',
+        element,
         children: [{
           displayName: 'View',
+          element: <View><Text>Hi!</Text></View>,
           children: [{
             displayName: 'Text',
+            element: <Text>Hi!</Text>,
             children: [{
               displayName: 'RCText',
               children: [{
                 displayName: '#text',
+                element: 'Hi!',
                 text: 'Hi!',
               }],
             }],
           }],
         }, {
           displayName: 'Image',
+          element: <Image />,
           children: [],
         }],
       };
@@ -303,8 +309,10 @@ describe('ReactComponentTreeDevtool', () => {
       var element = <Foo />;
       var tree = {
         displayName: 'Foo',
+        element,
         children: [{
           displayName: 'Image',
+          element: <Image />,
           children: [],
         }],
       };
@@ -344,12 +352,15 @@ describe('ReactComponentTreeDevtool', () => {
       var element = <Baz />;
       var tree = {
         displayName: 'Baz',
+        element,
         children: [{
           displayName: 'View',
           children: [{
             displayName: 'Foo',
+            element: <Foo />,
             children: [{
               displayName: 'Qux',
+              element: <Qux />,
               children: [],
             }],
           }, {
@@ -358,10 +369,12 @@ describe('ReactComponentTreeDevtool', () => {
               displayName: 'View',
               children: [{
                 displayName: 'Text',
+                element: <Text>Hi,</Text>,
                 children: [{
                   displayName: 'RCText',
                   children: [{
                     displayName: '#text',
+                    element: 'Hi,',
                     text: 'Hi,',
                   }],
                 }],
@@ -369,6 +382,7 @@ describe('ReactComponentTreeDevtool', () => {
             }],
           }, {
             displayName: 'Image',
+            element: <Image />,
             children: [],
           }],
         }],
@@ -481,16 +495,21 @@ describe('ReactComponentTreeDevtool', () => {
       );
       var tree = {
         displayName: 'View',
+        element,
         children: [{
           displayName: 'Foo',
+          element: <Foo />,
           children: [{
             displayName: 'Image',
+            element: <Image />,
             children: [],
           }],
         }, {
           displayName: 'Foo',
+          element: <Foo />,
           children: [{
             displayName: 'Image',
+            element: <Image />,
             children: [],
           }],
         }],

src/test/ReactComponentTreeTestUtils.js

@@ -11,6 +11,7 @@
 
 'use strict';
 
+var ReactChildren = require('ReactChildren');
 var ReactComponentTreeDevtool = require('ReactComponentTreeDevtool');
 
 function getRootDisplayNames() {
@@ -23,12 +24,24 @@ function getRegisteredDisplayNames() {
     .map(ReactComponentTreeDevtool.getDisplayName);
 }
 
-function expectTree(rootID, expectedTree, parentPath = '') {
+function stripElement(element) {
+  if (!element || !element.props) {
+    return element;
+  }
+  return {
+    props: element.props,
+    type: element.type,
+    children: ReactChildren.map(element.children, stripElement),
+  };
+}
+
+function expectTree(rootID, expectedTree, parentPath) {
   var displayName = ReactComponentTreeDevtool.getDisplayName(rootID);
   var ownerID = ReactComponentTreeDevtool.getOwnerID(rootID);
   var parentID = ReactComponentTreeDevtool.getParentID(rootID);
   var childIDs = ReactComponentTreeDevtool.getChildIDs(rootID);
   var text = ReactComponentTreeDevtool.getText(rootID);
+  var element = ReactComponentTreeDevtool.getElement(rootID);
   var path = parentPath ? `${parentPath} > ${displayName}` : displayName;
 
   function expectEqual(actual, expected, name) {
@@ -62,9 +75,19 @@ function expectTree(rootID, expectedTree, parentPath = '') {
   }
   if (expectedTree.text !== undefined) {
     expectEqual(text, expectedTree.text, 'text');
+    expectEqual('' + element, expectedTree.text, 'element.toString()');
   } else {
     expectEqual(text, null, 'text');
   }
+  if (expectedTree.element !== undefined) {
+    expectEqual(
+      stripElement(element),
+      stripElement(expectedTree.element),
+      'element'
+    );
+  } else if (text == null) {
+    expectEqual(typeof element, 'object', 'typeof element');
+  }
   if (expectedTree.children !== undefined) {
     expectEqual(
       childIDs.length,