Facebook/react
1
0
Fork 0
mirror of https://github.com/facebook/react.git synced 2025-11-01 09:12:30 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #6789 from gaearon/tree-devtool-fixes

Browse Source 
Make sure element is reported correctly by tree devtool
(cherry picked from commit 7f08961604)
This commit is contained in:
Dan Abramov
2016-05-17 23:34:58 +01:00
committed by Paul O’Shannessy
parent b340601ef6
commit 5247dc3cd2
5 changed files with 85 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/isomorphic/devtools/__tests__/ReactComponentTreeDevtool-test.js
+21
View File
@@ -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: [],
@@ -275,6 +278,7 @@ describe('ReactComponentTreeDevtool', () => {
}],
}, {
displayName: 'hr',
element: <hr />,
children: [],
}],
};
@@ -291,8 +295,10 @@ describe('ReactComponentTreeDevtool', () => {
var element = <Foo />;
var tree = {
displayName: 'Foo',
element,
children: [{
displayName: 'div',
element: <div />,
children: [],
}],
};
@@ -333,12 +339,15 @@ describe('ReactComponentTreeDevtool', () => {
var element = <Baz />;
var tree = {
displayName: 'Baz',
element,
children: [{
displayName: 'div',
children: [{
displayName: 'Foo',
element: <Foo />,
children: [{
displayName: 'Qux',
element: <Qux />,
children: [],
}],
}, {
@@ -349,11 +358,13 @@ describe('ReactComponentTreeDevtool', () => {
displayName: 'span',
children: [{
displayName: '#text',
element: 'Hi,',
text: 'Hi,',
}],
}, {
displayName: '#text',
text: 'Mom',
element: 'Mom',
}],
}],
}, {
@@ -361,6 +372,7 @@ describe('ReactComponentTreeDevtool', () => {
children: [{
displayName: '#text',
text: 'Click me.',
element: 'Click me.',
}],
}],
}],
@@ -400,6 +412,7 @@ describe('ReactComponentTreeDevtool', () => {
var element = <div>{'1'}{2}</div>;
var tree = {
displayName: 'div',
element,
children: [{
displayName: '#text',
text: '1',
@@ -415,6 +428,7 @@ describe('ReactComponentTreeDevtool', () => {
var element = <div>{'1'}</div>;
var tree = {
displayName: 'div',
element,
children: [{
displayName: '#text',
text: '1',
@@ -427,6 +441,7 @@ describe('ReactComponentTreeDevtool', () => {
var element = <div>{42}</div>;
var tree = {
displayName: 'div',
element,
children: [{
displayName: '#text',
text: '42',
@@ -439,6 +454,7 @@ describe('ReactComponentTreeDevtool', () => {
var element = <div>{0}</div>;
var tree = {
displayName: 'div',
element,
children: [{
displayName: '#text',
text: '0',
@@ -462,16 +478,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
+16
View File
@@ -137,6 +137,7 @@ describe('ReactComponentTreeDevtool', () => {
var element = <View><Foo /><Baz /><Qux /></View>;
var tree = {
displayName: 'View',
element,
children: [{
displayName: 'Bar',
children: [],
@@ -273,6 +274,7 @@ describe('ReactComponentTreeDevtool', () => {
);
var tree = {
displayName: 'View',
element,
children: [{
displayName: 'View',
children: [{
@@ -281,12 +283,14 @@ describe('ReactComponentTreeDevtool', () => {
displayName: 'RCText',
children: [{
displayName: '#text',
element: 'Hi!',
text: 'Hi!',
}],
}],
}],
}, {
displayName: 'Image',
element: <Image />,
children: [],
}],
};
@@ -303,8 +307,10 @@ describe('ReactComponentTreeDevtool', () => {
var element = <Foo />;
var tree = {
displayName: 'Foo',
element,
children: [{
displayName: 'Image',
element: <Image />,
children: [],
}],
};
@@ -344,12 +350,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: [],
}],
}, {
@@ -362,6 +371,7 @@ describe('ReactComponentTreeDevtool', () => {
displayName: 'RCText',
children: [{
displayName: '#text',
element: 'Hi,',
text: 'Hi,',
}],
}],
@@ -369,6 +379,7 @@ describe('ReactComponentTreeDevtool', () => {
}],
}, {
displayName: 'Image',
element: <Image />,
children: [],
}],
}],
@@ -481,16 +492,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/renderers/dom/shared/ReactDOMComponent.js
+26 -15
View File
@@ -247,16 +247,34 @@ function optionPostMount() {
var setContentChildForInstrumentation = emptyFunction;
if (__DEV__) {
setContentChildForInstrumentation = function(contentToUse) {
setContentChildForInstrumentation = function(content) {
var hasExistingContent = this._contentDebugID != null;
var debugID = this._debugID;
var contentDebugID = debugID + '#text';
if (content == null) {
if (hasExistingContent) {
ReactInstrumentation.debugTool.onUnmountComponent(this._contentDebugID);
}
this._contentDebugID = null;
return;
}
this._contentDebugID = contentDebugID;
var text = '' + content;
ReactInstrumentation.debugTool.onSetDisplayName(contentDebugID, '#text');
ReactInstrumentation.debugTool.onSetParent(contentDebugID, debugID);
ReactInstrumentation.debugTool.onBeforeMountComponent(contentDebugID);
ReactInstrumentation.debugTool.onSetText(contentDebugID, '' + contentToUse);
ReactInstrumentation.debugTool.onMountComponent(contentDebugID);
ReactInstrumentation.debugTool.onSetChildren(debugID, [contentDebugID]);
ReactInstrumentation.debugTool.onSetText(contentDebugID, text);
if (hasExistingContent) {
ReactInstrumentation.debugTool.onBeforeUpdateComponent(contentDebugID, content);
ReactInstrumentation.debugTool.onUpdateComponent(contentDebugID);
} else {
ReactInstrumentation.debugTool.onBeforeMountComponent(contentDebugID, content);
ReactInstrumentation.debugTool.onMountComponent(contentDebugID);
ReactInstrumentation.debugTool.onSetChildren(debugID, [contentDebugID]);
}
};
}
@@ -463,7 +481,7 @@ function ReactDOMComponent(element) {
this._flags = 0;
if (__DEV__) {
this._ancestorInfo = null;
this._contentDebugID = null;
setContentChildForInstrumentation.call(this, null);
}
}
@@ -1035,7 +1053,6 @@ ReactDOMComponent.Mixin = {
if (lastContent !== nextContent) {
this.updateTextContent('' + nextContent);
if (__DEV__) {
this._contentDebugID = this._debugID + '#text';
setContentChildForInstrumentation.call(this, nextContent);
}
}
@@ -1048,10 +1065,7 @@ ReactDOMComponent.Mixin = {
}
} else if (nextChildren != null) {
if (__DEV__) {
if (this._contentDebugID) {
ReactInstrumentation.debugTool.onUnmountComponent(this._contentDebugID);
this._contentDebugID = null;
}
setContentChildForInstrumentation.call(this, null);
}
this.updateChildren(nextChildren, transaction, context);
@@ -1113,10 +1127,7 @@ ReactDOMComponent.Mixin = {
this._wrapperState = null;
if (__DEV__) {
if (this._contentDebugID) {
ReactInstrumentation.debugTool.onUnmountComponent(this._contentDebugID);
this._contentDebugID = null;
}
setContentChildForInstrumentation.call(this, null);
}
},
src/renderers/shared/stack/reconciler/ReactReconciler.js
+8 -8
View File
@@ -46,14 +46,14 @@ var ReactReconciler = {
) {
if (__DEV__) {
if (internalInstance._debugID !== 0) {
ReactInstrumentation.debugTool.onBeginReconcilerTimer(
internalInstance._debugID,
'mountComponent'
);
ReactInstrumentation.debugTool.onBeforeMountComponent(
internalInstance._debugID,
internalInstance._currentElement
);
ReactInstrumentation.debugTool.onBeginReconcilerTimer(
internalInstance._debugID,
'mountComponent'
);
}
}
var markup = internalInstance.mountComponent(
@@ -150,14 +150,14 @@ var ReactReconciler = {
if (__DEV__) {
if (internalInstance._debugID !== 0) {
ReactInstrumentation.debugTool.onBeforeUpdateComponent(
internalInstance._debugID,
nextElement
);
ReactInstrumentation.debugTool.onBeginReconcilerTimer(
internalInstance._debugID,
'receiveComponent'
);
ReactInstrumentation.debugTool.onBeforeUpdateComponent(
internalInstance._debugID,
internalInstance._currentElement
);
}
}
src/test/ReactComponentTreeTestUtils.js
+14 -1
View File
@@ -23,12 +23,13 @@ function getRegisteredDisplayNames() {
.map(ReactComponentTreeDevtool.getDisplayName);
}
function expectTree(rootID, expectedTree, parentPath = '') {
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 +63,21 @@ 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) {
// TODO: Comparing elements makes tests run out of memory on errors.
// For now, compare just types.
expectEqual(
element && element.type,
expectedTree.element && expectedTree.element.type,
'element.type'
);
} else if (text == null) {
expectEqual(typeof element, 'object', 'typeof element');
}
if (expectedTree.children !== undefined) {
expectEqual(
childIDs.length,