diff --git a/src/isomorphic/devtools/__tests__/ReactComponentTreeDevtool-test.js b/src/isomorphic/devtools/__tests__/ReactComponentTreeDevtool-test.js
index 203cfcc02d..ef5516238a 100644
--- a/src/isomorphic/devtools/__tests__/ReactComponentTreeDevtool-test.js
+++ b/src/isomorphic/devtools/__tests__/ReactComponentTreeDevtool-test.js
@@ -160,6 +160,7 @@ describe('ReactComponentTreeDevtool', () => {
var element =
;
var tree = {
displayName: 'div',
+ element,
children: [{
displayName: 'Bar',
children: [],
@@ -203,6 +204,7 @@ describe('ReactComponentTreeDevtool', () => {
var element =
;
var tree = {
displayName: 'div',
+ element,
children: [{
displayName: 'Bar',
children: [],
@@ -233,6 +235,7 @@ describe('ReactComponentTreeDevtool', () => {
var element =
;
var tree = {
displayName: 'div',
+ element,
children: [{
displayName: 'Bar',
children: [],
@@ -265,6 +268,7 @@ describe('ReactComponentTreeDevtool', () => {
displayName: 'p',
children: [{
displayName: 'span',
+ element: Hi!,
children: [{
displayName: '#text',
text: 'Hi!',
@@ -275,6 +279,7 @@ describe('ReactComponentTreeDevtool', () => {
}],
}, {
displayName: 'hr',
+ element:
,
children: [],
}],
};
@@ -291,8 +296,10 @@ describe('ReactComponentTreeDevtool', () => {
var element = ;
var tree = {
displayName: 'Foo',
+ element,
children: [{
displayName: 'div',
+ element: ,
children: [],
}],
};
@@ -333,34 +340,43 @@ describe('ReactComponentTreeDevtool', () => {
var element = ;
var tree = {
displayName: 'Baz',
+ element,
children: [{
displayName: 'div',
children: [{
displayName: 'Foo',
+ element: ,
children: [{
displayName: 'Qux',
+ element: ,
children: [],
}],
}, {
displayName: 'Bar',
+ element: Hi,Mom,
children: [{
displayName: 'h1',
children: [{
displayName: 'span',
+ element: Hi,,
children: [{
displayName: '#text',
+ element: 'Hi,',
text: 'Hi,',
}],
}, {
displayName: '#text',
text: 'Mom',
+ element: 'Mom',
}],
}],
}, {
displayName: 'a',
+ element: Click me.,
children: [{
displayName: '#text',
text: 'Click me.',
+ element: 'Click me.',
}],
}],
}],
@@ -400,6 +416,7 @@ describe('ReactComponentTreeDevtool', () => {
var element = {'1'}{2}
;
var tree = {
displayName: 'div',
+ element,
children: [{
displayName: '#text',
text: '1',
@@ -415,6 +432,7 @@ describe('ReactComponentTreeDevtool', () => {
var element = {'1'}
;
var tree = {
displayName: 'div',
+ element,
children: [{
displayName: '#text',
text: '1',
@@ -427,6 +445,7 @@ describe('ReactComponentTreeDevtool', () => {
var element = {42}
;
var tree = {
displayName: 'div',
+ element,
children: [{
displayName: '#text',
text: '42',
@@ -439,6 +458,7 @@ describe('ReactComponentTreeDevtool', () => {
var element = {0}
;
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: ,
children: [{
displayName: 'div',
+ element: ,
children: [],
}],
}],
diff --git a/src/isomorphic/devtools/__tests__/ReactComponentTreeDevtool-test.native.js b/src/isomorphic/devtools/__tests__/ReactComponentTreeDevtool-test.native.js
index b65e4dab80..746f7a82be 100644
--- a/src/isomorphic/devtools/__tests__/ReactComponentTreeDevtool-test.native.js
+++ b/src/isomorphic/devtools/__tests__/ReactComponentTreeDevtool-test.native.js
@@ -137,6 +137,7 @@ describe('ReactComponentTreeDevtool', () => {
var element = ;
var tree = {
displayName: 'View',
+ element,
children: [{
displayName: 'Bar',
children: [],
@@ -273,20 +274,25 @@ describe('ReactComponentTreeDevtool', () => {
);
var tree = {
displayName: 'View',
+ element,
children: [{
displayName: 'View',
+ element: Hi!,
children: [{
displayName: 'Text',
+ element: Hi!,
children: [{
displayName: 'RCText',
children: [{
displayName: '#text',
+ element: 'Hi!',
text: 'Hi!',
}],
}],
}],
}, {
displayName: 'Image',
+ element: ,
children: [],
}],
};
@@ -303,8 +309,10 @@ describe('ReactComponentTreeDevtool', () => {
var element = ;
var tree = {
displayName: 'Foo',
+ element,
children: [{
displayName: 'Image',
+ element: ,
children: [],
}],
};
@@ -344,12 +352,15 @@ describe('ReactComponentTreeDevtool', () => {
var element = ;
var tree = {
displayName: 'Baz',
+ element,
children: [{
displayName: 'View',
children: [{
displayName: 'Foo',
+ element: ,
children: [{
displayName: 'Qux',
+ element: ,
children: [],
}],
}, {
@@ -358,10 +369,12 @@ describe('ReactComponentTreeDevtool', () => {
displayName: 'View',
children: [{
displayName: 'Text',
+ element: Hi,,
children: [{
displayName: 'RCText',
children: [{
displayName: '#text',
+ element: 'Hi,',
text: 'Hi,',
}],
}],
@@ -369,6 +382,7 @@ describe('ReactComponentTreeDevtool', () => {
}],
}, {
displayName: 'Image',
+ element: ,
children: [],
}],
}],
@@ -481,16 +495,21 @@ describe('ReactComponentTreeDevtool', () => {
);
var tree = {
displayName: 'View',
+ element,
children: [{
displayName: 'Foo',
+ element: ,
children: [{
displayName: 'Image',
+ element: ,
children: [],
}],
}, {
displayName: 'Foo',
+ element: ,
children: [{
displayName: 'Image',
+ element: ,
children: [],
}],
}],
diff --git a/src/test/ReactComponentTreeTestUtils.js b/src/test/ReactComponentTreeTestUtils.js
index 32ba3b37ca..91da5e4a71 100644
--- a/src/test/ReactComponentTreeTestUtils.js
+++ b/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,