Test that elements are tracked by tree devtool
The test is currently failing because text elements are not reported in some cases.
Dan Abramov committed
May 17, 2016 at 21:37 UTC
4ab203cd737c4da55ea1e7e991282164ea707ab6
3 files changed
+68
-1
src/isomorphic/devtools/__tests__/ReactComponentTreeDevtool-test.js
+25
@@ -160,6 +160,7 @@ describe('ReactComponentTreeDevtool', () => {
160
var element = <div><Foo /><Baz /><Qux /></div>;
161
var tree = {
162
displayName: 'div',
163
+ element,
164
children: [{
165
displayName: 'Bar',
166
children: [],
@@ -203,6 +204,7 @@ describe('ReactComponentTreeDevtool', () => {
204
var element = <div><Foo /><Baz /><Qux /></div>;
205
var tree = {
206
displayName: 'div',
207
+ element,
208
children: [{
209
displayName: 'Bar',
210
children: [],
@@ -233,6 +235,7 @@ describe('ReactComponentTreeDevtool', () => {
235
var element = <div><Foo /><Baz /><Qux /></div>;
236
var tree = {
237
displayName: 'div',
238
+ element,
239
children: [{
240
displayName: 'Bar',
241
children: [],
@@ -265,6 +268,7 @@ describe('ReactComponentTreeDevtool', () => {
268
displayName: 'p',
269
children: [{
270
displayName: 'span',
271
+ element: <span>Hi!</span>,
272
children: [{
273
displayName: '#text',
274
text: 'Hi!',
@@ -275,6 +279,7 @@ describe('ReactComponentTreeDevtool', () => {
279
}],
280
}, {
281
displayName: 'hr',
282
+ element: <hr />,
283
children: [],
284
}],
285
};
@@ -291,8 +296,10 @@ describe('ReactComponentTreeDevtool', () => {
296
var element = <Foo />;
297
var tree = {
298
displayName: 'Foo',
299
+ element,
300
children: [{
301
displayName: 'div',
302
+ element: <div />,
303
children: [],
304
}],
305
};
@@ -333,34 +340,43 @@ describe('ReactComponentTreeDevtool', () => {
340
var element = <Baz />;
341
var tree = {
342
displayName: 'Baz',
343
+ element,
344
children: [{
345
displayName: 'div',
346
children: [{
347
displayName: 'Foo',
348
+ element: <Foo />,
349
children: [{
350
displayName: 'Qux',
351
+ element: <Qux />,
352
children: [],
353
}],
354
}, {
355
displayName: 'Bar',
356
+ element: <Bar><span>Hi,</span>Mom</Bar>,
357
children: [{
358
displayName: 'h1',
359
children: [{
360
displayName: 'span',
361
+ element: <span>Hi,</span>,
362
children: [{
363
displayName: '#text',
364
+ element: 'Hi,',
365
text: 'Hi,',
366
}],
367
}, {
368
displayName: '#text',
369
text: 'Mom',
370
+ element: 'Mom',
371
}],
372
}],
373
}, {
374
displayName: 'a',
375
+ element: <a href="#">Click me.</a>,
376
children: [{
377
displayName: '#text',
378
text: 'Click me.',
379
+ element: 'Click me.',
380
}],
381
}],
382
}],
@@ -400,6 +416,7 @@ describe('ReactComponentTreeDevtool', () => {
416
var element = <div>{'1'}{2}</div>;
417
var tree = {
418
displayName: 'div',
419
+ element,
420
children: [{
421
displayName: '#text',
422
text: '1',
@@ -415,6 +432,7 @@ describe('ReactComponentTreeDevtool', () => {
432
var element = <div>{'1'}</div>;
433
var tree = {
434
displayName: 'div',
435
+ element,
436
children: [{
437
displayName: '#text',
438
text: '1',
@@ -427,6 +445,7 @@ describe('ReactComponentTreeDevtool', () => {
445
var element = <div>{42}</div>;
446
var tree = {
447
displayName: 'div',
448
+ element,
449
children: [{
450
displayName: '#text',
451
text: '42',
@@ -439,6 +458,7 @@ describe('ReactComponentTreeDevtool', () => {
458
var element = <div>{0}</div>;
459
var tree = {
460
displayName: 'div',
461
+ element,
462
children: [{
463
displayName: '#text',
464
text: '0',
@@ -462,16 +482,21 @@ describe('ReactComponentTreeDevtool', () => {
482
);
483
var tree = {
484
displayName: 'div',
485
+ element,
486
children: [{
487
displayName: '#text',
488
text: 'hi',
489
+ element: 'hi',
490
}, {
491
displayName: '#text',
492
text: '42',
493
+ element: 42,
494
}, {
495
displayName: 'Foo',
496
+ element: <Foo />,
497
children: [{
498
displayName: 'div',
499
+ element: <div />,
500
children: [],
501
}],
502
}],
src/isomorphic/devtools/__tests__/ReactComponentTreeDevtool-test.native.js
+19
@@ -137,6 +137,7 @@ describe('ReactComponentTreeDevtool', () => {
137
var element = <View><Foo /><Baz /><Qux /></View>;
138
var tree = {
139
displayName: 'View',
140
+ element,
141
children: [{
142
displayName: 'Bar',
143
children: [],
@@ -273,20 +274,25 @@ describe('ReactComponentTreeDevtool', () => {
274
);
275
var tree = {
276
displayName: 'View',
277
+ element,
278
children: [{
279
displayName: 'View',
280
+ element: <View><Text>Hi!</Text></View>,
281
children: [{
282
displayName: 'Text',
283
+ element: <Text>Hi!</Text>,
284
children: [{
285
displayName: 'RCText',
286
children: [{
287
displayName: '#text',
288
+ element: 'Hi!',
289
text: 'Hi!',
290
}],
291
}],
292
}],
293
}, {
294
displayName: 'Image',
295
+ element: <Image />,
296
children: [],
297
}],
298
};
@@ -303,8 +309,10 @@ describe('ReactComponentTreeDevtool', () => {
309
var element = <Foo />;
310
var tree = {
311
displayName: 'Foo',
312
+ element,
313
children: [{
314
displayName: 'Image',
315
+ element: <Image />,
316
children: [],
317
}],
318
};
@@ -344,12 +352,15 @@ describe('ReactComponentTreeDevtool', () => {
352
var element = <Baz />;
353
var tree = {
354
displayName: 'Baz',
355
+ element,
356
children: [{
357
displayName: 'View',
358
children: [{
359
displayName: 'Foo',
360
+ element: <Foo />,
361
children: [{
362
displayName: 'Qux',
363
+ element: <Qux />,
364
children: [],
365
}],
366
}, {
@@ -358,10 +369,12 @@ describe('ReactComponentTreeDevtool', () => {
369
displayName: 'View',
370
children: [{
371
displayName: 'Text',
372
+ element: <Text>Hi,</Text>,
373
children: [{
374
displayName: 'RCText',
375
children: [{
376
displayName: '#text',
377
+ element: 'Hi,',
378
text: 'Hi,',
379
}],
380
}],
@@ -369,6 +382,7 @@ describe('ReactComponentTreeDevtool', () => {
382
}],
383
}, {
384
displayName: 'Image',
385
+ element: <Image />,
386
children: [],
387
}],
388
}],
@@ -481,16 +495,21 @@ describe('ReactComponentTreeDevtool', () => {
495
);
496
var tree = {
497
displayName: 'View',
498
+ element,
499
children: [{
500
displayName: 'Foo',
501
+ element: <Foo />,
502
children: [{
503
displayName: 'Image',
504
+ element: <Image />,
505
children: [],
506
}],
507
}, {
508
displayName: 'Foo',
509
+ element: <Foo />,
510
children: [{
511
displayName: 'Image',
512
+ element: <Image />,
513
children: [],
514
}],
515
}],
src/test/ReactComponentTreeTestUtils.js
+24
-1
@@ -11,6 +11,7 @@
11
12
'use strict';
13
14
+var ReactChildren = require('ReactChildren');
15
var ReactComponentTreeDevtool = require('ReactComponentTreeDevtool');
16
17
function getRootDisplayNames() {
@@ -23,12 +24,24 @@ function getRegisteredDisplayNames() {
24
.map(ReactComponentTreeDevtool.getDisplayName);
25
}
26
26
-function expectTree(rootID, expectedTree, parentPath = '') {
27
+function stripElement(element) {
28
+ if (!element || !element.props) {
29
+ return element;
30
+ }
31
+ return {
32
+ props: element.props,
33
+ type: element.type,
34
+ children: ReactChildren.map(element.children, stripElement),
35
+ };
36
+}
37
+
38
+function expectTree(rootID, expectedTree, parentPath) {
39
var displayName = ReactComponentTreeDevtool.getDisplayName(rootID);
40
var ownerID = ReactComponentTreeDevtool.getOwnerID(rootID);
41
var parentID = ReactComponentTreeDevtool.getParentID(rootID);
42
var childIDs = ReactComponentTreeDevtool.getChildIDs(rootID);
43
var text = ReactComponentTreeDevtool.getText(rootID);
44
+ var element = ReactComponentTreeDevtool.getElement(rootID);
45
var path = parentPath ? `${parentPath} > ${displayName}` : displayName;
46
47
function expectEqual(actual, expected, name) {
@@ -62,9 +75,19 @@ function expectTree(rootID, expectedTree, parentPath = '') {
75
}
76
if (expectedTree.text !== undefined) {
77
expectEqual(text, expectedTree.text, 'text');
78
+ expectEqual('' + element, expectedTree.text, 'element.toString()');
79
} else {
80
expectEqual(text, null, 'text');
81
}
82
+ if (expectedTree.element !== undefined) {
83
+ expectEqual(
84
+ stripElement(element),
85
+ stripElement(expectedTree.element),
86
+ 'element'
87
+ );
88
+ } else if (text == null) {
89
+ expectEqual(typeof element, 'object', 'typeof element');
90
+ }
91
if (expectedTree.children !== undefined) {
92
expectEqual(
93
childIDs.length,