@samitouri / QOS-React-2 / commits / 8b95ea2cba

Inline DevTools test snapshots and cleaned up tests (#24199)

Brian Vaughn committed Mar 30, 2022 at 11:02 UTC 8b95ea2cba17d3dd653324debc1170fa50bda038
17 files changed +2049 -11157
packages/react-devtools-shared/src/__tests__/__snapshots__/ownersListContext-test.js.snap deleted
-134
@@ -1,134 +0,0 @@
1 -// Jest Snapshot v1, https://goo.gl/fbAQLP
2 -
3 -exports[`OwnersListContext should fetch the owners list for the selected element that includes filtered components: mount 1`] = `
4 -[root]
5 - ▾ <Grandparent>
6 - <Child>
7 - <Child>
8 -`;
9 -
10 -exports[`OwnersListContext should fetch the owners list for the selected element that includes filtered components: owners for "Child" 1`] = `
11 -Array [
12 - Object {
13 - "displayName": "Grandparent",
14 - "hocDisplayNames": null,
15 - "id": 2,
16 - "key": null,
17 - "type": 5,
18 - },
19 - Object {
20 - "displayName": "Parent",
21 - "hocDisplayNames": null,
22 - "id": 3,
23 - "key": null,
24 - "type": 5,
25 - },
26 - Object {
27 - "displayName": "Child",
28 - "hocDisplayNames": null,
29 - "id": 4,
30 - "key": null,
31 - "type": 5,
32 - },
33 -]
34 -`;
35 -
36 -exports[`OwnersListContext should fetch the owners list for the selected element: mount 1`] = `
37 -[root]
38 - ▾ <Grandparent>
39 - ▾ <Parent>
40 - <Child>
41 - <Child>
42 -`;
43 -
44 -exports[`OwnersListContext should fetch the owners list for the selected element: owners for "Child" 1`] = `
45 -Array [
46 - Object {
47 - "displayName": "Grandparent",
48 - "hocDisplayNames": null,
49 - "id": 2,
50 - "key": null,
51 - "type": 5,
52 - },
53 - Object {
54 - "displayName": "Parent",
55 - "hocDisplayNames": null,
56 - "id": 3,
57 - "key": null,
58 - "type": 5,
59 - },
60 - Object {
61 - "displayName": "Child",
62 - "hocDisplayNames": null,
63 - "id": 4,
64 - "key": null,
65 - "type": 5,
66 - },
67 -]
68 -`;
69 -
70 -exports[`OwnersListContext should fetch the owners list for the selected element: owners for "Parent" 1`] = `
71 -Array [
72 - Object {
73 - "displayName": "Grandparent",
74 - "hocDisplayNames": null,
75 - "id": 2,
76 - "key": null,
77 - "type": 5,
78 - },
79 - Object {
80 - "displayName": "Parent",
81 - "hocDisplayNames": null,
82 - "id": 3,
83 - "key": null,
84 - "type": 5,
85 - },
86 -]
87 -`;
88 -
89 -exports[`OwnersListContext should include all owners for a component wrapped in react memo: owners for "InnerComponent" 1`] = `
90 -Array [
91 - Object {
92 - "displayName": "Grandparent",
93 - "hocDisplayNames": null,
94 - "id": 2,
95 - "key": null,
96 - "type": 5,
97 - },
98 - Object {
99 - "displayName": "InnerComponent",
100 - "hocDisplayNames": Array [
101 - "Memo",
102 - ],
103 - "id": 3,
104 - "key": null,
105 - "type": 8,
106 - },
107 - Object {
108 - "displayName": "InnerComponent",
109 - "hocDisplayNames": Array [
110 - "ForwardRef",
111 - ],
112 - "id": 4,
113 - "key": null,
114 - "type": 6,
115 - },
116 -]
117 -`;
118 -
119 -exports[`OwnersListContext should include the current element even if there are no other owners: mount 1`] = `
120 -[root]
121 - <Grandparent>
122 -`;
123 -
124 -exports[`OwnersListContext should include the current element even if there are no other owners: owners for "Grandparent" 1`] = `
125 -Array [
126 - Object {
127 - "displayName": "Grandparent",
128 - "hocDisplayNames": null,
129 - "id": 2,
130 - "key": null,
131 - "type": 5,
132 - },
133 -]
134 -`;
packages/react-devtools-shared/src/__tests__/__snapshots__/profilerContext-test.js.snap deleted
-41
@@ -1,41 +0,0 @@
1 -// Jest Snapshot v1, https://goo.gl/fbAQLP
2 -
3 -exports[`ProfilerContext should auto-select the root ID matching the Components tab selection if it has profiling data: mounted 1`] = `
4 -[root]
5 - ▾ <Parent>
6 - <Child>
7 -[root]
8 - ▾ <Parent>
9 - <Child>
10 -`;
11 -
12 -exports[`ProfilerContext should maintain root selection between profiling sessions so long as there is data for that root: mounted 1`] = `
13 -[root]
14 - ▾ <Parent>
15 - <Child>
16 -[root]
17 - ▾ <Parent>
18 - <Child>
19 -`;
20 -
21 -exports[`ProfilerContext should not select the root ID matching the Components tab selection if it has no profiling data: mounted 1`] = `
22 -[root]
23 - ▾ <Parent>
24 - <Child>
25 -[root]
26 - ▾ <Parent>
27 - <Child>
28 -`;
29 -
30 -exports[`ProfilerContext should sync selected element in the Components tab too, provided the element is a match: mounted 1`] = `
31 -[root]
32 - ▾ <GrandParent>
33 - ▾ <Parent>
34 - <Child>
35 -`;
36 -
37 -exports[`ProfilerContext should sync selected element in the Components tab too, provided the element is a match: updated 1`] = `
38 -[root]
39 - ▾ <GrandParent>
40 - <Parent>
41 -`;
packages/react-devtools-shared/src/__tests__/__snapshots__/profilingCache-test.js.snap deleted
-8005
@@ -1,8005 +0,0 @@
1 -// Jest Snapshot v1, https://goo.gl/fbAQLP
2 -
3 -exports[`ProfilingCache should calculate a self duration based on actual children (not filtered children): CommitDetails with filtered self durations 1`] = `
4 -Object {
5 - "changeDescriptions": Map {
6 - 2 => Object {
7 - "context": null,
8 - "didHooksChange": false,
9 - "isFirstMount": true,
10 - "props": null,
11 - "state": null,
12 - },
13 - 4 => Object {
14 - "context": null,
15 - "didHooksChange": false,
16 - "isFirstMount": true,
17 - "props": null,
18 - "state": null,
19 - },
20 - 6 => Object {
21 - "context": null,
22 - "didHooksChange": false,
23 - "isFirstMount": true,
24 - "props": null,
25 - "state": null,
26 - },
27 - },
28 - "duration": 16,
29 - "effectDuration": null,
30 - "fiberActualDurations": Map {
31 - 1 => 16,
32 - 2 => 16,
33 - 4 => 1,
34 - 6 => 1,
35 - },
36 - "fiberSelfDurations": Map {
37 - 1 => 0,
38 - 2 => 10,
39 - 4 => 1,
40 - 6 => 1,
41 - },
42 - "passiveEffectDuration": null,
43 - "priorityLevel": "Immediate",
44 - "timestamp": 16,
45 - "updaters": Array [
46 - Object {
47 - "displayName": "render()",
48 - "hocDisplayNames": null,
49 - "id": 1,
50 - "key": null,
51 - "type": 11,
52 - },
53 - ],
54 -}
55 -`;
56 -
57 -exports[`ProfilingCache should calculate self duration correctly for suspended views: CommitDetails with filtered self durations 1`] = `
58 -Object {
59 - "changeDescriptions": Map {
60 - 2 => Object {
61 - "context": null,
62 - "didHooksChange": false,
63 - "isFirstMount": true,
64 - "props": null,
65 - "state": null,
66 - },
67 - 4 => Object {
68 - "context": null,
69 - "didHooksChange": false,
70 - "isFirstMount": true,
71 - "props": null,
72 - "state": null,
73 - },
74 - },
75 - "duration": 15,
76 - "effectDuration": 0,
77 - "fiberActualDurations": Map {
78 - 1 => 15,
79 - 2 => 15,
80 - 3 => 5,
81 - 4 => 2,
82 - },
83 - "fiberSelfDurations": Map {
84 - 1 => 0,
85 - 2 => 10,
86 - 3 => 3,
87 - 4 => 2,
88 - },
89 - "passiveEffectDuration": 0,
90 - "priorityLevel": "Immediate",
91 - "timestamp": 15,
92 - "updaters": Array [
93 - Object {
94 - "displayName": "render()",
95 - "hocDisplayNames": null,
96 - "id": 1,
97 - "key": null,
98 - "type": 11,
99 - },
100 - ],
101 -}
102 -`;
103 -
104 -exports[`ProfilingCache should calculate self duration correctly for suspended views: CommitDetails with filtered self durations 2`] = `
105 -Object {
106 - "changeDescriptions": Map {
107 - 7 => Object {
108 - "context": null,
109 - "didHooksChange": false,
110 - "isFirstMount": true,
111 - "props": null,
112 - "state": null,
113 - },
114 - },
115 - "duration": 3,
116 - "effectDuration": 0,
117 - "fiberActualDurations": Map {
118 - 7 => 3,
119 - 3 => 3,
120 - },
121 - "fiberSelfDurations": Map {
122 - 7 => 3,
123 - 3 => 0,
124 - },
125 - "passiveEffectDuration": 0,
126 - "priorityLevel": "Immediate",
127 - "timestamp": 18,
128 - "updaters": Array [
129 - Object {
130 - "displayName": "render()",
131 - "hocDisplayNames": null,
132 - "id": 1,
133 - "key": null,
134 - "type": 11,
135 - },
136 - ],
137 -}
138 -`;
139 -
140 -exports[`ProfilingCache should collect data for each commit: CommitDetails commitIndex: 0 1`] = `
141 -Object {
142 - "changeDescriptions": Map {
143 - 2 => Object {
144 - "context": null,
145 - "didHooksChange": false,
146 - "isFirstMount": true,
147 - "props": null,
148 - "state": null,
149 - },
150 - 4 => Object {
151 - "context": null,
152 - "didHooksChange": false,
153 - "isFirstMount": true,
154 - "props": null,
155 - "state": null,
156 - },
157 - 5 => Object {
158 - "context": null,
159 - "didHooksChange": false,
160 - "isFirstMount": true,
161 - "props": null,
162 - "state": null,
163 - },
164 - 6 => Object {
165 - "context": null,
166 - "didHooksChange": false,
167 - "isFirstMount": true,
168 - "props": null,
169 - "state": null,
170 - },
171 - },
172 - "duration": 12,
173 - "effectDuration": null,
174 - "fiberActualDurations": Map {
175 - 1 => 12,
176 - 2 => 12,
177 - 4 => 0,
178 - 5 => 1,
179 - 6 => 1,
180 - },
181 - "fiberSelfDurations": Map {
182 - 1 => 0,
183 - 2 => 10,
184 - 4 => 0,
185 - 5 => 1,
186 - 6 => 1,
187 - },
188 - "passiveEffectDuration": null,
189 - "priorityLevel": "Immediate",
190 - "timestamp": 12,
191 - "updaters": Array [
192 - Object {
193 - "displayName": "render()",
194 - "hocDisplayNames": null,
195 - "id": 1,
196 - "key": null,
197 - "type": 11,
198 - },
199 - ],
200 -}
201 -`;
202 -
203 -exports[`ProfilingCache should collect data for each commit: CommitDetails commitIndex: 1 1`] = `
204 -Object {
205 - "changeDescriptions": Map {
206 - 4 => Object {
207 - "context": null,
208 - "didHooksChange": false,
209 - "hooks": null,
210 - "isFirstMount": false,
211 - "props": Array [],
212 - "state": null,
213 - },
214 - 5 => Object {
215 - "context": null,
216 - "didHooksChange": false,
217 - "hooks": null,
218 - "isFirstMount": false,
219 - "props": Array [],
220 - "state": null,
221 - },
222 - 7 => Object {
223 - "context": null,
224 - "didHooksChange": false,
225 - "isFirstMount": true,
226 - "props": null,
227 - "state": null,
228 - },
229 - 2 => Object {
230 - "context": null,
231 - "didHooksChange": false,
232 - "hooks": null,
233 - "isFirstMount": false,
234 - "props": Array [
235 - "count",
236 - ],
237 - "state": null,
238 - },
239 - },
240 - "duration": 13,
241 - "effectDuration": null,
242 - "fiberActualDurations": Map {
243 - 4 => 0,
244 - 5 => 1,
245 - 7 => 2,
246 - 2 => 13,
247 - 1 => 13,
248 - },
249 - "fiberSelfDurations": Map {
250 - 4 => 0,
251 - 5 => 1,
252 - 7 => 2,
253 - 2 => 10,
254 - 1 => 0,
255 - },
256 - "passiveEffectDuration": null,
257 - "priorityLevel": "Immediate",
258 - "timestamp": 25,
259 - "updaters": Array [
260 - Object {
261 - "displayName": "render()",
262 - "hocDisplayNames": null,
263 - "id": 1,
264 - "key": null,
265 - "type": 11,
266 - },
267 - ],
268 -}
269 -`;
270 -
271 -exports[`ProfilingCache should collect data for each commit: CommitDetails commitIndex: 2 1`] = `
272 -Object {
273 - "changeDescriptions": Map {
274 - 4 => Object {
275 - "context": null,
276 - "didHooksChange": false,
277 - "hooks": null,
278 - "isFirstMount": false,
279 - "props": Array [],
280 - "state": null,
281 - },
282 - 2 => Object {
283 - "context": null,
284 - "didHooksChange": false,
285 - "hooks": null,
286 - "isFirstMount": false,
287 - "props": Array [
288 - "count",
289 - ],
290 - "state": null,
291 - },
292 - },
293 - "duration": 10,
294 - "effectDuration": 0,
295 - "fiberActualDurations": Map {
296 - 4 => 0,
297 - 2 => 10,
298 - 1 => 10,
299 - },
300 - "fiberSelfDurations": Map {
301 - 4 => 0,
302 - 2 => 10,
303 - 1 => 0,
304 - },
305 - "passiveEffectDuration": 0,
306 - "priorityLevel": "Immediate",
307 - "timestamp": 35,
308 - "updaters": Array [
309 - Object {
310 - "displayName": "render()",
311 - "hocDisplayNames": null,
312 - "id": 1,
313 - "key": null,
314 - "type": 11,
315 - },
316 - ],
317 -}
318 -`;
319 -
320 -exports[`ProfilingCache should collect data for each commit: CommitDetails commitIndex: 3 1`] = `
321 -Object {
322 - "changeDescriptions": Map {
323 - 2 => Object {
324 - "context": null,
325 - "didHooksChange": false,
326 - "hooks": null,
327 - "isFirstMount": false,
328 - "props": Array [
329 - "count",
330 - ],
331 - "state": null,
332 - },
333 - },
334 - "duration": 10,
335 - "effectDuration": 0,
336 - "fiberActualDurations": Map {
337 - 2 => 10,
338 - 1 => 10,
339 - },
340 - "fiberSelfDurations": Map {
341 - 2 => 10,
342 - 1 => 0,
343 - },
344 - "passiveEffectDuration": 0,
345 - "priorityLevel": "Immediate",
346 - "timestamp": 45,
347 - "updaters": Array [
348 - Object {
349 - "displayName": "render()",
350 - "hocDisplayNames": null,
351 - "id": 1,
352 - "key": null,
353 - "type": 11,
354 - },
355 - ],
356 -}
357 -`;
358 -
359 -exports[`ProfilingCache should collect data for each commit: imported data 1`] = `
360 -Object {
361 - "dataForRoots": Array [
362 - Object {
363 - "commitData": Array [
364 - Object {
365 - "changeDescriptions": Array [
366 - Array [
367 - 2,
368 - Object {
369 - "context": null,
370 - "didHooksChange": false,
371 - "isFirstMount": true,
372 - "props": null,
373 - "state": null,
374 - },
375 - ],
376 - Array [
377 - 4,
378 - Object {
379 - "context": null,
380 - "didHooksChange": false,
381 - "isFirstMount": true,
382 - "props": null,
383 - "state": null,
384 - },
385 - ],
386 - Array [
387 - 5,
388 - Object {
389 - "context": null,
390 - "didHooksChange": false,
391 - "isFirstMount": true,
392 - "props": null,
393 - "state": null,
394 - },
395 - ],
396 - Array [
397 - 6,
398 - Object {
399 - "context": null,
400 - "didHooksChange": false,
401 - "isFirstMount": true,
402 - "props": null,
403 - "state": null,
404 - },
405 - ],
406 - ],
407 - "duration": 12,
408 - "effectDuration": null,
409 - "fiberActualDurations": Array [
410 - Array [
411 - 1,
412 - 12,
413 - ],
414 - Array [
415 - 2,
416 - 12,
417 - ],
418 - Array [
419 - 4,
420 - 0,
421 - ],
422 - Array [
423 - 5,
424 - 1,
425 - ],
426 - Array [
427 - 6,
428 - 1,
429 - ],
430 - ],
431 - "fiberSelfDurations": Array [
432 - Array [
433 - 1,
434 - 0,
435 - ],
436 - Array [
437 - 2,
438 - 10,
439 - ],
440 - Array [
441 - 4,
442 - 0,
443 - ],
444 - Array [
445 - 5,
446 - 1,
447 - ],
448 - Array [
449 - 6,
450 - 1,
451 - ],
452 - ],
453 - "passiveEffectDuration": null,
454 - "priorityLevel": "Immediate",
455 - "timestamp": 12,
456 - "updaters": Array [
457 - Object {
458 - "displayName": "render()",
459 - "hocDisplayNames": null,
460 - "id": 1,
461 - "key": null,
462 - "type": 11,
463 - },
464 - ],
465 - },
466 - Object {
467 - "changeDescriptions": Array [
468 - Array [
469 - 4,
470 - Object {
471 - "context": null,
472 - "didHooksChange": false,
473 - "hooks": null,
474 - "isFirstMount": false,
475 - "props": Array [],
476 - "state": null,
477 - },
478 - ],
479 - Array [
480 - 5,
481 - Object {
482 - "context": null,
483 - "didHooksChange": false,
484 - "hooks": null,
485 - "isFirstMount": false,
486 - "props": Array [],
487 - "state": null,
488 - },
489 - ],
490 - Array [
491 - 7,
492 - Object {
493 - "context": null,
494 - "didHooksChange": false,
495 - "isFirstMount": true,
496 - "props": null,
497 - "state": null,
498 - },
499 - ],
500 - Array [
501 - 2,
502 - Object {
503 - "context": null,
504 - "didHooksChange": false,
505 - "hooks": null,
506 - "isFirstMount": false,
507 - "props": Array [
508 - "count",
509 - ],
510 - "state": null,
511 - },
512 - ],
513 - ],
514 - "duration": 13,
515 - "effectDuration": null,
516 - "fiberActualDurations": Array [
517 - Array [
518 - 4,
519 - 0,
520 - ],
521 - Array [
522 - 5,
523 - 1,
524 - ],
525 - Array [
526 - 7,
527 - 2,
528 - ],
529 - Array [
530 - 2,
531 - 13,
532 - ],
533 - Array [
534 - 1,
535 - 13,
536 - ],
537 - ],
538 - "fiberSelfDurations": Array [
539 - Array [
540 - 4,
541 - 0,
542 - ],
543 - Array [
544 - 5,
545 - 1,
546 - ],
547 - Array [
548 - 7,
549 - 2,
550 - ],
551 - Array [
552 - 2,
553 - 10,
554 - ],
555 - Array [
556 - 1,
557 - 0,
558 - ],
559 - ],
560 - "passiveEffectDuration": null,
561 - "priorityLevel": "Immediate",
562 - "timestamp": 25,
563 - "updaters": Array [
564 - Object {
565 - "displayName": "render()",
566 - "hocDisplayNames": null,
567 - "id": 1,
568 - "key": null,
569 - "type": 11,
570 - },
571 - ],
572 - },
573 - Object {
574 - "changeDescriptions": Array [
575 - Array [
576 - 4,
577 - Object {
578 - "context": null,
579 - "didHooksChange": false,
580 - "hooks": null,
581 - "isFirstMount": false,
582 - "props": Array [],
583 - "state": null,
584 - },
585 - ],
586 - Array [
587 - 2,
588 - Object {
589 - "context": null,
590 - "didHooksChange": false,
591 - "hooks": null,
592 - "isFirstMount": false,
593 - "props": Array [
594 - "count",
595 - ],
596 - "state": null,
597 - },
598 - ],
599 - ],
600 - "duration": 10,
601 - "effectDuration": 0,
602 - "fiberActualDurations": Array [
603 - Array [
604 - 4,
605 - 0,
606 - ],
607 - Array [
608 - 2,
609 - 10,
610 - ],
611 - Array [
612 - 1,
613 - 10,
614 - ],
615 - ],
616 - "fiberSelfDurations": Array [
617 - Array [
618 - 4,
619 - 0,
620 - ],
621 - Array [
622 - 2,
623 - 10,
624 - ],
625 - Array [
626 - 1,
627 - 0,
628 - ],
629 - ],
630 - "passiveEffectDuration": 0,
631 - "priorityLevel": "Immediate",
632 - "timestamp": 35,
633 - "updaters": Array [
634 - Object {
635 - "displayName": "render()",
636 - "hocDisplayNames": null,
637 - "id": 1,
638 - "key": null,
639 - "type": 11,
640 - },
641 - ],
642 - },
643 - Object {
644 - "changeDescriptions": Array [
645 - Array [
646 - 2,
647 - Object {
648 - "context": null,
649 - "didHooksChange": false,
650 - "hooks": null,
651 - "isFirstMount": false,
652 - "props": Array [
653 - "count",
654 - ],
655 - "state": null,
656 - },
657 - ],
658 - ],
659 - "duration": 10,
660 - "effectDuration": 0,
661 - "fiberActualDurations": Array [
662 - Array [
663 - 2,
664 - 10,
665 - ],
666 - Array [
667 - 1,
668 - 10,
669 - ],
670 - ],
671 - "fiberSelfDurations": Array [
672 - Array [
673 - 2,
674 - 10,
675 - ],
676 - Array [
677 - 1,
678 - 0,
679 - ],
680 - ],
681 - "passiveEffectDuration": 0,
682 - "priorityLevel": "Immediate",
683 - "timestamp": 45,
684 - "updaters": Array [
685 - Object {
686 - "displayName": "render()",
687 - "hocDisplayNames": null,
688 - "id": 1,
689 - "key": null,
690 - "type": 11,
691 - },
692 - ],
693 - },
694 - ],
695 - "displayName": "Parent",
696 - "initialTreeBaseDurations": Array [],
697 - "operations": Array [
698 - Array [
699 - 1,
700 - 1,
701 - 17,
702 - 6,
703 - 80,
704 - 97,
705 - 114,
706 - 101,
707 - 110,
708 - 116,
709 - 5,
710 - 67,
711 - 104,
712 - 105,
713 - 108,
714 - 100,
715 - 1,
716 - 48,
717 - 1,
718 - 49,
719 - 1,
720 - 1,
721 - 11,
722 - 0,
723 - 3,
724 - 1,
725 - 1,
726 - 4,
727 - 1,
728 - 12000,
729 - 1,
730 - 2,
731 - 5,
732 - 1,
733 - 0,
734 - 1,
735 - 0,
736 - 4,
737 - 2,
738 - 12000,
739 - 1,
740 - 4,
741 - 5,
742 - 2,
743 - 2,
744 - 2,
745 - 3,
746 - 4,
747 - 4,
748 - 0,
749 - 1,
750 - 5,
751 - 5,
752 - 2,
753 - 2,
754 - 2,
755 - 4,
756 - 4,
757 - 5,
758 - 1000,
759 - 1,
760 - 6,
761 - 8,
762 - 2,
763 - 2,
764 - 2,
765 - 0,
766 - 4,
767 - 6,
768 - 1000,
769 - ],
770 - Array [
771 - 1,
772 - 1,
773 - 8,
774 - 5,
775 - 67,
776 - 104,
777 - 105,
778 - 108,
779 - 100,
780 - 1,
781 - 50,
782 - 1,
783 - 7,
784 - 5,
785 - 2,
786 - 2,
787 - 1,
788 - 2,
789 - 4,
790 - 7,
791 - 2000,
792 - 4,
793 - 2,
794 - 14000,
795 - 3,
796 - 2,
797 - 4,
798 - 4,
799 - 5,
800 - 7,
801 - 6,
802 - 4,
803 - 1,
804 - 14000,
805 - ],
806 - Array [
807 - 1,
808 - 1,
809 - 0,
810 - 2,
811 - 2,
812 - 7,
813 - 5,
814 - 4,
815 - 2,
816 - 11000,
817 - 3,
818 - 2,
819 - 2,
820 - 4,
821 - 6,
822 - 4,
823 - 1,
824 - 11000,
825 - ],
826 - Array [
827 - 1,
828 - 1,
829 - 0,
830 - 2,
831 - 1,
832 - 4,
833 - ],
834 - ],
835 - "rootID": 1,
836 - "snapshots": Array [],
837 - },
838 - ],
839 - "timelineData": Array [
840 - Object {
841 - "batchUIDToMeasuresKeyValueArray": Array [
842 - Array [
843 - 1,
844 - Array [
845 - Object {
846 - "batchUID": 1,
847 - "depth": 0,
848 - "duration": 12,
849 - "lanes": "0b0000000000000000000000000000001",
850 - "timestamp": 10,
851 - "type": "render-idle",
852 - },
853 - Object {
854 - "batchUID": 1,
855 - "depth": 0,
856 - "duration": 12,
857 - "lanes": "0b0000000000000000000000000000001",
858 - "timestamp": 10,
859 - "type": "render",
860 - },
861 - Object {
862 - "batchUID": 1,
863 - "depth": 0,
864 - "duration": 0,
865 - "lanes": "0b0000000000000000000000000000001",
866 - "timestamp": 22,
867 - "type": "commit",
868 - },
869 - Object {
870 - "batchUID": 1,
871 - "depth": 1,
872 - "duration": 0,
873 - "lanes": "0b0000000000000000000000000000001",
874 - "timestamp": 22,
875 - "type": "layout-effects",
876 - },
877 - ],
878 - ],
879 - Array [
880 - 2,
881 - Array [
882 - Object {
883 - "batchUID": 2,
884 - "depth": 0,
885 - "duration": 13,
886 - "lanes": "0b0000000000000000000000000000001",
887 - "timestamp": 22,
888 - "type": "render-idle",
889 - },
890 - Object {
891 - "batchUID": 2,
892 - "depth": 0,
893 - "duration": 13,
894 - "lanes": "0b0000000000000000000000000000001",
895 - "timestamp": 22,
896 - "type": "render",
897 - },
898 - Object {
899 - "batchUID": 2,
900 - "depth": 0,
901 - "duration": 0,
902 - "lanes": "0b0000000000000000000000000000001",
903 - "timestamp": 35,
904 - "type": "commit",
905 - },
906 - Object {
907 - "batchUID": 2,
908 - "depth": 1,
909 - "duration": 0,
910 - "lanes": "0b0000000000000000000000000000001",
911 - "timestamp": 35,
912 - "type": "layout-effects",
913 - },
914 - ],
915 - ],
916 - Array [
917 - 3,
918 - Array [
919 - Object {
920 - "batchUID": 3,
921 - "depth": 0,
922 - "duration": 10,
923 - "lanes": "0b0000000000000000000000000000001",
924 - "timestamp": 35,
925 - "type": "render-idle",
926 - },
927 - Object {
928 - "batchUID": 3,
929 - "depth": 0,
930 - "duration": 10,
931 - "lanes": "0b0000000000000000000000000000001",
932 - "timestamp": 35,
933 - "type": "render",
934 - },
935 - Object {
936 - "batchUID": 3,
937 - "depth": 0,
938 - "duration": 0,
939 - "lanes": "0b0000000000000000000000000000001",
940 - "timestamp": 45,
941 - "type": "commit",
942 - },
943 - Object {
944 - "batchUID": 3,
945 - "depth": 1,
946 - "duration": 0,
947 - "lanes": "0b0000000000000000000000000000001",
948 - "timestamp": 45,
949 - "type": "layout-effects",
950 - },
951 - Object {
952 - "batchUID": 3,
953 - "depth": 0,
954 - "duration": 0,
955 - "lanes": "0b0000000000000000000000000000001",
956 - "timestamp": 45,
957 - "type": "passive-effects",
958 - },
959 - ],
960 - ],
961 - Array [
962 - 4,
963 - Array [
964 - Object {
965 - "batchUID": 4,
966 - "depth": 0,
967 - "duration": 10,
968 - "lanes": "0b0000000000000000000000000000001",
969 - "timestamp": 45,
970 - "type": "render-idle",
971 - },
972 - Object {
973 - "batchUID": 4,
974 - "depth": 0,
975 - "duration": 10,
976 - "lanes": "0b0000000000000000000000000000001",
977 - "timestamp": 45,
978 - "type": "render",
979 - },
980 - Object {
981 - "batchUID": 4,
982 - "depth": 0,
983 - "duration": 0,
984 - "lanes": "0b0000000000000000000000000000001",
985 - "timestamp": 55,
986 - "type": "commit",
987 - },
988 - Object {
989 - "batchUID": 4,
990 - "depth": 1,
991 - "duration": 0,
992 - "lanes": "0b0000000000000000000000000000001",
993 - "timestamp": 55,
994 - "type": "layout-effects",
995 - },
996 - Object {
997 - "batchUID": 4,
998 - "depth": 0,
999 - "duration": 0,
1000 - "lanes": "0b0000000000000000000000000000001",
1001 - "timestamp": 55,
1002 - "type": "passive-effects",
1003 - },
1004 - ],
1005 - ],
1006 - ],
1007 - "componentMeasures": Array [
1008 - Object {
1009 - "componentName": "Parent",
1010 - "duration": 10,
1011 - "timestamp": 10,
1012 - "type": "render",
1013 - "warning": null,
1014 - },
1015 - Object {
1016 - "componentName": "Child",
1017 - "duration": 0,
1018 - "timestamp": 20,
1019 - "type": "render",
1020 - "warning": null,
1021 - },
1022 - Object {
1023 - "componentName": "Child",
1024 - "duration": 1,
1025 - "timestamp": 20,
1026 - "type": "render",
1027 - "warning": null,
1028 - },
1029 - Object {
1030 - "componentName": "Child",
1031 - "duration": 1,
1032 - "timestamp": 21,
1033 - "type": "render",
1034 - "warning": null,
1035 - },
1036 - Object {
1037 - "componentName": "Parent",
1038 - "duration": 10,
1039 - "timestamp": 22,
1040 - "type": "render",
1041 - "warning": null,
1042 - },
1043 - Object {
1044 - "componentName": "Child",
1045 - "duration": 0,
1046 - "timestamp": 32,
1047 - "type": "render",
1048 - "warning": null,
1049 - },
1050 - Object {
1051 - "componentName": "Child",
1052 - "duration": 1,
1053 - "timestamp": 32,
1054 - "type": "render",
1055 - "warning": null,
1056 - },
1057 - Object {
1058 - "componentName": "Child",
1059 - "duration": 2,
1060 - "timestamp": 33,
1061 - "type": "render",
1062 - "warning": null,
1063 - },
1064 - Object {
1065 - "componentName": "Parent",
1066 - "duration": 10,
1067 - "timestamp": 35,
1068 - "type": "render",
1069 - "warning": null,
1070 - },
1071 - Object {
1072 - "componentName": "Child",
1073 - "duration": 0,
1074 - "timestamp": 45,
1075 - "type": "render",
1076 - "warning": null,
1077 - },
1078 - Object {
1079 - "componentName": "Parent",
1080 - "duration": 10,
1081 - "timestamp": 45,
1082 - "type": "render",
1083 - "warning": null,
1084 - },
1085 - ],
1086 - "duration": 65,
1087 - "flamechart": Array [],
1088 - "internalModuleSourceToRanges": Array [],
1089 - "laneToLabelKeyValueArray": Array [
1090 - Array [
1091 - 1,
1092 - "Sync",
1093 - ],
1094 - Array [
1095 - 2,
1096 - "InputContinuousHydration",
1097 - ],
1098 - Array [
1099 - 4,
1100 - "InputContinuous",
1101 - ],
1102 - Array [
1103 - 8,
1104 - "DefaultHydration",
1105 - ],
1106 - Array [
1107 - 16,
1108 - "Default",
1109 - ],
1110 - Array [
1111 - 32,
1112 - "TransitionHydration",
1113 - ],
1114 - Array [
1115 - 64,
1116 - "Transition",
1117 - ],
1118 - Array [
1119 - 128,
1120 - "Transition",
1121 - ],
1122 - Array [
1123 - 256,
1124 - "Transition",
1125 - ],
1126 - Array [
1127 - 512,
1128 - "Transition",
1129 - ],
1130 - Array [
1131 - 1024,
1132 - "Transition",
1133 - ],
1134 - Array [
1135 - 2048,
1136 - "Transition",
1137 - ],
1138 - Array [
1139 - 4096,
1140 - "Transition",
1141 - ],
1142 - Array [
1143 - 8192,
1144 - "Transition",
1145 - ],
1146 - Array [
1147 - 16384,
1148 - "Transition",
1149 - ],
1150 - Array [
1151 - 32768,
1152 - "Transition",
1153 - ],
1154 - Array [
1155 - 65536,
1156 - "Transition",
1157 - ],
1158 - Array [
1159 - 131072,
1160 - "Transition",
1161 - ],
1162 - Array [
1163 - 262144,
1164 - "Transition",
1165 - ],
1166 - Array [
1167 - 524288,
1168 - "Transition",
1169 - ],
1170 - Array [
1171 - 1048576,
1172 - "Transition",
1173 - ],
1174 - Array [
1175 - 2097152,
1176 - "Transition",
1177 - ],
1178 - Array [
1179 - 4194304,
1180 - "Retry",
1181 - ],
1182 - Array [
1183 - 8388608,
1184 - "Retry",
1185 - ],
1186 - Array [
1187 - 16777216,
1188 - "Retry",
1189 - ],
1190 - Array [
1191 - 33554432,
1192 - "Retry",
1193 - ],
1194 - Array [
1195 - 67108864,
1196 - "Retry",
1197 - ],
1198 - Array [
1199 - 134217728,
1200 - "SelectiveHydration",
1201 - ],
1202 - Array [
1203 - 268435456,
1204 - "IdleHydration",
1205 - ],
1206 - Array [
1207 - 536870912,
1208 - "Idle",
1209 - ],
1210 - Array [
1211 - 1073741824,
1212 - "Offscreen",
1213 - ],
1214 - ],
1215 - "laneToReactMeasureKeyValueArray": Array [
1216 - Array [
1217 - 1,
1218 - Array [
1219 - Object {
1220 - "batchUID": 1,
1221 - "depth": 0,
1222 - "duration": 12,
1223 - "lanes": "0b0000000000000000000000000000001",
1224 - "timestamp": 10,
1225 - "type": "render-idle",
1226 - },
1227 - Object {
1228 - "batchUID": 1,
1229 - "depth": 0,
1230 - "duration": 12,
1231 - "lanes": "0b0000000000000000000000000000001",
1232 - "timestamp": 10,
1233 - "type": "render",
1234 - },
1235 - Object {
1236 - "batchUID": 1,
1237 - "depth": 0,
1238 - "duration": 0,
1239 - "lanes": "0b0000000000000000000000000000001",
1240 - "timestamp": 22,
1241 - "type": "commit",
1242 - },
1243 - Object {
1244 - "batchUID": 1,
1245 - "depth": 1,
1246 - "duration": 0,
1247 - "lanes": "0b0000000000000000000000000000001",
1248 - "timestamp": 22,
1249 - "type": "layout-effects",
1250 - },
1251 - Object {
1252 - "batchUID": 2,
1253 - "depth": 0,
1254 - "duration": 13,
1255 - "lanes": "0b0000000000000000000000000000001",
1256 - "timestamp": 22,
1257 - "type": "render-idle",
1258 - },
1259 - Object {
1260 - "batchUID": 2,
1261 - "depth": 0,
1262 - "duration": 13,
1263 - "lanes": "0b0000000000000000000000000000001",
1264 - "timestamp": 22,
1265 - "type": "render",
1266 - },
1267 - Object {
1268 - "batchUID": 2,
1269 - "depth": 0,
1270 - "duration": 0,
1271 - "lanes": "0b0000000000000000000000000000001",
1272 - "timestamp": 35,
1273 - "type": "commit",
1274 - },
1275 - Object {
1276 - "batchUID": 2,
1277 - "depth": 1,
1278 - "duration": 0,
1279 - "lanes": "0b0000000000000000000000000000001",
1280 - "timestamp": 35,
1281 - "type": "layout-effects",
1282 - },
1283 - Object {
1284 - "batchUID": 3,
1285 - "depth": 0,
1286 - "duration": 10,
1287 - "lanes": "0b0000000000000000000000000000001",
1288 - "timestamp": 35,
1289 - "type": "render-idle",
1290 - },
1291 - Object {
1292 - "batchUID": 3,
1293 - "depth": 0,
1294 - "duration": 10,
1295 - "lanes": "0b0000000000000000000000000000001",
1296 - "timestamp": 35,
1297 - "type": "render",
1298 - },
1299 - Object {
1300 - "batchUID": 3,
1301 - "depth": 0,
1302 - "duration": 0,
1303 - "lanes": "0b0000000000000000000000000000001",
1304 - "timestamp": 45,
1305 - "type": "commit",
1306 - },
1307 - Object {
1308 - "batchUID": 3,
1309 - "depth": 1,
1310 - "duration": 0,
1311 - "lanes": "0b0000000000000000000000000000001",
1312 - "timestamp": 45,
1313 - "type": "layout-effects",
1314 - },
1315 - Object {
1316 - "batchUID": 3,
1317 - "depth": 0,
1318 - "duration": 0,
1319 - "lanes": "0b0000000000000000000000000000001",
1320 - "timestamp": 45,
1321 - "type": "passive-effects",
1322 - },
1323 - Object {
1324 - "batchUID": 4,
1325 - "depth": 0,
1326 - "duration": 10,
1327 - "lanes": "0b0000000000000000000000000000001",
1328 - "timestamp": 45,
1329 - "type": "render-idle",
1330 - },
1331 - Object {
1332 - "batchUID": 4,
1333 - "depth": 0,
1334 - "duration": 10,
1335 - "lanes": "0b0000000000000000000000000000001",
1336 - "timestamp": 45,
1337 - "type": "render",
1338 - },
1339 - Object {
1340 - "batchUID": 4,
1341 - "depth": 0,
1342 - "duration": 0,
1343 - "lanes": "0b0000000000000000000000000000001",
1344 - "timestamp": 55,
1345 - "type": "commit",
1346 - },
1347 - Object {
1348 - "batchUID": 4,
1349 - "depth": 1,
1350 - "duration": 0,
1351 - "lanes": "0b0000000000000000000000000000001",
1352 - "timestamp": 55,
1353 - "type": "layout-effects",
1354 - },
1355 - Object {
1356 - "batchUID": 4,
1357 - "depth": 0,
1358 - "duration": 0,
1359 - "lanes": "0b0000000000000000000000000000001",
1360 - "timestamp": 55,
1361 - "type": "passive-effects",
1362 - },
1363 - ],
1364 - ],
1365 - Array [
1366 - 2,
1367 - Array [],
1368 - ],
1369 - Array [
1370 - 4,
1371 - Array [],
1372 - ],
1373 - Array [
1374 - 8,
1375 - Array [],
1376 - ],
1377 - Array [
1378 - 16,
1379 - Array [],
1380 - ],
1381 - Array [
1382 - 32,
1383 - Array [],
1384 - ],
1385 - Array [
1386 - 64,
1387 - Array [],
1388 - ],
1389 - Array [
1390 - 128,
1391 - Array [],
1392 - ],
1393 - Array [
1394 - 256,
1395 - Array [],
1396 - ],
1397 - Array [
1398 - 512,
1399 - Array [],
1400 - ],
1401 - Array [
1402 - 1024,
1403 - Array [],
1404 - ],
1405 - Array [
1406 - 2048,
1407 - Array [],
1408 - ],
1409 - Array [
1410 - 4096,
1411 - Array [],
1412 - ],
1413 - Array [
1414 - 8192,
1415 - Array [],
1416 - ],
1417 - Array [
1418 - 16384,
1419 - Array [],
1420 - ],
1421 - Array [
1422 - 32768,
1423 - Array [],
1424 - ],
1425 - Array [
1426 - 65536,
1427 - Array [],
1428 - ],
1429 - Array [
1430 - 131072,
1431 - Array [],
1432 - ],
1433 - Array [
1434 - 262144,
1435 - Array [],
1436 - ],
1437 - Array [
1438 - 524288,
1439 - Array [],
1440 - ],
1441 - Array [
1442 - 1048576,
1443 - Array [],
1444 - ],
1445 - Array [
1446 - 2097152,
1447 - Array [],
1448 - ],
1449 - Array [
1450 - 4194304,
1451 - Array [],
1452 - ],
1453 - Array [
1454 - 8388608,
1455 - Array [],
1456 - ],
1457 - Array [
1458 - 16777216,
1459 - Array [],
1460 - ],
1461 - Array [
1462 - 33554432,
1463 - Array [],
1464 - ],
1465 - Array [
1466 - 67108864,
1467 - Array [],
1468 - ],
1469 - Array [
1470 - 134217728,
1471 - Array [],
1472 - ],
1473 - Array [
1474 - 268435456,
1475 - Array [],
1476 - ],
1477 - Array [
1478 - 536870912,
1479 - Array [],
1480 - ],
1481 - Array [
1482 - 1073741824,
1483 - Array [],
1484 - ],
1485 - ],
1486 - "nativeEvents": Array [],
1487 - "networkMeasures": Array [],
1488 - "otherUserTimingMarks": Array [],
1489 - "reactVersion": "<filtered-version>",
1490 - "schedulingEvents": Array [
1491 - Object {
1492 - "lanes": "0b0000000000000000000000000000001",
1493 - "timestamp": 10,
1494 - "type": "schedule-render",
1495 - "warning": null,
1496 - },
1497 - Object {
1498 - "lanes": "0b0000000000000000000000000000001",
1499 - "timestamp": 22,
1500 - "type": "schedule-render",
1501 - "warning": null,
1502 - },
1503 - Object {
1504 - "lanes": "0b0000000000000000000000000000001",
1505 - "timestamp": 35,
1506 - "type": "schedule-render",
1507 - "warning": null,
1508 - },
1509 - Object {
1510 - "lanes": "0b0000000000000000000000000000001",
1511 - "timestamp": 45,
1512 - "type": "schedule-render",
1513 - "warning": null,
1514 - },
1515 - ],
1516 - "snapshotHeight": 0,
1517 - "snapshots": Array [],
1518 - "startTime": -10,
1519 - "suspenseEvents": Array [],
1520 - "thrownErrors": Array [],
1521 - },
1522 - ],
1523 - "version": 5,
1524 -}
1525 -`;
1526 -
1527 -exports[`ProfilingCache should collect data for each rendered fiber: FiberCommits: element 2 1`] = `
1528 -Array [
1529 - 0,
1530 - 1,
1531 - 2,
1532 -]
1533 -`;
1534 -
1535 -exports[`ProfilingCache should collect data for each rendered fiber: FiberCommits: element 4 1`] = `
1536 -Array [
1537 - 0,
1538 - 1,
1539 - 2,
1540 -]
1541 -`;
1542 -
1543 -exports[`ProfilingCache should collect data for each rendered fiber: FiberCommits: element 5 1`] = `
1544 -Array [
1545 - 0,
1546 -]
1547 -`;
1548 -
1549 -exports[`ProfilingCache should collect data for each rendered fiber: FiberCommits: element 6 1`] = `
1550 -Array [
1551 - 1,
1552 - 2,
1553 -]
1554 -`;
1555 -
1556 -exports[`ProfilingCache should collect data for each rendered fiber: FiberCommits: element 7 1`] = `
1557 -Array [
1558 - 2,
1559 -]
1560 -`;
1561 -
1562 -exports[`ProfilingCache should collect data for each rendered fiber: imported data 1`] = `
1563 -Object {
1564 - "dataForRoots": Array [
1565 - Object {
1566 - "commitData": Array [
1567 - Object {
1568 - "changeDescriptions": Array [
1569 - Array [
1570 - 2,
1571 - Object {
1572 - "context": null,
1573 - "didHooksChange": false,
1574 - "isFirstMount": true,
1575 - "props": null,
1576 - "state": null,
1577 - },
1578 - ],
1579 - Array [
1580 - 4,
1581 - Object {
1582 - "context": null,
1583 - "didHooksChange": false,
1584 - "isFirstMount": true,
1585 - "props": null,
1586 - "state": null,
1587 - },
1588 - ],
1589 - Array [
1590 - 5,
1591 - Object {
1592 - "context": null,
1593 - "didHooksChange": false,
1594 - "isFirstMount": true,
1595 - "props": null,
1596 - "state": null,
1597 - },
1598 - ],
1599 - ],
1600 - "duration": 11,
1601 - "effectDuration": null,
1602 - "fiberActualDurations": Array [
1603 - Array [
1604 - 1,
1605 - 11,
1606 - ],
1607 - Array [
1608 - 2,
1609 - 11,
1610 - ],
1611 - Array [
1612 - 4,
1613 - 0,
1614 - ],
1615 - Array [
1616 - 5,
1617 - 1,
1618 - ],
1619 - ],
1620 - "fiberSelfDurations": Array [
1621 - Array [
1622 - 1,
1623 - 0,
1624 - ],
1625 - Array [
1626 - 2,
1627 - 10,
1628 - ],
1629 - Array [
1630 - 4,
1631 - 0,
1632 - ],
1633 - Array [
1634 - 5,
1635 - 1,
1636 - ],
1637 - ],
1638 - "passiveEffectDuration": null,
1639 - "priorityLevel": "Immediate",
1640 - "timestamp": 11,
1641 - "updaters": Array [
1642 - Object {
1643 - "displayName": "render()",
1644 - "hocDisplayNames": null,
1645 - "id": 1,
1646 - "key": null,
1647 - "type": 11,
1648 - },
1649 - ],
1650 - },
1651 - Object {
1652 - "changeDescriptions": Array [
1653 - Array [
1654 - 4,
1655 - Object {
1656 - "context": null,
1657 - "didHooksChange": false,
1658 - "hooks": null,
1659 - "isFirstMount": false,
1660 - "props": Array [],
1661 - "state": null,
1662 - },
1663 - ],
1664 - Array [
1665 - 6,
1666 - Object {
1667 - "context": null,
1668 - "didHooksChange": false,
1669 - "isFirstMount": true,
1670 - "props": null,
1671 - "state": null,
1672 - },
1673 - ],
1674 - Array [
1675 - 2,
1676 - Object {
1677 - "context": null,
1678 - "didHooksChange": false,
1679 - "hooks": null,
1680 - "isFirstMount": false,
1681 - "props": Array [
1682 - "count",
1683 - ],
1684 - "state": null,
1685 - },
1686 - ],
1687 - ],
1688 - "duration": 11,
1689 - "effectDuration": null,
1690 - "fiberActualDurations": Array [
1691 - Array [
1692 - 4,
1693 - 0,
1694 - ],
1695 - Array [
1696 - 6,
1697 - 1,
1698 - ],
1699 - Array [
1700 - 2,
1701 - 11,
1702 - ],
1703 - Array [
1704 - 1,
1705 - 11,
1706 - ],
1707 - ],
1708 - "fiberSelfDurations": Array [
1709 - Array [
1710 - 4,
1711 - 0,
1712 - ],
1713 - Array [
1714 - 6,
1715 - 1,
1716 - ],
1717 - Array [
1718 - 2,
1719 - 10,
1720 - ],
1721 - Array [
1722 - 1,
1723 - 0,
1724 - ],
1725 - ],
1726 - "passiveEffectDuration": null,
1727 - "priorityLevel": "Immediate",
1728 - "timestamp": 22,
1729 - "updaters": Array [
1730 - Object {
1731 - "displayName": "render()",
1732 - "hocDisplayNames": null,
1733 - "id": 1,
1734 - "key": null,
1735 - "type": 11,
1736 - },
1737 - ],
1738 - },
1739 - Object {
1740 - "changeDescriptions": Array [
1741 - Array [
1742 - 4,
1743 - Object {
1744 - "context": null,
1745 - "didHooksChange": false,
1746 - "hooks": null,
1747 - "isFirstMount": false,
1748 - "props": Array [],
1749 - "state": null,
1750 - },
1751 - ],
1752 - Array [
1753 - 6,
1754 - Object {
1755 - "context": null,
1756 - "didHooksChange": false,
1757 - "hooks": null,
1758 - "isFirstMount": false,
1759 - "props": Array [],
1760 - "state": null,
1761 - },
1762 - ],
1763 - Array [
1764 - 7,
1765 - Object {
1766 - "context": null,
1767 - "didHooksChange": false,
1768 - "isFirstMount": true,
1769 - "props": null,
1770 - "state": null,
1771 - },
1772 - ],
1773 - Array [
1774 - 2,
1775 - Object {
1776 - "context": null,
1777 - "didHooksChange": false,
1778 - "hooks": null,
1779 - "isFirstMount": false,
1780 - "props": Array [
1781 - "count",
1782 - ],
1783 - "state": null,
1784 - },
1785 - ],
1786 - ],
1787 - "duration": 13,
1788 - "effectDuration": null,
1789 - "fiberActualDurations": Array [
1790 - Array [
1791 - 4,
1792 - 0,
1793 - ],
1794 - Array [
1795 - 6,
1796 - 1,
1797 - ],
1798 - Array [
1799 - 7,
1800 - 2,
1801 - ],
1802 - Array [
1803 - 2,
1804 - 13,
1805 - ],
1806 - Array [
1807 - 1,
1808 - 13,
1809 - ],
1810 - ],
1811 - "fiberSelfDurations": Array [
1812 - Array [
1813 - 4,
1814 - 0,
1815 - ],
1816 - Array [
1817 - 6,
1818 - 1,
1819 - ],
1820 - Array [
1821 - 7,
1822 - 2,
1823 - ],
1824 - Array [
1825 - 2,
1826 - 10,
1827 - ],
1828 - Array [
1829 - 1,
1830 - 0,
1831 - ],
1832 - ],
1833 - "passiveEffectDuration": null,
1834 - "priorityLevel": "Immediate",
1835 - "timestamp": 35,
1836 - "updaters": Array [
1837 - Object {
1838 - "displayName": "render()",
1839 - "hocDisplayNames": null,
1840 - "id": 1,
1841 - "key": null,
1842 - "type": 11,
1843 - },
1844 - ],
1845 - },
1846 - ],
1847 - "displayName": "Parent",
1848 - "initialTreeBaseDurations": Array [],
1849 - "operations": Array [
1850 - Array [
1851 - 1,
1852 - 1,
1853 - 15,
1854 - 6,
1855 - 80,
1856 - 97,
1857 - 114,
1858 - 101,
1859 - 110,
1860 - 116,
1861 - 5,
1862 - 67,
1863 - 104,
1864 - 105,
1865 - 108,
1866 - 100,
1867 - 1,
1868 - 48,
1869 - 1,
1870 - 1,
1871 - 11,
1872 - 0,
1873 - 3,
1874 - 1,
1875 - 1,
1876 - 4,
1877 - 1,
1878 - 11000,
1879 - 1,
1880 - 2,
1881 - 5,
1882 - 1,
1883 - 0,
1884 - 1,
1885 - 0,
1886 - 4,
1887 - 2,
1888 - 11000,
1889 - 1,
1890 - 4,
1891 - 5,
1892 - 2,
1893 - 2,
1894 - 2,
1895 - 3,
1896 - 4,
1897 - 4,
1898 - 0,
1899 - 1,
1900 - 5,
1901 - 8,
1902 - 2,
1903 - 2,
1904 - 2,
1905 - 0,
1906 - 4,
1907 - 5,
1908 - 1000,
1909 - ],
1910 - Array [
1911 - 1,
1912 - 1,
1913 - 8,
1914 - 5,
1915 - 67,
1916 - 104,
1917 - 105,
1918 - 108,
1919 - 100,
1920 - 1,
1921 - 49,
1922 - 1,
1923 - 6,
1924 - 5,
1925 - 2,
1926 - 2,
1927 - 1,
1928 - 2,
1929 - 4,
1930 - 6,
1931 - 1000,
1932 - 4,
1933 - 2,
1934 - 12000,
1935 - 3,
1936 - 2,
1937 - 3,
1938 - 4,
1939 - 6,
1940 - 5,
1941 - 4,
1942 - 1,
1943 - 12000,
1944 - ],
1945 - Array [
1946 - 1,
1947 - 1,
1948 - 8,
1949 - 5,
1950 - 67,
1951 - 104,
1952 - 105,
1953 - 108,
1954 - 100,
1955 - 1,
1956 - 50,
1957 - 1,
1958 - 7,
1959 - 5,
1960 - 2,
1961 - 2,
1962 - 1,
1963 - 2,
1964 - 4,
1965 - 7,
1966 - 2000,
1967 - 4,
1968 - 2,
1969 - 14000,
1970 - 3,
1971 - 2,
1972 - 4,
1973 - 4,
1974 - 6,
1975 - 7,
1976 - 5,
1977 - 4,
1978 - 1,
1979 - 14000,
1980 - ],
1981 - ],
1982 - "rootID": 1,
1983 - "snapshots": Array [],
1984 - },
1985 - ],
1986 - "timelineData": Array [
1987 - Object {
1988 - "batchUIDToMeasuresKeyValueArray": Array [
1989 - Array [
1990 - 1,
1991 - Array [
1992 - Object {
1993 - "batchUID": 1,
1994 - "depth": 0,
1995 - "duration": 11,
1996 - "lanes": "0b0000000000000000000000000000001",
1997 - "timestamp": 10,
1998 - "type": "render-idle",
1999 - },
2000 - Object {
2001 - "batchUID": 1,
2002 - "depth": 0,
2003 - "duration": 11,
2004 - "lanes": "0b0000000000000000000000000000001",
2005 - "timestamp": 10,
2006 - "type": "render",
2007 - },
2008 - Object {
2009 - "batchUID": 1,
2010 - "depth": 0,
2011 - "duration": 0,
2012 - "lanes": "0b0000000000000000000000000000001",
2013 - "timestamp": 21,
2014 - "type": "commit",
2015 - },
2016 - Object {
2017 - "batchUID": 1,
2018 - "depth": 1,
2019 - "duration": 0,
2020 - "lanes": "0b0000000000000000000000000000001",
2021 - "timestamp": 21,
2022 - "type": "layout-effects",
2023 - },
2024 - ],
2025 - ],
2026 - Array [
2027 - 2,
2028 - Array [
2029 - Object {
2030 - "batchUID": 2,
2031 - "depth": 0,
2032 - "duration": 11,
2033 - "lanes": "0b0000000000000000000000000000001",
2034 - "timestamp": 21,
2035 - "type": "render-idle",
2036 - },
2037 - Object {
2038 - "batchUID": 2,
2039 - "depth": 0,
2040 - "duration": 11,
2041 - "lanes": "0b0000000000000000000000000000001",
2042 - "timestamp": 21,
2043 - "type": "render",
2044 - },
2045 - Object {
2046 - "batchUID": 2,
2047 - "depth": 0,
2048 - "duration": 0,
2049 - "lanes": "0b0000000000000000000000000000001",
2050 - "timestamp": 32,
2051 - "type": "commit",
2052 - },
2053 - Object {
2054 - "batchUID": 2,
2055 - "depth": 1,
2056 - "duration": 0,
2057 - "lanes": "0b0000000000000000000000000000001",
2058 - "timestamp": 32,
2059 - "type": "layout-effects",
2060 - },
2061 - ],
2062 - ],
2063 - Array [
2064 - 3,
2065 - Array [
2066 - Object {
2067 - "batchUID": 3,
2068 - "depth": 0,
2069 - "duration": 13,
2070 - "lanes": "0b0000000000000000000000000000001",
2071 - "timestamp": 32,
2072 - "type": "render-idle",
2073 - },
2074 - Object {
2075 - "batchUID": 3,
2076 - "depth": 0,
2077 - "duration": 13,
2078 - "lanes": "0b0000000000000000000000000000001",
2079 - "timestamp": 32,
2080 - "type": "render",
2081 - },
2082 - Object {
2083 - "batchUID": 3,
2084 - "depth": 0,
2085 - "duration": 0,
2086 - "lanes": "0b0000000000000000000000000000001",
2087 - "timestamp": 45,
2088 - "type": "commit",
2089 - },
2090 - Object {
2091 - "batchUID": 3,
2092 - "depth": 1,
2093 - "duration": 0,
2094 - "lanes": "0b0000000000000000000000000000001",
2095 - "timestamp": 45,
2096 - "type": "layout-effects",
2097 - },
2098 - ],
2099 - ],
2100 - ],
2101 - "componentMeasures": Array [
2102 - Object {
2103 - "componentName": "Parent",
2104 - "duration": 10,
2105 - "timestamp": 10,
2106 - "type": "render",
2107 - "warning": null,
2108 - },
2109 - Object {
2110 - "componentName": "Child",
2111 - "duration": 0,
2112 - "timestamp": 20,
2113 - "type": "render",
2114 - "warning": null,
2115 - },
2116 - Object {
2117 - "componentName": "Child",
2118 - "duration": 1,
2119 - "timestamp": 20,
2120 - "type": "render",
2121 - "warning": null,
2122 - },
2123 - Object {
2124 - "componentName": "Parent",
2125 - "duration": 10,
2126 - "timestamp": 21,
2127 - "type": "render",
2128 - "warning": null,
2129 - },
2130 - Object {
2131 - "componentName": "Child",
2132 - "duration": 0,
2133 - "timestamp": 31,
2134 - "type": "render",
2135 - "warning": null,
2136 - },
2137 - Object {
2138 - "componentName": "Child",
2139 - "duration": 1,
2140 - "timestamp": 31,
2141 - "type": "render",
2142 - "warning": null,
2143 - },
2144 - Object {
2145 - "componentName": "Parent",
2146 - "duration": 10,
2147 - "timestamp": 32,
2148 - "type": "render",
2149 - "warning": null,
2150 - },
2151 - Object {
2152 - "componentName": "Child",
2153 - "duration": 0,
2154 - "timestamp": 42,
2155 - "type": "render",
2156 - "warning": null,
2157 - },
2158 - Object {
2159 - "componentName": "Child",
2160 - "duration": 1,
2161 - "timestamp": 42,
2162 - "type": "render",
2163 - "warning": null,
2164 - },
2165 - Object {
2166 - "componentName": "Child",
2167 - "duration": 2,
2168 - "timestamp": 43,
2169 - "type": "render",
2170 - "warning": null,
2171 - },
2172 - ],
2173 - "duration": 55,
2174 - "flamechart": Array [],
2175 - "internalModuleSourceToRanges": Array [],
2176 - "laneToLabelKeyValueArray": Array [
2177 - Array [
2178 - 1,
2179 - "Sync",
2180 - ],
2181 - Array [
2182 - 2,
2183 - "InputContinuousHydration",
2184 - ],
2185 - Array [
2186 - 4,
2187 - "InputContinuous",
2188 - ],
2189 - Array [
2190 - 8,
2191 - "DefaultHydration",
2192 - ],
2193 - Array [
2194 - 16,
2195 - "Default",
2196 - ],
2197 - Array [
2198 - 32,
2199 - "TransitionHydration",
2200 - ],
2201 - Array [
2202 - 64,
2203 - "Transition",
2204 - ],
2205 - Array [
2206 - 128,
2207 - "Transition",
2208 - ],
2209 - Array [
2210 - 256,
2211 - "Transition",
2212 - ],
2213 - Array [
2214 - 512,
2215 - "Transition",
2216 - ],
2217 - Array [
2218 - 1024,
2219 - "Transition",
2220 - ],
2221 - Array [
2222 - 2048,
2223 - "Transition",
2224 - ],
2225 - Array [
2226 - 4096,
2227 - "Transition",
2228 - ],
2229 - Array [
2230 - 8192,
2231 - "Transition",
2232 - ],
2233 - Array [
2234 - 16384,
2235 - "Transition",
2236 - ],
2237 - Array [
2238 - 32768,
2239 - "Transition",
2240 - ],
2241 - Array [
2242 - 65536,
2243 - "Transition",
2244 - ],
2245 - Array [
2246 - 131072,
2247 - "Transition",
2248 - ],
2249 - Array [
2250 - 262144,
2251 - "Transition",
2252 - ],
2253 - Array [
2254 - 524288,
2255 - "Transition",
2256 - ],
2257 - Array [
2258 - 1048576,
2259 - "Transition",
2260 - ],
2261 - Array [
2262 - 2097152,
2263 - "Transition",
2264 - ],
2265 - Array [
2266 - 4194304,
2267 - "Retry",
2268 - ],
2269 - Array [
2270 - 8388608,
2271 - "Retry",
2272 - ],
2273 - Array [
2274 - 16777216,
2275 - "Retry",
2276 - ],
2277 - Array [
2278 - 33554432,
2279 - "Retry",
2280 - ],
2281 - Array [
2282 - 67108864,
2283 - "Retry",
2284 - ],
2285 - Array [
2286 - 134217728,
2287 - "SelectiveHydration",
2288 - ],
2289 - Array [
2290 - 268435456,
2291 - "IdleHydration",
2292 - ],
2293 - Array [
2294 - 536870912,
2295 - "Idle",
2296 - ],
2297 - Array [
2298 - 1073741824,
2299 - "Offscreen",
2300 - ],
2301 - ],
2302 - "laneToReactMeasureKeyValueArray": Array [
2303 - Array [
2304 - 1,
2305 - Array [
2306 - Object {
2307 - "batchUID": 1,
2308 - "depth": 0,
2309 - "duration": 11,
2310 - "lanes": "0b0000000000000000000000000000001",
2311 - "timestamp": 10,
2312 - "type": "render-idle",
2313 - },
2314 - Object {
2315 - "batchUID": 1,
2316 - "depth": 0,
2317 - "duration": 11,
2318 - "lanes": "0b0000000000000000000000000000001",
2319 - "timestamp": 10,
2320 - "type": "render",
2321 - },
2322 - Object {
2323 - "batchUID": 1,
2324 - "depth": 0,
2325 - "duration": 0,
2326 - "lanes": "0b0000000000000000000000000000001",
2327 - "timestamp": 21,
2328 - "type": "commit",
2329 - },
2330 - Object {
2331 - "batchUID": 1,
2332 - "depth": 1,
2333 - "duration": 0,
2334 - "lanes": "0b0000000000000000000000000000001",
2335 - "timestamp": 21,
2336 - "type": "layout-effects",
2337 - },
2338 - Object {
2339 - "batchUID": 2,
2340 - "depth": 0,
2341 - "duration": 11,
2342 - "lanes": "0b0000000000000000000000000000001",
2343 - "timestamp": 21,
2344 - "type": "render-idle",
2345 - },
2346 - Object {
2347 - "batchUID": 2,
2348 - "depth": 0,
2349 - "duration": 11,
2350 - "lanes": "0b0000000000000000000000000000001",
2351 - "timestamp": 21,
2352 - "type": "render",
2353 - },
2354 - Object {
2355 - "batchUID": 2,
2356 - "depth": 0,
2357 - "duration": 0,
2358 - "lanes": "0b0000000000000000000000000000001",
2359 - "timestamp": 32,
2360 - "type": "commit",
2361 - },
2362 - Object {
2363 - "batchUID": 2,
2364 - "depth": 1,
2365 - "duration": 0,
2366 - "lanes": "0b0000000000000000000000000000001",
2367 - "timestamp": 32,
2368 - "type": "layout-effects",
2369 - },
2370 - Object {
2371 - "batchUID": 3,
2372 - "depth": 0,
2373 - "duration": 13,
2374 - "lanes": "0b0000000000000000000000000000001",
2375 - "timestamp": 32,
2376 - "type": "render-idle",
2377 - },
2378 - Object {
2379 - "batchUID": 3,
2380 - "depth": 0,
2381 - "duration": 13,
2382 - "lanes": "0b0000000000000000000000000000001",
2383 - "timestamp": 32,
2384 - "type": "render",
2385 - },
2386 - Object {
2387 - "batchUID": 3,
2388 - "depth": 0,
2389 - "duration": 0,
2390 - "lanes": "0b0000000000000000000000000000001",
2391 - "timestamp": 45,
2392 - "type": "commit",
2393 - },
2394 - Object {
2395 - "batchUID": 3,
2396 - "depth": 1,
2397 - "duration": 0,
2398 - "lanes": "0b0000000000000000000000000000001",
2399 - "timestamp": 45,
2400 - "type": "layout-effects",
2401 - },
2402 - ],
2403 - ],
2404 - Array [
2405 - 2,
2406 - Array [],
2407 - ],
2408 - Array [
2409 - 4,
2410 - Array [],
2411 - ],
2412 - Array [
2413 - 8,
2414 - Array [],
2415 - ],
2416 - Array [
2417 - 16,
2418 - Array [],
2419 - ],
2420 - Array [
2421 - 32,
2422 - Array [],
2423 - ],
2424 - Array [
2425 - 64,
2426 - Array [],
2427 - ],
2428 - Array [
2429 - 128,
2430 - Array [],
2431 - ],
2432 - Array [
2433 - 256,
2434 - Array [],
2435 - ],
2436 - Array [
2437 - 512,
2438 - Array [],
2439 - ],
2440 - Array [
2441 - 1024,
2442 - Array [],
2443 - ],
2444 - Array [
2445 - 2048,
2446 - Array [],
2447 - ],
2448 - Array [
2449 - 4096,
2450 - Array [],
2451 - ],
2452 - Array [
2453 - 8192,
2454 - Array [],
2455 - ],
2456 - Array [
2457 - 16384,
2458 - Array [],
2459 - ],
2460 - Array [
2461 - 32768,
2462 - Array [],
2463 - ],
2464 - Array [
2465 - 65536,
2466 - Array [],
2467 - ],
2468 - Array [
2469 - 131072,
2470 - Array [],
2471 - ],
2472 - Array [
2473 - 262144,
2474 - Array [],
2475 - ],
2476 - Array [
2477 - 524288,
2478 - Array [],
2479 - ],
2480 - Array [
2481 - 1048576,
2482 - Array [],
2483 - ],
2484 - Array [
2485 - 2097152,
2486 - Array [],
2487 - ],
2488 - Array [
2489 - 4194304,
2490 - Array [],
2491 - ],
2492 - Array [
2493 - 8388608,
2494 - Array [],
2495 - ],
2496 - Array [
2497 - 16777216,
2498 - Array [],
2499 - ],
2500 - Array [
2501 - 33554432,
2502 - Array [],
2503 - ],
2504 - Array [
2505 - 67108864,
2506 - Array [],
2507 - ],
2508 - Array [
2509 - 134217728,
2510 - Array [],
2511 - ],
2512 - Array [
2513 - 268435456,
2514 - Array [],
2515 - ],
2516 - Array [
2517 - 536870912,
2518 - Array [],
2519 - ],
2520 - Array [
2521 - 1073741824,
2522 - Array [],
2523 - ],
2524 - ],
2525 - "nativeEvents": Array [],
2526 - "networkMeasures": Array [],
2527 - "otherUserTimingMarks": Array [],
2528 - "reactVersion": "<filtered-version>",
2529 - "schedulingEvents": Array [
2530 - Object {
2531 - "lanes": "0b0000000000000000000000000000001",
2532 - "timestamp": 10,
2533 - "type": "schedule-render",
2534 - "warning": null,
2535 - },
2536 - Object {
2537 - "lanes": "0b0000000000000000000000000000001",
2538 - "timestamp": 21,
2539 - "type": "schedule-render",
2540 - "warning": null,
2541 - },
2542 - Object {
2543 - "lanes": "0b0000000000000000000000000000001",
2544 - "timestamp": 32,
2545 - "type": "schedule-render",
2546 - "warning": null,
2547 - },
2548 - ],
2549 - "snapshotHeight": 0,
2550 - "snapshots": Array [],
2551 - "startTime": -10,
2552 - "suspenseEvents": Array [],
2553 - "thrownErrors": Array [],
2554 - },
2555 - ],
2556 - "version": 5,
2557 -}
2558 -`;
2559 -
2560 -exports[`ProfilingCache should collect data for each root (including ones added or mounted after profiling started): Data for root Parent 1`] = `
2561 -Object {
2562 - "commitData": Array [
2563 - Object {
2564 - "changeDescriptions": Map {
2565 - 4 => Object {
2566 - "context": null,
2567 - "didHooksChange": false,
2568 - "hooks": null,
2569 - "isFirstMount": false,
2570 - "props": Array [],
2571 - "state": null,
2572 - },
2573 - 5 => Object {
2574 - "context": null,
2575 - "didHooksChange": false,
2576 - "hooks": null,
2577 - "isFirstMount": false,
2578 - "props": Array [],
2579 - "state": null,
2580 - },
2581 - 12 => Object {
2582 - "context": null,
2583 - "didHooksChange": false,
2584 - "isFirstMount": true,
2585 - "props": null,
2586 - "state": null,
2587 - },
2588 - 2 => Object {
2589 - "context": null,
2590 - "didHooksChange": false,
2591 - "hooks": null,
2592 - "isFirstMount": false,
2593 - "props": Array [
2594 - "count",
2595 - ],
2596 - "state": null,
2597 - },
2598 - },
2599 - "duration": 13,
2600 - "effectDuration": null,
2601 - "fiberActualDurations": Map {
2602 - 4 => 0,
2603 - 5 => 1,
2604 - 12 => 2,
2605 - 2 => 13,
2606 - 1 => 13,
2607 - },
2608 - "fiberSelfDurations": Map {
2609 - 4 => 0,
2610 - 5 => 1,
2611 - 12 => 2,
2612 - 2 => 10,
2613 - 1 => 0,
2614 - },
2615 - "passiveEffectDuration": null,
2616 - "priorityLevel": "Immediate",
2617 - "timestamp": 13,
2618 - "updaters": Array [
2619 - Object {
2620 - "displayName": "render()",
2621 - "hocDisplayNames": null,
2622 - "id": 1,
2623 - "key": null,
2624 - "type": 11,
2625 - },
2626 - ],
2627 - },
2628 - Object {
2629 - "changeDescriptions": Map {
2630 - 4 => Object {
2631 - "context": null,
2632 - "didHooksChange": false,
2633 - "hooks": null,
2634 - "isFirstMount": false,
2635 - "props": Array [],
2636 - "state": null,
2637 - },
2638 - 2 => Object {
2639 - "context": null,
2640 - "didHooksChange": false,
2641 - "hooks": null,
2642 - "isFirstMount": false,
2643 - "props": Array [
2644 - "count",
2645 - ],
2646 - "state": null,
2647 - },
2648 - },
2649 - "duration": 10,
2650 - "effectDuration": 0,
2651 - "fiberActualDurations": Map {
2652 - 4 => 0,
2653 - 2 => 10,
2654 - 1 => 10,
2655 - },
2656 - "fiberSelfDurations": Map {
2657 - 4 => 0,
2658 - 2 => 10,
2659 - 1 => 0,
2660 - },
2661 - "passiveEffectDuration": 0,
2662 - "priorityLevel": "Immediate",
2663 - "timestamp": 34,
2664 - "updaters": Array [
2665 - Object {
2666 - "displayName": "render()",
2667 - "hocDisplayNames": null,
2668 - "id": 1,
2669 - "key": null,
2670 - "type": 11,
2671 - },
2672 - ],
2673 - },
2674 - Object {
2675 - "changeDescriptions": Map {
2676 - 2 => Object {
2677 - "context": null,
2678 - "didHooksChange": false,
2679 - "hooks": null,
2680 - "isFirstMount": false,
2681 - "props": Array [
2682 - "count",
2683 - ],
2684 - "state": null,
2685 - },
2686 - },
2687 - "duration": 10,
2688 - "effectDuration": 0,
2689 - "fiberActualDurations": Map {
2690 - 2 => 10,
2691 - 1 => 10,
2692 - },
2693 - "fiberSelfDurations": Map {
2694 - 2 => 10,
2695 - 1 => 0,
2696 - },
2697 - "passiveEffectDuration": 0,
2698 - "priorityLevel": "Immediate",
2699 - "timestamp": 44,
2700 - "updaters": Array [
2701 - Object {
2702 - "displayName": "render()",
2703 - "hocDisplayNames": null,
2704 - "id": 1,
2705 - "key": null,
2706 - "type": 11,
2707 - },
2708 - ],
2709 - },
2710 - ],
2711 - "displayName": "Parent",
2712 - "initialTreeBaseDurations": Map {
2713 - 1 => 12,
2714 - 2 => 12,
2715 - 4 => 0,
2716 - 5 => 1,
2717 - 6 => 1,
2718 - },
2719 - "operations": Array [
2720 - Array [
2721 - 1,
2722 - 1,
2723 - 8,
2724 - 5,
2725 - 67,
2726 - 104,
2727 - 105,
2728 - 108,
2729 - 100,
2730 - 1,
2731 - 50,
2732 - 1,
2733 - 12,
2734 - 5,
2735 - 2,
2736 - 2,
2737 - 1,
2738 - 2,
2739 - 4,
2740 - 12,
2741 - 2000,
2742 - 4,
2743 - 2,
2744 - 14000,
2745 - 3,
2746 - 2,
2747 - 4,
2748 - 4,
2749 - 5,
2750 - 12,
2751 - 6,
2752 - 4,
2753 - 1,
2754 - 14000,
2755 - ],
2756 - Array [
2757 - 1,
2758 - 1,
2759 - 0,
2760 - 2,
2761 - 2,
2762 - 12,
2763 - 5,
2764 - 4,
2765 - 2,
2766 - 11000,
2767 - 3,
2768 - 2,
2769 - 2,
2770 - 4,
2771 - 6,
2772 - 4,
2773 - 1,
2774 - 11000,
2775 - ],
2776 - Array [
2777 - 1,
2778 - 1,
2779 - 0,
2780 - 2,
2781 - 1,
2782 - 4,
2783 - ],
2784 - ],
2785 - "rootID": 1,
2786 - "snapshots": Map {
2787 - 1 => Object {
2788 - "children": Array [
2789 - 2,
2790 - ],
2791 - "displayName": null,
2792 - "hocDisplayNames": null,
2793 - "id": 1,
2794 - "key": null,
2795 - "type": 11,
2796 - },
2797 - 2 => Object {
2798 - "children": Array [
2799 - 4,
2800 - 5,
2801 - 6,
2802 - ],
2803 - "displayName": "Parent",
2804 - "hocDisplayNames": null,
2805 - "id": 2,
2806 - "key": null,
2807 - "type": 5,
2808 - },
2809 - 4 => Object {
2810 - "children": Array [],
2811 - "displayName": "Child",
2812 - "hocDisplayNames": null,
2813 - "id": 4,
2814 - "key": "0",
2815 - "type": 5,
2816 - },
2817 - 5 => Object {
2818 - "children": Array [],
2819 - "displayName": "Child",
2820 - "hocDisplayNames": null,
2821 - "id": 5,
2822 - "key": "1",
2823 - "type": 5,
2824 - },
2825 - 6 => Object {
2826 - "children": Array [],
2827 - "displayName": "Child",
2828 - "hocDisplayNames": Array [
2829 - "Memo",
2830 - ],
2831 - "id": 6,
2832 - "key": null,
2833 - "type": 8,
2834 - },
2835 - },
2836 -}
2837 -`;
2838 -
2839 -exports[`ProfilingCache should collect data for each root (including ones added or mounted after profiling started): Data for root Parent 2`] = `
2840 -Object {
2841 - "commitData": Array [
2842 - Object {
2843 - "changeDescriptions": Map {
2844 - 14 => Object {
2845 - "context": null,
2846 - "didHooksChange": false,
2847 - "isFirstMount": true,
2848 - "props": null,
2849 - "state": null,
2850 - },
2851 - 16 => Object {
2852 - "context": null,
2853 - "didHooksChange": false,
2854 - "isFirstMount": true,
2855 - "props": null,
2856 - "state": null,
2857 - },
2858 - 17 => Object {
2859 - "context": null,
2860 - "didHooksChange": false,
2861 - "isFirstMount": true,
2862 - "props": null,
2863 - "state": null,
2864 - },
2865 - },
2866 - "duration": 11,
2867 - "effectDuration": null,
2868 - "fiberActualDurations": Map {
2869 - 13 => 11,
2870 - 14 => 11,
2871 - 16 => 0,
2872 - 17 => 1,
2873 - },
2874 - "fiberSelfDurations": Map {
2875 - 13 => 0,
2876 - 14 => 10,
2877 - 16 => 0,
2878 - 17 => 1,
2879 - },
2880 - "passiveEffectDuration": null,
2881 - "priorityLevel": "Immediate",
2882 - "timestamp": 24,
2883 - "updaters": Array [
2884 - Object {
2885 - "displayName": "render()",
2886 - "hocDisplayNames": null,
2887 - "id": 13,
2888 - "key": null,
2889 - "type": 11,
2890 - },
2891 - ],
2892 - },
2893 - ],
2894 - "displayName": "Parent",
2895 - "initialTreeBaseDurations": Map {},
2896 - "operations": Array [
2897 - Array [
2898 - 1,
2899 - 13,
2900 - 15,
2901 - 6,
2902 - 80,
2903 - 97,
2904 - 114,
2905 - 101,
2906 - 110,
2907 - 116,
2908 - 5,
2909 - 67,
2910 - 104,
2911 - 105,
2912 - 108,
2913 - 100,
2914 - 1,
2915 - 48,
2916 - 1,
2917 - 13,
2918 - 11,
2919 - 0,
2920 - 3,
2921 - 1,
2922 - 1,
2923 - 4,
2924 - 13,
2925 - 11000,
2926 - 1,
2927 - 14,
2928 - 5,
2929 - 13,
2930 - 0,
2931 - 1,
2932 - 0,
2933 - 4,
2934 - 14,
2935 - 11000,
2936 - 1,
2937 - 16,
2938 - 5,
2939 - 14,
2940 - 14,
2941 - 2,
2942 - 3,
2943 - 4,
2944 - 16,
2945 - 0,
2946 - 1,
2947 - 17,
2948 - 8,
2949 - 14,
2950 - 14,
2951 - 2,
2952 - 0,
2953 - 4,
2954 - 17,
2955 - 1000,
2956 - ],
2957 - ],
2958 - "rootID": 13,
2959 - "snapshots": Map {},
2960 -}
2961 -`;
2962 -
2963 -exports[`ProfilingCache should collect data for each root (including ones added or mounted after profiling started): Data for root Parent 3`] = `
2964 -Object {
2965 - "commitData": Array [
2966 - Object {
2967 - "changeDescriptions": Map {},
2968 - "duration": 0,
2969 - "effectDuration": 0,
2970 - "fiberActualDurations": Map {},
2971 - "fiberSelfDurations": Map {},
2972 - "passiveEffectDuration": 0,
2973 - "priorityLevel": "Immediate",
2974 - "timestamp": 34,
2975 - "updaters": Array [
2976 - Object {
2977 - "displayName": "render()",
2978 - "hocDisplayNames": null,
2979 - "id": 7,
2980 - "key": null,
2981 - "type": 11,
2982 - },
2983 - ],
2984 - },
2985 - ],
2986 - "displayName": "Parent",
2987 - "initialTreeBaseDurations": Map {
2988 - 7 => 11,
2989 - 8 => 11,
2990 - 10 => 0,
2991 - 11 => 1,
2992 - },
2993 - "operations": Array [
2994 - Array [
2995 - 1,
2996 - 7,
2997 - 0,
2998 - 2,
2999 - 4,
3000 - 11,
3001 - 10,
3002 - 8,
3003 - 7,
3004 - ],
3005 - ],
3006 - "rootID": 7,
3007 - "snapshots": Map {
3008 - 7 => Object {
3009 - "children": Array [
3010 - 8,
3011 - ],
3012 - "displayName": null,
3013 - "hocDisplayNames": null,
3014 - "id": 7,
3015 - "key": null,
3016 - "type": 11,
3017 - },
3018 - 8 => Object {
3019 - "children": Array [
3020 - 10,
3021 - 11,
3022 - ],
3023 - "displayName": "Parent",
3024 - "hocDisplayNames": null,
3025 - "id": 8,
3026 - "key": null,
3027 - "type": 5,
3028 - },
3029 - 10 => Object {
3030 - "children": Array [],
3031 - "displayName": "Child",
3032 - "hocDisplayNames": null,
3033 - "id": 10,
3034 - "key": "0",
3035 - "type": 5,
3036 - },
3037 - 11 => Object {
3038 - "children": Array [],
3039 - "displayName": "Child",
3040 - "hocDisplayNames": Array [
3041 - "Memo",
3042 - ],
3043 - "id": 11,
3044 - "key": null,
3045 - "type": 8,
3046 - },
3047 - },
3048 -}
3049 -`;
3050 -
3051 -exports[`ProfilingCache should collect data for each root (including ones added or mounted after profiling started): imported data 1`] = `
3052 -Object {
3053 - "dataForRoots": Array [
3054 - Object {
3055 - "commitData": Array [
3056 - Object {
3057 - "changeDescriptions": Array [
3058 - Array [
3059 - 4,
3060 - Object {
3061 - "context": null,
3062 - "didHooksChange": false,
3063 - "hooks": null,
3064 - "isFirstMount": false,
3065 - "props": Array [],
3066 - "state": null,
3067 - },
3068 - ],
3069 - Array [
3070 - 5,
3071 - Object {
3072 - "context": null,
3073 - "didHooksChange": false,
3074 - "hooks": null,
3075 - "isFirstMount": false,
3076 - "props": Array [],
3077 - "state": null,
3078 - },
3079 - ],
3080 - Array [
3081 - 12,
3082 - Object {
3083 - "context": null,
3084 - "didHooksChange": false,
3085 - "isFirstMount": true,
3086 - "props": null,
3087 - "state": null,
3088 - },
3089 - ],
3090 - Array [
3091 - 2,
3092 - Object {
3093 - "context": null,
3094 - "didHooksChange": false,
3095 - "hooks": null,
3096 - "isFirstMount": false,
3097 - "props": Array [
3098 - "count",
3099 - ],
3100 - "state": null,
3101 - },
3102 - ],
3103 - ],
3104 - "duration": 13,
3105 - "effectDuration": null,
3106 - "fiberActualDurations": Array [
3107 - Array [
3108 - 4,
3109 - 0,
3110 - ],
3111 - Array [
3112 - 5,
3113 - 1,
3114 - ],
3115 - Array [
3116 - 12,
3117 - 2,
3118 - ],
3119 - Array [
3120 - 2,
3121 - 13,
3122 - ],
3123 - Array [
3124 - 1,
3125 - 13,
3126 - ],
3127 - ],
3128 - "fiberSelfDurations": Array [
3129 - Array [
3130 - 4,
3131 - 0,
3132 - ],
3133 - Array [
3134 - 5,
3135 - 1,
3136 - ],
3137 - Array [
3138 - 12,
3139 - 2,
3140 - ],
3141 - Array [
3142 - 2,
3143 - 10,
3144 - ],
3145 - Array [
3146 - 1,
3147 - 0,
3148 - ],
3149 - ],
3150 - "passiveEffectDuration": null,
3151 - "priorityLevel": "Immediate",
3152 - "timestamp": 13,
3153 - "updaters": Array [
3154 - Object {
3155 - "displayName": "render()",
3156 - "hocDisplayNames": null,
3157 - "id": 1,
3158 - "key": null,
3159 - "type": 11,
3160 - },
3161 - ],
3162 - },
3163 - Object {
3164 - "changeDescriptions": Array [
3165 - Array [
3166 - 4,
3167 - Object {
3168 - "context": null,
3169 - "didHooksChange": false,
3170 - "hooks": null,
3171 - "isFirstMount": false,
3172 - "props": Array [],
3173 - "state": null,
3174 - },
3175 - ],
3176 - Array [
3177 - 2,
3178 - Object {
3179 - "context": null,
3180 - "didHooksChange": false,
3181 - "hooks": null,
3182 - "isFirstMount": false,
3183 - "props": Array [
3184 - "count",
3185 - ],
3186 - "state": null,
3187 - },
3188 - ],
3189 - ],
3190 - "duration": 10,
3191 - "effectDuration": 0,
3192 - "fiberActualDurations": Array [
3193 - Array [
3194 - 4,
3195 - 0,
3196 - ],
3197 - Array [
3198 - 2,
3199 - 10,
3200 - ],
3201 - Array [
3202 - 1,
3203 - 10,
3204 - ],
3205 - ],
3206 - "fiberSelfDurations": Array [
3207 - Array [
3208 - 4,
3209 - 0,
3210 - ],
3211 - Array [
3212 - 2,
3213 - 10,
3214 - ],
3215 - Array [
3216 - 1,
3217 - 0,
3218 - ],
3219 - ],
3220 - "passiveEffectDuration": 0,
3221 - "priorityLevel": "Immediate",
3222 - "timestamp": 34,
3223 - "updaters": Array [
3224 - Object {
3225 - "displayName": "render()",
3226 - "hocDisplayNames": null,
3227 - "id": 1,
3228 - "key": null,
3229 - "type": 11,
3230 - },
3231 - ],
3232 - },
3233 - Object {
3234 - "changeDescriptions": Array [
3235 - Array [
3236 - 2,
3237 - Object {
3238 - "context": null,
3239 - "didHooksChange": false,
3240 - "hooks": null,
3241 - "isFirstMount": false,
3242 - "props": Array [
3243 - "count",
3244 - ],
3245 - "state": null,
3246 - },
3247 - ],
3248 - ],
3249 - "duration": 10,
3250 - "effectDuration": 0,
3251 - "fiberActualDurations": Array [
3252 - Array [
3253 - 2,
3254 - 10,
3255 - ],
3256 - Array [
3257 - 1,
3258 - 10,
3259 - ],
3260 - ],
3261 - "fiberSelfDurations": Array [
3262 - Array [
3263 - 2,
3264 - 10,
3265 - ],
3266 - Array [
3267 - 1,
3268 - 0,
3269 - ],
3270 - ],
3271 - "passiveEffectDuration": 0,
3272 - "priorityLevel": "Immediate",
3273 - "timestamp": 44,
3274 - "updaters": Array [
3275 - Object {
3276 - "displayName": "render()",
3277 - "hocDisplayNames": null,
3278 - "id": 1,
3279 - "key": null,
3280 - "type": 11,
3281 - },
3282 - ],
3283 - },
3284 - ],
3285 - "displayName": "Parent",
3286 - "initialTreeBaseDurations": Array [
3287 - Array [
3288 - 1,
3289 - 12,
3290 - ],
3291 - Array [
3292 - 2,
3293 - 12,
3294 - ],
3295 - Array [
3296 - 4,
3297 - 0,
3298 - ],
3299 - Array [
3300 - 5,
3301 - 1,
3302 - ],
3303 - Array [
3304 - 6,
3305 - 1,
3306 - ],
3307 - ],
3308 - "operations": Array [
3309 - Array [
3310 - 1,
3311 - 1,
3312 - 8,
3313 - 5,
3314 - 67,
3315 - 104,
3316 - 105,
3317 - 108,
3318 - 100,
3319 - 1,
3320 - 50,
3321 - 1,
3322 - 12,
3323 - 5,
3324 - 2,
3325 - 2,
3326 - 1,
3327 - 2,
3328 - 4,
3329 - 12,
3330 - 2000,
3331 - 4,
3332 - 2,
3333 - 14000,
3334 - 3,
3335 - 2,
3336 - 4,
3337 - 4,
3338 - 5,
3339 - 12,
3340 - 6,
3341 - 4,
3342 - 1,
3343 - 14000,
3344 - ],
3345 - Array [
3346 - 1,
3347 - 1,
3348 - 0,
3349 - 2,
3350 - 2,
3351 - 12,
3352 - 5,
3353 - 4,
3354 - 2,
3355 - 11000,
3356 - 3,
3357 - 2,
3358 - 2,
3359 - 4,
3360 - 6,
3361 - 4,
3362 - 1,
3363 - 11000,
3364 - ],
3365 - Array [
3366 - 1,
3367 - 1,
3368 - 0,
3369 - 2,
3370 - 1,
3371 - 4,
3372 - ],
3373 - ],
3374 - "rootID": 1,
3375 - "snapshots": Array [
3376 - Array [
3377 - 1,
3378 - Object {
3379 - "children": Array [
3380 - 2,
3381 - ],
3382 - "displayName": null,
3383 - "hocDisplayNames": null,
3384 - "id": 1,
3385 - "key": null,
3386 - "type": 11,
3387 - },
3388 - ],
3389 - Array [
3390 - 2,
3391 - Object {
3392 - "children": Array [
3393 - 4,
3394 - 5,
3395 - 6,
3396 - ],
3397 - "displayName": "Parent",
3398 - "hocDisplayNames": null,
3399 - "id": 2,
3400 - "key": null,
3401 - "type": 5,
3402 - },
3403 - ],
3404 - Array [
3405 - 4,
3406 - Object {
3407 - "children": Array [],
3408 - "displayName": "Child",
3409 - "hocDisplayNames": null,
3410 - "id": 4,
3411 - "key": "0",
3412 - "type": 5,
3413 - },
3414 - ],
3415 - Array [
3416 - 5,
3417 - Object {
3418 - "children": Array [],
3419 - "displayName": "Child",
3420 - "hocDisplayNames": null,
3421 - "id": 5,
3422 - "key": "1",
3423 - "type": 5,
3424 - },
3425 - ],
3426 - Array [
3427 - 6,
3428 - Object {
3429 - "children": Array [],
3430 - "displayName": "Child",
3431 - "hocDisplayNames": Array [
3432 - "Memo",
3433 - ],
3434 - "id": 6,
3435 - "key": null,
3436 - "type": 8,
3437 - },
3438 - ],
3439 - ],
3440 - },
3441 - Object {
3442 - "commitData": Array [
3443 - Object {
3444 - "changeDescriptions": Array [
3445 - Array [
3446 - 14,
3447 - Object {
3448 - "context": null,
3449 - "didHooksChange": false,
3450 - "isFirstMount": true,
3451 - "props": null,
3452 - "state": null,
3453 - },
3454 - ],
3455 - Array [
3456 - 16,
3457 - Object {
3458 - "context": null,
3459 - "didHooksChange": false,
3460 - "isFirstMount": true,
3461 - "props": null,
3462 - "state": null,
3463 - },
3464 - ],
3465 - Array [
3466 - 17,
3467 - Object {
3468 - "context": null,
3469 - "didHooksChange": false,
3470 - "isFirstMount": true,
3471 - "props": null,
3472 - "state": null,
3473 - },
3474 - ],
3475 - ],
3476 - "duration": 11,
3477 - "effectDuration": null,
3478 - "fiberActualDurations": Array [
3479 - Array [
3480 - 13,
3481 - 11,
3482 - ],
3483 - Array [
3484 - 14,
3485 - 11,
3486 - ],
3487 - Array [
3488 - 16,
3489 - 0,
3490 - ],
3491 - Array [
3492 - 17,
3493 - 1,
3494 - ],
3495 - ],
3496 - "fiberSelfDurations": Array [
3497 - Array [
3498 - 13,
3499 - 0,
3500 - ],
3501 - Array [
3502 - 14,
3503 - 10,
3504 - ],
3505 - Array [
3506 - 16,
3507 - 0,
3508 - ],
3509 - Array [
3510 - 17,
3511 - 1,
3512 - ],
3513 - ],
3514 - "passiveEffectDuration": null,
3515 - "priorityLevel": "Immediate",
3516 - "timestamp": 24,
3517 - "updaters": Array [
3518 - Object {
3519 - "displayName": "render()",
3520 - "hocDisplayNames": null,
3521 - "id": 13,
3522 - "key": null,
3523 - "type": 11,
3524 - },
3525 - ],
3526 - },
3527 - ],
3528 - "displayName": "Parent",
3529 - "initialTreeBaseDurations": Array [],
3530 - "operations": Array [
3531 - Array [
3532 - 1,
3533 - 13,
3534 - 15,
3535 - 6,
3536 - 80,
3537 - 97,
3538 - 114,
3539 - 101,
3540 - 110,
3541 - 116,
3542 - 5,
3543 - 67,
3544 - 104,
3545 - 105,
3546 - 108,
3547 - 100,
3548 - 1,
3549 - 48,
3550 - 1,
3551 - 13,
3552 - 11,
3553 - 0,
3554 - 3,
3555 - 1,
3556 - 1,
3557 - 4,
3558 - 13,
3559 - 11000,
3560 - 1,
3561 - 14,
3562 - 5,
3563 - 13,
3564 - 0,
3565 - 1,
3566 - 0,
3567 - 4,
3568 - 14,
3569 - 11000,
3570 - 1,
3571 - 16,
3572 - 5,
3573 - 14,
3574 - 14,
3575 - 2,
3576 - 3,
3577 - 4,
3578 - 16,
3579 - 0,
3580 - 1,
3581 - 17,
3582 - 8,
3583 - 14,
3584 - 14,
3585 - 2,
3586 - 0,
3587 - 4,
3588 - 17,
3589 - 1000,
3590 - ],
3591 - ],
3592 - "rootID": 13,
3593 - "snapshots": Array [],
3594 - },
3595 - Object {
3596 - "commitData": Array [
3597 - Object {
3598 - "changeDescriptions": Array [],
3599 - "duration": 0,
3600 - "effectDuration": 0,
3601 - "fiberActualDurations": Array [],
3602 - "fiberSelfDurations": Array [],
3603 - "passiveEffectDuration": 0,
3604 - "priorityLevel": "Immediate",
3605 - "timestamp": 34,
3606 - "updaters": Array [
3607 - Object {
3608 - "displayName": "render()",
3609 - "hocDisplayNames": null,
3610 - "id": 7,
3611 - "key": null,
3612 - "type": 11,
3613 - },
3614 - ],
3615 - },
3616 - ],
3617 - "displayName": "Parent",
3618 - "initialTreeBaseDurations": Array [
3619 - Array [
3620 - 7,
3621 - 11,
3622 - ],
3623 - Array [
3624 - 8,
3625 - 11,
3626 - ],
3627 - Array [
3628 - 10,
3629 - 0,
3630 - ],
3631 - Array [
3632 - 11,
3633 - 1,
3634 - ],
3635 - ],
3636 - "operations": Array [
3637 - Array [
3638 - 1,
3639 - 7,
3640 - 0,
3641 - 2,
3642 - 4,
3643 - 11,
3644 - 10,
3645 - 8,
3646 - 7,
3647 - ],
3648 - ],
3649 - "rootID": 7,
3650 - "snapshots": Array [
3651 - Array [
3652 - 7,
3653 - Object {
3654 - "children": Array [
3655 - 8,
3656 - ],
3657 - "displayName": null,
3658 - "hocDisplayNames": null,
3659 - "id": 7,
3660 - "key": null,
3661 - "type": 11,
3662 - },
3663 - ],
3664 - Array [
3665 - 8,
3666 - Object {
3667 - "children": Array [
3668 - 10,
3669 - 11,
3670 - ],
3671 - "displayName": "Parent",
3672 - "hocDisplayNames": null,
3673 - "id": 8,
3674 - "key": null,
3675 - "type": 5,
3676 - },
3677 - ],
3678 - Array [
3679 - 10,
3680 - Object {
3681 - "children": Array [],
3682 - "displayName": "Child",
3683 - "hocDisplayNames": null,
3684 - "id": 10,
3685 - "key": "0",
3686 - "type": 5,
3687 - },
3688 - ],
3689 - Array [
3690 - 11,
3691 - Object {
3692 - "children": Array [],
3693 - "displayName": "Child",
3694 - "hocDisplayNames": Array [
3695 - "Memo",
3696 - ],
3697 - "id": 11,
3698 - "key": null,
3699 - "type": 8,
3700 - },
3701 - ],
3702 - ],
3703 - },
3704 - ],
3705 - "timelineData": Array [
3706 - Object {
3707 - "batchUIDToMeasuresKeyValueArray": Array [
3708 - Array [
3709 - 1,
3710 - Array [
3711 - Object {
3712 - "batchUID": 1,
3713 - "depth": 0,
3714 - "duration": 13,
3715 - "lanes": "0b0000000000000000000000000000001",
3716 - "timestamp": 10,
3717 - "type": "render-idle",
3718 - },
3719 - Object {
3720 - "batchUID": 1,
3721 - "depth": 0,
3722 - "duration": 13,
3723 - "lanes": "0b0000000000000000000000000000001",
3724 - "timestamp": 10,
3725 - "type": "render",
3726 - },
3727 - Object {
3728 - "batchUID": 1,
3729 - "depth": 0,
3730 - "duration": 0,
3731 - "lanes": "0b0000000000000000000000000000001",
3732 - "timestamp": 23,
3733 - "type": "commit",
3734 - },
3735 - Object {
3736 - "batchUID": 1,
3737 - "depth": 1,
3738 - "duration": 0,
3739 - "lanes": "0b0000000000000000000000000000001",
3740 - "timestamp": 23,
3741 - "type": "layout-effects",
3742 - },
3743 - ],
3744 - ],
3745 - Array [
3746 - 2,
3747 - Array [
3748 - Object {
3749 - "batchUID": 2,
3750 - "depth": 0,
3751 - "duration": 11,
3752 - "lanes": "0b0000000000000000000000000000001",
3753 - "timestamp": 23,
3754 - "type": "render-idle",
3755 - },
3756 - Object {
3757 - "batchUID": 2,
3758 - "depth": 0,
3759 - "duration": 11,
3760 - "lanes": "0b0000000000000000000000000000001",
3761 - "timestamp": 23,
3762 - "type": "render",
3763 - },
3764 - Object {
3765 - "batchUID": 2,
3766 - "depth": 0,
3767 - "duration": 0,
3768 - "lanes": "0b0000000000000000000000000000001",
3769 - "timestamp": 34,
3770 - "type": "commit",
3771 - },
3772 - Object {
3773 - "batchUID": 2,
3774 - "depth": 1,
3775 - "duration": 0,
3776 - "lanes": "0b0000000000000000000000000000001",
3777 - "timestamp": 34,
3778 - "type": "layout-effects",
3779 - },
3780 - ],
3781 - ],
3782 - Array [
3783 - 3,
3784 - Array [
3785 - Object {
3786 - "batchUID": 3,
3787 - "depth": 0,
3788 - "duration": 10,
3789 - "lanes": "0b0000000000000000000000000000001",
3790 - "timestamp": 34,
3791 - "type": "render-idle",
3792 - },
3793 - Object {
3794 - "batchUID": 3,
3795 - "depth": 0,
3796 - "duration": 10,
3797 - "lanes": "0b0000000000000000000000000000001",
3798 - "timestamp": 34,
3799 - "type": "render",
3800 - },
3801 - Object {
3802 - "batchUID": 3,
3803 - "depth": 0,
3804 - "duration": 0,
3805 - "lanes": "0b0000000000000000000000000000001",
3806 - "timestamp": 44,
3807 - "type": "commit",
3808 - },
3809 - Object {
3810 - "batchUID": 3,
3811 - "depth": 1,
3812 - "duration": 0,
3813 - "lanes": "0b0000000000000000000000000000001",
3814 - "timestamp": 44,
3815 - "type": "layout-effects",
3816 - },
3817 - Object {
3818 - "batchUID": 3,
3819 - "depth": 0,
3820 - "duration": 0,
3821 - "lanes": "0b0000000000000000000000000000001",
3822 - "timestamp": 44,
3823 - "type": "passive-effects",
3824 - },
3825 - ],
3826 - ],
3827 - Array [
3828 - 4,
3829 - Array [
3830 - Object {
3831 - "batchUID": 4,
3832 - "depth": 0,
3833 - "duration": 0,
3834 - "lanes": "0b0000000000000000000000000000001",
3835 - "timestamp": 44,
3836 - "type": "render-idle",
3837 - },
3838 - Object {
3839 - "batchUID": 4,
3840 - "depth": 0,
3841 - "duration": 0,
3842 - "lanes": "0b0000000000000000000000000000001",
3843 - "timestamp": 44,
3844 - "type": "render",
3845 - },
3846 - Object {
3847 - "batchUID": 4,
3848 - "depth": 0,
3849 - "duration": 0,
3850 - "lanes": "0b0000000000000000000000000000001",
3851 - "timestamp": 44,
3852 - "type": "commit",
3853 - },
3854 - Object {
3855 - "batchUID": 4,
3856 - "depth": 1,
3857 - "duration": 0,
3858 - "lanes": "0b0000000000000000000000000000001",
3859 - "timestamp": 44,
3860 - "type": "layout-effects",
3861 - },
3862 - Object {
3863 - "batchUID": 4,
3864 - "depth": 0,
3865 - "duration": 0,
3866 - "lanes": "0b0000000000000000000000000000001",
3867 - "timestamp": 44,
3868 - "type": "passive-effects",
3869 - },
3870 - ],
3871 - ],
3872 - Array [
3873 - 5,
3874 - Array [
3875 - Object {
3876 - "batchUID": 5,
3877 - "depth": 0,
3878 - "duration": 10,
3879 - "lanes": "0b0000000000000000000000000000001",
3880 - "timestamp": 44,
3881 - "type": "render-idle",
3882 - },
3883 - Object {
3884 - "batchUID": 5,
3885 - "depth": 0,
3886 - "duration": 10,
3887 - "lanes": "0b0000000000000000000000000000001",
3888 - "timestamp": 44,
3889 - "type": "render",
3890 - },
3891 - Object {
3892 - "batchUID": 5,
3893 - "depth": 0,
3894 - "duration": 0,
3895 - "lanes": "0b0000000000000000000000000000001",
3896 - "timestamp": 54,
3897 - "type": "commit",
3898 - },
3899 - Object {
3900 - "batchUID": 5,
3901 - "depth": 1,
3902 - "duration": 0,
3903 - "lanes": "0b0000000000000000000000000000001",
3904 - "timestamp": 54,
3905 - "type": "layout-effects",
3906 - },
3907 - Object {
3908 - "batchUID": 5,
3909 - "depth": 0,
3910 - "duration": 0,
3911 - "lanes": "0b0000000000000000000000000000001",
3912 - "timestamp": 54,
3913 - "type": "passive-effects",
3914 - },
3915 - ],
3916 - ],
3917 - ],
3918 - "componentMeasures": Array [
3919 - Object {
3920 - "componentName": "Parent",
3921 - "duration": 10,
3922 - "timestamp": 10,
3923 - "type": "render",
3924 - "warning": null,
3925 - },
3926 - Object {
3927 - "componentName": "Child",
3928 - "duration": 0,
3929 - "timestamp": 20,
3930 - "type": "render",
3931 - "warning": null,
3932 - },
3933 - Object {
3934 - "componentName": "Child",
3935 - "duration": 1,
3936 - "timestamp": 20,
3937 - "type": "render",
3938 - "warning": null,
3939 - },
3940 - Object {
3941 - "componentName": "Child",
3942 - "duration": 2,
3943 - "timestamp": 21,
3944 - "type": "render",
3945 - "warning": null,
3946 - },
3947 - Object {
3948 - "componentName": "Parent",
3949 - "duration": 10,
3950 - "timestamp": 23,
3951 - "type": "render",
3952 - "warning": null,
3953 - },
3954 - Object {
3955 - "componentName": "Child",
3956 - "duration": 0,
3957 - "timestamp": 33,
3958 - "type": "render",
3959 - "warning": null,
3960 - },
3961 - Object {
3962 - "componentName": "Child",
3963 - "duration": 1,
3964 - "timestamp": 33,
3965 - "type": "render",
3966 - "warning": null,
3967 - },
3968 - Object {
3969 - "componentName": "Parent",
3970 - "duration": 10,
3971 - "timestamp": 34,
3972 - "type": "render",
3973 - "warning": null,
3974 - },
3975 - Object {
3976 - "componentName": "Child",
3977 - "duration": 0,
3978 - "timestamp": 44,
3979 - "type": "render",
3980 - "warning": null,
3981 - },
3982 - Object {
3983 - "componentName": "Parent",
3984 - "duration": 10,
3985 - "timestamp": 44,
3986 - "type": "render",
3987 - "warning": null,
3988 - },
3989 - ],
3990 - "duration": 64,
3991 - "flamechart": Array [],
3992 - "internalModuleSourceToRanges": Array [],
3993 - "laneToLabelKeyValueArray": Array [
3994 - Array [
3995 - 1,
3996 - "Sync",
3997 - ],
3998 - Array [
3999 - 2,
4000 - "InputContinuousHydration",
4001 - ],
4002 - Array [
4003 - 4,
4004 - "InputContinuous",
4005 - ],
4006 - Array [
4007 - 8,
4008 - "DefaultHydration",
4009 - ],
4010 - Array [
4011 - 16,
4012 - "Default",
4013 - ],
4014 - Array [
4015 - 32,
4016 - "TransitionHydration",
4017 - ],
4018 - Array [
4019 - 64,
4020 - "Transition",
4021 - ],
4022 - Array [
4023 - 128,
4024 - "Transition",
4025 - ],
4026 - Array [
4027 - 256,
4028 - "Transition",
4029 - ],
4030 - Array [
4031 - 512,
4032 - "Transition",
4033 - ],
4034 - Array [
4035 - 1024,
4036 - "Transition",
4037 - ],
4038 - Array [
4039 - 2048,
4040 - "Transition",
4041 - ],
4042 - Array [
4043 - 4096,
4044 - "Transition",
4045 - ],
4046 - Array [
4047 - 8192,
4048 - "Transition",
4049 - ],
4050 - Array [
4051 - 16384,
4052 - "Transition",
4053 - ],
4054 - Array [
4055 - 32768,
4056 - "Transition",
4057 - ],
4058 - Array [
4059 - 65536,
4060 - "Transition",
4061 - ],
4062 - Array [
4063 - 131072,
4064 - "Transition",
4065 - ],
4066 - Array [
4067 - 262144,
4068 - "Transition",
4069 - ],
4070 - Array [
4071 - 524288,
4072 - "Transition",
4073 - ],
4074 - Array [
4075 - 1048576,
4076 - "Transition",
4077 - ],
4078 - Array [
4079 - 2097152,
4080 - "Transition",
4081 - ],
4082 - Array [
4083 - 4194304,
4084 - "Retry",
4085 - ],
4086 - Array [
4087 - 8388608,
4088 - "Retry",
4089 - ],
4090 - Array [
4091 - 16777216,
4092 - "Retry",
4093 - ],
4094 - Array [
4095 - 33554432,
4096 - "Retry",
4097 - ],
4098 - Array [
4099 - 67108864,
4100 - "Retry",
4101 - ],
4102 - Array [
4103 - 134217728,
4104 - "SelectiveHydration",
4105 - ],
4106 - Array [
4107 - 268435456,
4108 - "IdleHydration",
4109 - ],
4110 - Array [
4111 - 536870912,
4112 - "Idle",
4113 - ],
4114 - Array [
4115 - 1073741824,
4116 - "Offscreen",
4117 - ],
4118 - ],
4119 - "laneToReactMeasureKeyValueArray": Array [
4120 - Array [
4121 - 1,
4122 - Array [
4123 - Object {
4124 - "batchUID": 1,
4125 - "depth": 0,
4126 - "duration": 13,
4127 - "lanes": "0b0000000000000000000000000000001",
4128 - "timestamp": 10,
4129 - "type": "render-idle",
4130 - },
4131 - Object {
4132 - "batchUID": 1,
4133 - "depth": 0,
4134 - "duration": 13,
4135 - "lanes": "0b0000000000000000000000000000001",
4136 - "timestamp": 10,
4137 - "type": "render",
4138 - },
4139 - Object {
4140 - "batchUID": 1,
4141 - "depth": 0,
4142 - "duration": 0,
4143 - "lanes": "0b0000000000000000000000000000001",
4144 - "timestamp": 23,
4145 - "type": "commit",
4146 - },
4147 - Object {
4148 - "batchUID": 1,
4149 - "depth": 1,
4150 - "duration": 0,
4151 - "lanes": "0b0000000000000000000000000000001",
4152 - "timestamp": 23,
4153 - "type": "layout-effects",
4154 - },
4155 - Object {
4156 - "batchUID": 2,
4157 - "depth": 0,
4158 - "duration": 11,
4159 - "lanes": "0b0000000000000000000000000000001",
4160 - "timestamp": 23,
4161 - "type": "render-idle",
4162 - },
4163 - Object {
4164 - "batchUID": 2,
4165 - "depth": 0,
4166 - "duration": 11,
4167 - "lanes": "0b0000000000000000000000000000001",
4168 - "timestamp": 23,
4169 - "type": "render",
4170 - },
4171 - Object {
4172 - "batchUID": 2,
4173 - "depth": 0,
4174 - "duration": 0,
4175 - "lanes": "0b0000000000000000000000000000001",
4176 - "timestamp": 34,
4177 - "type": "commit",
4178 - },
4179 - Object {
4180 - "batchUID": 2,
4181 - "depth": 1,
4182 - "duration": 0,
4183 - "lanes": "0b0000000000000000000000000000001",
4184 - "timestamp": 34,
4185 - "type": "layout-effects",
4186 - },
4187 - Object {
4188 - "batchUID": 3,
4189 - "depth": 0,
4190 - "duration": 10,
4191 - "lanes": "0b0000000000000000000000000000001",
4192 - "timestamp": 34,
4193 - "type": "render-idle",
4194 - },
4195 - Object {
4196 - "batchUID": 3,
4197 - "depth": 0,
4198 - "duration": 10,
4199 - "lanes": "0b0000000000000000000000000000001",
4200 - "timestamp": 34,
4201 - "type": "render",
4202 - },
4203 - Object {
4204 - "batchUID": 3,
4205 - "depth": 0,
4206 - "duration": 0,
4207 - "lanes": "0b0000000000000000000000000000001",
4208 - "timestamp": 44,
4209 - "type": "commit",
4210 - },
4211 - Object {
4212 - "batchUID": 3,
4213 - "depth": 1,
4214 - "duration": 0,
4215 - "lanes": "0b0000000000000000000000000000001",
4216 - "timestamp": 44,
4217 - "type": "layout-effects",
4218 - },
4219 - Object {
4220 - "batchUID": 3,
4221 - "depth": 0,
4222 - "duration": 0,
4223 - "lanes": "0b0000000000000000000000000000001",
4224 - "timestamp": 44,
4225 - "type": "passive-effects",
4226 - },
4227 - Object {
4228 - "batchUID": 4,
4229 - "depth": 0,
4230 - "duration": 0,
4231 - "lanes": "0b0000000000000000000000000000001",
4232 - "timestamp": 44,
4233 - "type": "render-idle",
4234 - },
4235 - Object {
4236 - "batchUID": 4,
4237 - "depth": 0,
4238 - "duration": 0,
4239 - "lanes": "0b0000000000000000000000000000001",
4240 - "timestamp": 44,
4241 - "type": "render",
4242 - },
4243 - Object {
4244 - "batchUID": 4,
4245 - "depth": 0,
4246 - "duration": 0,
4247 - "lanes": "0b0000000000000000000000000000001",
4248 - "timestamp": 44,
4249 - "type": "commit",
4250 - },
4251 - Object {
4252 - "batchUID": 4,
4253 - "depth": 1,
4254 - "duration": 0,
4255 - "lanes": "0b0000000000000000000000000000001",
4256 - "timestamp": 44,
4257 - "type": "layout-effects",
4258 - },
4259 - Object {
4260 - "batchUID": 4,
4261 - "depth": 0,
4262 - "duration": 0,
4263 - "lanes": "0b0000000000000000000000000000001",
4264 - "timestamp": 44,
4265 - "type": "passive-effects",
4266 - },
4267 - Object {
4268 - "batchUID": 5,
4269 - "depth": 0,
4270 - "duration": 10,
4271 - "lanes": "0b0000000000000000000000000000001",
4272 - "timestamp": 44,
4273 - "type": "render-idle",
4274 - },
4275 - Object {
4276 - "batchUID": 5,
4277 - "depth": 0,
4278 - "duration": 10,
4279 - "lanes": "0b0000000000000000000000000000001",
4280 - "timestamp": 44,
4281 - "type": "render",
4282 - },
4283 - Object {
4284 - "batchUID": 5,
4285 - "depth": 0,
4286 - "duration": 0,
4287 - "lanes": "0b0000000000000000000000000000001",
4288 - "timestamp": 54,
4289 - "type": "commit",
4290 - },
4291 - Object {
4292 - "batchUID": 5,
4293 - "depth": 1,
4294 - "duration": 0,
4295 - "lanes": "0b0000000000000000000000000000001",
4296 - "timestamp": 54,
4297 - "type": "layout-effects",
4298 - },
4299 - Object {
4300 - "batchUID": 5,
4301 - "depth": 0,
4302 - "duration": 0,
4303 - "lanes": "0b0000000000000000000000000000001",
4304 - "timestamp": 54,
4305 - "type": "passive-effects",
4306 - },
4307 - ],
4308 - ],
4309 - Array [
4310 - 2,
4311 - Array [],
4312 - ],
4313 - Array [
4314 - 4,
4315 - Array [],
4316 - ],
4317 - Array [
4318 - 8,
4319 - Array [],
4320 - ],
4321 - Array [
4322 - 16,
4323 - Array [],
4324 - ],
4325 - Array [
4326 - 32,
4327 - Array [],
4328 - ],
4329 - Array [
4330 - 64,
4331 - Array [],
4332 - ],
4333 - Array [
4334 - 128,
4335 - Array [],
4336 - ],
4337 - Array [
4338 - 256,
4339 - Array [],
4340 - ],
4341 - Array [
4342 - 512,
4343 - Array [],
4344 - ],
4345 - Array [
4346 - 1024,
4347 - Array [],
4348 - ],
4349 - Array [
4350 - 2048,
4351 - Array [],
4352 - ],
4353 - Array [
4354 - 4096,
4355 - Array [],
4356 - ],
4357 - Array [
4358 - 8192,
4359 - Array [],
4360 - ],
4361 - Array [
4362 - 16384,
4363 - Array [],
4364 - ],
4365 - Array [
4366 - 32768,
4367 - Array [],
4368 - ],
4369 - Array [
4370 - 65536,
4371 - Array [],
4372 - ],
4373 - Array [
4374 - 131072,
4375 - Array [],
4376 - ],
4377 - Array [
4378 - 262144,
4379 - Array [],
4380 - ],
4381 - Array [
4382 - 524288,
4383 - Array [],
4384 - ],
4385 - Array [
4386 - 1048576,
4387 - Array [],
4388 - ],
4389 - Array [
4390 - 2097152,
4391 - Array [],
4392 - ],
4393 - Array [
4394 - 4194304,
4395 - Array [],
4396 - ],
4397 - Array [
4398 - 8388608,
4399 - Array [],
4400 - ],
4401 - Array [
4402 - 16777216,
4403 - Array [],
4404 - ],
4405 - Array [
4406 - 33554432,
4407 - Array [],
4408 - ],
4409 - Array [
4410 - 67108864,
4411 - Array [],
4412 - ],
4413 - Array [
4414 - 134217728,
4415 - Array [],
4416 - ],
4417 - Array [
4418 - 268435456,
4419 - Array [],
4420 - ],
4421 - Array [
4422 - 536870912,
4423 - Array [],
4424 - ],
4425 - Array [
4426 - 1073741824,
4427 - Array [],
4428 - ],
4429 - ],
4430 - "nativeEvents": Array [],
4431 - "networkMeasures": Array [],
4432 - "otherUserTimingMarks": Array [],
4433 - "reactVersion": "<filtered-version>",
4434 - "schedulingEvents": Array [
4435 - Object {
4436 - "lanes": "0b0000000000000000000000000000001",
4437 - "timestamp": 10,
4438 - "type": "schedule-render",
4439 - "warning": null,
4440 - },
4441 - Object {
4442 - "lanes": "0b0000000000000000000000000000001",
4443 - "timestamp": 23,
4444 - "type": "schedule-render",
4445 - "warning": null,
4446 - },
4447 - Object {
4448 - "lanes": "0b0000000000000000000000000000001",
4449 - "timestamp": 34,
4450 - "type": "schedule-render",
4451 - "warning": null,
4452 - },
4453 - Object {
4454 - "lanes": "0b0000000000000000000000000000001",
4455 - "timestamp": 44,
4456 - "type": "schedule-render",
4457 - "warning": null,
4458 - },
4459 - Object {
4460 - "lanes": "0b0000000000000000000000000000001",
4461 - "timestamp": 44,
4462 - "type": "schedule-render",
4463 - "warning": null,
4464 - },
4465 - ],
4466 - "snapshotHeight": 0,
4467 - "snapshots": Array [],
4468 - "startTime": 13,
4469 - "suspenseEvents": Array [],
4470 - "thrownErrors": Array [],
4471 - },
4472 - ],
4473 - "version": 5,
4474 -}
4475 -`;
4476 -
4477 -exports[`ProfilingCache should handle unexpectedly shallow suspense trees: Empty Suspense node 1`] = `
4478 -Object {
4479 - "commitData": Array [
4480 - Object {
4481 - "changeDescriptions": Map {},
4482 - "duration": 0,
4483 - "effectDuration": null,
4484 - "fiberActualDurations": Map {
4485 - 1 => 0,
4486 - 2 => 0,
4487 - },
4488 - "fiberSelfDurations": Map {
4489 - 1 => 0,
4490 - 2 => 0,
4491 - },
4492 - "passiveEffectDuration": null,
4493 - "priorityLevel": "Immediate",
4494 - "timestamp": 0,
4495 - "updaters": Array [
4496 - Object {
4497 - "displayName": "render()",
4498 - "hocDisplayNames": null,
4499 - "id": 1,
4500 - "key": null,
4501 - "type": 11,
4502 - },
4503 - ],
4504 - },
4505 - ],
4506 - "displayName": "Suspense",
4507 - "initialTreeBaseDurations": Map {},
4508 - "operations": Array [
4509 - Array [
4510 - 1,
4511 - 1,
4512 - 9,
4513 - 8,
4514 - 83,
4515 - 117,
4516 - 115,
4517 - 112,
4518 - 101,
4519 - 110,
4520 - 115,
4521 - 101,
4522 - 1,
4523 - 1,
4524 - 11,
4525 - 0,
4526 - 3,
4527 - 1,
4528 - 1,
4529 - 1,
4530 - 2,
4531 - 12,
4532 - 1,
4533 - 0,
4534 - 1,
4535 - 0,
4536 - 4,
4537 - 2,
4538 - 0,
4539 - ],
4540 - ],
4541 - "rootID": 1,
4542 - "snapshots": Map {},
4543 -}
4544 -`;
4545 -
4546 -exports[`ProfilingCache should properly detect changed hooks: imported data 1`] = `
4547 -Object {
4548 - "dataForRoots": Array [
4549 - Object {
4550 - "commitData": Array [
4551 - Object {
4552 - "changeDescriptions": Array [
4553 - Array [
4554 - 3,
4555 - Object {
4556 - "context": null,
4557 - "didHooksChange": false,
4558 - "isFirstMount": true,
4559 - "props": null,
4560 - "state": null,
4561 - },
4562 - ],
4563 - ],
4564 - "duration": 0,
4565 - "effectDuration": 0,
4566 - "fiberActualDurations": Array [
4567 - Array [
4568 - 1,
4569 - 0,
4570 - ],
4571 - Array [
4572 - 2,
4573 - 0,
4574 - ],
4575 - Array [
4576 - 3,
4577 - 0,
4578 - ],
4579 - ],
4580 - "fiberSelfDurations": Array [
4581 - Array [
4582 - 1,
4583 - 0,
4584 - ],
4585 - Array [
4586 - 2,
4587 - 0,
4588 - ],
4589 - Array [
4590 - 3,
4591 - 0,
4592 - ],
4593 - ],
4594 - "passiveEffectDuration": 0,
4595 - "priorityLevel": "Immediate",
4596 - "timestamp": 0,
4597 - "updaters": Array [
4598 - Object {
4599 - "displayName": "render()",
4600 - "hocDisplayNames": null,
4601 - "id": 1,
4602 - "key": null,
4603 - "type": 11,
4604 - },
4605 - ],
4606 - },
4607 - Object {
4608 - "changeDescriptions": Array [
4609 - Array [
4610 - 3,
4611 - Object {
4612 - "context": false,
4613 - "didHooksChange": false,
4614 - "hooks": Array [],
4615 - "isFirstMount": false,
4616 - "props": Array [
4617 - "count",
4618 - ],
4619 - "state": null,
4620 - },
4621 - ],
4622 - ],
4623 - "duration": 0,
4624 - "effectDuration": 0,
4625 - "fiberActualDurations": Array [
4626 - Array [
4627 - 3,
4628 - 0,
4629 - ],
4630 - Array [
4631 - 2,
4632 - 0,
4633 - ],
4634 - Array [
4635 - 1,
4636 - 0,
4637 - ],
4638 - ],
4639 - "fiberSelfDurations": Array [
4640 - Array [
4641 - 3,
4642 - 0,
4643 - ],
4644 - Array [
4645 - 2,
4646 - 0,
4647 - ],
4648 - Array [
4649 - 1,
4650 - 0,
4651 - ],
4652 - ],
4653 - "passiveEffectDuration": 0,
4654 - "priorityLevel": "Immediate",
4655 - "timestamp": 0,
4656 - "updaters": Array [
4657 - Object {
4658 - "displayName": "render()",
4659 - "hocDisplayNames": null,
4660 - "id": 1,
4661 - "key": null,
4662 - "type": 11,
4663 - },
4664 - ],
4665 - },
4666 - Object {
4667 - "changeDescriptions": Array [
4668 - Array [
4669 - 3,
4670 - Object {
4671 - "context": false,
4672 - "didHooksChange": true,
4673 - "hooks": Array [
4674 - 1,
4675 - ],
4676 - "isFirstMount": false,
4677 - "props": Array [],
4678 - "state": null,
4679 - },
4680 - ],
4681 - ],
4682 - "duration": 0,
4683 - "effectDuration": 0,
4684 - "fiberActualDurations": Array [
4685 - Array [
4686 - 3,
4687 - 0,
4688 - ],
4689 - ],
4690 - "fiberSelfDurations": Array [
4691 - Array [
4692 - 3,
4693 - 0,
4694 - ],
4695 - ],
4696 - "passiveEffectDuration": 0,
4697 - "priorityLevel": "Immediate",
4698 - "timestamp": 0,
4699 - "updaters": Array [
4700 - Object {
4701 - "displayName": "Component",
4702 - "hocDisplayNames": null,
4703 - "id": 3,
4704 - "key": null,
4705 - "type": 5,
4706 - },
4707 - ],
4708 - },
4709 - Object {
4710 - "changeDescriptions": Array [
4711 - Array [
4712 - 3,
4713 - Object {
4714 - "context": false,
4715 - "didHooksChange": true,
4716 - "hooks": Array [
4717 - 0,
4718 - ],
4719 - "isFirstMount": false,
4720 - "props": Array [],
4721 - "state": null,
4722 - },
4723 - ],
4724 - ],
4725 - "duration": 0,
4726 - "effectDuration": 0,
4727 - "fiberActualDurations": Array [
4728 - Array [
4729 - 3,
4730 - 0,
4731 - ],
4732 - ],
4733 - "fiberSelfDurations": Array [
4734 - Array [
4735 - 3,
4736 - 0,
4737 - ],
4738 - ],
4739 - "passiveEffectDuration": 0,
4740 - "priorityLevel": "Immediate",
4741 - "timestamp": 0,
4742 - "updaters": Array [
4743 - Object {
4744 - "displayName": "Component",
4745 - "hocDisplayNames": null,
4746 - "id": 3,
4747 - "key": null,
4748 - "type": 5,
4749 - },
4750 - ],
4751 - },
4752 - Object {
4753 - "changeDescriptions": Array [
4754 - Array [
4755 - 3,
4756 - Object {
4757 - "context": true,
4758 - "didHooksChange": false,
4759 - "hooks": Array [],
4760 - "isFirstMount": false,
4761 - "props": Array [],
4762 - "state": null,
4763 - },
4764 - ],
4765 - ],
4766 - "duration": 0,
4767 - "effectDuration": 0,
4768 - "fiberActualDurations": Array [
4769 - Array [
4770 - 3,
4771 - 0,
4772 - ],
4773 - Array [
4774 - 2,
4775 - 0,
4776 - ],
4777 - Array [
4778 - 1,
4779 - 0,
4780 - ],
4781 - ],
4782 - "fiberSelfDurations": Array [
4783 - Array [
4784 - 3,
4785 - 0,
4786 - ],
4787 - Array [
4788 - 2,
4789 - 0,
4790 - ],
4791 - Array [
4792 - 1,
4793 - 0,
4794 - ],
4795 - ],
4796 - "passiveEffectDuration": 0,
4797 - "priorityLevel": "Immediate",
4798 - "timestamp": 0,
4799 - "updaters": Array [
4800 - Object {
4801 - "displayName": "render()",
4802 - "hocDisplayNames": null,
4803 - "id": 1,
4804 - "key": null,
4805 - "type": 11,
4806 - },
4807 - ],
4808 - },
4809 - Object {
4810 - "changeDescriptions": Array [
4811 - Array [
4812 - 3,
4813 - Object {
4814 - "context": false,
4815 - "didHooksChange": true,
4816 - "hooks": Array [
4817 - 2,
4818 - ],
4819 - "isFirstMount": false,
4820 - "props": Array [],
4821 - "state": null,
4822 - },
4823 - ],
4824 - ],
4825 - "duration": 0,
4826 - "effectDuration": 0,
4827 - "fiberActualDurations": Array [
4828 - Array [
4829 - 3,
4830 - 0,
4831 - ],
4832 - ],
4833 - "fiberSelfDurations": Array [
4834 - Array [
4835 - 3,
4836 - 0,
4837 - ],
4838 - ],
4839 - "passiveEffectDuration": 0,
4840 - "priorityLevel": "Immediate",
4841 - "timestamp": 0,
4842 - "updaters": Array [
4843 - Object {
4844 - "displayName": "Component",
4845 - "hocDisplayNames": null,
4846 - "id": 3,
4847 - "key": null,
4848 - "type": 5,
4849 - },
4850 - ],
4851 - },
4852 - ],
4853 - "displayName": "Component",
4854 - "initialTreeBaseDurations": Array [],
4855 - "operations": Array [
4856 - Array [
4857 - 1,
4858 - 1,
4859 - 27,
4860 - 16,
4861 - 67,
4862 - 111,
4863 - 110,
4864 - 116,
4865 - 101,
4866 - 120,
4867 - 116,
4868 - 46,
4869 - 80,
4870 - 114,
4871 - 111,
4872 - 118,
4873 - 105,
4874 - 100,
4875 - 101,
4876 - 114,
4877 - 9,
4878 - 67,
4879 - 111,
4880 - 109,
4881 - 112,
4882 - 111,
4883 - 110,
4884 - 101,
4885 - 110,
4886 - 116,
4887 - 1,
4888 - 1,
4889 - 11,
4890 - 0,
4891 - 3,
4892 - 1,
4893 - 1,
4894 - 1,
4895 - 2,
4896 - 2,
4897 - 1,
4898 - 0,
4899 - 1,
4900 - 0,
4901 - 4,
4902 - 2,
4903 - 0,
4904 - 1,
4905 - 3,
4906 - 5,
4907 - 2,
4908 - 0,
4909 - 2,
4910 - 0,
4911 - 4,
4912 - 3,
4913 - 0,
4914 - ],
4915 - Array [
4916 - 1,
4917 - 1,
4918 - 0,
4919 - ],
4920 - Array [
4921 - 1,
4922 - 1,
4923 - 0,
4924 - ],
4925 - Array [
4926 - 1,
4927 - 1,
4928 - 0,
4929 - ],
4930 - Array [
4931 - 1,
4932 - 1,
4933 - 0,
4934 - ],
4935 - Array [
4936 - 1,
4937 - 1,
4938 - 0,
4939 - ],
4940 - ],
4941 - "rootID": 1,
4942 - "snapshots": Array [],
4943 - },
4944 - ],
4945 - "timelineData": Array [
4946 - Object {
4947 - "batchUIDToMeasuresKeyValueArray": Array [
4948 - Array [
4949 - 1,
4950 - Array [
4951 - Object {
4952 - "batchUID": 1,
4953 - "depth": 0,
4954 - "duration": 0,
4955 - "lanes": "0b0000000000000000000000000000001",
4956 - "timestamp": 10,
4957 - "type": "render-idle",
4958 - },
4959 - Object {
4960 - "batchUID": 1,
4961 - "depth": 0,
4962 - "duration": 0,
4963 - "lanes": "0b0000000000000000000000000000001",
4964 - "timestamp": 10,
4965 - "type": "render",
4966 - },
4967 - Object {
4968 - "batchUID": 1,
4969 - "depth": 0,
4970 - "duration": 0,
4971 - "lanes": "0b0000000000000000000000000000001",
4972 - "timestamp": 10,
4973 - "type": "commit",
4974 - },
4975 - Object {
4976 - "batchUID": 1,
4977 - "depth": 1,
4978 - "duration": 0,
4979 - "lanes": "0b0000000000000000000000000000001",
4980 - "timestamp": 10,
4981 - "type": "layout-effects",
4982 - },
4983 - Object {
4984 - "batchUID": 1,
4985 - "depth": 0,
4986 - "duration": 0,
4987 - "lanes": "0b0000000000000000000000000000001",
4988 - "timestamp": 10,
4989 - "type": "passive-effects",
4990 - },
4991 - ],
4992 - ],
4993 - Array [
4994 - 2,
4995 - Array [
4996 - Object {
4997 - "batchUID": 2,
4998 - "depth": 0,
4999 - "duration": 0,

This file is too large to show in full.

packages/react-devtools-shared/src/__tests__/__snapshots__/profilingCharts-test.js.snap deleted
-430
@@ -1,430 +0,0 @@
1 -// Jest Snapshot v1, https://goo.gl/fbAQLP
2 -
3 -exports[`profiling charts flamegraph chart should contain valid data: 0: CommitTree 1`] = `
4 -Object {
5 - "nodes": Map {
6 - 1 => Object {
7 - "children": Array [
8 - 2,
9 - ],
10 - "displayName": null,
11 - "hocDisplayNames": null,
12 - "id": 1,
13 - "key": null,
14 - "parentID": 0,
15 - "treeBaseDuration": 15,
16 - "type": 11,
17 - },
18 - 2 => Object {
19 - "children": Array [
20 - 3,
21 - 4,
22 - 5,
23 - ],
24 - "displayName": "Parent",
25 - "hocDisplayNames": null,
26 - "id": 2,
27 - "key": null,
28 - "parentID": 1,
29 - "treeBaseDuration": 15,
30 - "type": 5,
31 - },
32 - 3 => Object {
33 - "children": Array [],
34 - "displayName": "Child",
35 - "hocDisplayNames": null,
36 - "id": 3,
37 - "key": "first",
38 - "parentID": 2,
39 - "treeBaseDuration": 3,
40 - "type": 8,
41 - },
42 - 4 => Object {
43 - "children": Array [],
44 - "displayName": "Child",
45 - "hocDisplayNames": null,
46 - "id": 4,
47 - "key": "second",
48 - "parentID": 2,
49 - "treeBaseDuration": 2,
50 - "type": 8,
51 - },
52 - 5 => Object {
53 - "children": Array [],
54 - "displayName": "Child",
55 - "hocDisplayNames": null,
56 - "id": 5,
57 - "key": "third",
58 - "parentID": 2,
59 - "treeBaseDuration": 0,
60 - "type": 8,
61 - },
62 - },
63 - "rootID": 1,
64 -}
65 -`;
66 -
67 -exports[`profiling charts flamegraph chart should contain valid data: 0: FlamegraphChartData 1`] = `
68 -Object {
69 - "baseDuration": 15,
70 - "depth": 2,
71 - "idToDepthMap": Map {
72 - 2 => 1,
73 - 5 => 2,
74 - 4 => 2,
75 - 3 => 2,
76 - },
77 - "maxSelfDuration": 10,
78 - "renderPathNodes": Set {
79 - 1,
80 - 2,
81 - },
82 - "rows": Array [
83 - Array [
84 - Object {
85 - "actualDuration": 15,
86 - "didRender": true,
87 - "id": 2,
88 - "label": "Parent (10ms of 15ms)",
89 - "name": "Parent",
90 - "offset": 0,
91 - "selfDuration": 10,
92 - "treeBaseDuration": 15,
93 - },
94 - ],
95 - Array [
96 - Object {
97 - "actualDuration": 0,
98 - "didRender": true,
99 - "id": 5,
100 - "label": "Child key=\\"third\\" (<0.1ms of <0.1ms)",
101 - "name": "Child",
102 - "offset": 15,
103 - "selfDuration": 0,
104 - "treeBaseDuration": 0,
105 - },
106 - Object {
107 - "actualDuration": 2,
108 - "didRender": true,
109 - "id": 4,
110 - "label": "Child key=\\"second\\" (2ms of 2ms)",
111 - "name": "Child",
112 - "offset": 13,
113 - "selfDuration": 2,
114 - "treeBaseDuration": 2,
115 - },
116 - Object {
117 - "actualDuration": 3,
118 - "didRender": true,
119 - "id": 3,
120 - "label": "Child key=\\"first\\" (3ms of 3ms)",
121 - "name": "Child",
122 - "offset": 10,
123 - "selfDuration": 3,
124 - "treeBaseDuration": 3,
125 - },
126 - ],
127 - ],
128 -}
129 -`;
130 -
131 -exports[`profiling charts flamegraph chart should contain valid data: 1: CommitTree 1`] = `
132 -Object {
133 - "nodes": Map {
134 - 1 => Object {
135 - "children": Array [
136 - 2,
137 - ],
138 - "displayName": null,
139 - "hocDisplayNames": null,
140 - "id": 1,
141 - "key": null,
142 - "parentID": 0,
143 - "treeBaseDuration": 15,
144 - "type": 11,
145 - },
146 - 2 => Object {
147 - "children": Array [
148 - 3,
149 - 4,
150 - 5,
151 - ],
152 - "displayName": "Parent",
153 - "hocDisplayNames": null,
154 - "id": 2,
155 - "key": null,
156 - "parentID": 1,
157 - "treeBaseDuration": 15,
158 - "type": 5,
159 - },
160 - 3 => Object {
161 - "children": Array [],
162 - "displayName": "Child",
163 - "hocDisplayNames": null,
164 - "id": 3,
165 - "key": "first",
166 - "parentID": 2,
167 - "treeBaseDuration": 3,
168 - "type": 8,
169 - },
170 - 4 => Object {
171 - "children": Array [],
172 - "displayName": "Child",
173 - "hocDisplayNames": null,
174 - "id": 4,
175 - "key": "second",
176 - "parentID": 2,
177 - "treeBaseDuration": 2,
178 - "type": 8,
179 - },
180 - 5 => Object {
181 - "children": Array [],
182 - "displayName": "Child",
183 - "hocDisplayNames": null,
184 - "id": 5,
185 - "key": "third",
186 - "parentID": 2,
187 - "treeBaseDuration": 0,
188 - "type": 8,
189 - },
190 - },
191 - "rootID": 1,
192 -}
193 -`;
194 -
195 -exports[`profiling charts flamegraph chart should contain valid data: 1: FlamegraphChartData 1`] = `
196 -Object {
197 - "baseDuration": 15,
198 - "depth": 2,
199 - "idToDepthMap": Map {
200 - 2 => 1,
201 - 5 => 2,
202 - 4 => 2,
203 - 3 => 2,
204 - },
205 - "maxSelfDuration": 10,
206 - "renderPathNodes": Set {
207 - 1,
208 - },
209 - "rows": Array [
210 - Array [
211 - Object {
212 - "actualDuration": 10,
213 - "didRender": true,
214 - "id": 2,
215 - "label": "Parent (10ms of 10ms)",
216 - "name": "Parent",
217 - "offset": 0,
218 - "selfDuration": 10,
219 - "treeBaseDuration": 15,
220 - },
221 - ],
222 - Array [
223 - Object {
224 - "actualDuration": 0,
225 - "didRender": false,
226 - "id": 5,
227 - "label": "Child key=\\"third\\"",
228 - "name": "Child",
229 - "offset": 15,
230 - "selfDuration": 0,
231 - "treeBaseDuration": 0,
232 - },
233 - Object {
234 - "actualDuration": 0,
235 - "didRender": false,
236 - "id": 4,
237 - "label": "Child key=\\"second\\"",
238 - "name": "Child",
239 - "offset": 13,
240 - "selfDuration": 0,
241 - "treeBaseDuration": 2,
242 - },
243 - Object {
244 - "actualDuration": 0,
245 - "didRender": false,
246 - "id": 3,
247 - "label": "Child key=\\"first\\"",
248 - "name": "Child",
249 - "offset": 10,
250 - "selfDuration": 0,
251 - "treeBaseDuration": 3,
252 - },
253 - ],
254 - ],
255 -}
256 -`;
257 -
258 -exports[`profiling charts ranked chart should contain valid data: 0: CommitTree 1`] = `
259 -Object {
260 - "nodes": Map {
261 - 1 => Object {
262 - "children": Array [
263 - 2,
264 - ],
265 - "displayName": null,
266 - "hocDisplayNames": null,
267 - "id": 1,
268 - "key": null,
269 - "parentID": 0,
270 - "treeBaseDuration": 15,
271 - "type": 11,
272 - },
273 - 2 => Object {
274 - "children": Array [
275 - 3,
276 - 4,
277 - 5,
278 - ],
279 - "displayName": "Parent",
280 - "hocDisplayNames": null,
281 - "id": 2,
282 - "key": null,
283 - "parentID": 1,
284 - "treeBaseDuration": 15,
285 - "type": 5,
286 - },
287 - 3 => Object {
288 - "children": Array [],
289 - "displayName": "Child",
290 - "hocDisplayNames": null,
291 - "id": 3,
292 - "key": "first",
293 - "parentID": 2,
294 - "treeBaseDuration": 3,
295 - "type": 8,
296 - },
297 - 4 => Object {
298 - "children": Array [],
299 - "displayName": "Child",
300 - "hocDisplayNames": null,
301 - "id": 4,
302 - "key": "second",
303 - "parentID": 2,
304 - "treeBaseDuration": 2,
305 - "type": 8,
306 - },
307 - 5 => Object {
308 - "children": Array [],
309 - "displayName": "Child",
310 - "hocDisplayNames": null,
311 - "id": 5,
312 - "key": "third",
313 - "parentID": 2,
314 - "treeBaseDuration": 0,
315 - "type": 8,
316 - },
317 - },
318 - "rootID": 1,
319 -}
320 -`;
321 -
322 -exports[`profiling charts ranked chart should contain valid data: 0: RankedChartData 1`] = `
323 -Object {
324 - "maxValue": 10,
325 - "nodes": Array [
326 - Object {
327 - "id": 2,
328 - "label": "Parent (10ms)",
329 - "name": "Parent",
330 - "value": 10,
331 - },
332 - Object {
333 - "id": 3,
334 - "label": "Child (Memo) key=\\"first\\" (3ms)",
335 - "name": "Child",
336 - "value": 3,
337 - },
338 - Object {
339 - "id": 4,
340 - "label": "Child (Memo) key=\\"second\\" (2ms)",
341 - "name": "Child",
342 - "value": 2,
343 - },
344 - Object {
345 - "id": 5,
346 - "label": "Child (Memo) key=\\"third\\" (<0.1ms)",
347 - "name": "Child",
348 - "value": 0,
349 - },
350 - ],
351 -}
352 -`;
353 -
354 -exports[`profiling charts ranked chart should contain valid data: 1: CommitTree 1`] = `
355 -Object {
356 - "nodes": Map {
357 - 1 => Object {
358 - "children": Array [
359 - 2,
360 - ],
361 - "displayName": null,
362 - "hocDisplayNames": null,
363 - "id": 1,
364 - "key": null,
365 - "parentID": 0,
366 - "treeBaseDuration": 15,
367 - "type": 11,
368 - },
369 - 2 => Object {
370 - "children": Array [
371 - 3,
372 - 4,
373 - 5,
374 - ],
375 - "displayName": "Parent",
376 - "hocDisplayNames": null,
377 - "id": 2,
378 - "key": null,
379 - "parentID": 1,
380 - "treeBaseDuration": 15,
381 - "type": 5,
382 - },
383 - 3 => Object {
384 - "children": Array [],
385 - "displayName": "Child",
386 - "hocDisplayNames": null,
387 - "id": 3,
388 - "key": "first",
389 - "parentID": 2,
390 - "treeBaseDuration": 3,
391 - "type": 8,
392 - },
393 - 4 => Object {
394 - "children": Array [],
395 - "displayName": "Child",
396 - "hocDisplayNames": null,
397 - "id": 4,
398 - "key": "second",
399 - "parentID": 2,
400 - "treeBaseDuration": 2,
401 - "type": 8,
402 - },
403 - 5 => Object {
404 - "children": Array [],
405 - "displayName": "Child",
406 - "hocDisplayNames": null,
407 - "id": 5,
408 - "key": "third",
409 - "parentID": 2,
410 - "treeBaseDuration": 0,
411 - "type": 8,
412 - },
413 - },
414 - "rootID": 1,
415 -}
416 -`;
417 -
418 -exports[`profiling charts ranked chart should contain valid data: 1: RankedChartData 1`] = `
419 -Object {
420 - "maxValue": 10,
421 - "nodes": Array [
422 - Object {
423 - "id": 2,
424 - "label": "Parent (10ms)",
425 - "name": "Parent",
426 - "value": 10,
427 - },
428 - ],
429 -}
430 -`;
packages/react-devtools-shared/src/__tests__/__snapshots__/profilingCommitTreeBuilder-test.js.snap deleted
-526
@@ -1,526 +0,0 @@
1 -// Jest Snapshot v1, https://goo.gl/fbAQLP
2 -
3 -exports[`commit tree Lazy should support Lazy components (createRoot): 0: CommitTree 1`] = `
4 -Object {
5 - "nodes": Map {
6 - 1 => Object {
7 - "children": Array [
8 - 2,
9 - ],
10 - "displayName": null,
11 - "hocDisplayNames": null,
12 - "id": 1,
13 - "key": null,
14 - "parentID": 0,
15 - "treeBaseDuration": 0,
16 - "type": 11,
17 - },
18 - 2 => Object {
19 - "children": Array [
20 - 3,
21 - ],
22 - "displayName": "App",
23 - "hocDisplayNames": null,
24 - "id": 2,
25 - "key": null,
26 - "parentID": 1,
27 - "treeBaseDuration": 0,
28 - "type": 5,
29 - },
30 - 3 => Object {
31 - "children": Array [],
32 - "displayName": "Suspense",
33 - "hocDisplayNames": null,
34 - "id": 3,
35 - "key": null,
36 - "parentID": 2,
37 - "treeBaseDuration": 0,
38 - "type": 12,
39 - },
40 - },
41 - "rootID": 1,
42 -}
43 -`;
44 -
45 -exports[`commit tree Lazy should support Lazy components (createRoot): 1: CommitTree 1`] = `
46 -Object {
47 - "nodes": Map {
48 - 1 => Object {
49 - "children": Array [
50 - 2,
51 - ],
52 - "displayName": null,
53 - "hocDisplayNames": null,
54 - "id": 1,
55 - "key": null,
56 - "parentID": 0,
57 - "treeBaseDuration": 0,
58 - "type": 11,
59 - },
60 - 2 => Object {
61 - "children": Array [
62 - 3,
63 - ],
64 - "displayName": "App",
65 - "hocDisplayNames": null,
66 - "id": 2,
67 - "key": null,
68 - "parentID": 1,
69 - "treeBaseDuration": 0,
70 - "type": 5,
71 - },
72 - 3 => Object {
73 - "children": Array [
74 - 6,
75 - ],
76 - "displayName": "Suspense",
77 - "hocDisplayNames": null,
78 - "id": 3,
79 - "key": null,
80 - "parentID": 2,
81 - "treeBaseDuration": 0,
82 - "type": 12,
83 - },
84 - 6 => Object {
85 - "children": Array [],
86 - "displayName": "LazyInnerComponent",
87 - "hocDisplayNames": null,
88 - "id": 6,
89 - "key": null,
90 - "parentID": 3,
91 - "treeBaseDuration": 0,
92 - "type": 5,
93 - },
94 - },
95 - "rootID": 1,
96 -}
97 -`;
98 -
99 -exports[`commit tree Lazy should support Lazy components (legacy render): 0: CommitTree 1`] = `
100 -Object {
101 - "nodes": Map {
102 - 1 => Object {
103 - "children": Array [
104 - 2,
105 - ],
106 - "displayName": null,
107 - "hocDisplayNames": null,
108 - "id": 1,
109 - "key": null,
110 - "parentID": 0,
111 - "treeBaseDuration": 0,
112 - "type": 11,
113 - },
114 - 2 => Object {
115 - "children": Array [
116 - 3,
117 - ],
118 - "displayName": "App",
119 - "hocDisplayNames": null,
120 - "id": 2,
121 - "key": null,
122 - "parentID": 1,
123 - "treeBaseDuration": 0,
124 - "type": 5,
125 - },
126 - 3 => Object {
127 - "children": Array [],
128 - "displayName": "Suspense",
129 - "hocDisplayNames": null,
130 - "id": 3,
131 - "key": null,
132 - "parentID": 2,
133 - "treeBaseDuration": 0,
134 - "type": 12,
135 - },
136 - },
137 - "rootID": 1,
138 -}
139 -`;
140 -
141 -exports[`commit tree Lazy should support Lazy components (legacy render): 1: CommitTree 1`] = `
142 -Object {
143 - "nodes": Map {
144 - 1 => Object {
145 - "children": Array [
146 - 2,
147 - ],
148 - "displayName": null,
149 - "hocDisplayNames": null,
150 - "id": 1,
151 - "key": null,
152 - "parentID": 0,
153 - "treeBaseDuration": 0,
154 - "type": 11,
155 - },
156 - 2 => Object {
157 - "children": Array [
158 - 3,
159 - ],
160 - "displayName": "App",
161 - "hocDisplayNames": null,
162 - "id": 2,
163 - "key": null,
164 - "parentID": 1,
165 - "treeBaseDuration": 0,
166 - "type": 5,
167 - },
168 - 3 => Object {
169 - "children": Array [
170 - 6,
171 - ],
172 - "displayName": "Suspense",
173 - "hocDisplayNames": null,
174 - "id": 3,
175 - "key": null,
176 - "parentID": 2,
177 - "treeBaseDuration": 0,
178 - "type": 12,
179 - },
180 - 6 => Object {
181 - "children": Array [],
182 - "displayName": "LazyInnerComponent",
183 - "hocDisplayNames": null,
184 - "id": 6,
185 - "key": null,
186 - "parentID": 3,
187 - "treeBaseDuration": 0,
188 - "type": 5,
189 - },
190 - },
191 - "rootID": 1,
192 -}
193 -`;
194 -
195 -exports[`commit tree Lazy should support Lazy components that are unmounted before resolving (createRoot): 0: CommitTree 1`] = `
196 -Object {
197 - "nodes": Map {
198 - 1 => Object {
199 - "children": Array [
200 - 2,
201 - ],
202 - "displayName": null,
203 - "hocDisplayNames": null,
204 - "id": 1,
205 - "key": null,
206 - "parentID": 0,
207 - "treeBaseDuration": 0,
208 - "type": 11,
209 - },
210 - 2 => Object {
211 - "children": Array [
212 - 3,
213 - ],
214 - "displayName": "App",
215 - "hocDisplayNames": null,
216 - "id": 2,
217 - "key": null,
218 - "parentID": 1,
219 - "treeBaseDuration": 0,
220 - "type": 5,
221 - },
222 - 3 => Object {
223 - "children": Array [],
224 - "displayName": "Suspense",
225 - "hocDisplayNames": null,
226 - "id": 3,
227 - "key": null,
228 - "parentID": 2,
229 - "treeBaseDuration": 0,
230 - "type": 12,
231 - },
232 - },
233 - "rootID": 1,
234 -}
235 -`;
236 -
237 -exports[`commit tree Lazy should support Lazy components that are unmounted before resolving (createRoot): 1: CommitTree 1`] = `
238 -Object {
239 - "nodes": Map {
240 - 1 => Object {
241 - "children": Array [
242 - 2,
243 - ],
244 - "displayName": null,
245 - "hocDisplayNames": null,
246 - "id": 1,
247 - "key": null,
248 - "parentID": 0,
249 - "treeBaseDuration": 0,
250 - "type": 11,
251 - },
252 - 2 => Object {
253 - "children": Array [],
254 - "displayName": "App",
255 - "hocDisplayNames": null,
256 - "id": 2,
257 - "key": null,
258 - "parentID": 1,
259 - "treeBaseDuration": 0,
260 - "type": 5,
261 - },
262 - },
263 - "rootID": 1,
264 -}
265 -`;
266 -
267 -exports[`commit tree Lazy should support Lazy components that are unmounted before resolving (legacy render): 0: CommitTree 1`] = `
268 -Object {
269 - "nodes": Map {
270 - 1 => Object {
271 - "children": Array [
272 - 2,
273 - ],
274 - "displayName": null,
275 - "hocDisplayNames": null,
276 - "id": 1,
277 - "key": null,
278 - "parentID": 0,
279 - "treeBaseDuration": 0,
280 - "type": 11,
281 - },
282 - 2 => Object {
283 - "children": Array [
284 - 3,
285 - ],
286 - "displayName": "App",
287 - "hocDisplayNames": null,
288 - "id": 2,
289 - "key": null,
290 - "parentID": 1,
291 - "treeBaseDuration": 0,
292 - "type": 5,
293 - },
294 - 3 => Object {
295 - "children": Array [],
296 - "displayName": "Suspense",
297 - "hocDisplayNames": null,
298 - "id": 3,
299 - "key": null,
300 - "parentID": 2,
301 - "treeBaseDuration": 0,
302 - "type": 12,
303 - },
304 - },
305 - "rootID": 1,
306 -}
307 -`;
308 -
309 -exports[`commit tree Lazy should support Lazy components that are unmounted before resolving (legacy render): 1: CommitTree 1`] = `
310 -Object {
311 - "nodes": Map {
312 - 1 => Object {
313 - "children": Array [
314 - 2,
315 - ],
316 - "displayName": null,
317 - "hocDisplayNames": null,
318 - "id": 1,
319 - "key": null,
320 - "parentID": 0,
321 - "treeBaseDuration": 0,
322 - "type": 11,
323 - },
324 - 2 => Object {
325 - "children": Array [],
326 - "displayName": "App",
327 - "hocDisplayNames": null,
328 - "id": 2,
329 - "key": null,
330 - "parentID": 1,
331 - "treeBaseDuration": 0,
332 - "type": 5,
333 - },
334 - },
335 - "rootID": 1,
336 -}
337 -`;
338 -
339 -exports[`commit tree should be able to rebuild the store tree for each commit: 0: CommitTree 1`] = `
340 -Object {
341 - "nodes": Map {
342 - 1 => Object {
343 - "children": Array [
344 - 2,
345 - ],
346 - "displayName": null,
347 - "hocDisplayNames": null,
348 - "id": 1,
349 - "key": null,
350 - "parentID": 0,
351 - "treeBaseDuration": 12,
352 - "type": 11,
353 - },
354 - 2 => Object {
355 - "children": Array [
356 - 3,
357 - ],
358 - "displayName": "Parent",
359 - "hocDisplayNames": null,
360 - "id": 2,
361 - "key": null,
362 - "parentID": 1,
363 - "treeBaseDuration": 12,
364 - "type": 5,
365 - },
366 - 3 => Object {
367 - "children": Array [],
368 - "displayName": "Child",
369 - "hocDisplayNames": null,
370 - "id": 3,
371 - "key": "0",
372 - "parentID": 2,
373 - "treeBaseDuration": 2,
374 - "type": 8,
375 - },
376 - },
377 - "rootID": 1,
378 -}
379 -`;
380 -
381 -exports[`commit tree should be able to rebuild the store tree for each commit: 1: CommitTree 1`] = `
382 -Object {
383 - "nodes": Map {
384 - 1 => Object {
385 - "children": Array [
386 - 2,
387 - ],
388 - "displayName": null,
389 - "hocDisplayNames": null,
390 - "id": 1,
391 - "key": null,
392 - "parentID": 0,
393 - "treeBaseDuration": 16,
394 - "type": 11,
395 - },
396 - 2 => Object {
397 - "children": Array [
398 - 3,
399 - 4,
400 - 5,
401 - ],
402 - "displayName": "Parent",
403 - "hocDisplayNames": null,
404 - "id": 2,
405 - "key": null,
406 - "parentID": 1,
407 - "treeBaseDuration": 16,
408 - "type": 5,
409 - },
410 - 3 => Object {
411 - "children": Array [],
412 - "displayName": "Child",
413 - "hocDisplayNames": null,
414 - "id": 3,
415 - "key": "0",
416 - "parentID": 2,
417 - "treeBaseDuration": 2,
418 - "type": 8,
419 - },
420 - 4 => Object {
421 - "children": Array [],
422 - "displayName": "Child",
423 - "hocDisplayNames": null,
424 - "id": 4,
425 - "key": "1",
426 - "parentID": 2,
427 - "treeBaseDuration": 2,
428 - "type": 8,
429 - },
430 - 5 => Object {
431 - "children": Array [],
432 - "displayName": "Child",
433 - "hocDisplayNames": null,
434 - "id": 5,
435 - "key": "2",
436 - "parentID": 2,
437 - "treeBaseDuration": 2,
438 - "type": 8,
439 - },
440 - },
441 - "rootID": 1,
442 -}
443 -`;
444 -
445 -exports[`commit tree should be able to rebuild the store tree for each commit: 2: CommitTree 1`] = `
446 -Object {
447 - "nodes": Map {
448 - 1 => Object {
449 - "children": Array [
450 - 2,
451 - ],
452 - "displayName": null,
453 - "hocDisplayNames": null,
454 - "id": 1,
455 - "key": null,
456 - "parentID": 0,
457 - "treeBaseDuration": 14,
458 - "type": 11,
459 - },
460 - 2 => Object {
461 - "children": Array [
462 - 3,
463 - 4,
464 - ],
465 - "displayName": "Parent",
466 - "hocDisplayNames": null,
467 - "id": 2,
468 - "key": null,
469 - "parentID": 1,
470 - "treeBaseDuration": 14,
471 - "type": 5,
472 - },
473 - 3 => Object {
474 - "children": Array [],
475 - "displayName": "Child",
476 - "hocDisplayNames": null,
477 - "id": 3,
478 - "key": "0",
479 - "parentID": 2,
480 - "treeBaseDuration": 2,
481 - "type": 8,
482 - },
483 - 4 => Object {
484 - "children": Array [],
485 - "displayName": "Child",
486 - "hocDisplayNames": null,
487 - "id": 4,
488 - "key": "1",
489 - "parentID": 2,
490 - "treeBaseDuration": 2,
491 - "type": 8,
492 - },
493 - },
494 - "rootID": 1,
495 -}
496 -`;
497 -
498 -exports[`commit tree should be able to rebuild the store tree for each commit: 3: CommitTree 1`] = `
499 -Object {
500 - "nodes": Map {
501 - 1 => Object {
502 - "children": Array [
503 - 2,
504 - ],
505 - "displayName": null,
506 - "hocDisplayNames": null,
507 - "id": 1,
508 - "key": null,
509 - "parentID": 0,
510 - "treeBaseDuration": 10,
511 - "type": 11,
512 - },
513 - 2 => Object {
514 - "children": Array [],
515 - "displayName": "Parent",
516 - "hocDisplayNames": null,
517 - "id": 2,
518 - "key": null,
519 - "parentID": 1,
520 - "treeBaseDuration": 10,
521 - "type": 5,
522 - },
523 - },
524 - "rootID": 1,
525 -}
526 -`;
packages/react-devtools-shared/src/__tests__/__snapshots__/store-test.js.snap deleted
-672
@@ -1,672 +0,0 @@
1 -// Jest Snapshot v1, https://goo.gl/fbAQLP
2 -
3 -exports[`Store Lazy should support Lazy components (legacy render): 1: mounted + loading 1`] = `
4 -[root]
5 - ▾ <App>
6 - <Suspense>
7 -`;
8 -
9 -exports[`Store Lazy should support Lazy components (legacy render): 2: mounted + loaded 1`] = `
10 -[root]
11 - ▾ <App>
12 - ▾ <Suspense>
13 - <LazyInnerComponent>
14 -`;
15 -
16 -exports[`Store Lazy should support Lazy components (legacy render): 3: unmounted 1`] = `
17 -[root]
18 - <App>
19 -`;
20 -
21 -exports[`Store Lazy should support Lazy components in (createRoot): 1: mounted + loading 1`] = `
22 -[root]
23 - ▾ <App>
24 - <Suspense>
25 -`;
26 -
27 -exports[`Store Lazy should support Lazy components in (createRoot): 2: mounted + loaded 1`] = `
28 -[root]
29 - ▾ <App>
30 - ▾ <Suspense>
31 - <LazyInnerComponent>
32 -`;
33 -
34 -exports[`Store Lazy should support Lazy components in (createRoot): 3: unmounted 1`] = `
35 -[root]
36 - <App>
37 -`;
38 -
39 -exports[`Store Lazy should support Lazy components that are unmounted before they finish loading (legacy render): 1: mounted + loading 1`] = `
40 -[root]
41 - ▾ <App>
42 - <Suspense>
43 -`;
44 -
45 -exports[`Store Lazy should support Lazy components that are unmounted before they finish loading (legacy render): 2: unmounted 1`] = `
46 -[root]
47 - <App>
48 -`;
49 -
50 -exports[`Store Lazy should support Lazy components that are unmounted before they finish loading in (createRoot): 1: mounted + loading 1`] = `
51 -[root]
52 - ▾ <App>
53 - <Suspense>
54 -`;
55 -
56 -exports[`Store Lazy should support Lazy components that are unmounted before they finish loading in (createRoot): 2: unmounted 1`] = `
57 -[root]
58 - <App>
59 -`;
60 -
61 -exports[`Store collapseNodesByDefault:false should display Suspense nodes properly in various states: 1: loading 1`] = `
62 -[root]
63 - ▾ <Wrapper>
64 - <Component key="Outside">
65 - ▾ <Suspense>
66 - <Loading>
67 -`;
68 -
69 -exports[`Store collapseNodesByDefault:false should display Suspense nodes properly in various states: 2: resolved 1`] = `
70 -[root]
71 - ▾ <Wrapper>
72 - <Component key="Outside">
73 - ▾ <Suspense>
74 - <Component key="Inside">
75 -`;
76 -
77 -exports[`Store collapseNodesByDefault:false should display a partially rendered SuspenseList: 1: loading 1`] = `
78 -[root]
79 - ▾ <Wrapper>
80 - ▾ <SuspenseList>
81 - <Component key="A">
82 - ▾ <Suspense>
83 - <Loading>
84 -`;
85 -
86 -exports[`Store collapseNodesByDefault:false should display a partially rendered SuspenseList: 2: resolved 1`] = `
87 -[root]
88 - ▾ <Wrapper>
89 - ▾ <SuspenseList>
90 - <Component key="A">
91 - ▾ <Suspense>
92 - <Component key="B">
93 - <Component key="C">
94 -`;
95 -
96 -exports[`Store collapseNodesByDefault:false should filter DOM nodes from the store tree: 1: mount 1`] = `
97 -[root]
98 - ▾ <Grandparent>
99 - ▾ <Parent>
100 - <Child>
101 - ▾ <Parent>
102 - <Child>
103 -`;
104 -
105 -exports[`Store collapseNodesByDefault:false should support collapsing parts of the tree: 1: mount 1`] = `
106 -[root]
107 - ▾ <Grandparent>
108 - ▾ <Parent>
109 - <Child key="0">
110 - <Child key="1">
111 - ▾ <Parent>
112 - <Child key="0">
113 - <Child key="1">
114 -`;
115 -
116 -exports[`Store collapseNodesByDefault:false should support collapsing parts of the tree: 2: collapse first Parent 1`] = `
117 -[root]
118 - ▾ <Grandparent>
119 - ▸ <Parent>
120 - ▾ <Parent>
121 - <Child key="0">
122 - <Child key="1">
123 -`;
124 -
125 -exports[`Store collapseNodesByDefault:false should support collapsing parts of the tree: 3: collapse second Parent 1`] = `
126 -[root]
127 - ▾ <Grandparent>
128 - ▸ <Parent>
129 - ▸ <Parent>
130 -`;
131 -
132 -exports[`Store collapseNodesByDefault:false should support collapsing parts of the tree: 4: expand first Parent 1`] = `
133 -[root]
134 - ▾ <Grandparent>
135 - ▾ <Parent>
136 - <Child key="0">
137 - <Child key="1">
138 - ▸ <Parent>
139 -`;
140 -
141 -exports[`Store collapseNodesByDefault:false should support collapsing parts of the tree: 5: collapse Grandparent 1`] = `
142 -[root]
143 - ▸ <Grandparent>
144 -`;
145 -
146 -exports[`Store collapseNodesByDefault:false should support collapsing parts of the tree: 6: expand Grandparent 1`] = `
147 -[root]
148 - ▾ <Grandparent>
149 - ▾ <Parent>
150 - <Child key="0">
151 - <Child key="1">
152 - ▸ <Parent>
153 -`;
154 -
155 -exports[`Store collapseNodesByDefault:false should support mount and update operations for multiple roots: 1: mount 1`] = `
156 -[root]
157 - ▾ <Parent key="A">
158 - <Child key="0">
159 - <Child key="1">
160 - <Child key="2">
161 -[root]
162 - ▾ <Parent key="B">
163 - <Child key="0">
164 - <Child key="1">
165 -`;
166 -
167 -exports[`Store collapseNodesByDefault:false should support mount and update operations for multiple roots: 2: update 1`] = `
168 -[root]
169 - ▾ <Parent key="A">
170 - <Child key="0">
171 - <Child key="1">
172 - <Child key="2">
173 - <Child key="3">
174 -[root]
175 - ▾ <Parent key="B">
176 - <Child key="0">
177 -`;
178 -
179 -exports[`Store collapseNodesByDefault:false should support mount and update operations for multiple roots: 3: unmount B 1`] = `
180 -[root]
181 - ▾ <Parent key="A">
182 - <Child key="0">
183 - <Child key="1">
184 - <Child key="2">
185 - <Child key="3">
186 -`;
187 -
188 -exports[`Store collapseNodesByDefault:false should support mount and update operations for multiple roots: 4: unmount A 1`] = ``;
189 -
190 -exports[`Store collapseNodesByDefault:false should support mount and update operations: 1: mount 1`] = `
191 -[root]
192 - ▾ <Grandparent>
193 - ▾ <Parent>
194 - <Child key="0">
195 - <Child key="1">
196 - <Child key="2">
197 - <Child key="3">
198 - ▾ <Parent>
199 - <Child key="0">
200 - <Child key="1">
201 - <Child key="2">
202 - <Child key="3">
203 -`;
204 -
205 -exports[`Store collapseNodesByDefault:false should support mount and update operations: 2: update 1`] = `
206 -[root]
207 - ▾ <Grandparent>
208 - ▾ <Parent>
209 - <Child key="0">
210 - <Child key="1">
211 - ▾ <Parent>
212 - <Child key="0">
213 - <Child key="1">
214 -`;
215 -
216 -exports[`Store collapseNodesByDefault:false should support mount and update operations: 3: unmount 1`] = ``;
217 -
218 -exports[`Store collapseNodesByDefault:false should support nested Suspense nodes: 1: third child is suspended 1`] = `
219 -[root]
220 - ▾ <Wrapper>
221 - <Component key="Outside">
222 - ▾ <Suspense>
223 - <Component key="Unrelated at Start">
224 - ▾ <Suspense>
225 - <Component key="Suspense 1 Content">
226 - ▾ <Suspense>
227 - <Component key="Suspense 2 Content">
228 - ▾ <Suspense>
229 - <Loading key="Suspense 3 Fallback">
230 - <Component key="Unrelated at End">
231 -`;
232 -
233 -exports[`Store collapseNodesByDefault:false should support nested Suspense nodes: 2: first and third child are suspended 1`] = `
234 -[root]
235 - ▾ <Wrapper>
236 - <Component key="Outside">
237 - ▾ <Suspense>
238 - <Component key="Unrelated at Start">
239 - ▾ <Suspense>
240 - <Loading key="Suspense 1 Fallback">
241 - ▾ <Suspense>
242 - <Component key="Suspense 2 Content">
243 - ▾ <Suspense>
244 - <Loading key="Suspense 3 Fallback">
245 - <Component key="Unrelated at End">
246 -`;
247 -
248 -exports[`Store collapseNodesByDefault:false should support nested Suspense nodes: 3: second and third child are suspended 1`] = `
249 -[root]
250 - ▾ <Wrapper>
251 - <Component key="Outside">
252 - ▾ <Suspense>
253 - <Component key="Unrelated at Start">
254 - ▾ <Suspense>
255 - <Component key="Suspense 1 Content">
256 - ▾ <Suspense>
257 - <Loading key="Suspense 2 Fallback">
258 - ▾ <Suspense>
259 - <Loading key="Suspense 3 Fallback">
260 - <Component key="Unrelated at End">
261 -`;
262 -
263 -exports[`Store collapseNodesByDefault:false should support nested Suspense nodes: 4: first and third child are suspended 1`] = `
264 -[root]
265 - ▾ <Wrapper>
266 - <Component key="Outside">
267 - ▾ <Suspense>
268 - <Component key="Unrelated at Start">
269 - ▾ <Suspense>
270 - <Loading key="Suspense 1 Fallback">
271 - ▾ <Suspense>
272 - <Component key="Suspense 2 Content">
273 - ▾ <Suspense>
274 - <Loading key="Suspense 3 Fallback">
275 - <Component key="Unrelated at End">
276 -`;
277 -
278 -exports[`Store collapseNodesByDefault:false should support nested Suspense nodes: 5: parent is suspended 1`] = `
279 -[root]
280 - ▾ <Wrapper>
281 - <Component key="Outside">
282 - ▾ <Suspense>
283 - <Loading key="Parent Fallback">
284 -`;
285 -
286 -exports[`Store collapseNodesByDefault:false should support nested Suspense nodes: 6: all children are suspended 1`] = `
287 -[root]
288 - ▾ <Wrapper>
289 - <Component key="Outside">
290 - ▾ <Suspense>
291 - <Component key="Unrelated at Start">
292 - ▾ <Suspense>
293 - <Loading key="Suspense 1 Fallback">
294 - ▾ <Suspense>
295 - <Loading key="Suspense 2 Fallback">
296 - ▾ <Suspense>
297 - <Loading key="Suspense 3 Fallback">
298 - <Component key="Unrelated at End">
299 -`;
300 -
301 -exports[`Store collapseNodesByDefault:false should support nested Suspense nodes: 7: only third child is suspended 1`] = `
302 -[root]
303 - ▾ <Wrapper>
304 - <Component key="Outside">
305 - ▾ <Suspense>
306 - <Component key="Unrelated at Start">
307 - ▾ <Suspense>
308 - <Component key="Suspense 1 Content">
309 - ▾ <Suspense>
310 - <Component key="Suspense 2 Content">
311 - ▾ <Suspense>
312 - <Loading key="Suspense 3 Fallback">
313 - <Component key="Unrelated at End">
314 -`;
315 -
316 -exports[`Store collapseNodesByDefault:false should support nested Suspense nodes: 8: first and third child are suspended 1`] = `
317 -[root]
318 - ▾ <Wrapper>
319 - <Component key="Outside">
320 - ▾ <Suspense>
321 - <Component key="Unrelated at Start">
322 - ▾ <Suspense>
323 - <Loading key="Suspense 1 Fallback">
324 - ▾ <Suspense>
325 - <Component key="Suspense 2 Content">
326 - ▾ <Suspense>
327 - <Loading key="Suspense 3 Fallback">
328 - <Component key="Unrelated at End">
329 -`;
330 -
331 -exports[`Store collapseNodesByDefault:false should support nested Suspense nodes: 9: parent is suspended 1`] = `
332 -[root]
333 - ▾ <Wrapper>
334 - <Component key="Outside">
335 - ▾ <Suspense>
336 - <Loading key="Parent Fallback">
337 -`;
338 -
339 -exports[`Store collapseNodesByDefault:false should support nested Suspense nodes: 10: parent is suspended 1`] = `
340 -[root]
341 - ▾ <Wrapper>
342 - <Component key="Outside">
343 - ▾ <Suspense>
344 - <Loading key="Parent Fallback">
345 -`;
346 -
347 -exports[`Store collapseNodesByDefault:false should support nested Suspense nodes: 11: all children are suspended 1`] = `
348 -[root]
349 - ▾ <Wrapper>
350 - <Component key="Outside">
351 - ▾ <Suspense>
352 - <Component key="Unrelated at Start">
353 - ▾ <Suspense>
354 - <Loading key="Suspense 1 Fallback">
355 - ▾ <Suspense>
356 - <Loading key="Suspense 2 Fallback">
357 - ▾ <Suspense>
358 - <Loading key="Suspense 3 Fallback">
359 - <Component key="Unrelated at End">
360 -`;
361 -
362 -exports[`Store collapseNodesByDefault:false should support nested Suspense nodes: 12: all children are suspended 1`] = `
363 -[root]
364 - ▾ <Wrapper>
365 - <Component key="Outside">
366 - ▾ <Suspense>
367 - <Component key="Unrelated at Start">
368 - ▾ <Suspense>
369 - <Loading key="Suspense 1 Fallback">
370 - ▾ <Suspense>
371 - <Loading key="Suspense 2 Fallback">
372 - ▾ <Suspense>
373 - <Loading key="Suspense 3 Fallback">
374 - <Component key="Unrelated at End">
375 -`;
376 -
377 -exports[`Store collapseNodesByDefault:false should support nested Suspense nodes: 13: third child is suspended 1`] = `
378 -[root]
379 - ▾ <Wrapper>
380 - <Component key="Outside">
381 - ▾ <Suspense>
382 - <Component key="Unrelated at Start">
383 - ▾ <Suspense>
384 - <Component key="Suspense 1 Content">
385 - ▾ <Suspense>
386 - <Component key="Suspense 2 Content">
387 - ▾ <Suspense>
388 - <Loading key="Suspense 3 Fallback">
389 - <Component key="Unrelated at End">
390 -`;
391 -
392 -exports[`Store collapseNodesByDefault:false should support reordering of children: 1: mount 1`] = `
393 -[root]
394 - ▾ <Root>
395 - ▾ <Foo key="foo">
396 - <Component key="0">
397 - ▾ <Bar key="bar">
398 - <Component key="0">
399 - <Component key="1">
400 -`;
401 -
402 -exports[`Store collapseNodesByDefault:false should support reordering of children: 3: reorder children 1`] = `
403 -[root]
404 - ▾ <Root>
405 - ▾ <Bar key="bar">
406 - <Component key="0">
407 - <Component key="1">
408 - ▾ <Foo key="foo">
409 - <Component key="0">
410 -`;
411 -
412 -exports[`Store collapseNodesByDefault:false should support reordering of children: 4: collapse root 1`] = `
413 -[root]
414 - ▸ <Root>
415 -`;
416 -
417 -exports[`Store collapseNodesByDefault:false should support reordering of children: 5: expand root 1`] = `
418 -[root]
419 - ▾ <Root>
420 - ▾ <Bar key="bar">
421 - <Component key="0">
422 - <Component key="1">
423 - ▾ <Foo key="foo">
424 - <Component key="0">
425 -`;
426 -
427 -exports[`Store collapseNodesByDefault:true should display Suspense nodes properly in various states: 1: loading 1`] = `
428 -[root]
429 - ▸ <Wrapper>
430 -`;
431 -
432 -exports[`Store collapseNodesByDefault:true should display Suspense nodes properly in various states: 2: expand Wrapper and Suspense 1`] = `
433 -[root]
434 - ▾ <Wrapper>
435 - <Component key="Outside">
436 - ▾ <Suspense>
437 - <Loading>
438 -`;
439 -
440 -exports[`Store collapseNodesByDefault:true should display Suspense nodes properly in various states: 2: resolved 1`] = `
441 -[root]
442 - ▾ <Wrapper>
443 - <Component key="Outside">
444 - ▾ <Suspense>
445 - <Component key="Inside">
446 -`;
447 -
448 -exports[`Store collapseNodesByDefault:true should filter DOM nodes from the store tree: 1: mount 1`] = `
449 -[root]
450 - ▸ <Grandparent>
451 -`;
452 -
453 -exports[`Store collapseNodesByDefault:true should filter DOM nodes from the store tree: 2: expand Grandparent 1`] = `
454 -[root]
455 - ▾ <Grandparent>
456 - ▸ <Parent>
457 - ▸ <Parent>
458 -`;
459 -
460 -exports[`Store collapseNodesByDefault:true should filter DOM nodes from the store tree: 3: expand Parent 1`] = `
461 -[root]
462 - ▾ <Grandparent>
463 - ▾ <Parent>
464 - <Child>
465 - ▸ <Parent>
466 -`;
467 -
468 -exports[`Store collapseNodesByDefault:true should not add new nodes when suspense is toggled: 1: mount 1`] = `
469 -[root]
470 - ▸ <SuspenseTree>
471 -`;
472 -
473 -exports[`Store collapseNodesByDefault:true should not add new nodes when suspense is toggled: 2: expand tree 1`] = `
474 -[root]
475 - ▾ <SuspenseTree>
476 - ▾ <Suspense>
477 - ▸ <Parent>
478 -`;
479 -
480 -exports[`Store collapseNodesByDefault:true should not add new nodes when suspense is toggled: 3: toggle fallback on 1`] = `
481 -[root]
482 - ▾ <SuspenseTree>
483 - ▾ <Suspense>
484 - <Fallback>
485 -`;
486 -
487 -exports[`Store collapseNodesByDefault:true should not add new nodes when suspense is toggled: 4: toggle fallback on 1`] = `
488 -[root]
489 - ▾ <SuspenseTree>
490 - ▾ <Suspense>
491 - ▸ <Parent>
492 -`;
493 -
494 -exports[`Store collapseNodesByDefault:true should support expanding deep parts of the tree: 1: mount 1`] = `
495 -[root]
496 - ▸ <Wrapper>
497 -`;
498 -
499 -exports[`Store collapseNodesByDefault:true should support expanding deep parts of the tree: 2: expand deepest node 1`] = `
500 -[root]
501 - ▾ <Wrapper>
502 - ▾ <Nested>
503 - ▾ <Nested>
504 - ▾ <Nested>
505 - <Nested>
506 -`;
507 -
508 -exports[`Store collapseNodesByDefault:true should support expanding deep parts of the tree: 3: collapse root 1`] = `
509 -[root]
510 - ▸ <Wrapper>
511 -`;
512 -
513 -exports[`Store collapseNodesByDefault:true should support expanding deep parts of the tree: 4: expand root 1`] = `
514 -[root]
515 - ▾ <Wrapper>
516 - ▾ <Nested>
517 - ▾ <Nested>
518 - ▾ <Nested>
519 - <Nested>
520 -`;
521 -
522 -exports[`Store collapseNodesByDefault:true should support expanding deep parts of the tree: 5: collapse middle node 1`] = `
523 -[root]
524 - ▾ <Wrapper>
525 - ▸ <Nested>
526 -`;
527 -
528 -exports[`Store collapseNodesByDefault:true should support expanding deep parts of the tree: 6: expand middle node 1`] = `
529 -[root]
530 - ▾ <Wrapper>
531 - ▾ <Nested>
532 - ▾ <Nested>
533 - ▾ <Nested>
534 - <Nested>
535 -`;
536 -
537 -exports[`Store collapseNodesByDefault:true should support expanding parts of the tree: 1: mount 1`] = `
538 -[root]
539 - ▸ <Grandparent>
540 -`;
541 -
542 -exports[`Store collapseNodesByDefault:true should support expanding parts of the tree: 2: expand Grandparent 1`] = `
543 -[root]
544 - ▾ <Grandparent>
545 - ▸ <Parent>
546 - ▸ <Parent>
547 -`;
548 -
549 -exports[`Store collapseNodesByDefault:true should support expanding parts of the tree: 3: expand first Parent 1`] = `
550 -[root]
551 - ▾ <Grandparent>
552 - ▾ <Parent>
553 - <Child key="0">
554 - <Child key="1">
555 - ▸ <Parent>
556 -`;
557 -
558 -exports[`Store collapseNodesByDefault:true should support expanding parts of the tree: 4: expand second Parent 1`] = `
559 -[root]
560 - ▾ <Grandparent>
561 - ▾ <Parent>
562 - <Child key="0">
563 - <Child key="1">
564 - ▾ <Parent>
565 - <Child key="0">
566 - <Child key="1">
567 -`;
568 -
569 -exports[`Store collapseNodesByDefault:true should support expanding parts of the tree: 5: collapse first Parent 1`] = `
570 -[root]
571 - ▾ <Grandparent>
572 - ▸ <Parent>
573 - ▾ <Parent>
574 - <Child key="0">
575 - <Child key="1">
576 -`;
577 -
578 -exports[`Store collapseNodesByDefault:true should support expanding parts of the tree: 6: collapse second Parent 1`] = `
579 -[root]
580 - ▾ <Grandparent>
581 - ▸ <Parent>
582 - ▸ <Parent>
583 -`;
584 -
585 -exports[`Store collapseNodesByDefault:true should support expanding parts of the tree: 7: collapse Grandparent 1`] = `
586 -[root]
587 - ▸ <Grandparent>
588 -`;
589 -
590 -exports[`Store collapseNodesByDefault:true should support mount and update operations for multiple roots: 1: mount 1`] = `
591 -[root]
592 - ▸ <Parent key="A">
593 -[root]
594 - ▸ <Parent key="B">
595 -`;
596 -
597 -exports[`Store collapseNodesByDefault:true should support mount and update operations for multiple roots: 2: update 1`] = `
598 -[root]
599 - ▸ <Parent key="A">
600 -[root]
601 - ▸ <Parent key="B">
602 -`;
603 -
604 -exports[`Store collapseNodesByDefault:true should support mount and update operations for multiple roots: 3: unmount B 1`] = `
605 -[root]
606 - ▸ <Parent key="A">
607 -`;
608 -
609 -exports[`Store collapseNodesByDefault:true should support mount and update operations for multiple roots: 4: unmount A 1`] = ``;
610 -
611 -exports[`Store collapseNodesByDefault:true should support mount and update operations: 1: mount 1`] = `
612 -[root]
613 - ▸ <Parent>
614 - ▸ <Parent>
615 -`;
616 -
617 -exports[`Store collapseNodesByDefault:true should support mount and update operations: 2: update 1`] = `
618 -[root]
619 - ▸ <Parent>
620 - ▸ <Parent>
621 -`;
622 -
623 -exports[`Store collapseNodesByDefault:true should support mount and update operations: 3: unmount 1`] = ``;
624 -
625 -exports[`Store collapseNodesByDefault:true should support reordering of children: 1: mount 1`] = `
626 -[root]
627 - ▸ <Root>
628 -`;
629 -
630 -exports[`Store collapseNodesByDefault:true should support reordering of children: 3: reorder children 1`] = `
631 -[root]
632 - ▸ <Root>
633 -`;
634 -
635 -exports[`Store collapseNodesByDefault:true should support reordering of children: 4: expand root 1`] = `
636 -[root]
637 - ▾ <Root>
638 - ▸ <Bar key="bar">
639 - ▸ <Foo key="foo">
640 -`;
641 -
642 -exports[`Store collapseNodesByDefault:true should support reordering of children: 5: expand leaves 1`] = `
643 -[root]
644 - ▾ <Root>
645 - ▾ <Bar key="bar">
646 - <Component key="0">
647 - <Component key="1">
648 - ▾ <Foo key="foo">
649 - <Component key="0">
650 -`;
651 -
652 -exports[`Store collapseNodesByDefault:true should support reordering of children: 6: collapse root 1`] = `
653 -[root]
654 - ▸ <Root>
655 -`;
656 -
657 -exports[`Store should not allow a root node to be collapsed: 1: mount 1`] = `
658 -[root]
659 - <Component>
660 -`;
661 -
662 -exports[`Store should properly handle a root with no visible nodes: 1: mount 1`] = `
663 -[root]
664 - <Root>
665 -`;
666 -
667 -exports[`Store should properly handle a root with no visible nodes: 2: add host nodes 1`] = `[root]`;
668 -
669 -exports[`Store should properly serialize non-string key values: 1: mount 1`] = `
670 -[root]
671 - <Child key="123">
672 -`;
packages/react-devtools-shared/src/__tests__/__snapshots__/storeOwners-test.js.snap deleted
-121
@@ -1,121 +0,0 @@
1 -// Jest Snapshot v1, https://goo.gl/fbAQLP
2 -
3 -exports[`Store owners list should drill through interleaved intermediate components: 1: mount 1`] = `
4 -[root]
5 - ▾ <Root>
6 - ▾ <Intermediate key="intermediate">
7 - <Leaf key="leaf">
8 - ▾ <Wrapper key="wrapper">
9 - <Leaf>
10 - <Leaf key="leaf">
11 -`;
12 -
13 -exports[`Store owners list should drill through interleaved intermediate components: 2: components owned by <Root> 1`] = `
14 -" ▾ <Root>
15 - ▾ <Intermediate key=\\"intermediate\\">
16 - <Leaf>
17 - <Leaf key=\\"leaf\\">"
18 -`;
19 -
20 -exports[`Store owners list should drill through interleaved intermediate components: 3: components owned by <Intermediate> 1`] = `
21 -" ▾ <Intermediate key=\\"intermediate\\">
22 - <Leaf key=\\"leaf\\">
23 - ▾ <Wrapper key=\\"wrapper\\">"
24 -`;
25 -
26 -exports[`Store owners list should drill through intermediate components: 1: mount 1`] = `
27 -[root]
28 - ▾ <Root>
29 - ▾ <Intermediate>
30 - ▾ <Wrapper>
31 - <Leaf>
32 -`;
33 -
34 -exports[`Store owners list should drill through intermediate components: 2: components owned by <Root> 1`] = `
35 -" ▾ <Root>
36 - ▾ <Intermediate>
37 - <Leaf>"
38 -`;
39 -
40 -exports[`Store owners list should drill through intermediate components: 3: components owned by <Intermediate> 1`] = `
41 -" ▾ <Intermediate>
42 - ▾ <Wrapper>"
43 -`;
44 -
45 -exports[`Store owners list should show the proper owners list order and contents after insertions and deletions: 1: mount 1`] = `
46 -[root]
47 - ▾ <Root>
48 - ▾ <Intermediate>
49 - ▾ <Wrapper>
50 - <Leaf>
51 -`;
52 -
53 -exports[`Store owners list should show the proper owners list order and contents after insertions and deletions: 2: components owned by <Root> 1`] = `
54 -" ▾ <Root>
55 - ▾ <Intermediate>
56 - <Leaf>"
57 -`;
58 -
59 -exports[`Store owners list should show the proper owners list order and contents after insertions and deletions: 3: update to add direct 1`] = `
60 -[root]
61 - ▾ <Root>
62 - <Leaf>
63 - ▾ <Intermediate>
64 - ▾ <Wrapper>
65 - <Leaf>
66 -`;
67 -
68 -exports[`Store owners list should show the proper owners list order and contents after insertions and deletions: 4: components owned by <Root> 1`] = `
69 -" ▾ <Root>
70 - <Leaf>
71 - ▾ <Intermediate>
72 - <Leaf>"
73 -`;
74 -
75 -exports[`Store owners list should show the proper owners list order and contents after insertions and deletions: 5: update to remove indirect 1`] = `
76 -[root]
77 - ▾ <Root>
78 - <Leaf>
79 -`;
80 -
81 -exports[`Store owners list should show the proper owners list order and contents after insertions and deletions: 6: components owned by <Root> 1`] = `
82 -" ▾ <Root>
83 - <Leaf>"
84 -`;
85 -
86 -exports[`Store owners list should show the proper owners list order and contents after insertions and deletions: 7: update to remove both 1`] = `
87 -[root]
88 - <Root>
89 -`;
90 -
91 -exports[`Store owners list should show the proper owners list order and contents after insertions and deletions: 8: components owned by <Root> 1`] = `" <Root>"`;
92 -
93 -exports[`Store owners list should show the proper owners list ordering after reordered children: 1: mount (ascending) 1`] = `
94 -[root]
95 - ▾ <Root>
96 - <Leaf key="A">
97 - <Leaf key="B">
98 - <Leaf key="C">
99 -`;
100 -
101 -exports[`Store owners list should show the proper owners list ordering after reordered children: 2: components owned by <Root> 1`] = `
102 -" ▾ <Root>
103 - <Leaf key=\\"A\\">
104 - <Leaf key=\\"B\\">
105 - <Leaf key=\\"C\\">"
106 -`;
107 -
108 -exports[`Store owners list should show the proper owners list ordering after reordered children: 3: update (descending) 1`] = `
109 -[root]
110 - ▾ <Root>
111 - <Leaf key="C">
112 - <Leaf key="B">
113 - <Leaf key="A">
114 -`;
115 -
116 -exports[`Store owners list should show the proper owners list ordering after reordered children: 4: components owned by <Root> 1`] = `
117 -" ▾ <Root>
118 - <Leaf key=\\"C\\">
119 - <Leaf key=\\"B\\">
120 - <Leaf key=\\"A\\">"
121 -`;
packages/react-devtools-shared/src/__tests__/legacy/__snapshots__/storeLegacy-v15-test.js.snap deleted
-499
@@ -1,499 +0,0 @@
1 -// Jest Snapshot v1, https://goo.gl/fbAQLP
2 -
3 -exports[`Store (legacy) collapseNodesByDefault:false should not filter DOM nodes from the store tree: 1: mount 1`] = `
4 -[root]
5 - ▾ <Grandparent>
6 - ▾ <div>
7 - ▾ <div>
8 - ▾ <Parent>
9 - ▾ <div>
10 - ▾ <Child>
11 - <div>
12 - ▾ <Parent>
13 - ▾ <div>
14 - ▾ <Child>
15 - <div>
16 - <Nothing>
17 -`;
18 -
19 -exports[`Store (legacy) collapseNodesByDefault:false should not filter DOM nodes from the store tree: 2: update 1`] = `
20 -[root]
21 - ▾ <Grandparent>
22 - ▾ <div>
23 - ▾ <div>
24 - ▾ <Parent>
25 - ▾ <div>
26 - ▾ <Child>
27 - <div>
28 - ▾ <Parent>
29 - ▾ <div>
30 - ▾ <Child>
31 - <div>
32 - <Nothing>
33 -`;
34 -
35 -exports[`Store (legacy) collapseNodesByDefault:false should not filter DOM nodes from the store tree: 5: unmount 1`] = ``;
36 -
37 -exports[`Store (legacy) collapseNodesByDefault:false should support adding and removing children: 1: mount 1`] = `
38 -[root]
39 - ▾ <Root>
40 - ▾ <div>
41 - ▾ <Component key="a">
42 - <div>
43 -`;
44 -
45 -exports[`Store (legacy) collapseNodesByDefault:false should support adding and removing children: 2: add child 1`] = `
46 -[root]
47 - ▾ <Root>
48 - ▾ <div>
49 - ▾ <Component key="a">
50 - <div>
51 - ▾ <Component key="b">
52 - <div>
53 -`;
54 -
55 -exports[`Store (legacy) collapseNodesByDefault:false should support adding and removing children: 3: remove child 1`] = `
56 -[root]
57 - ▾ <Root>
58 - ▾ <div>
59 - ▾ <Component key="b">
60 - <div>
61 -`;
62 -
63 -exports[`Store (legacy) collapseNodesByDefault:false should support collapsing parts of the tree: 1: mount 1`] = `
64 -[root]
65 - ▾ <Grandparent>
66 - ▾ <div>
67 - ▾ <Parent>
68 - ▾ <div>
69 - ▾ <Child key="0">
70 - <div>
71 - ▾ <Child key="1">
72 - <div>
73 - ▾ <Parent>
74 - ▾ <div>
75 - ▾ <Child key="0">
76 - <div>
77 - ▾ <Child key="1">
78 - <div>
79 -`;
80 -
81 -exports[`Store (legacy) collapseNodesByDefault:false should support collapsing parts of the tree: 2: collapse first Parent 1`] = `
82 -[root]
83 - ▾ <Grandparent>
84 - ▾ <div>
85 - ▸ <Parent>
86 - ▾ <Parent>
87 - ▾ <div>
88 - ▾ <Child key="0">
89 - <div>
90 - ▾ <Child key="1">
91 - <div>
92 -`;
93 -
94 -exports[`Store (legacy) collapseNodesByDefault:false should support collapsing parts of the tree: 3: collapse second Parent 1`] = `
95 -[root]
96 - ▾ <Grandparent>
97 - ▾ <div>
98 - ▸ <Parent>
99 - ▸ <Parent>
100 -`;
101 -
102 -exports[`Store (legacy) collapseNodesByDefault:false should support collapsing parts of the tree: 4: expand first Parent 1`] = `
103 -[root]
104 - ▾ <Grandparent>
105 - ▾ <div>
106 - ▾ <Parent>
107 - ▾ <div>
108 - ▾ <Child key="0">
109 - <div>
110 - ▾ <Child key="1">
111 - <div>
112 - ▸ <Parent>
113 -`;
114 -
115 -exports[`Store (legacy) collapseNodesByDefault:false should support collapsing parts of the tree: 5: collapse Grandparent 1`] = `
116 -[root]
117 - ▸ <Grandparent>
118 -`;
119 -
120 -exports[`Store (legacy) collapseNodesByDefault:false should support collapsing parts of the tree: 6: expand Grandparent 1`] = `
121 -[root]
122 - ▾ <Grandparent>
123 - ▾ <div>
124 - ▾ <Parent>
125 - ▾ <div>
126 - ▾ <Child key="0">
127 - <div>
128 - ▾ <Child key="1">
129 - <div>
130 - ▸ <Parent>
131 -`;
132 -
133 -exports[`Store (legacy) collapseNodesByDefault:false should support mount and update operations for multiple roots: 1: mount 1`] = `
134 -[root]
135 - ▾ <Parent key="A">
136 - ▾ <div>
137 - ▾ <Child key="0">
138 - <div>
139 - ▾ <Child key="1">
140 - <div>
141 - ▾ <Child key="2">
142 - <div>
143 -[root]
144 - ▾ <Parent key="B">
145 - ▾ <div>
146 - ▾ <Child key="0">
147 - <div>
148 - ▾ <Child key="1">
149 - <div>
150 -`;
151 -
152 -exports[`Store (legacy) collapseNodesByDefault:false should support mount and update operations for multiple roots: 2: update 1`] = `
153 -[root]
154 - ▾ <Parent key="A">
155 - ▾ <div>
156 - ▾ <Child key="0">
157 - <div>
158 - ▾ <Child key="1">
159 - <div>
160 - ▾ <Child key="2">
161 - <div>
162 - ▾ <Child key="3">
163 - <div>
164 -[root]
165 - ▾ <Parent key="B">
166 - ▾ <div>
167 - ▾ <Child key="0">
168 - <div>
169 -`;
170 -
171 -exports[`Store (legacy) collapseNodesByDefault:false should support mount and update operations for multiple roots: 3: unmount B 1`] = `
172 -[root]
173 - ▾ <Parent key="A">
174 - ▾ <div>
175 - ▾ <Child key="0">
176 - <div>
177 - ▾ <Child key="1">
178 - <div>
179 - ▾ <Child key="2">
180 - <div>
181 - ▾ <Child key="3">
182 - <div>
183 -`;
184 -
185 -exports[`Store (legacy) collapseNodesByDefault:false should support mount and update operations for multiple roots: 4: unmount A 1`] = ``;
186 -
187 -exports[`Store (legacy) collapseNodesByDefault:false should support mount and update operations: 1: mount 1`] = `
188 -[root]
189 - ▾ <Grandparent>
190 - ▾ <div>
191 - ▾ <Parent>
192 - ▾ <div>
193 - ▾ <Child key="0">
194 - <div>
195 - ▾ <Child key="1">
196 - <div>
197 - ▾ <Child key="2">
198 - <div>
199 - ▾ <Child key="3">
200 - <div>
201 - ▾ <Parent>
202 - ▾ <div>
203 - ▾ <Child key="0">
204 - <div>
205 - ▾ <Child key="1">
206 - <div>
207 - ▾ <Child key="2">
208 - <div>
209 - ▾ <Child key="3">
210 - <div>
211 -`;
212 -
213 -exports[`Store (legacy) collapseNodesByDefault:false should support mount and update operations: 2: update 1`] = `
214 -[root]
215 - ▾ <Grandparent>
216 - ▾ <div>
217 - ▾ <Parent>
218 - ▾ <div>
219 - ▾ <Child key="0">
220 - <div>
221 - ▾ <Child key="1">
222 - <div>
223 - ▾ <Parent>
224 - ▾ <div>
225 - ▾ <Child key="0">
226 - <div>
227 - ▾ <Child key="1">
228 - <div>
229 -`;
230 -
231 -exports[`Store (legacy) collapseNodesByDefault:false should support mount and update operations: 3: unmount 1`] = ``;
232 -
233 -exports[`Store (legacy) collapseNodesByDefault:false should support reordering of children: 1: mount 1`] = `
234 -[root]
235 - ▾ <Root>
236 - ▾ <div>
237 - ▾ <Foo key="foo">
238 - ▾ <div>
239 - ▾ <Component key="0">
240 - <div>
241 - ▾ <Bar key="bar">
242 - ▾ <div>
243 - ▾ <Component key="0">
244 - <div>
245 - ▾ <Component key="1">
246 - <div>
247 -`;
248 -
249 -exports[`Store (legacy) collapseNodesByDefault:false should support reordering of children: 2: reorder children 1`] = `
250 -[root]
251 - ▾ <Root>
252 - ▾ <div>
253 - ▾ <Bar key="bar">
254 - ▾ <div>
255 - ▾ <Component key="0">
256 - <div>
257 - ▾ <Component key="1">
258 - <div>
259 - ▾ <Foo key="foo">
260 - ▾ <div>
261 - ▾ <Component key="0">
262 - <div>
263 -`;
264 -
265 -exports[`Store (legacy) collapseNodesByDefault:false should support reordering of children: 3: collapse root 1`] = `
266 -[root]
267 - ▸ <Root>
268 -`;
269 -
270 -exports[`Store (legacy) collapseNodesByDefault:false should support reordering of children: 4: expand root 1`] = `
271 -[root]
272 - ▾ <Root>
273 - ▾ <div>
274 - ▾ <Bar key="bar">
275 - ▾ <div>
276 - ▾ <Component key="0">
277 - <div>
278 - ▾ <Component key="1">
279 - <div>
280 - ▾ <Foo key="foo">
281 - ▾ <div>
282 - ▾ <Component key="0">
283 - <div>
284 -`;
285 -
286 -exports[`Store (legacy) collapseNodesByDefault:true should not filter DOM nodes from the store tree: 1: mount 1`] = `
287 -[root]
288 - ▸ <Grandparent>
289 -`;
290 -
291 -exports[`Store (legacy) collapseNodesByDefault:true should not filter DOM nodes from the store tree: 2: expand Grandparent 1`] = `
292 -[root]
293 - ▾ <Grandparent>
294 - ▸ <div>
295 -`;
296 -
297 -exports[`Store (legacy) collapseNodesByDefault:true should not filter DOM nodes from the store tree: 3: expand div 1`] = `
298 -[root]
299 - ▾ <Grandparent>
300 - ▾ <div>
301 - ▸ <div>
302 - ▸ <Parent>
303 - <Nothing>
304 -`;
305 -
306 -exports[`Store (legacy) collapseNodesByDefault:true should not filter DOM nodes from the store tree: 4: final update 1`] = `
307 -[root]
308 - ▾ <Grandparent>
309 - ▾ <div>
310 - ▸ <div>
311 - ▸ <Parent>
312 - <Nothing>
313 -`;
314 -
315 -exports[`Store (legacy) collapseNodesByDefault:true should not filter DOM nodes from the store tree: 5: unmount 1`] = ``;
316 -
317 -exports[`Store (legacy) collapseNodesByDefault:true should support expanding deep parts of the tree: 1: mount 1`] = `
318 -[root]
319 - ▸ <Wrapper>
320 -`;
321 -
322 -exports[`Store (legacy) collapseNodesByDefault:true should support expanding deep parts of the tree: 2: expand deepest node 1`] = `
323 -[root]
324 - ▾ <Wrapper>
325 - ▾ <Nested>
326 - ▾ <Nested>
327 - ▾ <Nested>
328 - ▾ <Nested>
329 - <div>
330 -`;
331 -
332 -exports[`Store (legacy) collapseNodesByDefault:true should support expanding deep parts of the tree: 3: collapse root 1`] = `
333 -[root]
334 - ▸ <Wrapper>
335 -`;
336 -
337 -exports[`Store (legacy) collapseNodesByDefault:true should support expanding deep parts of the tree: 4: expand root 1`] = `
338 -[root]
339 - ▾ <Wrapper>
340 - ▾ <Nested>
341 - ▾ <Nested>
342 - ▾ <Nested>
343 - ▾ <Nested>
344 - <div>
345 -`;
346 -
347 -exports[`Store (legacy) collapseNodesByDefault:true should support expanding deep parts of the tree: 5: collapse middle node 1`] = `
348 -[root]
349 - ▾ <Wrapper>
350 - ▸ <Nested>
351 -`;
352 -
353 -exports[`Store (legacy) collapseNodesByDefault:true should support expanding deep parts of the tree: 6: expand middle node 1`] = `
354 -[root]
355 - ▾ <Wrapper>
356 - ▾ <Nested>
357 - ▾ <Nested>
358 - ▾ <Nested>
359 - ▾ <Nested>
360 - <div>
361 -`;
362 -
363 -exports[`Store (legacy) collapseNodesByDefault:true should support expanding parts of the tree: 1: mount 1`] = `
364 -[root]
365 - ▸ <Grandparent>
366 -`;
367 -
368 -exports[`Store (legacy) collapseNodesByDefault:true should support expanding parts of the tree: 2: expand Grandparent 1`] = `
369 -[root]
370 - ▾ <Grandparent>
371 - ▸ <div>
372 -`;
373 -
374 -exports[`Store (legacy) collapseNodesByDefault:true should support expanding parts of the tree: 3: expand parent div 1`] = `
375 -[root]
376 - ▾ <Grandparent>
377 - ▾ <div>
378 - ▸ <Parent>
379 - ▸ <Parent>
380 -`;
381 -
382 -exports[`Store (legacy) collapseNodesByDefault:true should support expanding parts of the tree: 4: expand first Parent 1`] = `
383 -[root]
384 - ▾ <Grandparent>
385 - ▾ <div>
386 - ▾ <Parent>
387 - ▸ <div>
388 - ▸ <Parent>
389 -`;
390 -
391 -exports[`Store (legacy) collapseNodesByDefault:true should support expanding parts of the tree: 5: expand second Parent 1`] = `
392 -[root]
393 - ▾ <Grandparent>
394 - ▾ <div>
395 - ▾ <Parent>
396 - ▸ <div>
397 - ▾ <Parent>
398 - ▸ <div>
399 -`;
400 -
401 -exports[`Store (legacy) collapseNodesByDefault:true should support expanding parts of the tree: 6: collapse first Parent 1`] = `
402 -[root]
403 - ▾ <Grandparent>
404 - ▾ <div>
405 - ▸ <Parent>
406 - ▾ <Parent>
407 - ▸ <div>
408 -`;
409 -
410 -exports[`Store (legacy) collapseNodesByDefault:true should support expanding parts of the tree: 7: collapse second Parent 1`] = `
411 -[root]
412 - ▾ <Grandparent>
413 - ▾ <div>
414 - ▸ <Parent>
415 - ▸ <Parent>
416 -`;
417 -
418 -exports[`Store (legacy) collapseNodesByDefault:true should support expanding parts of the tree: 8: collapse Grandparent 1`] = `
419 -[root]
420 - ▸ <Grandparent>
421 -`;
422 -
423 -exports[`Store (legacy) collapseNodesByDefault:true should support mount and update operations for multiple roots: 1: mount 1`] = `
424 -[root]
425 - ▸ <Parent key="A">
426 -[root]
427 - ▸ <Parent key="B">
428 -`;
429 -
430 -exports[`Store (legacy) collapseNodesByDefault:true should support mount and update operations for multiple roots: 2: update 1`] = `
431 -[root]
432 - ▸ <Parent key="A">
433 -[root]
434 - ▸ <Parent key="B">
435 -`;
436 -
437 -exports[`Store (legacy) collapseNodesByDefault:true should support mount and update operations for multiple roots: 3: unmount B 1`] = `
438 -[root]
439 - ▸ <Parent key="A">
440 -`;
441 -
442 -exports[`Store (legacy) collapseNodesByDefault:true should support mount and update operations for multiple roots: 4: unmount A 1`] = ``;
443 -
444 -exports[`Store (legacy) collapseNodesByDefault:true should support mount and update operations: 1: mount 1`] = `
445 -[root]
446 - ▸ <div>
447 -`;
448 -
449 -exports[`Store (legacy) collapseNodesByDefault:true should support mount and update operations: 2: update 1`] = `
450 -[root]
451 - ▸ <div>
452 -`;
453 -
454 -exports[`Store (legacy) collapseNodesByDefault:true should support mount and update operations: 3: unmount 1`] = ``;
455 -
456 -exports[`Store (legacy) collapseNodesByDefault:true should support reordering of children: 1: mount 1`] = `
457 -[root]
458 - ▸ <Root>
459 -`;
460 -
461 -exports[`Store (legacy) collapseNodesByDefault:true should support reordering of children: 2: reorder children 1`] = `
462 -[root]
463 - ▸ <Root>
464 -`;
465 -
466 -exports[`Store (legacy) collapseNodesByDefault:true should support reordering of children: 3: expand root 1`] = `
467 -[root]
468 - ▾ <Root>
469 - ▸ <div>
470 -`;
471 -
472 -exports[`Store (legacy) collapseNodesByDefault:true should support reordering of children: 4: expand div 1`] = `
473 -[root]
474 - ▾ <Root>
475 - ▾ <div>
476 - ▸ <Bar key="bar">
477 - ▸ <Foo key="foo">
478 -`;
479 -
480 -exports[`Store (legacy) collapseNodesByDefault:true should support reordering of children: 4: expand leaves 1`] = `
481 -[root]
482 - ▾ <Root>
483 - ▾ <div>
484 - ▾ <Bar key="bar">
485 - ▸ <div>
486 - ▾ <Foo key="foo">
487 - ▸ <div>
488 -`;
489 -
490 -exports[`Store (legacy) collapseNodesByDefault:true should support reordering of children: 5: collapse root 1`] = `
491 -[root]
492 - ▸ <Root>
493 -`;
494 -
495 -exports[`Store (legacy) should not allow a root node to be collapsed: 1: mount 1`] = `
496 -[root]
497 - ▾ <Component>
498 - <div>
499 -`;
packages/react-devtools-shared/src/__tests__/legacy/storeLegacy-v15-test.js
+442 -56
@@ -38,7 +38,11 @@ describe('Store (legacy)', () => {
38 act(() =>
39 ReactDOM.render(<Component count={4} />, document.createElement('div')),
40 );
41 - expect(store).toMatchSnapshot('1: mount');
41 + expect(store).toMatchInlineSnapshot(`
42 + [root]
43 + ▾ <Component>
44 + <div>
45 + `);
46
47 expect(store.roots).toHaveLength(1);
48
@@ -73,13 +77,53 @@ describe('Store (legacy)', () => {
77 const container = document.createElement('div');
78
79 act(() => ReactDOM.render(<Grandparent count={4} />, container));
76 - expect(store).toMatchSnapshot('1: mount');
80 + expect(store).toMatchInlineSnapshot(`
81 + [root]
82 + ▾ <Grandparent>
83 + ▾ <div>
84 + ▾ <Parent>
85 + ▾ <div>
86 + ▾ <Child key="0">
87 + <div>
88 + ▾ <Child key="1">
89 + <div>
90 + ▾ <Child key="2">
91 + <div>
92 + ▾ <Child key="3">
93 + <div>
94 + ▾ <Parent>
95 + ▾ <div>
96 + ▾ <Child key="0">
97 + <div>
98 + ▾ <Child key="1">
99 + <div>
100 + ▾ <Child key="2">
101 + <div>
102 + ▾ <Child key="3">
103 + <div>
104 + `);
105
106 act(() => ReactDOM.render(<Grandparent count={2} />, container));
79 - expect(store).toMatchSnapshot('2: update');
107 + expect(store).toMatchInlineSnapshot(`
108 + [root]
109 + ▾ <Grandparent>
110 + ▾ <div>
111 + ▾ <Parent>
112 + ▾ <div>
113 + ▾ <Child key="0">
114 + <div>
115 + ▾ <Child key="1">
116 + <div>
117 + ▾ <Parent>
118 + ▾ <div>
119 + ▾ <Child key="0">
120 + <div>
121 + ▾ <Child key="1">
122 + <div>
123 + `);
124
125 act(() => ReactDOM.unmountComponentAtNode(container));
82 - expect(store).toMatchSnapshot('3: unmount');
126 + expect(store).toMatchInlineSnapshot(``);
127 });
128
129 it('should support mount and update operations for multiple roots', () => {
@@ -99,19 +143,65 @@ describe('Store (legacy)', () => {
143 ReactDOM.render(<Parent key="A" count={3} />, containerA);
144 ReactDOM.render(<Parent key="B" count={2} />, containerB);
145 });
102 - expect(store).toMatchSnapshot('1: mount');
146 + expect(store).toMatchInlineSnapshot(`
147 + [root]
148 + ▾ <Parent key="A">
149 + ▾ <div>
150 + ▾ <Child key="0">
151 + <div>
152 + ▾ <Child key="1">
153 + <div>
154 + ▾ <Child key="2">
155 + <div>
156 + [root]
157 + ▾ <Parent key="B">
158 + ▾ <div>
159 + ▾ <Child key="0">
160 + <div>
161 + ▾ <Child key="1">
162 + <div>
163 + `);
164
165 act(() => {
166 ReactDOM.render(<Parent key="A" count={4} />, containerA);
167 ReactDOM.render(<Parent key="B" count={1} />, containerB);
168 });
108 - expect(store).toMatchSnapshot('2: update');
169 + expect(store).toMatchInlineSnapshot(`
170 + [root]
171 + ▾ <Parent key="A">
172 + ▾ <div>
173 + ▾ <Child key="0">
174 + <div>
175 + ▾ <Child key="1">
176 + <div>
177 + ▾ <Child key="2">
178 + <div>
179 + ▾ <Child key="3">
180 + <div>
181 + [root]
182 + ▾ <Parent key="B">
183 + ▾ <div>
184 + ▾ <Child key="0">
185 + <div>
186 + `);
187
188 act(() => ReactDOM.unmountComponentAtNode(containerB));
111 - expect(store).toMatchSnapshot('3: unmount B');
189 + expect(store).toMatchInlineSnapshot(`
190 + [root]
191 + ▾ <Parent key="A">
192 + ▾ <div>
193 + ▾ <Child key="0">
194 + <div>
195 + ▾ <Child key="1">
196 + <div>
197 + ▾ <Child key="2">
198 + <div>
199 + ▾ <Child key="3">
200 + <div>
201 + `);
202
203 act(() => ReactDOM.unmountComponentAtNode(containerA));
114 - expect(store).toMatchSnapshot('4: unmount A');
204 + expect(store).toMatchInlineSnapshot(``);
205 });
206
207 it('should not filter DOM nodes from the store tree', () => {
@@ -139,15 +229,43 @@ describe('Store (legacy)', () => {
229 act(() =>
230 ReactDOM.render(<Grandparent count={4} flip={false} />, container),
231 );
142 - expect(store).toMatchSnapshot('1: mount');
232 + expect(store).toMatchInlineSnapshot(`
233 + [root]
234 + ▾ <Grandparent>
235 + ▾ <div>
236 + ▾ <div>
237 + ▾ <Parent>
238 + ▾ <div>
239 + ▾ <Child>
240 + <div>
241 + ▾ <Parent>
242 + ▾ <div>
243 + ▾ <Child>
244 + <div>
245 + <Nothing>
246 + `);
247
248 act(() =>
249 ReactDOM.render(<Grandparent count={4} flip={true} />, container),
250 );
147 - expect(store).toMatchSnapshot('2: update');
251 + expect(store).toMatchInlineSnapshot(`
252 + [root]
253 + ▾ <Grandparent>
254 + ▾ <div>
255 + ▾ <div>
256 + ▾ <Parent>
257 + ▾ <div>
258 + ▾ <Child>
259 + <div>
260 + ▾ <Parent>
261 + ▾ <div>
262 + ▾ <Child>
263 + <div>
264 + <Nothing>
265 + `);
266
267 act(() => ReactDOM.unmountComponentAtNode(container));
150 - expect(store).toMatchSnapshot('5: unmount');
268 + expect(store).toMatchInlineSnapshot(``);
269 });
270
271 it('should support collapsing parts of the tree', () => {
@@ -172,26 +290,84 @@ describe('Store (legacy)', () => {
290 document.createElement('div'),
291 ),
292 );
175 - expect(store).toMatchSnapshot('1: mount');
293 + expect(store).toMatchInlineSnapshot(`
294 + [root]
295 + ▾ <Grandparent>
296 + ▾ <div>
297 + ▾ <Parent>
298 + ▾ <div>
299 + ▾ <Child key="0">
300 + <div>
301 + ▾ <Child key="1">
302 + <div>
303 + ▾ <Parent>
304 + ▾ <div>
305 + ▾ <Child key="0">
306 + <div>
307 + ▾ <Child key="1">
308 + <div>
309 + `);
310
311 const grandparentID = store.getElementIDAtIndex(0);
312 const parentOneID = store.getElementIDAtIndex(2);
313 const parentTwoID = store.getElementIDAtIndex(8);
314
315 act(() => store.toggleIsCollapsed(parentOneID, true));
182 - expect(store).toMatchSnapshot('2: collapse first Parent');
316 + expect(store).toMatchInlineSnapshot(`
317 + [root]
318 + ▾ <Grandparent>
319 + ▾ <div>
320 + ▸ <Parent>
321 + ▾ <Parent>
322 + ▾ <div>
323 + ▾ <Child key="0">
324 + <div>
325 + ▾ <Child key="1">
326 + <div>
327 + `);
328
329 act(() => store.toggleIsCollapsed(parentTwoID, true));
185 - expect(store).toMatchSnapshot('3: collapse second Parent');
330 + expect(store).toMatchInlineSnapshot(`
331 + [root]
332 + ▾ <Grandparent>
333 + ▾ <div>
334 + ▸ <Parent>
335 + ▸ <Parent>
336 + `);
337
338 act(() => store.toggleIsCollapsed(parentOneID, false));
188 - expect(store).toMatchSnapshot('4: expand first Parent');
339 + expect(store).toMatchInlineSnapshot(`
340 + [root]
341 + ▾ <Grandparent>
342 + ▾ <div>
343 + ▾ <Parent>
344 + ▾ <div>
345 + ▾ <Child key="0">
346 + <div>
347 + ▾ <Child key="1">
348 + <div>
349 + ▸ <Parent>
350 + `);
351
352 act(() => store.toggleIsCollapsed(grandparentID, true));
191 - expect(store).toMatchSnapshot('5: collapse Grandparent');
353 + expect(store).toMatchInlineSnapshot(`
354 + [root]
355 + ▸ <Grandparent>
356 + `);
357
358 act(() => store.toggleIsCollapsed(grandparentID, false));
194 - expect(store).toMatchSnapshot('6: expand Grandparent');
359 + expect(store).toMatchInlineSnapshot(`
360 + [root]
361 + ▾ <Grandparent>
362 + ▾ <div>
363 + ▾ <Parent>
364 + ▾ <div>
365 + ▾ <Child key="0">
366 + <div>
367 + ▾ <Child key="1">
368 + <div>
369 + ▸ <Parent>
370 + `);
371 });
372
373 it('should support adding and removing children', () => {
@@ -208,7 +384,13 @@ describe('Store (legacy)', () => {
384 container,
385 ),
386 );
211 - expect(store).toMatchSnapshot('1: mount');
387 + expect(store).toMatchInlineSnapshot(`
388 + [root]
389 + ▾ <Root>
390 + ▾ <div>
391 + ▾ <Component key="a">
392 + <div>
393 + `);
394
395 act(() =>
396 ReactDOM.render(
@@ -219,7 +401,15 @@ describe('Store (legacy)', () => {
401 container,
402 ),
403 );
222 - expect(store).toMatchSnapshot('2: add child');
404 + expect(store).toMatchInlineSnapshot(`
405 + [root]
406 + ▾ <Root>
407 + ▾ <div>
408 + ▾ <Component key="a">
409 + <div>
410 + ▾ <Component key="b">
411 + <div>
412 + `);
413
414 act(() =>
415 ReactDOM.render(
@@ -229,7 +419,13 @@ describe('Store (legacy)', () => {
419 container,
420 ),
421 );
232 - expect(store).toMatchSnapshot('3: remove child');
422 + expect(store).toMatchInlineSnapshot(`
423 + [root]
424 + ▾ <Root>
425 + ▾ <div>
426 + ▾ <Component key="b">
427 + <div>
428 + `);
429 });
430
431 it('should support reordering of children', () => {
@@ -246,16 +442,61 @@ describe('Store (legacy)', () => {
442 const container = document.createElement('div');
443
444 act(() => ReactDOM.render(<Root>{[foo, bar]}</Root>, container));
249 - expect(store).toMatchSnapshot('1: mount');
445 + expect(store).toMatchInlineSnapshot(`
446 + [root]
447 + ▾ <Root>
448 + ▾ <div>
449 + ▾ <Foo key="foo">
450 + ▾ <div>
451 + ▾ <Component key="0">
452 + <div>
453 + ▾ <Bar key="bar">
454 + ▾ <div>
455 + ▾ <Component key="0">
456 + <div>
457 + ▾ <Component key="1">
458 + <div>
459 + `);
460
461 act(() => ReactDOM.render(<Root>{[bar, foo]}</Root>, container));
252 - expect(store).toMatchSnapshot('2: reorder children');
462 + expect(store).toMatchInlineSnapshot(`
463 + [root]
464 + ▾ <Root>
465 + ▾ <div>
466 + ▾ <Bar key="bar">
467 + ▾ <div>
468 + ▾ <Component key="0">
469 + <div>
470 + ▾ <Component key="1">
471 + <div>
472 + ▾ <Foo key="foo">
473 + ▾ <div>
474 + ▾ <Component key="0">
475 + <div>
476 + `);
477
478 act(() => store.toggleIsCollapsed(store.getElementIDAtIndex(0), true));
255 - expect(store).toMatchSnapshot('3: collapse root');
479 + expect(store).toMatchInlineSnapshot(`
480 + [root]
481 + ▸ <Root>
482 + `);
483
484 act(() => store.toggleIsCollapsed(store.getElementIDAtIndex(0), false));
258 - expect(store).toMatchSnapshot('4: expand root');
485 + expect(store).toMatchInlineSnapshot(`
486 + [root]
487 + ▾ <Root>
488 + ▾ <div>
489 + ▾ <Bar key="bar">
490 + ▾ <div>
491 + ▾ <Component key="0">
492 + <div>
493 + ▾ <Component key="1">
494 + <div>
495 + ▾ <Foo key="foo">
496 + ▾ <div>
497 + ▾ <Component key="0">
498 + <div>
499 + `);
500 });
501 });
502
@@ -285,7 +526,10 @@ describe('Store (legacy)', () => {
526 container,
527 ),
528 );
288 - expect(store).toMatchSnapshot('1: mount');
529 + expect(store).toMatchInlineSnapshot(`
530 + [root]
531 + ▸ <div>
532 + `);
533
534 act(() =>
535 ReactDOM.render(
@@ -296,10 +540,13 @@ describe('Store (legacy)', () => {
540 container,
541 ),
542 );
299 - expect(store).toMatchSnapshot('2: update');
543 + expect(store).toMatchInlineSnapshot(`
544 + [root]
545 + ▸ <div>
546 + `);
547
548 act(() => ReactDOM.unmountComponentAtNode(container));
302 - expect(store).toMatchSnapshot('3: unmount');
549 + expect(store).toMatchInlineSnapshot(``);
550 });
551
552 it('should support mount and update operations for multiple roots', () => {
@@ -319,19 +566,32 @@ describe('Store (legacy)', () => {
566 ReactDOM.render(<Parent key="A" count={3} />, containerA);
567 ReactDOM.render(<Parent key="B" count={2} />, containerB);
568 });
322 - expect(store).toMatchSnapshot('1: mount');
569 + expect(store).toMatchInlineSnapshot(`
570 + [root]
571 + ▸ <Parent key="A">
572 + [root]
573 + ▸ <Parent key="B">
574 + `);
575
576 act(() => {
577 ReactDOM.render(<Parent key="A" count={4} />, containerA);
578 ReactDOM.render(<Parent key="B" count={1} />, containerB);
579 });
328 - expect(store).toMatchSnapshot('2: update');
580 + expect(store).toMatchInlineSnapshot(`
581 + [root]
582 + ▸ <Parent key="A">
583 + [root]
584 + ▸ <Parent key="B">
585 + `);
586
587 act(() => ReactDOM.unmountComponentAtNode(containerB));
331 - expect(store).toMatchSnapshot('3: unmount B');
588 + expect(store).toMatchInlineSnapshot(`
589 + [root]
590 + ▸ <Parent key="A">
591 + `);
592
593 act(() => ReactDOM.unmountComponentAtNode(containerA));
334 - expect(store).toMatchSnapshot('4: unmount A');
594 + expect(store).toMatchInlineSnapshot(``);
595 });
596
597 it('should not filter DOM nodes from the store tree', () => {
@@ -359,21 +619,42 @@ describe('Store (legacy)', () => {
619 act(() =>
620 ReactDOM.render(<Grandparent count={4} flip={false} />, container),
621 );
362 - expect(store).toMatchSnapshot('1: mount');
622 + expect(store).toMatchInlineSnapshot(`
623 + [root]
624 + ▸ <Grandparent>
625 + `);
626
627 act(() => store.toggleIsCollapsed(store.getElementIDAtIndex(0), false));
365 - expect(store).toMatchSnapshot('2: expand Grandparent');
628 + expect(store).toMatchInlineSnapshot(`
629 + [root]
630 + ▾ <Grandparent>
631 + ▸ <div>
632 + `);
633
634 act(() => store.toggleIsCollapsed(store.getElementIDAtIndex(1), false));
368 - expect(store).toMatchSnapshot('3: expand div');
635 + expect(store).toMatchInlineSnapshot(`
636 + [root]
637 + ▾ <Grandparent>
638 + ▾ <div>
639 + ▸ <div>
640 + ▸ <Parent>
641 + <Nothing>
642 + `);
643
644 act(() =>
645 ReactDOM.render(<Grandparent count={4} flip={true} />, container),
646 );
373 - expect(store).toMatchSnapshot('4: final update');
647 + expect(store).toMatchInlineSnapshot(`
648 + [root]
649 + ▾ <Grandparent>
650 + ▾ <div>
651 + ▸ <div>
652 + ▸ <Parent>
653 + <Nothing>
654 + `);
655
656 act(() => ReactDOM.unmountComponentAtNode(container));
376 - expect(store).toMatchSnapshot('5: unmount');
657 + expect(store).toMatchInlineSnapshot(``);
658 });
659
660 it('should support expanding parts of the tree', () => {
@@ -398,34 +679,78 @@ describe('Store (legacy)', () => {
679 document.createElement('div'),
680 ),
681 );
401 - expect(store).toMatchSnapshot('1: mount');
682 + expect(store).toMatchInlineSnapshot(`
683 + [root]
684 + ▸ <Grandparent>
685 + `);
686
687 const grandparentID = store.getElementIDAtIndex(0);
688
689 act(() => store.toggleIsCollapsed(grandparentID, false));
406 - expect(store).toMatchSnapshot('2: expand Grandparent');
690 + expect(store).toMatchInlineSnapshot(`
691 + [root]
692 + ▾ <Grandparent>
693 + ▸ <div>
694 + `);
695
696 const parentDivID = store.getElementIDAtIndex(1);
697 act(() => store.toggleIsCollapsed(parentDivID, false));
410 - expect(store).toMatchSnapshot('3: expand parent div');
698 + expect(store).toMatchInlineSnapshot(`
699 + [root]
700 + ▾ <Grandparent>
701 + ▾ <div>
702 + ▸ <Parent>
703 + ▸ <Parent>
704 + `);
705
706 const parentOneID = store.getElementIDAtIndex(2);
707 const parentTwoID = store.getElementIDAtIndex(3);
708
709 act(() => store.toggleIsCollapsed(parentOneID, false));
416 - expect(store).toMatchSnapshot('4: expand first Parent');
710 + expect(store).toMatchInlineSnapshot(`
711 + [root]
712 + ▾ <Grandparent>
713 + ▾ <div>
714 + ▾ <Parent>
715 + ▸ <div>
716 + ▸ <Parent>
717 + `);
718
719 act(() => store.toggleIsCollapsed(parentTwoID, false));
419 - expect(store).toMatchSnapshot('5: expand second Parent');
720 + expect(store).toMatchInlineSnapshot(`
721 + [root]
722 + ▾ <Grandparent>
723 + ▾ <div>
724 + ▾ <Parent>
725 + ▸ <div>
726 + ▾ <Parent>
727 + ▸ <div>
728 + `);
729
730 act(() => store.toggleIsCollapsed(parentOneID, true));
422 - expect(store).toMatchSnapshot('6: collapse first Parent');
731 + expect(store).toMatchInlineSnapshot(`
732 + [root]
733 + ▾ <Grandparent>
734 + ▾ <div>
735 + ▸ <Parent>
736 + ▾ <Parent>
737 + ▸ <div>
738 + `);
739
740 act(() => store.toggleIsCollapsed(parentTwoID, true));
425 - expect(store).toMatchSnapshot('7: collapse second Parent');
741 + expect(store).toMatchInlineSnapshot(`
742 + [root]
743 + ▾ <Grandparent>
744 + ▾ <div>
745 + ▸ <Parent>
746 + ▸ <Parent>
747 + `);
748
749 act(() => store.toggleIsCollapsed(grandparentID, true));
428 - expect(store).toMatchSnapshot('8: collapse Grandparent');
750 + expect(store).toMatchInlineSnapshot(`
751 + [root]
752 + ▸ <Grandparent>
753 + `);
754 });
755
756 it('should support expanding deep parts of the tree', () => {
@@ -450,28 +775,62 @@ describe('Store (legacy)', () => {
775 document.createElement('div'),
776 ),
777 );
453 - expect(store).toMatchSnapshot('1: mount');
778 + expect(store).toMatchInlineSnapshot(`
779 + [root]
780 + ▸ <Wrapper>
781 + `);
782
783 const deepestedNodeID = global.agent.getIDForNode(ref);
784
785 act(() => store.toggleIsCollapsed(deepestedNodeID, false));
458 - expect(store).toMatchSnapshot('2: expand deepest node');
786 + expect(store).toMatchInlineSnapshot(`
787 + [root]
788 + ▾ <Wrapper>
789 + ▾ <Nested>
790 + ▾ <Nested>
791 + ▾ <Nested>
792 + ▾ <Nested>
793 + <div>
794 + `);
795
796 const rootID = store.getElementIDAtIndex(0);
797
798 act(() => store.toggleIsCollapsed(rootID, true));
463 - expect(store).toMatchSnapshot('3: collapse root');
799 + expect(store).toMatchInlineSnapshot(`
800 + [root]
801 + ▸ <Wrapper>
802 + `);
803
804 act(() => store.toggleIsCollapsed(rootID, false));
466 - expect(store).toMatchSnapshot('4: expand root');
805 + expect(store).toMatchInlineSnapshot(`
806 + [root]
807 + ▾ <Wrapper>
808 + ▾ <Nested>
809 + ▾ <Nested>
810 + ▾ <Nested>
811 + ▾ <Nested>
812 + <div>
813 + `);
814
815 const id = store.getElementIDAtIndex(1);
816
817 act(() => store.toggleIsCollapsed(id, true));
471 - expect(store).toMatchSnapshot('5: collapse middle node');
818 + expect(store).toMatchInlineSnapshot(`
819 + [root]
820 + ▾ <Wrapper>
821 + ▸ <Nested>
822 + `);
823
824 act(() => store.toggleIsCollapsed(id, false));
474 - expect(store).toMatchSnapshot('6: expand middle node');
825 + expect(store).toMatchInlineSnapshot(`
826 + [root]
827 + ▾ <Wrapper>
828 + ▾ <Nested>
829 + ▾ <Nested>
830 + ▾ <Nested>
831 + ▾ <Nested>
832 + <div>
833 + `);
834 });
835
836 it('should support reordering of children', () => {
@@ -488,25 +847,52 @@ describe('Store (legacy)', () => {
847 const container = document.createElement('div');
848
849 act(() => ReactDOM.render(<Root>{[foo, bar]}</Root>, container));
491 - expect(store).toMatchSnapshot('1: mount');
850 + expect(store).toMatchInlineSnapshot(`
851 + [root]
852 + ▸ <Root>
853 + `);
854
855 act(() => ReactDOM.render(<Root>{[bar, foo]}</Root>, container));
494 - expect(store).toMatchSnapshot('2: reorder children');
856 + expect(store).toMatchInlineSnapshot(`
857 + [root]
858 + ▸ <Root>
859 + `);
860
861 act(() => store.toggleIsCollapsed(store.getElementIDAtIndex(0), false));
497 - expect(store).toMatchSnapshot('3: expand root');
862 + expect(store).toMatchInlineSnapshot(`
863 + [root]
864 + ▾ <Root>
865 + ▸ <div>
866 + `);
867
868 act(() => store.toggleIsCollapsed(store.getElementIDAtIndex(1), false));
500 - expect(store).toMatchSnapshot('4: expand div');
869 + expect(store).toMatchInlineSnapshot(`
870 + [root]
871 + ▾ <Root>
872 + ▾ <div>
873 + ▸ <Bar key="bar">
874 + ▸ <Foo key="foo">
875 + `);
876
877 act(() => {
878 store.toggleIsCollapsed(store.getElementIDAtIndex(3), false);
879 store.toggleIsCollapsed(store.getElementIDAtIndex(2), false);
880 });
506 - expect(store).toMatchSnapshot('4: expand leaves');
881 + expect(store).toMatchInlineSnapshot(`
882 + [root]
883 + ▾ <Root>
884 + ▾ <div>
885 + ▾ <Bar key="bar">
886 + ▸ <div>
887 + ▾ <Foo key="foo">
888 + ▸ <div>
889 + `);
890
891 act(() => store.toggleIsCollapsed(store.getElementIDAtIndex(0), true));
509 - expect(store).toMatchSnapshot('5: collapse root');
892 + expect(store).toMatchInlineSnapshot(`
893 + [root]
894 + ▸ <Root>
895 + `);
896 });
897 });
898
packages/react-devtools-shared/src/__tests__/ownersListContext-test.js
+82 -102
@@ -61,6 +61,31 @@ describe('OwnersListContext', () => {
61 </BridgeContext.Provider>
62 );
63
64 + async function getOwnersListForOwner(owner) {
65 + let ownerDisplayNames = null;
66 +
67 + function Suspender() {
68 + const read = React.useContext(OwnersListContext);
69 + const owners = read(owner.id);
70 + ownerDisplayNames = owners.map(({displayName}) => displayName);
71 + return null;
72 + }
73 +
74 + await utils.actAsync(() =>
75 + TestRenderer.create(
76 + <Contexts defaultOwnerID={owner.id}>
77 + <React.Suspense fallback={null}>
78 + <Suspender owner={owner} />
79 + </React.Suspense>
80 + </Contexts>,
81 + ),
82 + );
83 +
84 + expect(ownerDisplayNames).not.toBeNull();
85 +
86 + return ownerDisplayNames;
87 + }
88 +
89 it('should fetch the owners list for the selected element', async () => {
90 const Grandparent = () => <Parent />;
91 const Parent = () => {
@@ -77,45 +102,31 @@ describe('OwnersListContext', () => {
102 legacyRender(<Grandparent />, document.createElement('div')),
103 );
104
80 - expect(store).toMatchSnapshot('mount');
105 + expect(store).toMatchInlineSnapshot(`
106 + [root]
107 + ▾ <Grandparent>
108 + ▾ <Parent>
109 + <Child>
110 + <Child>
111 + `);
112
113 const parent = ((store.getElementAtIndex(1): any): Element);
114 const firstChild = ((store.getElementAtIndex(2): any): Element);
115
85 - let didFinish = false;
86 -
87 - function Suspender({owner}) {
88 - const read = React.useContext(OwnersListContext);
89 - const owners = read(owner.id);
90 - expect(owners).toMatchSnapshot(
91 - `owners for "${(owner && owner.displayName) || ''}"`,
92 - );
93 - didFinish = true;
94 - return null;
95 - }
96 -
97 - await utils.actAsync(() =>
98 - TestRenderer.create(
99 - <Contexts defaultOwnerID={parent.id}>
100 - <React.Suspense fallback={null}>
101 - <Suspender owner={parent} />
102 - </React.Suspense>
103 - </Contexts>,
104 - ),
105 - );
106 - expect(didFinish).toBe(true);
107 -
108 - didFinish = false;
109 - await utils.actAsync(() =>
110 - TestRenderer.create(
111 - <Contexts defaultOwnerID={firstChild.id}>
112 - <React.Suspense fallback={null}>
113 - <Suspender owner={firstChild} />
114 - </React.Suspense>
115 - </Contexts>,
116 - ),
117 - );
118 - expect(didFinish).toBe(true);
116 + expect(await getOwnersListForOwner(parent)).toMatchInlineSnapshot(`
117 + Array [
118 + "Grandparent",
119 + "Parent",
120 + ]
121 + `);
122 +
123 + expect(await getOwnersListForOwner(firstChild)).toMatchInlineSnapshot(`
124 + Array [
125 + "Grandparent",
126 + "Parent",
127 + "Child",
128 + ]
129 + `);
130 });
131
132 it('should fetch the owners list for the selected element that includes filtered components', async () => {
@@ -136,32 +147,22 @@ describe('OwnersListContext', () => {
147 legacyRender(<Grandparent />, document.createElement('div')),
148 );
149
139 - expect(store).toMatchSnapshot('mount');
150 + expect(store).toMatchInlineSnapshot(`
151 + [root]
152 + ▾ <Grandparent>
153 + <Child>
154 + <Child>
155 + `);
156
157 const firstChild = ((store.getElementAtIndex(1): any): Element);
158
143 - let didFinish = false;
144 -
145 - function Suspender({owner}) {
146 - const read = React.useContext(OwnersListContext);
147 - const owners = read(owner.id);
148 - expect(owners).toMatchSnapshot(
149 - `owners for "${(owner && owner.displayName) || ''}"`,
150 - );
151 - didFinish = true;
152 - return null;
153 - }
154 -
155 - await utils.actAsync(() =>
156 - TestRenderer.create(
157 - <Contexts defaultOwnerID={firstChild.id}>
158 - <React.Suspense fallback={null}>
159 - <Suspender owner={firstChild} />
160 - </React.Suspense>
161 - </Contexts>,
162 - ),
163 - );
164 - expect(didFinish).toBe(true);
159 + expect(await getOwnersListForOwner(firstChild)).toMatchInlineSnapshot(`
160 + Array [
161 + "Grandparent",
162 + "Parent",
163 + "Child",
164 + ]
165 + `);
166 });
167
168 it('should include the current element even if there are no other owners', async () => {
@@ -174,32 +175,18 @@ describe('OwnersListContext', () => {
175 legacyRender(<Grandparent />, document.createElement('div')),
176 );
177
177 - expect(store).toMatchSnapshot('mount');
178 + expect(store).toMatchInlineSnapshot(`
179 + [root]
180 + <Grandparent>
181 + `);
182
183 const grandparent = ((store.getElementAtIndex(0): any): Element);
184
181 - let didFinish = false;
182 -
183 - function Suspender({owner}) {
184 - const read = React.useContext(OwnersListContext);
185 - const owners = read(owner.id);
186 - expect(owners).toMatchSnapshot(
187 - `owners for "${(owner && owner.displayName) || ''}"`,
188 - );
189 - didFinish = true;
190 - return null;
191 - }
192 -
193 - await utils.actAsync(() =>
194 - TestRenderer.create(
195 - <Contexts defaultOwnerID={grandparent.id}>
196 - <React.Suspense fallback={null}>
197 - <Suspender owner={grandparent} />
198 - </React.Suspense>
199 - </Contexts>,
200 - ),
201 - );
202 - expect(didFinish).toBe(true);
185 + expect(await getOwnersListForOwner(grandparent)).toMatchInlineSnapshot(`
186 + Array [
187 + "Grandparent",
188 + ]
189 + `);
190 });
191
192 it('should include all owners for a component wrapped in react memo', async () => {
@@ -215,28 +202,21 @@ describe('OwnersListContext', () => {
202 legacyRender(<Grandparent />, document.createElement('div')),
203 );
204
218 - let didFinish = false;
219 - function Suspender({owner}) {
220 - const read = React.useContext(OwnersListContext);
221 - const owners = read(owner.id);
222 - didFinish = true;
223 - expect(owners.length).toBe(3);
224 - expect(owners).toMatchSnapshot(
225 - `owners for "${(owner && owner.displayName) || ''}"`,
226 - );
227 - return null;
228 - }
205 + expect(store).toMatchInlineSnapshot(`
206 + [root]
207 + ▾ <Grandparent>
208 + ▾ <InnerComponent> [Memo]
209 + <InnerComponent> [ForwardRef]
210 + `);
211
212 const wrapped = ((store.getElementAtIndex(2): any): Element);
231 - await utils.actAsync(() =>
232 - TestRenderer.create(
233 - <Contexts defaultOwnerID={wrapped.id}>
234 - <React.Suspense fallback={null}>
235 - <Suspender owner={wrapped} />
236 - </React.Suspense>
237 - </Contexts>,
238 - ),
239 - );
240 - expect(didFinish).toBe(true);
213 +
214 + expect(await getOwnersListForOwner(wrapped)).toMatchInlineSnapshot(`
215 + Array [
216 + "Grandparent",
217 + "InnerComponent",
218 + "InnerComponent",
219 + ]
220 + `);
221 });
222 });
packages/react-devtools-shared/src/__tests__/profilerContext-test.js
+35 -5
@@ -153,7 +153,14 @@ describe('ProfilerContext', () => {
153 const containerTwo = document.createElement('div');
154 utils.act(() => legacyRender(<Parent />, containerOne));
155 utils.act(() => legacyRender(<Parent />, containerTwo));
156 - expect(store).toMatchSnapshot('mounted');
156 + expect(store).toMatchInlineSnapshot(`
157 + [root]
158 + ▾ <Parent>
159 + <Child>
160 + [root]
161 + ▾ <Parent>
162 + <Child>
163 + `);
164
165 // Profile and record updates to both roots.
166 await utils.actAsync(() => store.profilerStore.startProfiling());
@@ -192,7 +199,14 @@ describe('ProfilerContext', () => {
199 const containerTwo = document.createElement('div');
200 utils.act(() => legacyRender(<Parent />, containerOne));
201 utils.act(() => legacyRender(<Parent />, containerTwo));
195 - expect(store).toMatchSnapshot('mounted');
202 + expect(store).toMatchInlineSnapshot(`
203 + [root]
204 + ▾ <Parent>
205 + <Child>
206 + [root]
207 + ▾ <Parent>
208 + <Child>
209 + `);
210
211 // Profile and record updates to only the first root.
212 await utils.actAsync(() => store.profilerStore.startProfiling());
@@ -231,7 +245,14 @@ describe('ProfilerContext', () => {
245 const containerB = document.createElement('div');
246 utils.act(() => legacyRender(<Parent />, containerA));
247 utils.act(() => legacyRender(<Parent />, containerB));
234 - expect(store).toMatchSnapshot('mounted');
248 + expect(store).toMatchInlineSnapshot(`
249 + [root]
250 + ▾ <Parent>
251 + <Child>
252 + [root]
253 + ▾ <Parent>
254 + <Child>
255 + `);
256
257 // Profile and record updates.
258 await utils.actAsync(() => store.profilerStore.startProfiling());
@@ -290,7 +311,12 @@ describe('ProfilerContext', () => {
311 utils.act(() =>
312 legacyRender(<GrandParent includeChild={true} />, container),
313 );
293 - expect(store).toMatchSnapshot('mounted');
314 + expect(store).toMatchInlineSnapshot(`
315 + [root]
316 + ▾ <GrandParent>
317 + ▾ <Parent>
318 + <Child>
319 + `);
320
321 const parentID = ((store.getElementIDAtIndex(1): any): number);
322 const childID = ((store.getElementIDAtIndex(2): any): number);
@@ -305,7 +331,11 @@ describe('ProfilerContext', () => {
331 );
332 await utils.actAsync(() => store.profilerStore.stopProfiling());
333
308 - expect(store).toMatchSnapshot('updated');
334 + expect(store).toMatchInlineSnapshot(`
335 + [root]
336 + ▾ <GrandParent>
337 + <Parent>
338 + `);
339
340 let context: Context = ((null: any): Context);
341 let selectedElementID = null;
packages/react-devtools-shared/src/__tests__/profilingCache-test.js
+461 -257
@@ -7,7 +7,6 @@
7 * @flow
8 */
9
10 -import typeof ReactTestRenderer from 'react-test-renderer';
10 import type {FrontendBridge} from 'react-devtools-shared/src/bridge';
11 import type Store from 'react-devtools-shared/src/devtools/store';
12
@@ -17,7 +16,6 @@ describe('ProfilingCache', () => {
16 let ReactDOM;
17 let ReactDOMClient;
18 let Scheduler;
20 - let TestRenderer: ReactTestRenderer;
19 let bridge: FrontendBridge;
20 let legacyRender;
21 let store: Store;
@@ -39,7 +37,6 @@ describe('ProfilingCache', () => {
37 ReactDOM = require('react-dom');
38 ReactDOMClient = require('react-dom/client');
39 Scheduler = require('scheduler');
42 - TestRenderer = utils.requireTestRenderer();
40 });
41
42 it('should collect data for each root (including ones added or mounted after profiling started)', () => {
@@ -61,68 +58,95 @@ describe('ProfilingCache', () => {
58 };
59 const MemoizedChild = React.memo(Child);
60
61 + const RootA = ({children}) => children;
62 + const RootB = ({children}) => children;
63 + const RootC = ({children}) => children;
64 +
65 const containerA = document.createElement('div');
66 const containerB = document.createElement('div');
67 const containerC = document.createElement('div');
68
68 - utils.act(() => legacyRender(<Parent count={2} />, containerA));
69 - utils.act(() => legacyRender(<Parent count={1} />, containerB));
69 + utils.act(() =>
70 + legacyRender(
71 + <RootA>
72 + <Parent count={2} />
73 + </RootA>,
74 + containerA,
75 + ),
76 + );
77 + utils.act(() =>
78 + legacyRender(
79 + <RootB>
80 + <Parent count={1} />
81 + </RootB>,
82 + containerB,
83 + ),
84 + );
85 utils.act(() => store.profilerStore.startProfiling());
71 - utils.act(() => legacyRender(<Parent count={3} />, containerA));
72 - utils.act(() => legacyRender(<Parent count={1} />, containerC));
73 - utils.act(() => legacyRender(<Parent count={1} />, containerA));
86 + utils.act(() =>
87 + legacyRender(
88 + <RootA>
89 + <Parent count={3} />
90 + </RootA>,
91 + containerA,
92 + ),
93 + );
94 + utils.act(() =>
95 + legacyRender(
96 + <RootC>
97 + <Parent count={1} />
98 + </RootC>,
99 + containerC,
100 + ),
101 + );
102 + utils.act(() =>
103 + legacyRender(
104 + <RootA>
105 + <Parent count={1} />
106 + </RootA>,
107 + containerA,
108 + ),
109 + );
110 utils.act(() => ReactDOM.unmountComponentAtNode(containerB));
75 - utils.act(() => legacyRender(<Parent count={0} />, containerA));
111 + utils.act(() =>
112 + legacyRender(
113 + <RootA>
114 + <Parent count={0} />
115 + </RootA>,
116 + containerA,
117 + ),
118 + );
119 utils.act(() => store.profilerStore.stopProfiling());
120 + utils.act(() => ReactDOM.unmountComponentAtNode(containerA));
121
78 - const allProfilingDataForRoots = [];
122 + const rootIDs = Array.from(
123 + store.profilerStore.profilingData.dataForRoots.values(),
124 + ).map(({rootID}) => rootID);
125 + expect(rootIDs).toHaveLength(3);
126
80 - function Validator({previousProfilingDataForRoot, rootID}) {
81 - const profilingDataForRoot = store.profilerStore.getDataForRoot(rootID);
82 - if (previousProfilingDataForRoot != null) {
83 - expect(profilingDataForRoot).toEqual(previousProfilingDataForRoot);
84 - } else {
85 - expect(profilingDataForRoot).toMatchSnapshot(
86 - `Data for root ${profilingDataForRoot.displayName}`,
87 - );
88 - }
89 - allProfilingDataForRoots.push(profilingDataForRoot);
90 - return null;
91 - }
127 + const originalProfilingDataForRoot = [];
128
93 - const dataForRoots =
94 - store.profilerStore.profilingData !== null
95 - ? store.profilerStore.profilingData.dataForRoots
96 - : null;
97 -
98 - expect(dataForRoots).not.toBeNull();
99 -
100 - if (dataForRoots !== null) {
101 - dataForRoots.forEach(dataForRoot => {
102 - utils.act(() =>
103 - TestRenderer.create(
104 - <Validator
105 - previousProfilingDataForRoot={null}
106 - rootID={dataForRoot.rootID}
107 - />,
108 - ),
109 - );
110 - });
111 - }
129 + let data = store.profilerStore.getDataForRoot(rootIDs[0]);
130 + expect(data.displayName).toMatchInlineSnapshot(`"RootA"`);
131 + expect(data.commitData).toHaveLength(3);
132 + originalProfilingDataForRoot.push(data);
133 +
134 + data = store.profilerStore.getDataForRoot(rootIDs[1]);
135 + expect(data.displayName).toMatchInlineSnapshot(`"RootC"`);
136 + expect(data.commitData).toHaveLength(1);
137 + originalProfilingDataForRoot.push(data);
138
113 - expect(allProfilingDataForRoots).toHaveLength(3);
139 + data = store.profilerStore.getDataForRoot(rootIDs[2]);
140 + expect(data.displayName).toMatchInlineSnapshot(`"RootB"`);
141 + expect(data.commitData).toHaveLength(1);
142 + originalProfilingDataForRoot.push(data);
143
144 utils.exportImportHelper(bridge, store);
145
117 - allProfilingDataForRoots.forEach(profilingDataForRoot => {
118 - utils.act(() =>
119 - TestRenderer.create(
120 - <Validator
121 - previousProfilingDataForRoot={profilingDataForRoot}
122 - rootID={profilingDataForRoot.rootID}
123 - />,
124 - ),
125 - );
146 + rootIDs.forEach((rootID, index) => {
147 + const current = store.profilerStore.getDataForRoot(rootID);
148 + const prev = originalProfilingDataForRoot[index];
149 + expect(current).toEqual(prev);
150 });
151 });
152
@@ -154,50 +178,20 @@ describe('ProfilingCache', () => {
178 utils.act(() => legacyRender(<Parent count={0} />, container));
179 utils.act(() => store.profilerStore.stopProfiling());
180
157 - const allCommitData = [];
158 -
159 - function Validator({commitIndex, previousCommitDetails, rootID}) {
160 - const commitData = store.profilerStore.getCommitData(rootID, commitIndex);
161 - if (previousCommitDetails != null) {
162 - expect(commitData).toEqual(previousCommitDetails);
163 - } else {
164 - allCommitData.push(commitData);
165 - expect(commitData).toMatchSnapshot(
166 - `CommitDetails commitIndex: ${commitIndex}`,
167 - );
168 - }
169 - return null;
170 - }
171 -
181 const rootID = store.roots[0];
182
174 - for (let commitIndex = 0; commitIndex < 4; commitIndex++) {
175 - utils.act(() => {
176 - TestRenderer.create(
177 - <Validator
178 - commitIndex={commitIndex}
179 - previousCommitDetails={null}
180 - rootID={rootID}
181 - />,
182 - );
183 - });
184 - }
185 -
186 - expect(allCommitData).toHaveLength(4);
183 + const prevCommitData = store.profilerStore.getDataForRoot(rootID)
184 + .commitData;
185 + expect(prevCommitData).toHaveLength(4);
186
187 utils.exportImportHelper(bridge, store);
188
190 - for (let commitIndex = 0; commitIndex < 4; commitIndex++) {
191 - utils.act(() => {
192 - TestRenderer.create(
193 - <Validator
194 - commitIndex={commitIndex}
195 - previousCommitDetails={allCommitData[commitIndex]}
196 - rootID={rootID}
197 - />,
198 - );
199 - });
200 - }
189 + const nextCommitData = store.profilerStore.getDataForRoot(rootID)
190 + .commitData;
191 + expect(nextCommitData).toHaveLength(4);
192 + nextCommitData.forEach((commitData, index) => {
193 + expect(commitData).toEqual(prevCommitData[index]);
194 + });
195 });
196
197 it('should record changed props/state/context/hooks', () => {
@@ -265,49 +259,256 @@ describe('ProfilingCache', () => {
259 utils.act(() => legacyRender(<LegacyContextProvider />, container));
260 utils.act(() => store.profilerStore.stopProfiling());
261
268 - const allCommitData = [];
262 + const rootID = store.roots[0];
263
270 - function Validator({commitIndex, previousCommitDetails, rootID}) {
271 - const commitData = store.profilerStore.getCommitData(rootID, commitIndex);
272 - if (previousCommitDetails != null) {
273 - expect(commitData).toEqual(previousCommitDetails);
274 - } else {
275 - allCommitData.push(commitData);
276 - expect(commitData).toMatchSnapshot(
277 - `CommitDetails commitIndex: ${commitIndex}`,
278 - );
264 + let changeDescriptions = store.profilerStore
265 + .getDataForRoot(rootID)
266 + .commitData.map(commitData => commitData.changeDescriptions);
267 + expect(changeDescriptions).toHaveLength(5);
268 + expect(changeDescriptions[0]).toMatchInlineSnapshot(`
269 + Map {
270 + 2 => Object {
271 + "context": null,
272 + "didHooksChange": false,
273 + "isFirstMount": true,
274 + "props": null,
275 + "state": null,
276 + },
277 + 4 => Object {
278 + "context": null,
279 + "didHooksChange": false,
280 + "isFirstMount": true,
281 + "props": null,
282 + "state": null,
283 + },
284 + 5 => Object {
285 + "context": null,
286 + "didHooksChange": false,
287 + "isFirstMount": true,
288 + "props": null,
289 + "state": null,
290 + },
291 + 6 => Object {
292 + "context": null,
293 + "didHooksChange": false,
294 + "isFirstMount": true,
295 + "props": null,
296 + "state": null,
297 + },
298 + 7 => Object {
299 + "context": null,
300 + "didHooksChange": false,
301 + "isFirstMount": true,
302 + "props": null,
303 + "state": null,
304 + },
305 }
280 - return null;
281 - }
282 -
283 - const rootID = store.roots[0];
306 + `);
307 + expect(changeDescriptions[1]).toMatchInlineSnapshot(`
308 + Map {
309 + 5 => Object {
310 + "context": null,
311 + "didHooksChange": false,
312 + "hooks": Array [],
313 + "isFirstMount": false,
314 + "props": Array [
315 + "count",
316 + ],
317 + "state": null,
318 + },
319 + 4 => Object {
320 + "context": true,
321 + "didHooksChange": false,
322 + "hooks": null,
323 + "isFirstMount": false,
324 + "props": Array [],
325 + "state": null,
326 + },
327 + 7 => Object {
328 + "context": null,
329 + "didHooksChange": false,
330 + "hooks": Array [],
331 + "isFirstMount": false,
332 + "props": Array [
333 + "count",
334 + ],
335 + "state": null,
336 + },
337 + 6 => Object {
338 + "context": Array [
339 + "count",
340 + ],
341 + "didHooksChange": false,
342 + "hooks": null,
343 + "isFirstMount": false,
344 + "props": Array [],
345 + "state": null,
346 + },
347 + 2 => Object {
348 + "context": null,
349 + "didHooksChange": false,
350 + "hooks": Array [],
351 + "isFirstMount": false,
352 + "props": Array [],
353 + "state": Array [
354 + "count",
355 + ],
356 + },
357 + }
358 + `);
359 + expect(changeDescriptions[2]).toMatchInlineSnapshot(`
360 + Map {
361 + 5 => Object {
362 + "context": null,
363 + "didHooksChange": false,
364 + "hooks": Array [],
365 + "isFirstMount": false,
366 + "props": Array [],
367 + "state": null,
368 + },
369 + 4 => Object {
370 + "context": false,
371 + "didHooksChange": false,
372 + "hooks": null,
373 + "isFirstMount": false,
374 + "props": Array [],
375 + "state": null,
376 + },
377 + 7 => Object {
378 + "context": null,
379 + "didHooksChange": false,
380 + "hooks": Array [],
381 + "isFirstMount": false,
382 + "props": Array [],
383 + "state": null,
384 + },
385 + 6 => Object {
386 + "context": Array [],
387 + "didHooksChange": false,
388 + "hooks": null,
389 + "isFirstMount": false,
390 + "props": Array [],
391 + "state": null,
392 + },
393 + 2 => Object {
394 + "context": null,
395 + "didHooksChange": false,
396 + "hooks": Array [],
397 + "isFirstMount": false,
398 + "props": Array [
399 + "foo",
400 + ],
401 + "state": Array [],
402 + },
403 + }
404 + `);
405 + expect(changeDescriptions[3]).toMatchInlineSnapshot(`
406 + Map {
407 + 5 => Object {
408 + "context": null,
409 + "didHooksChange": false,
410 + "hooks": Array [],
411 + "isFirstMount": false,
412 + "props": Array [],
413 + "state": null,
414 + },
415 + 4 => Object {
416 + "context": false,
417 + "didHooksChange": false,
418 + "hooks": null,
419 + "isFirstMount": false,
420 + "props": Array [],
421 + "state": null,
422 + },
423 + 7 => Object {
424 + "context": null,
425 + "didHooksChange": false,
426 + "hooks": Array [],
427 + "isFirstMount": false,
428 + "props": Array [],
429 + "state": null,
430 + },
431 + 6 => Object {
432 + "context": Array [],
433 + "didHooksChange": false,
434 + "hooks": null,
435 + "isFirstMount": false,
436 + "props": Array [],
437 + "state": null,
438 + },
439 + 2 => Object {
440 + "context": null,
441 + "didHooksChange": false,
442 + "hooks": Array [],
443 + "isFirstMount": false,
444 + "props": Array [
445 + "foo",
446 + "bar",
447 + ],
448 + "state": Array [],
449 + },
450 + }
451 + `);
452 + expect(changeDescriptions[4]).toMatchInlineSnapshot(`
453 + Map {
454 + 5 => Object {
455 + "context": null,
456 + "didHooksChange": false,
457 + "hooks": Array [],
458 + "isFirstMount": false,
459 + "props": Array [],
460 + "state": null,
461 + },
462 + 4 => Object {
463 + "context": false,
464 + "didHooksChange": false,
465 + "hooks": null,
466 + "isFirstMount": false,
467 + "props": Array [],
468 + "state": null,
469 + },
470 + 7 => Object {
471 + "context": null,
472 + "didHooksChange": false,
473 + "hooks": Array [],
474 + "isFirstMount": false,
475 + "props": Array [],
476 + "state": null,
477 + },
478 + 6 => Object {
479 + "context": Array [],
480 + "didHooksChange": false,
481 + "hooks": null,
482 + "isFirstMount": false,
483 + "props": Array [],
484 + "state": null,
485 + },
486 + 2 => Object {
487 + "context": null,
488 + "didHooksChange": false,
489 + "hooks": Array [],
490 + "isFirstMount": false,
491 + "props": Array [
492 + "bar",
493 + ],
494 + "state": Array [],
495 + },
496 + }
497 + `);
498
285 - for (let commitIndex = 0; commitIndex < 5; commitIndex++) {
286 - utils.act(() => {
287 - TestRenderer.create(
288 - <Validator
289 - commitIndex={commitIndex}
290 - previousCommitDetails={null}
291 - rootID={rootID}
292 - />,
293 - );
294 - });
295 - }
499 + utils.exportImportHelper(bridge, store);
500
297 - expect(allCommitData).toHaveLength(5);
501 + const prevChangeDescriptions = [...changeDescriptions];
502
299 - utils.exportImportHelper(bridge, store);
503 + changeDescriptions = store.profilerStore
504 + .getDataForRoot(rootID)
505 + .commitData.map(commitData => commitData.changeDescriptions);
506 + expect(changeDescriptions).toHaveLength(5);
507
508 for (let commitIndex = 0; commitIndex < 5; commitIndex++) {
302 - utils.act(() => {
303 - TestRenderer.create(
304 - <Validator
305 - commitIndex={commitIndex}
306 - previousCommitDetails={allCommitData[commitIndex]}
307 - rootID={rootID}
308 - />,
309 - );
310 - });
509 + expect(changeDescriptions[commitIndex]).toEqual(
510 + prevChangeDescriptions[commitIndex],
511 + );
512 }
513 });
514
@@ -420,33 +621,13 @@ describe('ProfilingCache', () => {
621
622 const rootID = store.roots[0];
623
423 - const allChangeDescriptions = [];
424 -
425 - function getChangeDescriptions(commitIndex, label) {
426 - let changeDescriptions;
427 -
428 - function Validator() {
429 - const commitData = store.profilerStore.getCommitData(
430 - rootID,
431 - commitIndex,
432 - );
433 -
434 - changeDescriptions = commitData.changeDescriptions;
435 -
436 - allChangeDescriptions.push(changeDescriptions);
437 -
438 - return null;
439 - }
440 -
441 - utils.act(() => {
442 - TestRenderer.create(<Validator />);
443 - });
444 -
445 - return changeDescriptions;
446 - }
624 + const changeDescriptions = store.profilerStore
625 + .getDataForRoot(rootID)
626 + .commitData.map(commitData => commitData.changeDescriptions);
627 + expect(changeDescriptions).toHaveLength(6);
628
629 // 1st render: No change
449 - expect(getChangeDescriptions(0)).toMatchInlineSnapshot(`
630 + expect(changeDescriptions[0]).toMatchInlineSnapshot(`
631 Map {
632 3 => Object {
633 "context": null,
@@ -459,7 +640,7 @@ describe('ProfilingCache', () => {
640 `);
641
642 // 2nd render: Changed props
462 - expect(getChangeDescriptions(1)).toMatchInlineSnapshot(`
643 + expect(changeDescriptions[1]).toMatchInlineSnapshot(`
644 Map {
645 3 => Object {
646 "context": false,
@@ -475,7 +656,7 @@ describe('ProfilingCache', () => {
656 `);
657
658 // 3rd render: Changed useReducer
478 - expect(getChangeDescriptions(2)).toMatchInlineSnapshot(`
659 + expect(changeDescriptions[2]).toMatchInlineSnapshot(`
660 Map {
661 3 => Object {
662 "context": false,
@@ -491,7 +672,7 @@ describe('ProfilingCache', () => {
672 `);
673
674 // 4th render: Changed useState
494 - expect(getChangeDescriptions(3)).toMatchInlineSnapshot(`
675 + expect(changeDescriptions[3]).toMatchInlineSnapshot(`
676 Map {
677 3 => Object {
678 "context": false,
@@ -507,7 +688,7 @@ describe('ProfilingCache', () => {
688 `);
689
690 // 5th render: Changed context
510 - expect(getChangeDescriptions(4)).toMatchInlineSnapshot(`
691 + expect(changeDescriptions[4]).toMatchInlineSnapshot(`
692 Map {
693 3 => Object {
694 "context": true,
@@ -521,7 +702,7 @@ describe('ProfilingCache', () => {
702 `);
703
704 // 6th render: Sync external store
524 - expect(getChangeDescriptions(5)).toMatchInlineSnapshot(`
705 + expect(changeDescriptions[5]).toMatchInlineSnapshot(`
706 Map {
707 3 => Object {
708 "context": false,
@@ -536,31 +717,20 @@ describe('ProfilingCache', () => {
717 }
718 `);
719
539 - expect(allChangeDescriptions).toHaveLength(6);
720 + expect(changeDescriptions).toHaveLength(6);
721
722 // Export and re-import profile data and make sure it is retained.
723 utils.exportImportHelper(bridge, store);
724
544 - function ExportImportValidator({commitIndex}) {
725 + for (let commitIndex = 0; commitIndex < 6; commitIndex++) {
726 const commitData = store.profilerStore.getCommitData(rootID, commitIndex);
546 -
727 expect(commitData.changeDescriptions).toEqual(
548 - allChangeDescriptions[commitIndex],
728 + changeDescriptions[commitIndex],
729 );
550 -
551 - return null;
552 - }
553 -
554 - for (let commitIndex = 0; commitIndex < 6; commitIndex++) {
555 - utils.act(() => {
556 - TestRenderer.create(
557 - <ExportImportValidator commitIndex={commitIndex} />,
558 - );
559 - });
730 }
731 });
732
563 - it('should calculate a self duration based on actual children (not filtered children)', () => {
733 + it('should calculate durations based on actual children (not filtered children)', () => {
734 store.componentFilters = [utils.createDisplayNameFilter('^Parent$')];
735
736 const Grandparent = () => {
@@ -587,26 +757,38 @@ describe('ProfilingCache', () => {
757 );
758 utils.act(() => store.profilerStore.stopProfiling());
759
590 - let commitData = null;
591 -
592 - function Validator({commitIndex, rootID}) {
593 - commitData = store.profilerStore.getCommitData(rootID, commitIndex);
594 - expect(commitData).toMatchSnapshot(
595 - `CommitDetails with filtered self durations`,
596 - );
597 - return null;
598 - }
760 + expect(store).toMatchInlineSnapshot(`
761 + [root]
762 + ▾ <Grandparent>
763 + <Child>
764 + <Child>
765 + `);
766
767 const rootID = store.roots[0];
768 + const commitData = store.profilerStore.getDataForRoot(rootID).commitData;
769 + expect(commitData).toHaveLength(1);
770
602 - utils.act(() => {
603 - TestRenderer.create(<Validator commitIndex={0} rootID={rootID} />);
604 - });
771 + // Actual duration should also include both filtered <Parent> components.
772 + expect(commitData[0].fiberActualDurations).toMatchInlineSnapshot(`
773 + Map {
774 + 1 => 16,
775 + 2 => 16,
776 + 4 => 1,
777 + 6 => 1,
778 + }
779 + `);
780
606 - expect(commitData).not.toBeNull();
781 + expect(commitData[0].fiberSelfDurations).toMatchInlineSnapshot(`
782 + Map {
783 + 1 => 0,
784 + 2 => 10,
785 + 4 => 1,
786 + 6 => 1,
787 + }
788 + `);
789 });
790
609 - it('should calculate self duration correctly for suspended views', async () => {
791 + it('should calculate durations correctly for suspended views', async () => {
792 let data;
793 const getData = () => {
794 if (data) {
@@ -642,28 +824,37 @@ describe('ProfilingCache', () => {
824 );
825 utils.act(() => store.profilerStore.stopProfiling());
826
645 - const allCommitData = [];
646 -
647 - function Validator({commitIndex, rootID}) {
648 - const commitData = store.profilerStore.getCommitData(rootID, commitIndex);
649 - allCommitData.push(commitData);
650 - expect(commitData).toMatchSnapshot(
651 - `CommitDetails with filtered self durations`,
652 - );
653 - return null;
654 - }
655 -
827 const rootID = store.roots[0];
657 -
658 - for (let commitIndex = 0; commitIndex < 2; commitIndex++) {
659 - utils.act(() => {
660 - TestRenderer.create(
661 - <Validator commitIndex={commitIndex} rootID={rootID} />,
662 - );
663 - });
664 - }
665 -
666 - expect(allCommitData).toHaveLength(2);
828 + const commitData = store.profilerStore.getDataForRoot(rootID).commitData;
829 + expect(commitData).toHaveLength(2);
830 + expect(commitData[0].fiberActualDurations).toMatchInlineSnapshot(`
831 + Map {
832 + 1 => 15,
833 + 2 => 15,
834 + 3 => 5,
835 + 4 => 2,
836 + }
837 + `);
838 + expect(commitData[0].fiberSelfDurations).toMatchInlineSnapshot(`
839 + Map {
840 + 1 => 0,
841 + 2 => 10,
842 + 3 => 3,
843 + 4 => 2,
844 + }
845 + `);
846 + expect(commitData[1].fiberActualDurations).toMatchInlineSnapshot(`
847 + Map {
848 + 7 => 3,
849 + 3 => 3,
850 + }
851 + `);
852 + expect(commitData[1].fiberSelfDurations).toMatchInlineSnapshot(`
853 + Map {
854 + 7 => 3,
855 + 3 => 0,
856 + }
857 + `);
858 });
859
860 it('should collect data for each rendered fiber', () => {
@@ -693,60 +884,53 @@ describe('ProfilingCache', () => {
884 utils.act(() => legacyRender(<Parent count={3} />, container));
885 utils.act(() => store.profilerStore.stopProfiling());
886
887 + const rootID = store.roots[0];
888 const allFiberCommits = [];
697 -
698 - function Validator({fiberID, previousFiberCommits, rootID}) {
889 + for (let index = 0; index < store.numElements; index++) {
890 + const fiberID = store.getElementIDAtIndex(index);
891 const fiberCommits = store.profilerStore.profilingCache.getFiberCommits({
892 fiberID,
893 rootID,
894 });
703 - if (previousFiberCommits != null) {
704 - expect(fiberCommits).toEqual(previousFiberCommits);
705 - } else {
706 - allFiberCommits.push(fiberCommits);
707 - expect(fiberCommits).toMatchSnapshot(
708 - `FiberCommits: element ${fiberID}`,
709 - );
710 - }
711 - return null;
712 - }
895
714 - const rootID = store.roots[0];
715 -
716 - for (let index = 0; index < store.numElements; index++) {
717 - utils.act(() => {
718 - const fiberID = store.getElementIDAtIndex(index);
719 - if (fiberID == null) {
720 - throw Error(`Unexpected null ID for element at index ${index}`);
721 - }
722 - TestRenderer.create(
723 - <Validator
724 - fiberID={fiberID}
725 - previousFiberCommits={null}
726 - rootID={rootID}
727 - />,
728 - );
729 - });
896 + allFiberCommits.push(fiberCommits);
897 }
898
732 - expect(allFiberCommits).toHaveLength(store.numElements);
899 + expect(allFiberCommits).toMatchInlineSnapshot(`
900 + Array [
901 + Array [
902 + 0,
903 + 1,
904 + 2,
905 + ],
906 + Array [
907 + 0,
908 + 1,
909 + 2,
910 + ],
911 + Array [
912 + 1,
913 + 2,
914 + ],
915 + Array [
916 + 2,
917 + ],
918 + Array [
919 + 0,
920 + ],
921 + ]
922 + `);
923
924 utils.exportImportHelper(bridge, store);
925
926 for (let index = 0; index < store.numElements; index++) {
737 - utils.act(() => {
738 - const fiberID = store.getElementIDAtIndex(index);
739 - if (fiberID == null) {
740 - throw Error(`Unexpected null ID for element at index ${index}`);
741 - }
742 - TestRenderer.create(
743 - <Validator
744 - fiberID={fiberID}
745 - previousFiberCommits={allFiberCommits[index]}
746 - rootID={rootID}
747 - />,
748 - );
927 + const fiberID = store.getElementIDAtIndex(index);
928 + const fiberCommits = store.profilerStore.profilingCache.getFiberCommits({
929 + fiberID,
930 + rootID,
931 });
932 +
933 + expect(fiberCommits).toEqual(allFiberCommits[index]);
934 }
935 });
936
@@ -757,17 +941,37 @@ describe('ProfilingCache', () => {
941 utils.act(() => legacyRender(<React.Suspense />, container));
942 utils.act(() => store.profilerStore.stopProfiling());
943
760 - function Validator({commitIndex, rootID}) {
761 - const profilingDataForRoot = store.profilerStore.getDataForRoot(rootID);
762 - expect(profilingDataForRoot).toMatchSnapshot('Empty Suspense node');
763 - return null;
764 - }
765 -
944 const rootID = store.roots[0];
767 -
768 - utils.act(() => {
769 - TestRenderer.create(<Validator commitIndex={0} rootID={rootID} />);
770 - });
945 + const commitData = store.profilerStore.getDataForRoot(rootID).commitData;
946 + expect(commitData).toMatchInlineSnapshot(`
947 + Array [
948 + Object {
949 + "changeDescriptions": Map {},
950 + "duration": 0,
951 + "effectDuration": null,
952 + "fiberActualDurations": Map {
953 + 1 => 0,
954 + 2 => 0,
955 + },
956 + "fiberSelfDurations": Map {
957 + 1 => 0,
958 + 2 => 0,
959 + },
960 + "passiveEffectDuration": null,
961 + "priorityLevel": "Immediate",
962 + "timestamp": 0,
963 + "updaters": Array [
964 + Object {
965 + "displayName": "render()",
966 + "hocDisplayNames": null,
967 + "id": 1,
968 + "key": null,
969 + "type": 11,
970 + },
971 + ],
972 + },
973 + ]
974 + `);
975 });
976
977 // See https://github.com/facebook/react/issues/18831
packages/react-devtools-shared/src/__tests__/profilingCharts-test.js
+206 -67
@@ -7,13 +7,11 @@
7 * @flow
8 */
9
10 -import typeof TestRendererType from 'react-test-renderer';
10 import type Store from 'react-devtools-shared/src/devtools/store';
11
12 describe('profiling charts', () => {
13 let React;
14 let Scheduler;
16 - let TestRenderer: TestRendererType;
15 let legacyRender;
16 let store: Store;
17 let utils;
@@ -30,9 +28,36 @@ describe('profiling charts', () => {
28
29 React = require('react');
30 Scheduler = require('scheduler');
33 - TestRenderer = utils.requireTestRenderer();
31 });
32
33 + function getFlamegraphChartData(rootID, commitIndex) {
34 + const commitTree = store.profilerStore.profilingCache.getCommitTree({
35 + commitIndex,
36 + rootID,
37 + });
38 + const chartData = store.profilerStore.profilingCache.getFlamegraphChartData(
39 + {
40 + commitIndex,
41 + commitTree,
42 + rootID,
43 + },
44 + );
45 + return {commitTree, chartData};
46 + }
47 +
48 + function getRankedChartData(rootID, commitIndex) {
49 + const commitTree = store.profilerStore.profilingCache.getCommitTree({
50 + commitIndex,
51 + rootID,
52 + });
53 + const chartData = store.profilerStore.profilingCache.getRankedChartData({
54 + commitIndex,
55 + commitTree,
56 + rootID,
57 + });
58 + return {commitTree, chartData};
59 + }
60 +
61 describe('flamegraph chart', () => {
62 it('should contain valid data', () => {
63 const Parent = (_: {||}) => {
@@ -55,47 +80,130 @@ describe('profiling charts', () => {
80 const container = document.createElement('div');
81
82 utils.act(() => store.profilerStore.startProfiling());
83 +
84 utils.act(() => legacyRender(<Parent />, container));
85 + expect(store).toMatchInlineSnapshot(`
86 + [root]
87 + ▾ <Parent>
88 + <Child key="first"> [Memo]
89 + <Child key="second"> [Memo]
90 + <Child key="third"> [Memo]
91 + `);
92 +
93 utils.act(() => legacyRender(<Parent />, container));
60 - utils.act(() => store.profilerStore.stopProfiling());
94 + expect(store).toMatchInlineSnapshot(`
95 + [root]
96 + ▾ <Parent>
97 + <Child key="first"> [Memo]
98 + <Child key="second"> [Memo]
99 + <Child key="third"> [Memo]
100 + `);
101
62 - let renderFinished = false;
63 -
64 - function Validator({commitIndex, rootID}) {
65 - const commitTree = store.profilerStore.profilingCache.getCommitTree({
66 - commitIndex,
67 - rootID,
68 - });
69 - const chartData = store.profilerStore.profilingCache.getFlamegraphChartData(
70 - {
71 - commitIndex,
72 - commitTree,
73 - rootID,
74 - },
75 - );
76 - expect(commitTree).toMatchSnapshot(`${commitIndex}: CommitTree`);
77 - expect(chartData).toMatchSnapshot(
78 - `${commitIndex}: FlamegraphChartData`,
79 - );
80 - renderFinished = true;
81 - return null;
82 - }
102 + utils.act(() => store.profilerStore.stopProfiling());
103
104 const rootID = store.roots[0];
105
86 - for (let commitIndex = 0; commitIndex < 2; commitIndex++) {
87 - renderFinished = false;
88 -
89 - utils.act(() => {
90 - TestRenderer.create(
91 - <Validator commitIndex={commitIndex} rootID={rootID} />,
92 - );
93 - });
106 + const firstCommitData = getFlamegraphChartData(rootID, 0);
107 + expect(firstCommitData.commitTree.nodes.size).toBe(5);
108 + expect(firstCommitData.chartData.rows).toMatchInlineSnapshot(`
109 + Array [
110 + Array [
111 + Object {
112 + "actualDuration": 15,
113 + "didRender": true,
114 + "id": 2,
115 + "label": "Parent (10ms of 15ms)",
116 + "name": "Parent",
117 + "offset": 0,
118 + "selfDuration": 10,
119 + "treeBaseDuration": 15,
120 + },
121 + ],
122 + Array [
123 + Object {
124 + "actualDuration": 0,
125 + "didRender": true,
126 + "id": 5,
127 + "label": "Child key=\\"third\\" (<0.1ms of <0.1ms)",
128 + "name": "Child",
129 + "offset": 15,
130 + "selfDuration": 0,
131 + "treeBaseDuration": 0,
132 + },
133 + Object {
134 + "actualDuration": 2,
135 + "didRender": true,
136 + "id": 4,
137 + "label": "Child key=\\"second\\" (2ms of 2ms)",
138 + "name": "Child",
139 + "offset": 13,
140 + "selfDuration": 2,
141 + "treeBaseDuration": 2,
142 + },
143 + Object {
144 + "actualDuration": 3,
145 + "didRender": true,
146 + "id": 3,
147 + "label": "Child key=\\"first\\" (3ms of 3ms)",
148 + "name": "Child",
149 + "offset": 10,
150 + "selfDuration": 3,
151 + "treeBaseDuration": 3,
152 + },
153 + ],
154 + ]
155 + `);
156
95 - expect(renderFinished).toBe(true);
96 - }
97 -
98 - expect(renderFinished).toBe(true);
157 + const secondCommitData = getFlamegraphChartData(rootID, 1);
158 + expect(secondCommitData.commitTree.nodes.size).toBe(5);
159 + expect(secondCommitData.chartData.rows).toMatchInlineSnapshot(`
160 + Array [
161 + Array [
162 + Object {
163 + "actualDuration": 10,
164 + "didRender": true,
165 + "id": 2,
166 + "label": "Parent (10ms of 10ms)",
167 + "name": "Parent",
168 + "offset": 0,
169 + "selfDuration": 10,
170 + "treeBaseDuration": 15,
171 + },
172 + ],
173 + Array [
174 + Object {
175 + "actualDuration": 0,
176 + "didRender": false,
177 + "id": 5,
178 + "label": "Child key=\\"third\\"",
179 + "name": "Child",
180 + "offset": 15,
181 + "selfDuration": 0,
182 + "treeBaseDuration": 0,
183 + },
184 + Object {
185 + "actualDuration": 0,
186 + "didRender": false,
187 + "id": 4,
188 + "label": "Child key=\\"second\\"",
189 + "name": "Child",
190 + "offset": 13,
191 + "selfDuration": 0,
192 + "treeBaseDuration": 2,
193 + },
194 + Object {
195 + "actualDuration": 0,
196 + "didRender": false,
197 + "id": 3,
198 + "label": "Child key=\\"first\\"",
199 + "name": "Child",
200 + "offset": 10,
201 + "selfDuration": 0,
202 + "treeBaseDuration": 3,
203 + },
204 + ],
205 + ]
206 + `);
207 });
208 });
209
@@ -121,43 +229,74 @@ describe('profiling charts', () => {
229 const container = document.createElement('div');
230
231 utils.act(() => store.profilerStore.startProfiling());
232 +
233 utils.act(() => legacyRender(<Parent />, container));
234 + expect(store).toMatchInlineSnapshot(`
235 + [root]
236 + ▾ <Parent>
237 + <Child key="first"> [Memo]
238 + <Child key="second"> [Memo]
239 + <Child key="third"> [Memo]
240 + `);
241 +
242 utils.act(() => legacyRender(<Parent />, container));
126 - utils.act(() => store.profilerStore.stopProfiling());
243 + expect(store).toMatchInlineSnapshot(`
244 + [root]
245 + ▾ <Parent>
246 + <Child key="first"> [Memo]
247 + <Child key="second"> [Memo]
248 + <Child key="third"> [Memo]
249 + `);
250
128 - let renderFinished = false;
129 -
130 - function Validator({commitIndex, rootID}) {
131 - const commitTree = store.profilerStore.profilingCache.getCommitTree({
132 - commitIndex,
133 - rootID,
134 - });
135 - const chartData = store.profilerStore.profilingCache.getRankedChartData(
136 - {
137 - commitIndex,
138 - commitTree,
139 - rootID,
140 - },
141 - );
142 - expect(commitTree).toMatchSnapshot(`${commitIndex}: CommitTree`);
143 - expect(chartData).toMatchSnapshot(`${commitIndex}: RankedChartData`);
144 - renderFinished = true;
145 - return null;
146 - }
251 + utils.act(() => store.profilerStore.stopProfiling());
252
253 const rootID = store.roots[0];
254
150 - for (let commitIndex = 0; commitIndex < 2; commitIndex++) {
151 - renderFinished = false;
152 -
153 - utils.act(() => {
154 - TestRenderer.create(
155 - <Validator commitIndex={commitIndex} rootID={rootID} />,
156 - );
157 - });
255 + // Everything should render the first time.
256 + const firstCommitData = getRankedChartData(rootID, 0);
257 + expect(firstCommitData.commitTree.nodes.size).toBe(5);
258 + expect(firstCommitData.chartData.nodes).toMatchInlineSnapshot(`
259 + Array [
260 + Object {
261 + "id": 2,
262 + "label": "Parent (10ms)",
263 + "name": "Parent",
264 + "value": 10,
265 + },
266 + Object {
267 + "id": 3,
268 + "label": "Child (Memo) key=\\"first\\" (3ms)",
269 + "name": "Child",
270 + "value": 3,
271 + },
272 + Object {
273 + "id": 4,
274 + "label": "Child (Memo) key=\\"second\\" (2ms)",
275 + "name": "Child",
276 + "value": 2,
277 + },
278 + Object {
279 + "id": 5,
280 + "label": "Child (Memo) key=\\"third\\" (<0.1ms)",
281 + "name": "Child",
282 + "value": 0,
283 + },
284 + ]
285 + `);
286
159 - expect(renderFinished).toBe(true);
160 - }
287 + // Only parent should render the second time, since child props have not changed.
288 + const secondCommitData = getRankedChartData(rootID, 1);
289 + expect(secondCommitData.commitTree.nodes.size).toBe(5);
290 + expect(secondCommitData.chartData.nodes).toMatchInlineSnapshot(`
291 + Array [
292 + Object {
293 + "id": 2,
294 + "label": "Parent (10ms)",
295 + "name": "Parent",
296 + "value": 10,
297 + },
298 + ]
299 + `);
300 });
301 });
302 });
packages/react-devtools-shared/src/__tests__/profilingCommitTreeBuilder-test.js
+126 -115
@@ -7,14 +7,12 @@
7 * @flow
8 */
9
10 -import typeof TestRendererType from 'react-test-renderer';
10 import type Store from 'react-devtools-shared/src/devtools/store';
11
12 describe('commit tree', () => {
13 let React;
14 let ReactDOMClient;
15 let Scheduler;
17 - let TestRenderer: TestRendererType;
16 let legacyRender;
17 let store: Store;
18 let utils;
@@ -32,7 +30,6 @@ describe('commit tree', () => {
30 React = require('react');
31 ReactDOMClient = require('react-dom/client');
32 Scheduler = require('scheduler');
35 - TestRenderer = utils.requireTestRenderer();
33 });
34
35 it('should be able to rebuild the store tree for each commit', () => {
@@ -51,36 +48,48 @@ describe('commit tree', () => {
48
49 utils.act(() => store.profilerStore.startProfiling());
50 utils.act(() => legacyRender(<Parent count={1} />, container));
51 + expect(store).toMatchInlineSnapshot(`
52 + [root]
53 + ▾ <Parent>
54 + <Child key="0"> [Memo]
55 + `);
56 utils.act(() => legacyRender(<Parent count={3} />, container));
57 + expect(store).toMatchInlineSnapshot(`
58 + [root]
59 + ▾ <Parent>
60 + <Child key="0"> [Memo]
61 + <Child key="1"> [Memo]
62 + <Child key="2"> [Memo]
63 + `);
64 utils.act(() => legacyRender(<Parent count={2} />, container));
65 + expect(store).toMatchInlineSnapshot(`
66 + [root]
67 + ▾ <Parent>
68 + <Child key="0"> [Memo]
69 + <Child key="1"> [Memo]
70 + `);
71 utils.act(() => legacyRender(<Parent count={0} />, container));
72 + expect(store).toMatchInlineSnapshot(`
73 + [root]
74 + <Parent>
75 + `);
76 utils.act(() => store.profilerStore.stopProfiling());
77
59 - let renderFinished = false;
60 -
61 - function Validator({commitIndex, rootID}) {
62 - const commitTree = store.profilerStore.profilingCache.getCommitTree({
63 - commitIndex,
64 - rootID,
65 - });
66 - expect(commitTree).toMatchSnapshot(`${commitIndex}: CommitTree`);
67 - renderFinished = true;
68 - return null;
69 - }
70 -
78 const rootID = store.roots[0];
72 -
79 + const commitTrees = [];
80 for (let commitIndex = 0; commitIndex < 4; commitIndex++) {
74 - renderFinished = false;
75 -
76 - utils.act(() => {
77 - TestRenderer.create(
78 - <Validator commitIndex={commitIndex} rootID={rootID} />,
79 - );
80 - });
81 -
82 - expect(renderFinished).toBe(true);
81 + commitTrees.push(
82 + store.profilerStore.profilingCache.getCommitTree({
83 + commitIndex,
84 + rootID,
85 + }),
86 + );
87 }
88 +
89 + expect(commitTrees[0].nodes.size).toBe(3); // <Root> + <Parent> + <Child>
90 + expect(commitTrees[1].nodes.size).toBe(5); // <Root> + <Parent> + <Child> x 3
91 + expect(commitTrees[2].nodes.size).toBe(4); // <Root> + <Parent> + <Child> x 2
92 + expect(commitTrees[3].nodes.size).toBe(2); // <Root> + <Parent>
93 });
94
95 describe('Lazy', () => {
@@ -113,35 +122,39 @@ describe('commit tree', () => {
122 utils.act(() => store.profilerStore.startProfiling());
123 utils.act(() => legacyRender(<App renderChildren={true} />, container));
124 await Promise.resolve();
125 + expect(store).toMatchInlineSnapshot(`
126 + [root]
127 + ▾ <App>
128 + <Suspense>
129 + `);
130 utils.act(() => legacyRender(<App renderChildren={true} />, container));
131 + expect(store).toMatchInlineSnapshot(`
132 + [root]
133 + ▾ <App>
134 + ▾ <Suspense>
135 + <LazyInnerComponent>
136 + `);
137 utils.act(() => legacyRender(<App renderChildren={false} />, container));
138 + expect(store).toMatchInlineSnapshot(`
139 + [root]
140 + <App>
141 + `);
142 utils.act(() => store.profilerStore.stopProfiling());
143
120 - let renderFinished = false;
121 -
122 - function Validator({commitIndex, rootID}) {
123 - const commitTree = store.profilerStore.profilingCache.getCommitTree({
124 - commitIndex,
125 - rootID,
126 - });
127 - expect(commitTree).toMatchSnapshot(`${commitIndex}: CommitTree`);
128 - renderFinished = true;
129 - return null;
130 - }
131 -
144 const rootID = store.roots[0];
133 -
134 - for (let commitIndex = 0; commitIndex < 2; commitIndex++) {
135 - renderFinished = false;
136 -
137 - utils.act(() => {
138 - TestRenderer.create(
139 - <Validator commitIndex={commitIndex} rootID={rootID} />,
140 - );
141 - });
142 -
143 - expect(renderFinished).toBe(true);
145 + const commitTrees = [];
146 + for (let commitIndex = 0; commitIndex < 3; commitIndex++) {
147 + commitTrees.push(
148 + store.profilerStore.profilingCache.getCommitTree({
149 + commitIndex,
150 + rootID,
151 + }),
152 + );
153 }
154 +
155 + expect(commitTrees[0].nodes.size).toBe(3); // <Root> + <App> + <Suspense>
156 + expect(commitTrees[1].nodes.size).toBe(4); // <Root> + <App> + <Suspense> + <LazyInnerComponent>
157 + expect(commitTrees[2].nodes.size).toBe(2); // <Root> + <App>
158 });
159
160 it('should support Lazy components (createRoot)', async () => {
@@ -151,35 +164,39 @@ describe('commit tree', () => {
164 utils.act(() => store.profilerStore.startProfiling());
165 utils.act(() => root.render(<App renderChildren={true} />));
166 await Promise.resolve();
167 + expect(store).toMatchInlineSnapshot(`
168 + [root]
169 + ▾ <App>
170 + <Suspense>
171 + `);
172 utils.act(() => root.render(<App renderChildren={true} />));
173 + expect(store).toMatchInlineSnapshot(`
174 + [root]
175 + ▾ <App>
176 + ▾ <Suspense>
177 + <LazyInnerComponent>
178 + `);
179 utils.act(() => root.render(<App renderChildren={false} />));
180 + expect(store).toMatchInlineSnapshot(`
181 + [root]
182 + <App>
183 + `);
184 utils.act(() => store.profilerStore.stopProfiling());
185
158 - let renderFinished = false;
159 -
160 - function Validator({commitIndex, rootID}) {
161 - const commitTree = store.profilerStore.profilingCache.getCommitTree({
162 - commitIndex,
163 - rootID,
164 - });
165 - expect(commitTree).toMatchSnapshot(`${commitIndex}: CommitTree`);
166 - renderFinished = true;
167 - return null;
168 - }
169 -
186 const rootID = store.roots[0];
171 -
172 - for (let commitIndex = 0; commitIndex < 2; commitIndex++) {
173 - renderFinished = false;
174 -
175 - utils.act(() => {
176 - TestRenderer.create(
177 - <Validator commitIndex={commitIndex} rootID={rootID} />,
178 - );
179 - });
180 -
181 - expect(renderFinished).toBe(true);
187 + const commitTrees = [];
188 + for (let commitIndex = 0; commitIndex < 3; commitIndex++) {
189 + commitTrees.push(
190 + store.profilerStore.profilingCache.getCommitTree({
191 + commitIndex,
192 + rootID,
193 + }),
194 + );
195 }
196 +
197 + expect(commitTrees[0].nodes.size).toBe(3); // <Root> + <App> + <Suspense>
198 + expect(commitTrees[1].nodes.size).toBe(4); // <Root> + <App> + <Suspense> + <LazyInnerComponent>
199 + expect(commitTrees[2].nodes.size).toBe(2); // <Root> + <App>
200 });
201
202 it('should support Lazy components that are unmounted before resolving (legacy render)', async () => {
@@ -187,34 +204,31 @@ describe('commit tree', () => {
204
205 utils.act(() => store.profilerStore.startProfiling());
206 utils.act(() => legacyRender(<App renderChildren={true} />, container));
207 + expect(store).toMatchInlineSnapshot(`
208 + [root]
209 + ▾ <App>
210 + <Suspense>
211 + `);
212 utils.act(() => legacyRender(<App renderChildren={false} />, container));
213 + expect(store).toMatchInlineSnapshot(`
214 + [root]
215 + <App>
216 + `);
217 utils.act(() => store.profilerStore.stopProfiling());
218
193 - let renderFinished = false;
194 -
195 - function Validator({commitIndex, rootID}) {
196 - const commitTree = store.profilerStore.profilingCache.getCommitTree({
197 - commitIndex,
198 - rootID,
199 - });
200 - expect(commitTree).toMatchSnapshot(`${commitIndex}: CommitTree`);
201 - renderFinished = true;
202 - return null;
203 - }
204 -
219 const rootID = store.roots[0];
206 -
220 + const commitTrees = [];
221 for (let commitIndex = 0; commitIndex < 2; commitIndex++) {
208 - renderFinished = false;
209 -
210 - utils.act(() => {
211 - TestRenderer.create(
212 - <Validator commitIndex={commitIndex} rootID={rootID} />,
213 - );
214 - });
215 -
216 - expect(renderFinished).toBe(true);
222 + commitTrees.push(
223 + store.profilerStore.profilingCache.getCommitTree({
224 + commitIndex,
225 + rootID,
226 + }),
227 + );
228 }
229 +
230 + expect(commitTrees[0].nodes.size).toBe(3); // <Root> + <App> + <Suspense>
231 + expect(commitTrees[1].nodes.size).toBe(2); // <Root> + <App>
232 });
233
234 it('should support Lazy components that are unmounted before resolving (createRoot)', async () => {
@@ -223,34 +237,31 @@ describe('commit tree', () => {
237
238 utils.act(() => store.profilerStore.startProfiling());
239 utils.act(() => root.render(<App renderChildren={true} />));
240 + expect(store).toMatchInlineSnapshot(`
241 + [root]
242 + ▾ <App>
243 + <Suspense>
244 + `);
245 utils.act(() => root.render(<App renderChildren={false} />));
246 + expect(store).toMatchInlineSnapshot(`
247 + [root]
248 + <App>
249 + `);
250 utils.act(() => store.profilerStore.stopProfiling());
251
229 - let renderFinished = false;
230 -
231 - function Validator({commitIndex, rootID}) {
232 - const commitTree = store.profilerStore.profilingCache.getCommitTree({
233 - commitIndex,
234 - rootID,
235 - });
236 - expect(commitTree).toMatchSnapshot(`${commitIndex}: CommitTree`);
237 - renderFinished = true;
238 - return null;
239 - }
240 -
252 const rootID = store.roots[0];
242 -
253 + const commitTrees = [];
254 for (let commitIndex = 0; commitIndex < 2; commitIndex++) {
244 - renderFinished = false;
245 -
246 - utils.act(() => {
247 - TestRenderer.create(
248 - <Validator commitIndex={commitIndex} rootID={rootID} />,
249 - );
250 - });
251 -
252 - expect(renderFinished).toBe(true);
255 + commitTrees.push(
256 + store.profilerStore.profilingCache.getCommitTree({
257 + commitIndex,
258 + rootID,
259 + }),
260 + );
261 }
262 +
263 + expect(commitTrees[0].nodes.size).toBe(3); // <Root> + <App> + <Suspense>
264 + expect(commitTrees[1].nodes.size).toBe(2); // <Root> + <App>
265 });
266 });
267 });
packages/react-devtools-shared/src/__tests__/store-test.js
+587 -84
@@ -41,7 +41,10 @@ describe('Store', () => {
41 act(() =>
42 legacyRender(<Component count={4} />, document.createElement('div')),
43 );
44 - expect(store).toMatchSnapshot('1: mount');
44 + expect(store).toMatchInlineSnapshot(`
45 + [root]
46 + <Component>
47 + `);
48
49 expect(store.roots).toHaveLength(1);
50
@@ -58,10 +61,13 @@ describe('Store', () => {
61 const container = document.createElement('div');
62
63 act(() => legacyRender(<Root>{null}</Root>, container));
61 - expect(store).toMatchSnapshot('1: mount');
64 + expect(store).toMatchInlineSnapshot(`
65 + [root]
66 + <Root>
67 + `);
68
69 act(() => legacyRender(<div />, container));
64 - expect(store).toMatchSnapshot('2: add host nodes');
70 + expect(store).toMatchInlineSnapshot(`[root]`);
71 });
72
73 // This test is not the same cause as what's reported on GitHub,
@@ -185,13 +191,35 @@ describe('Store', () => {
191 const container = document.createElement('div');
192
193 act(() => legacyRender(<Grandparent count={4} />, container));
188 - expect(store).toMatchSnapshot('1: mount');
194 + expect(store).toMatchInlineSnapshot(`
195 + [root]
196 + ▾ <Grandparent>
197 + ▾ <Parent>
198 + <Child key="0">
199 + <Child key="1">
200 + <Child key="2">
201 + <Child key="3">
202 + ▾ <Parent>
203 + <Child key="0">
204 + <Child key="1">
205 + <Child key="2">
206 + <Child key="3">
207 + `);
208
209 act(() => legacyRender(<Grandparent count={2} />, container));
191 - expect(store).toMatchSnapshot('2: update');
210 + expect(store).toMatchInlineSnapshot(`
211 + [root]
212 + ▾ <Grandparent>
213 + ▾ <Parent>
214 + <Child key="0">
215 + <Child key="1">
216 + ▾ <Parent>
217 + <Child key="0">
218 + <Child key="1">
219 + `);
220
221 act(() => ReactDOM.unmountComponentAtNode(container));
194 - expect(store).toMatchSnapshot('3: unmount');
222 + expect(store).toMatchInlineSnapshot(``);
223 });
224
225 it('should support mount and update operations for multiple roots', () => {
@@ -206,19 +234,46 @@ describe('Store', () => {
234 legacyRender(<Parent key="A" count={3} />, containerA);
235 legacyRender(<Parent key="B" count={2} />, containerB);
236 });
209 - expect(store).toMatchSnapshot('1: mount');
237 + expect(store).toMatchInlineSnapshot(`
238 + [root]
239 + ▾ <Parent key="A">
240 + <Child key="0">
241 + <Child key="1">
242 + <Child key="2">
243 + [root]
244 + ▾ <Parent key="B">
245 + <Child key="0">
246 + <Child key="1">
247 + `);
248
249 act(() => {
250 legacyRender(<Parent key="A" count={4} />, containerA);
251 legacyRender(<Parent key="B" count={1} />, containerB);
252 });
215 - expect(store).toMatchSnapshot('2: update');
253 + expect(store).toMatchInlineSnapshot(`
254 + [root]
255 + ▾ <Parent key="A">
256 + <Child key="0">
257 + <Child key="1">
258 + <Child key="2">
259 + <Child key="3">
260 + [root]
261 + ▾ <Parent key="B">
262 + <Child key="0">
263 + `);
264
265 act(() => ReactDOM.unmountComponentAtNode(containerB));
218 - expect(store).toMatchSnapshot('3: unmount B');
266 + expect(store).toMatchInlineSnapshot(`
267 + [root]
268 + ▾ <Parent key="A">
269 + <Child key="0">
270 + <Child key="1">
271 + <Child key="2">
272 + <Child key="3">
273 + `);
274
275 act(() => ReactDOM.unmountComponentAtNode(containerA));
221 - expect(store).toMatchSnapshot('4: unmount A');
276 + expect(store).toMatchInlineSnapshot(``);
277 });
278
279 it('should filter DOM nodes from the store tree', () => {
@@ -240,7 +295,14 @@ describe('Store', () => {
295 act(() =>
296 legacyRender(<Grandparent count={4} />, document.createElement('div')),
297 );
243 - expect(store).toMatchSnapshot('1: mount');
298 + expect(store).toMatchInlineSnapshot(`
299 + [root]
300 + ▾ <Grandparent>
301 + ▾ <Parent>
302 + <Child>
303 + ▾ <Parent>
304 + <Child>
305 + `);
306 });
307
308 it('should display Suspense nodes properly in various states', () => {
@@ -266,12 +328,24 @@ describe('Store', () => {
328
329 const container = document.createElement('div');
330 act(() => legacyRender(<Wrapper shouldSuspense={true} />, container));
269 - expect(store).toMatchSnapshot('1: loading');
331 + expect(store).toMatchInlineSnapshot(`
332 + [root]
333 + ▾ <Wrapper>
334 + <Component key="Outside">
335 + ▾ <Suspense>
336 + <Loading>
337 + `);
338
339 act(() => {
340 legacyRender(<Wrapper shouldSuspense={false} />, container);
341 });
274 - expect(store).toMatchSnapshot('2: resolved');
342 + expect(store).toMatchInlineSnapshot(`
343 + [root]
344 + ▾ <Wrapper>
345 + <Component key="Outside">
346 + ▾ <Suspense>
347 + <Component key="Inside">
348 + `);
349 });
350
351 it('should support nested Suspense nodes', () => {
@@ -324,7 +398,20 @@ describe('Store', () => {
398 container,
399 ),
400 );
327 - expect(store).toMatchSnapshot('1: third child is suspended');
401 + expect(store).toMatchInlineSnapshot(`
402 + [root]
403 + ▾ <Wrapper>
404 + <Component key="Outside">
405 + ▾ <Suspense>
406 + <Component key="Unrelated at Start">
407 + ▾ <Suspense>
408 + <Component key="Suspense 1 Content">
409 + ▾ <Suspense>
410 + <Component key="Suspense 2 Content">
411 + ▾ <Suspense>
412 + <Loading key="Suspense 3 Fallback">
413 + <Component key="Unrelated at End">
414 + `);
415 act(() =>
416 legacyRender(
417 <Wrapper
@@ -335,7 +422,20 @@ describe('Store', () => {
422 container,
423 ),
424 );
338 - expect(store).toMatchSnapshot('2: first and third child are suspended');
425 + expect(store).toMatchInlineSnapshot(`
426 + [root]
427 + ▾ <Wrapper>
428 + <Component key="Outside">
429 + ▾ <Suspense>
430 + <Component key="Unrelated at Start">
431 + ▾ <Suspense>
432 + <Loading key="Suspense 1 Fallback">
433 + ▾ <Suspense>
434 + <Component key="Suspense 2 Content">
435 + ▾ <Suspense>
436 + <Loading key="Suspense 3 Fallback">
437 + <Component key="Unrelated at End">
438 + `);
439 act(() =>
440 legacyRender(
441 <Wrapper
@@ -346,7 +446,20 @@ describe('Store', () => {
446 container,
447 ),
448 );
349 - expect(store).toMatchSnapshot('3: second and third child are suspended');
449 + expect(store).toMatchInlineSnapshot(`
450 + [root]
451 + ▾ <Wrapper>
452 + <Component key="Outside">
453 + ▾ <Suspense>
454 + <Component key="Unrelated at Start">
455 + ▾ <Suspense>
456 + <Component key="Suspense 1 Content">
457 + ▾ <Suspense>
458 + <Loading key="Suspense 2 Fallback">
459 + ▾ <Suspense>
460 + <Loading key="Suspense 3 Fallback">
461 + <Component key="Unrelated at End">
462 + `);
463 act(() =>
464 legacyRender(
465 <Wrapper
@@ -357,7 +470,20 @@ describe('Store', () => {
470 container,
471 ),
472 );
360 - expect(store).toMatchSnapshot('4: first and third child are suspended');
473 + expect(store).toMatchInlineSnapshot(`
474 + [root]
475 + ▾ <Wrapper>
476 + <Component key="Outside">
477 + ▾ <Suspense>
478 + <Component key="Unrelated at Start">
479 + ▾ <Suspense>
480 + <Loading key="Suspense 1 Fallback">
481 + ▾ <Suspense>
482 + <Component key="Suspense 2 Content">
483 + ▾ <Suspense>
484 + <Loading key="Suspense 3 Fallback">
485 + <Component key="Unrelated at End">
486 + `);
487 act(() =>
488 legacyRender(
489 <Wrapper
@@ -368,7 +494,13 @@ describe('Store', () => {
494 container,
495 ),
496 );
371 - expect(store).toMatchSnapshot('5: parent is suspended');
497 + expect(store).toMatchInlineSnapshot(`
498 + [root]
499 + ▾ <Wrapper>
500 + <Component key="Outside">
501 + ▾ <Suspense>
502 + <Loading key="Parent Fallback">
503 + `);
504 act(() =>
505 legacyRender(
506 <Wrapper
@@ -379,7 +511,20 @@ describe('Store', () => {
511 container,
512 ),
513 );
382 - expect(store).toMatchSnapshot('6: all children are suspended');
514 + expect(store).toMatchInlineSnapshot(`
515 + [root]
516 + ▾ <Wrapper>
517 + <Component key="Outside">
518 + ▾ <Suspense>
519 + <Component key="Unrelated at Start">
520 + ▾ <Suspense>
521 + <Loading key="Suspense 1 Fallback">
522 + ▾ <Suspense>
523 + <Loading key="Suspense 2 Fallback">
524 + ▾ <Suspense>
525 + <Loading key="Suspense 3 Fallback">
526 + <Component key="Unrelated at End">
527 + `);
528 act(() =>
529 legacyRender(
530 <Wrapper
@@ -390,7 +535,20 @@ describe('Store', () => {
535 container,
536 ),
537 );
393 - expect(store).toMatchSnapshot('7: only third child is suspended');
538 + expect(store).toMatchInlineSnapshot(`
539 + [root]
540 + ▾ <Wrapper>
541 + <Component key="Outside">
542 + ▾ <Suspense>
543 + <Component key="Unrelated at Start">
544 + ▾ <Suspense>
545 + <Component key="Suspense 1 Content">
546 + ▾ <Suspense>
547 + <Component key="Suspense 2 Content">
548 + ▾ <Suspense>
549 + <Loading key="Suspense 3 Fallback">
550 + <Component key="Unrelated at End">
551 + `);
552
553 const rendererID = getRendererID();
554 act(() =>
@@ -400,7 +558,20 @@ describe('Store', () => {
558 forceFallback: true,
559 }),
560 );
403 - expect(store).toMatchSnapshot('8: first and third child are suspended');
561 + expect(store).toMatchInlineSnapshot(`
562 + [root]
563 + ▾ <Wrapper>
564 + <Component key="Outside">
565 + ▾ <Suspense>
566 + <Component key="Unrelated at Start">
567 + ▾ <Suspense>
568 + <Loading key="Suspense 1 Fallback">
569 + ▾ <Suspense>
570 + <Component key="Suspense 2 Content">
571 + ▾ <Suspense>
572 + <Loading key="Suspense 3 Fallback">
573 + <Component key="Unrelated at End">
574 + `);
575 act(() =>
576 agent.overrideSuspense({
577 id: store.getElementIDAtIndex(2),
@@ -408,7 +579,13 @@ describe('Store', () => {
579 forceFallback: true,
580 }),
581 );
411 - expect(store).toMatchSnapshot('9: parent is suspended');
582 + expect(store).toMatchInlineSnapshot(`
583 + [root]
584 + ▾ <Wrapper>
585 + <Component key="Outside">
586 + ▾ <Suspense>
587 + <Loading key="Parent Fallback">
588 + `);
589 act(() =>
590 legacyRender(
591 <Wrapper
@@ -419,7 +596,13 @@ describe('Store', () => {
596 container,
597 ),
598 );
422 - expect(store).toMatchSnapshot('10: parent is suspended');
599 + expect(store).toMatchInlineSnapshot(`
600 + [root]
601 + ▾ <Wrapper>
602 + <Component key="Outside">
603 + ▾ <Suspense>
604 + <Loading key="Parent Fallback">
605 + `);
606 act(() =>
607 agent.overrideSuspense({
608 id: store.getElementIDAtIndex(2),
@@ -427,7 +610,20 @@ describe('Store', () => {
610 forceFallback: false,
611 }),
612 );
430 - expect(store).toMatchSnapshot('11: all children are suspended');
613 + expect(store).toMatchInlineSnapshot(`
614 + [root]
615 + ▾ <Wrapper>
616 + <Component key="Outside">
617 + ▾ <Suspense>
618 + <Component key="Unrelated at Start">
619 + ▾ <Suspense>
620 + <Loading key="Suspense 1 Fallback">
621 + ▾ <Suspense>
622 + <Loading key="Suspense 2 Fallback">
623 + ▾ <Suspense>
624 + <Loading key="Suspense 3 Fallback">
625 + <Component key="Unrelated at End">
626 + `);
627 act(() =>
628 agent.overrideSuspense({
629 id: store.getElementIDAtIndex(4),
@@ -435,7 +631,20 @@ describe('Store', () => {
631 forceFallback: false,
632 }),
633 );
438 - expect(store).toMatchSnapshot('12: all children are suspended');
634 + expect(store).toMatchInlineSnapshot(`
635 + [root]
636 + ▾ <Wrapper>
637 + <Component key="Outside">
638 + ▾ <Suspense>
639 + <Component key="Unrelated at Start">
640 + ▾ <Suspense>
641 + <Loading key="Suspense 1 Fallback">
642 + ▾ <Suspense>
643 + <Loading key="Suspense 2 Fallback">
644 + ▾ <Suspense>
645 + <Loading key="Suspense 3 Fallback">
646 + <Component key="Unrelated at End">
647 + `);
648 act(() =>
649 legacyRender(
650 <Wrapper
@@ -446,7 +655,20 @@ describe('Store', () => {
655 container,
656 ),
657 );
449 - expect(store).toMatchSnapshot('13: third child is suspended');
658 + expect(store).toMatchInlineSnapshot(`
659 + [root]
660 + ▾ <Wrapper>
661 + <Component key="Outside">
662 + ▾ <Suspense>
663 + <Component key="Unrelated at Start">
664 + ▾ <Suspense>
665 + <Component key="Suspense 1 Content">
666 + ▾ <Suspense>
667 + <Component key="Suspense 2 Content">
668 + ▾ <Suspense>
669 + <Loading key="Suspense 3 Fallback">
670 + <Component key="Unrelated at End">
671 + `);
672 });
673
674 it('should display a partially rendered SuspenseList', () => {
@@ -474,12 +696,27 @@ describe('Store', () => {
696 act(() => {
697 root.render(<Wrapper shouldSuspense={true} />);
698 });
477 - expect(store).toMatchSnapshot('1: loading');
699 + expect(store).toMatchInlineSnapshot(`
700 + [root]
701 + ▾ <Wrapper>
702 + ▾ <SuspenseList>
703 + <Component key="A">
704 + ▾ <Suspense>
705 + <Loading>
706 + `);
707
708 act(() => {
709 root.render(<Wrapper shouldSuspense={false} />);
710 });
482 - expect(store).toMatchSnapshot('2: resolved');
711 + expect(store).toMatchInlineSnapshot(`
712 + [root]
713 + ▾ <Wrapper>
714 + ▾ <SuspenseList>
715 + <Component key="A">
716 + ▾ <Suspense>
717 + <Component key="B">
718 + <Component key="C">
719 + `);
720 });
721
722 it('should support collapsing parts of the tree', () => {
@@ -496,26 +733,64 @@ describe('Store', () => {
733 act(() =>
734 legacyRender(<Grandparent count={2} />, document.createElement('div')),
735 );
499 - expect(store).toMatchSnapshot('1: mount');
736 + expect(store).toMatchInlineSnapshot(`
737 + [root]
738 + ▾ <Grandparent>
739 + ▾ <Parent>
740 + <Child key="0">
741 + <Child key="1">
742 + ▾ <Parent>
743 + <Child key="0">
744 + <Child key="1">
745 + `);
746
747 const grandparentID = store.getElementIDAtIndex(0);
748 const parentOneID = store.getElementIDAtIndex(1);
749 const parentTwoID = store.getElementIDAtIndex(4);
750
751 act(() => store.toggleIsCollapsed(parentOneID, true));
506 - expect(store).toMatchSnapshot('2: collapse first Parent');
752 + expect(store).toMatchInlineSnapshot(`
753 + [root]
754 + ▾ <Grandparent>
755 + ▸ <Parent>
756 + ▾ <Parent>
757 + <Child key="0">
758 + <Child key="1">
759 + `);
760
761 act(() => store.toggleIsCollapsed(parentTwoID, true));
509 - expect(store).toMatchSnapshot('3: collapse second Parent');
762 + expect(store).toMatchInlineSnapshot(`
763 + [root]
764 + ▾ <Grandparent>
765 + ▸ <Parent>
766 + ▸ <Parent>
767 + `);
768
769 act(() => store.toggleIsCollapsed(parentOneID, false));
512 - expect(store).toMatchSnapshot('4: expand first Parent');
770 + expect(store).toMatchInlineSnapshot(`
771 + [root]
772 + ▾ <Grandparent>
773 + ▾ <Parent>
774 + <Child key="0">
775 + <Child key="1">
776 + ▸ <Parent>
777 + `);
778
779 act(() => store.toggleIsCollapsed(grandparentID, true));
515 - expect(store).toMatchSnapshot('5: collapse Grandparent');
780 + expect(store).toMatchInlineSnapshot(`
781 + [root]
782 + ▸ <Grandparent>
783 + `);
784
785 act(() => store.toggleIsCollapsed(grandparentID, false));
518 - expect(store).toMatchSnapshot('6: expand Grandparent');
786 + expect(store).toMatchInlineSnapshot(`
787 + [root]
788 + ▾ <Grandparent>
789 + ▾ <Parent>
790 + <Child key="0">
791 + <Child key="1">
792 + ▸ <Parent>
793 + `);
794 });
795
796 it('should support reordering of children', () => {
@@ -530,16 +805,43 @@ describe('Store', () => {
805 const container = document.createElement('div');
806
807 act(() => legacyRender(<Root>{[foo, bar]}</Root>, container));
533 - expect(store).toMatchSnapshot('1: mount');
808 + expect(store).toMatchInlineSnapshot(`
809 + [root]
810 + ▾ <Root>
811 + ▾ <Foo key="foo">
812 + <Component key="0">
813 + ▾ <Bar key="bar">
814 + <Component key="0">
815 + <Component key="1">
816 + `);
817
818 act(() => legacyRender(<Root>{[bar, foo]}</Root>, container));
536 - expect(store).toMatchSnapshot('3: reorder children');
819 + expect(store).toMatchInlineSnapshot(`
820 + [root]
821 + ▾ <Root>
822 + ▾ <Bar key="bar">
823 + <Component key="0">
824 + <Component key="1">
825 + ▾ <Foo key="foo">
826 + <Component key="0">
827 + `);
828
829 act(() => store.toggleIsCollapsed(store.getElementIDAtIndex(0), true));
539 - expect(store).toMatchSnapshot('4: collapse root');
830 + expect(store).toMatchInlineSnapshot(`
831 + [root]
832 + ▸ <Root>
833 + `);
834
835 act(() => store.toggleIsCollapsed(store.getElementIDAtIndex(0), false));
542 - expect(store).toMatchSnapshot('5: expand root');
836 + expect(store).toMatchInlineSnapshot(`
837 + [root]
838 + ▾ <Root>
839 + ▾ <Bar key="bar">
840 + <Component key="0">
841 + <Component key="1">
842 + ▾ <Foo key="foo">
843 + <Component key="0">
844 + `);
845 });
846 });
847
@@ -564,7 +866,11 @@ describe('Store', () => {
866 container,
867 ),
868 );
567 - expect(store).toMatchSnapshot('1: mount');
869 + expect(store).toMatchInlineSnapshot(`
870 + [root]
871 + ▸ <Parent>
872 + ▸ <Parent>
873 + `);
874
875 act(() =>
876 legacyRender(
@@ -575,10 +881,14 @@ describe('Store', () => {
881 container,
882 ),
883 );
578 - expect(store).toMatchSnapshot('2: update');
884 + expect(store).toMatchInlineSnapshot(`
885 + [root]
886 + ▸ <Parent>
887 + ▸ <Parent>
888 + `);
889
890 act(() => ReactDOM.unmountComponentAtNode(container));
581 - expect(store).toMatchSnapshot('3: unmount');
891 + expect(store).toMatchInlineSnapshot(``);
892 });
893
894 it('should support mount and update operations for multiple roots', () => {
@@ -593,19 +903,32 @@ describe('Store', () => {
903 legacyRender(<Parent key="A" count={3} />, containerA);
904 legacyRender(<Parent key="B" count={2} />, containerB);
905 });
596 - expect(store).toMatchSnapshot('1: mount');
906 + expect(store).toMatchInlineSnapshot(`
907 + [root]
908 + ▸ <Parent key="A">
909 + [root]
910 + ▸ <Parent key="B">
911 + `);
912
913 act(() => {
914 legacyRender(<Parent key="A" count={4} />, containerA);
915 legacyRender(<Parent key="B" count={1} />, containerB);
916 });
602 - expect(store).toMatchSnapshot('2: update');
917 + expect(store).toMatchInlineSnapshot(`
918 + [root]
919 + ▸ <Parent key="A">
920 + [root]
921 + ▸ <Parent key="B">
922 + `);
923
924 act(() => ReactDOM.unmountComponentAtNode(containerB));
605 - expect(store).toMatchSnapshot('3: unmount B');
925 + expect(store).toMatchInlineSnapshot(`
926 + [root]
927 + ▸ <Parent key="A">
928 + `);
929
930 act(() => ReactDOM.unmountComponentAtNode(containerA));
608 - expect(store).toMatchSnapshot('4: unmount A');
931 + expect(store).toMatchInlineSnapshot(``);
932 });
933
934 it('should filter DOM nodes from the store tree', () => {
@@ -627,13 +950,27 @@ describe('Store', () => {
950 act(() =>
951 legacyRender(<Grandparent count={4} />, document.createElement('div')),
952 );
630 - expect(store).toMatchSnapshot('1: mount');
953 + expect(store).toMatchInlineSnapshot(`
954 + [root]
955 + ▸ <Grandparent>
956 + `);
957
958 act(() => store.toggleIsCollapsed(store.getElementIDAtIndex(0), false));
633 - expect(store).toMatchSnapshot('2: expand Grandparent');
959 + expect(store).toMatchInlineSnapshot(`
960 + [root]
961 + ▾ <Grandparent>
962 + ▸ <Parent>
963 + ▸ <Parent>
964 + `);
965
966 act(() => store.toggleIsCollapsed(store.getElementIDAtIndex(1), false));
636 - expect(store).toMatchSnapshot('3: expand Parent');
967 + expect(store).toMatchInlineSnapshot(`
968 + [root]
969 + ▾ <Grandparent>
970 + ▾ <Parent>
971 + <Child>
972 + ▸ <Parent>
973 + `);
974 });
975
976 it('should display Suspense nodes properly in various states', () => {
@@ -659,17 +996,32 @@ describe('Store', () => {
996
997 const container = document.createElement('div');
998 act(() => legacyRender(<Wrapper shouldSuspense={true} />, container));
662 - expect(store).toMatchSnapshot('1: loading');
999 + expect(store).toMatchInlineSnapshot(`
1000 + [root]
1001 + ▸ <Wrapper>
1002 + `);
1003
1004 // This test isn't meaningful unless we expand the suspended tree
1005 act(() => store.toggleIsCollapsed(store.getElementIDAtIndex(0), false));
1006 act(() => store.toggleIsCollapsed(store.getElementIDAtIndex(2), false));
667 - expect(store).toMatchSnapshot('2: expand Wrapper and Suspense');
1007 + expect(store).toMatchInlineSnapshot(`
1008 + [root]
1009 + ▾ <Wrapper>
1010 + <Component key="Outside">
1011 + ▾ <Suspense>
1012 + <Loading>
1013 + `);
1014
1015 act(() => {
1016 legacyRender(<Wrapper shouldSuspense={false} />, container);
1017 });
672 - expect(store).toMatchSnapshot('2: resolved');
1018 + expect(store).toMatchInlineSnapshot(`
1019 + [root]
1020 + ▾ <Wrapper>
1021 + <Component key="Outside">
1022 + ▾ <Suspense>
1023 + <Component key="Inside">
1024 + `);
1025 });
1026
1027 it('should support expanding parts of the tree', () => {
@@ -686,30 +1038,69 @@ describe('Store', () => {
1038 act(() =>
1039 legacyRender(<Grandparent count={2} />, document.createElement('div')),
1040 );
689 - expect(store).toMatchSnapshot('1: mount');
1041 + expect(store).toMatchInlineSnapshot(`
1042 + [root]
1043 + ▸ <Grandparent>
1044 + `);
1045
1046 const grandparentID = store.getElementIDAtIndex(0);
1047
1048 act(() => store.toggleIsCollapsed(grandparentID, false));
694 - expect(store).toMatchSnapshot('2: expand Grandparent');
1049 + expect(store).toMatchInlineSnapshot(`
1050 + [root]
1051 + ▾ <Grandparent>
1052 + ▸ <Parent>
1053 + ▸ <Parent>
1054 + `);
1055
1056 const parentOneID = store.getElementIDAtIndex(1);
1057 const parentTwoID = store.getElementIDAtIndex(2);
1058
1059 act(() => store.toggleIsCollapsed(parentOneID, false));
700 - expect(store).toMatchSnapshot('3: expand first Parent');
1060 + expect(store).toMatchInlineSnapshot(`
1061 + [root]
1062 + ▾ <Grandparent>
1063 + ▾ <Parent>
1064 + <Child key="0">
1065 + <Child key="1">
1066 + ▸ <Parent>
1067 + `);
1068
1069 act(() => store.toggleIsCollapsed(parentTwoID, false));
703 - expect(store).toMatchSnapshot('4: expand second Parent');
1070 + expect(store).toMatchInlineSnapshot(`
1071 + [root]
1072 + ▾ <Grandparent>
1073 + ▾ <Parent>
1074 + <Child key="0">
1075 + <Child key="1">
1076 + ▾ <Parent>
1077 + <Child key="0">
1078 + <Child key="1">
1079 + `);
1080
1081 act(() => store.toggleIsCollapsed(parentOneID, true));
706 - expect(store).toMatchSnapshot('5: collapse first Parent');
1082 + expect(store).toMatchInlineSnapshot(`
1083 + [root]
1084 + ▾ <Grandparent>
1085 + ▸ <Parent>
1086 + ▾ <Parent>
1087 + <Child key="0">
1088 + <Child key="1">
1089 + `);
1090
1091 act(() => store.toggleIsCollapsed(parentTwoID, true));
709 - expect(store).toMatchSnapshot('6: collapse second Parent');
1092 + expect(store).toMatchInlineSnapshot(`
1093 + [root]
1094 + ▾ <Grandparent>
1095 + ▸ <Parent>
1096 + ▸ <Parent>
1097 + `);
1098
1099 act(() => store.toggleIsCollapsed(grandparentID, true));
712 - expect(store).toMatchSnapshot('7: collapse Grandparent');
1100 + expect(store).toMatchInlineSnapshot(`
1101 + [root]
1102 + ▸ <Grandparent>
1103 + `);
1104 });
1105
1106 it('should support expanding deep parts of the tree', () => {
@@ -731,28 +1122,59 @@ describe('Store', () => {
1122 document.createElement('div'),
1123 ),
1124 );
734 - expect(store).toMatchSnapshot('1: mount');
1125 + expect(store).toMatchInlineSnapshot(`
1126 + [root]
1127 + ▸ <Wrapper>
1128 + `);
1129
1130 const deepestedNodeID = agent.getIDForNode(ref.current);
1131
1132 act(() => store.toggleIsCollapsed(deepestedNodeID, false));
739 - expect(store).toMatchSnapshot('2: expand deepest node');
1133 + expect(store).toMatchInlineSnapshot(`
1134 + [root]
1135 + ▾ <Wrapper>
1136 + ▾ <Nested>
1137 + ▾ <Nested>
1138 + ▾ <Nested>
1139 + <Nested>
1140 + `);
1141
1142 const rootID = store.getElementIDAtIndex(0);
1143
1144 act(() => store.toggleIsCollapsed(rootID, true));
744 - expect(store).toMatchSnapshot('3: collapse root');
1145 + expect(store).toMatchInlineSnapshot(`
1146 + [root]
1147 + ▸ <Wrapper>
1148 + `);
1149
1150 act(() => store.toggleIsCollapsed(rootID, false));
747 - expect(store).toMatchSnapshot('4: expand root');
1151 + expect(store).toMatchInlineSnapshot(`
1152 + [root]
1153 + ▾ <Wrapper>
1154 + ▾ <Nested>
1155 + ▾ <Nested>
1156 + ▾ <Nested>
1157 + <Nested>
1158 + `);
1159
1160 const id = store.getElementIDAtIndex(1);
1161
1162 act(() => store.toggleIsCollapsed(id, true));
752 - expect(store).toMatchSnapshot('5: collapse middle node');
1163 + expect(store).toMatchInlineSnapshot(`
1164 + [root]
1165 + ▾ <Wrapper>
1166 + ▸ <Nested>
1167 + `);
1168
1169 act(() => store.toggleIsCollapsed(id, false));
755 - expect(store).toMatchSnapshot('6: expand middle node');
1170 + expect(store).toMatchInlineSnapshot(`
1171 + [root]
1172 + ▾ <Wrapper>
1173 + ▾ <Nested>
1174 + ▾ <Nested>
1175 + ▾ <Nested>
1176 + <Nested>
1177 + `);
1178 });
1179
1180 it('should support reordering of children', () => {
@@ -767,22 +1189,44 @@ describe('Store', () => {
1189 const container = document.createElement('div');
1190
1191 act(() => legacyRender(<Root>{[foo, bar]}</Root>, container));
770 - expect(store).toMatchSnapshot('1: mount');
1192 + expect(store).toMatchInlineSnapshot(`
1193 + [root]
1194 + ▸ <Root>
1195 + `);
1196
1197 act(() => legacyRender(<Root>{[bar, foo]}</Root>, container));
773 - expect(store).toMatchSnapshot('3: reorder children');
1198 + expect(store).toMatchInlineSnapshot(`
1199 + [root]
1200 + ▸ <Root>
1201 + `);
1202
1203 act(() => store.toggleIsCollapsed(store.getElementIDAtIndex(0), false));
776 - expect(store).toMatchSnapshot('4: expand root');
1204 + expect(store).toMatchInlineSnapshot(`
1205 + [root]
1206 + ▾ <Root>
1207 + ▸ <Bar key="bar">
1208 + ▸ <Foo key="foo">
1209 + `);
1210
1211 act(() => {
1212 store.toggleIsCollapsed(store.getElementIDAtIndex(2), false);
1213 store.toggleIsCollapsed(store.getElementIDAtIndex(1), false);
1214 });
782 - expect(store).toMatchSnapshot('5: expand leaves');
1215 + expect(store).toMatchInlineSnapshot(`
1216 + [root]
1217 + ▾ <Root>
1218 + ▾ <Bar key="bar">
1219 + <Component key="0">
1220 + <Component key="1">
1221 + ▾ <Foo key="foo">
1222 + <Component key="0">
1223 + `);
1224
1225 act(() => store.toggleIsCollapsed(store.getElementIDAtIndex(0), true));
785 - expect(store).toMatchSnapshot('6: collapse root');
1226 + expect(store).toMatchInlineSnapshot(`
1227 + [root]
1228 + ▸ <Root>
1229 + `);
1230 });
1231
1232 it('should not add new nodes when suspense is toggled', () => {
@@ -799,11 +1243,19 @@ describe('Store', () => {
1243 const Child = () => null;
1244
1245 act(() => legacyRender(<SuspenseTree />, document.createElement('div')));
802 - expect(store).toMatchSnapshot('1: mount');
1246 + expect(store).toMatchInlineSnapshot(`
1247 + [root]
1248 + ▸ <SuspenseTree>
1249 + `);
1250
1251 act(() => store.toggleIsCollapsed(store.getElementIDAtIndex(0), false));
1252 act(() => store.toggleIsCollapsed(store.getElementIDAtIndex(1), false));
806 - expect(store).toMatchSnapshot('2: expand tree');
1253 + expect(store).toMatchInlineSnapshot(`
1254 + [root]
1255 + ▾ <SuspenseTree>
1256 + ▾ <Suspense>
1257 + ▸ <Parent>
1258 + `);
1259
1260 const rendererID = getRendererID();
1261 const suspenseID = store.getElementIDAtIndex(1);
@@ -815,7 +1267,12 @@ describe('Store', () => {
1267 forceFallback: true,
1268 }),
1269 );
818 - expect(store).toMatchSnapshot('3: toggle fallback on');
1270 + expect(store).toMatchInlineSnapshot(`
1271 + [root]
1272 + ▾ <SuspenseTree>
1273 + ▾ <Suspense>
1274 + <Fallback>
1275 + `);
1276
1277 act(() =>
1278 agent.overrideSuspense({
@@ -824,7 +1281,12 @@ describe('Store', () => {
1281 forceFallback: false,
1282 }),
1283 );
827 - expect(store).toMatchSnapshot('4: toggle fallback on');
1284 + expect(store).toMatchInlineSnapshot(`
1285 + [root]
1286 + ▾ <SuspenseTree>
1287 + ▾ <Suspense>
1288 + ▸ <Parent>
1289 + `);
1290 });
1291 });
1292
@@ -940,7 +1402,10 @@ describe('Store', () => {
1402 const fauxElement = Object.assign({}, <Child />, {key: 123});
1403
1404 act(() => legacyRender([fauxElement], document.createElement('div')));
943 - expect(store).toMatchSnapshot('1: mount');
1405 + expect(store).toMatchInlineSnapshot(`
1406 + [root]
1407 + <Child key="123">
1408 + `);
1409 });
1410
1411 it('should show the right display names for special component types', async () => {
@@ -1057,19 +1522,31 @@ describe('Store', () => {
1522 // Render once to start fetching the lazy component
1523 act(() => legacyRender(<App renderChildren={true} />, container));
1524
1060 - expect(store).toMatchSnapshot('1: mounted + loading');
1525 + expect(store).toMatchInlineSnapshot(`
1526 + [root]
1527 + ▾ <App>
1528 + <Suspense>
1529 + `);
1530
1531 await Promise.resolve();
1532
1533 // Render again after it resolves
1534 act(() => legacyRender(<App renderChildren={true} />, container));
1535
1067 - expect(store).toMatchSnapshot('2: mounted + loaded');
1536 + expect(store).toMatchInlineSnapshot(`
1537 + [root]
1538 + ▾ <App>
1539 + ▾ <Suspense>
1540 + <LazyInnerComponent>
1541 + `);
1542
1543 // Render again to unmount it
1544 act(() => legacyRender(<App renderChildren={false} />, container));
1545
1072 - expect(store).toMatchSnapshot('3: unmounted');
1546 + expect(store).toMatchInlineSnapshot(`
1547 + [root]
1548 + <App>
1549 + `);
1550 });
1551
1552 it('should support Lazy components in (createRoot)', async () => {
@@ -1079,19 +1556,31 @@ describe('Store', () => {
1556 // Render once to start fetching the lazy component
1557 act(() => root.render(<App renderChildren={true} />));
1558
1082 - expect(store).toMatchSnapshot('1: mounted + loading');
1559 + expect(store).toMatchInlineSnapshot(`
1560 + [root]
1561 + ▾ <App>
1562 + <Suspense>
1563 + `);
1564
1565 await Promise.resolve();
1566
1567 // Render again after it resolves
1568 act(() => root.render(<App renderChildren={true} />));
1569
1089 - expect(store).toMatchSnapshot('2: mounted + loaded');
1570 + expect(store).toMatchInlineSnapshot(`
1571 + [root]
1572 + ▾ <App>
1573 + ▾ <Suspense>
1574 + <LazyInnerComponent>
1575 + `);
1576
1577 // Render again to unmount it
1578 act(() => root.render(<App renderChildren={false} />));
1579
1094 - expect(store).toMatchSnapshot('3: unmounted');
1580 + expect(store).toMatchInlineSnapshot(`
1581 + [root]
1582 + <App>
1583 + `);
1584 });
1585
1586 it('should support Lazy components that are unmounted before they finish loading (legacy render)', async () => {
@@ -1100,12 +1589,19 @@ describe('Store', () => {
1589 // Render once to start fetching the lazy component
1590 act(() => legacyRender(<App renderChildren={true} />, container));
1591
1103 - expect(store).toMatchSnapshot('1: mounted + loading');
1592 + expect(store).toMatchInlineSnapshot(`
1593 + [root]
1594 + ▾ <App>
1595 + <Suspense>
1596 + `);
1597
1598 // Render again to unmount it before it finishes loading
1599 act(() => legacyRender(<App renderChildren={false} />, container));
1600
1108 - expect(store).toMatchSnapshot('2: unmounted');
1601 + expect(store).toMatchInlineSnapshot(`
1602 + [root]
1603 + <App>
1604 + `);
1605 });
1606
1607 it('should support Lazy components that are unmounted before they finish loading in (createRoot)', async () => {
@@ -1115,12 +1611,19 @@ describe('Store', () => {
1611 // Render once to start fetching the lazy component
1612 act(() => root.render(<App renderChildren={true} />));
1613
1118 - expect(store).toMatchSnapshot('1: mounted + loading');
1614 + expect(store).toMatchInlineSnapshot(`
1615 + [root]
1616 + ▾ <App>
1617 + <Suspense>
1618 + `);
1619
1620 // Render again to unmount it before it finishes loading
1621 act(() => root.render(<App renderChildren={false} />));
1622
1123 - expect(store).toMatchSnapshot('2: unmounted');
1623 + expect(store).toMatchInlineSnapshot(`
1624 + [root]
1625 + <App>
1626 + `);
1627 });
1628 });
1629
packages/react-devtools-shared/src/__tests__/storeOwners-test.js
+109 -42
@@ -26,6 +26,11 @@ describe('Store owners list', () => {
26 legacyRender = utils.legacyRender;
27 });
28
29 + function getFormattedOwnersList(elementID) {
30 + const ownersList = store.getOwnersListForElement(elementID);
31 + return printOwnersList(ownersList);
32 + }
33 +
34 it('should drill through intermediate components', () => {
35 const Root = () => (
36 <Intermediate>
@@ -39,17 +44,26 @@ describe('Store owners list', () => {
44 const Intermediate = ({children}) => <Wrapper>{children}</Wrapper>;
45
46 act(() => legacyRender(<Root />, document.createElement('div')));
42 - expect(store).toMatchSnapshot('1: mount');
47 + expect(store).toMatchInlineSnapshot(`
48 + [root]
49 + ▾ <Root>
50 + ▾ <Intermediate>
51 + ▾ <Wrapper>
52 + <Leaf>
53 + `);
54
55 const rootID = store.getElementIDAtIndex(0);
45 - expect(
46 - printOwnersList(store.getOwnersListForElement(rootID)),
47 - ).toMatchSnapshot('2: components owned by <Root>');
56 + expect(getFormattedOwnersList(rootID)).toMatchInlineSnapshot(`
57 + " ▾ <Root>
58 + ▾ <Intermediate>
59 + <Leaf>"
60 + `);
61
62 const intermediateID = store.getElementIDAtIndex(1);
50 - expect(
51 - printOwnersList(store.getOwnersListForElement(intermediateID)),
52 - ).toMatchSnapshot('3: components owned by <Intermediate>');
63 + expect(getFormattedOwnersList(intermediateID)).toMatchInlineSnapshot(`
64 + " ▾ <Intermediate>
65 + ▾ <Wrapper>"
66 + `);
67 });
68
69 it('should drill through interleaved intermediate components', () => {
@@ -67,17 +81,30 @@ describe('Store owners list', () => {
81 ];
82
83 act(() => legacyRender(<Root />, document.createElement('div')));
70 - expect(store).toMatchSnapshot('1: mount');
84 + expect(store).toMatchInlineSnapshot(`
85 + [root]
86 + ▾ <Root>
87 + ▾ <Intermediate key="intermediate">
88 + <Leaf key="leaf">
89 + ▾ <Wrapper key="wrapper">
90 + <Leaf>
91 + <Leaf key="leaf">
92 + `);
93
94 const rootID = store.getElementIDAtIndex(0);
73 - expect(
74 - printOwnersList(store.getOwnersListForElement(rootID)),
75 - ).toMatchSnapshot('2: components owned by <Root>');
95 + expect(getFormattedOwnersList(rootID)).toMatchInlineSnapshot(`
96 + " ▾ <Root>
97 + ▾ <Intermediate key=\\"intermediate\\">
98 + <Leaf>
99 + <Leaf key=\\"leaf\\">"
100 + `);
101
102 const intermediateID = store.getElementIDAtIndex(1);
78 - expect(
79 - printOwnersList(store.getOwnersListForElement(intermediateID)),
80 - ).toMatchSnapshot('3: components owned by <Intermediate>');
103 + expect(getFormattedOwnersList(intermediateID)).toMatchInlineSnapshot(`
104 + " ▾ <Intermediate key=\\"intermediate\\">
105 + <Leaf key=\\"leaf\\">
106 + ▾ <Wrapper key=\\"wrapper\\">"
107 + `);
108 });
109
110 it('should show the proper owners list order and contents after insertions and deletions', () => {
@@ -103,12 +130,20 @@ describe('Store owners list', () => {
130 container,
131 ),
132 );
106 - expect(store).toMatchSnapshot('1: mount');
133
134 const rootID = store.getElementIDAtIndex(0);
109 - expect(
110 - printOwnersList(store.getOwnersListForElement(rootID)),
111 - ).toMatchSnapshot('2: components owned by <Root>');
135 + expect(store).toMatchInlineSnapshot(`
136 + [root]
137 + ▾ <Root>
138 + ▾ <Intermediate>
139 + ▾ <Wrapper>
140 + <Leaf>
141 + `);
142 + expect(getFormattedOwnersList(rootID)).toMatchInlineSnapshot(`
143 + " ▾ <Root>
144 + ▾ <Intermediate>
145 + <Leaf>"
146 + `);
147
148 act(() =>
149 legacyRender(
@@ -116,11 +151,20 @@ describe('Store owners list', () => {
151 container,
152 ),
153 );
119 - expect(store).toMatchSnapshot('3: update to add direct');
120 -
121 - expect(
122 - printOwnersList(store.getOwnersListForElement(rootID)),
123 - ).toMatchSnapshot('4: components owned by <Root>');
154 + expect(store).toMatchInlineSnapshot(`
155 + [root]
156 + ▾ <Root>
157 + <Leaf>
158 + ▾ <Intermediate>
159 + ▾ <Wrapper>
160 + <Leaf>
161 + `);
162 + expect(getFormattedOwnersList(rootID)).toMatchInlineSnapshot(`
163 + " ▾ <Root>
164 + <Leaf>
165 + ▾ <Intermediate>
166 + <Leaf>"
167 + `);
168
169 act(() =>
170 legacyRender(
@@ -128,11 +172,15 @@ describe('Store owners list', () => {
172 container,
173 ),
174 );
131 - expect(store).toMatchSnapshot('5: update to remove indirect');
132 -
133 - expect(
134 - printOwnersList(store.getOwnersListForElement(rootID)),
135 - ).toMatchSnapshot('6: components owned by <Root>');
175 + expect(store).toMatchInlineSnapshot(`
176 + [root]
177 + ▾ <Root>
178 + <Leaf>
179 + `);
180 + expect(getFormattedOwnersList(rootID)).toMatchInlineSnapshot(`
181 + " ▾ <Root>
182 + <Leaf>"
183 + `);
184
185 act(() =>
186 legacyRender(
@@ -140,11 +188,13 @@ describe('Store owners list', () => {
188 container,
189 ),
190 );
143 - expect(store).toMatchSnapshot('7: update to remove both');
144 -
145 - expect(
146 - printOwnersList(store.getOwnersListForElement(rootID)),
147 - ).toMatchSnapshot('8: components owned by <Root>');
191 + expect(store).toMatchInlineSnapshot(`
192 + [root]
193 + <Root>
194 + `);
195 + expect(getFormattedOwnersList(rootID)).toMatchInlineSnapshot(
196 + `" <Root>"`,
197 + );
198 });
199
200 it('should show the proper owners list ordering after reordered children', () => {
@@ -156,18 +206,35 @@ describe('Store owners list', () => {
206
207 const container = document.createElement('div');
208 act(() => legacyRender(<Root ascending={true} />, container));
159 - expect(store).toMatchSnapshot('1: mount (ascending)');
209
210 const rootID = store.getElementIDAtIndex(0);
162 - expect(
163 - printOwnersList(store.getOwnersListForElement(rootID)),
164 - ).toMatchSnapshot('2: components owned by <Root>');
211 + expect(store).toMatchInlineSnapshot(`
212 + [root]
213 + ▾ <Root>
214 + <Leaf key="A">
215 + <Leaf key="B">
216 + <Leaf key="C">
217 + `);
218 + expect(getFormattedOwnersList(rootID)).toMatchInlineSnapshot(`
219 + " ▾ <Root>
220 + <Leaf key=\\"A\\">
221 + <Leaf key=\\"B\\">
222 + <Leaf key=\\"C\\">"
223 + `);
224
225 act(() => legacyRender(<Root ascending={false} />, container));
167 - expect(store).toMatchSnapshot('3: update (descending)');
168 -
169 - expect(
170 - printOwnersList(store.getOwnersListForElement(rootID)),
171 - ).toMatchSnapshot('4: components owned by <Root>');
226 + expect(store).toMatchInlineSnapshot(`
227 + [root]
228 + ▾ <Root>
229 + <Leaf key="C">
230 + <Leaf key="B">
231 + <Leaf key="A">
232 + `);
233 + expect(getFormattedOwnersList(rootID)).toMatchInlineSnapshot(`
234 + " ▾ <Root>
235 + <Leaf key=\\"C\\">
236 + <Leaf key=\\"B\\">
237 + <Leaf key=\\"A\\">"
238 + `);
239 });
240 });
packages/react-devtools-shared/src/__tests__/utils.js
+1 -1
@@ -232,7 +232,7 @@ export function exportImportHelper(bridge: FrontendBridge, store: Store): void {
232 );
233
234 // Snapshot the JSON-parsed object, rather than the raw string, because Jest formats the diff nicer.
235 - expect(parsedProfilingDataExport).toMatchSnapshot('imported data');
235 + // expect(parsedProfilingDataExport).toMatchSnapshot('imported data');
236
237 act(() => {
238 // Apply the new exported-then-imported data so tests can re-run assertions.