hanzoai/react
2
0
Fork 0
mirror of https://github.com/hanzoai/react.git synced 2026-09-24 17:02:27 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Brian Vaughn
2022-03-30 11:02:51 -04:00
committed by GitHub
parent 8af9084324
commit cadcba4ab8
17 changed files with 2051 additions and 11159 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/react-devtools-shared/src/__tests__/__snapshots__/ownersListContext-test.js.snap
-134
View File
@@ -1,134 +0,0 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`OwnersListContext should fetch the owners list for the selected element that includes filtered components: mount 1`] = `
[root]
▾ <Grandparent>
<Child>
<Child>
`;
exports[`OwnersListContext should fetch the owners list for the selected element that includes filtered components: owners for "Child" 1`] = `
Array [
Object {
"displayName": "Grandparent",
"hocDisplayNames": null,
"id": 2,
"key": null,
"type": 5,
},
Object {
"displayName": "Parent",
"hocDisplayNames": null,
"id": 3,
"key": null,
"type": 5,
},
Object {
"displayName": "Child",
"hocDisplayNames": null,
"id": 4,
"key": null,
"type": 5,
},
]
`;
exports[`OwnersListContext should fetch the owners list for the selected element: mount 1`] = `
[root]
▾ <Grandparent>
▾ <Parent>
<Child>
<Child>
`;
exports[`OwnersListContext should fetch the owners list for the selected element: owners for "Child" 1`] = `
Array [
Object {
"displayName": "Grandparent",
"hocDisplayNames": null,
"id": 2,
"key": null,
"type": 5,
},
Object {
"displayName": "Parent",
"hocDisplayNames": null,
"id": 3,
"key": null,
"type": 5,
},
Object {
"displayName": "Child",
"hocDisplayNames": null,
"id": 4,
"key": null,
"type": 5,
},
]
`;
exports[`OwnersListContext should fetch the owners list for the selected element: owners for "Parent" 1`] = `
Array [
Object {
"displayName": "Grandparent",
"hocDisplayNames": null,
"id": 2,
"key": null,
"type": 5,
},
Object {
"displayName": "Parent",
"hocDisplayNames": null,
"id": 3,
"key": null,
"type": 5,
},
]
`;
exports[`OwnersListContext should include all owners for a component wrapped in react memo: owners for "InnerComponent" 1`] = `
Array [
Object {
"displayName": "Grandparent",
"hocDisplayNames": null,
"id": 2,
"key": null,
"type": 5,
},
Object {
"displayName": "InnerComponent",
"hocDisplayNames": Array [
"Memo",
],
"id": 3,
"key": null,
"type": 8,
},
Object {
"displayName": "InnerComponent",
"hocDisplayNames": Array [
"ForwardRef",
],
"id": 4,
"key": null,
"type": 6,
},
]
`;
exports[`OwnersListContext should include the current element even if there are no other owners: mount 1`] = `
[root]
<Grandparent>
`;
exports[`OwnersListContext should include the current element even if there are no other owners: owners for "Grandparent" 1`] = `
Array [
Object {
"displayName": "Grandparent",
"hocDisplayNames": null,
"id": 2,
"key": null,
"type": 5,
},
]
`;
packages/react-devtools-shared/src/__tests__/__snapshots__/profilerContext-test.js.snap
-41
View File
@@ -1,41 +0,0 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`ProfilerContext should auto-select the root ID matching the Components tab selection if it has profiling data: mounted 1`] = `
[root]
▾ <Parent>
<Child>
[root]
▾ <Parent>
<Child>
`;
exports[`ProfilerContext should maintain root selection between profiling sessions so long as there is data for that root: mounted 1`] = `
[root]
▾ <Parent>
<Child>
[root]
▾ <Parent>
<Child>
`;
exports[`ProfilerContext should not select the root ID matching the Components tab selection if it has no profiling data: mounted 1`] = `
[root]
▾ <Parent>
<Child>
[root]
▾ <Parent>
<Child>
`;
exports[`ProfilerContext should sync selected element in the Components tab too, provided the element is a match: mounted 1`] = `
[root]
▾ <GrandParent>
▾ <Parent>
<Child>
`;
exports[`ProfilerContext should sync selected element in the Components tab too, provided the element is a match: updated 1`] = `
[root]
▾ <GrandParent>
<Parent>
`;
packages/react-devtools-shared/src/__tests__/__snapshots__/profilingCache-test.js.snap
-8005
View File
File diff suppressed because it is too large Load Diff
packages/react-devtools-shared/src/__tests__/__snapshots__/profilingCharts-test.js.snap
-430
View File
@@ -1,430 +0,0 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`profiling charts flamegraph chart should contain valid data: 0: CommitTree 1`] = `
Object {
"nodes": Map {
1 => Object {
"children": Array [
2,
],
"displayName": null,
"hocDisplayNames": null,
"id": 1,
"key": null,
"parentID": 0,
"treeBaseDuration": 15,
"type": 11,
},
2 => Object {
"children": Array [
3,
4,
5,
],
"displayName": "Parent",
"hocDisplayNames": null,
"id": 2,
"key": null,
"parentID": 1,
"treeBaseDuration": 15,
"type": 5,
},
3 => Object {
"children": Array [],
"displayName": "Child",
"hocDisplayNames": null,
"id": 3,
"key": "first",
"parentID": 2,
"treeBaseDuration": 3,
"type": 8,
},
4 => Object {
"children": Array [],
"displayName": "Child",
"hocDisplayNames": null,
"id": 4,
"key": "second",
"parentID": 2,
"treeBaseDuration": 2,
"type": 8,
},
5 => Object {
"children": Array [],
"displayName": "Child",
"hocDisplayNames": null,
"id": 5,
"key": "third",
"parentID": 2,
"treeBaseDuration": 0,
"type": 8,
},
},
"rootID": 1,
}
`;
exports[`profiling charts flamegraph chart should contain valid data: 0: FlamegraphChartData 1`] = `
Object {
"baseDuration": 15,
"depth": 2,
"idToDepthMap": Map {
2 => 1,
5 => 2,
4 => 2,
3 => 2,
},
"maxSelfDuration": 10,
"renderPathNodes": Set {
1,
2,
},
"rows": Array [
Array [
Object {
"actualDuration": 15,
"didRender": true,
"id": 2,
"label": "Parent (10ms of 15ms)",
"name": "Parent",
"offset": 0,
"selfDuration": 10,
"treeBaseDuration": 15,
},
],
Array [
Object {
"actualDuration": 0,
"didRender": true,
"id": 5,
"label": "Child key=\\"third\\" (<0.1ms of <0.1ms)",
"name": "Child",
"offset": 15,
"selfDuration": 0,
"treeBaseDuration": 0,
},
Object {
"actualDuration": 2,
"didRender": true,
"id": 4,
"label": "Child key=\\"second\\" (2ms of 2ms)",
"name": "Child",
"offset": 13,
"selfDuration": 2,
"treeBaseDuration": 2,
},
Object {
"actualDuration": 3,
"didRender": true,
"id": 3,
"label": "Child key=\\"first\\" (3ms of 3ms)",
"name": "Child",
"offset": 10,
"selfDuration": 3,
"treeBaseDuration": 3,
},
],
],
}
`;
exports[`profiling charts flamegraph chart should contain valid data: 1: CommitTree 1`] = `
Object {
"nodes": Map {
1 => Object {
"children": Array [
2,
],
"displayName": null,
"hocDisplayNames": null,
"id": 1,
"key": null,
"parentID": 0,
"treeBaseDuration": 15,
"type": 11,
},
2 => Object {
"children": Array [
3,
4,
5,
],
"displayName": "Parent",
"hocDisplayNames": null,
"id": 2,
"key": null,
"parentID": 1,
"treeBaseDuration": 15,
"type": 5,
},
3 => Object {
"children": Array [],
"displayName": "Child",
"hocDisplayNames": null,
"id": 3,
"key": "first",
"parentID": 2,
"treeBaseDuration": 3,
"type": 8,
},
4 => Object {
"children": Array [],
"displayName": "Child",
"hocDisplayNames": null,
"id": 4,
"key": "second",
"parentID": 2,
"treeBaseDuration": 2,
"type": 8,
},
5 => Object {
"children": Array [],
"displayName": "Child",
"hocDisplayNames": null,
"id": 5,
"key": "third",
"parentID": 2,
"treeBaseDuration": 0,
"type": 8,
},
},
"rootID": 1,
}
`;
exports[`profiling charts flamegraph chart should contain valid data: 1: FlamegraphChartData 1`] = `
Object {
"baseDuration": 15,
"depth": 2,
"idToDepthMap": Map {
2 => 1,
5 => 2,
4 => 2,
3 => 2,
},
"maxSelfDuration": 10,
"renderPathNodes": Set {
1,
},
"rows": Array [
Array [
Object {
"actualDuration": 10,
"didRender": true,
"id": 2,
"label": "Parent (10ms of 10ms)",
"name": "Parent",
"offset": 0,
"selfDuration": 10,
"treeBaseDuration": 15,
},
],
Array [
Object {
"actualDuration": 0,
"didRender": false,
"id": 5,
"label": "Child key=\\"third\\"",
"name": "Child",
"offset": 15,
"selfDuration": 0,
"treeBaseDuration": 0,
},
Object {
"actualDuration": 0,
"didRender": false,
"id": 4,
"label": "Child key=\\"second\\"",
"name": "Child",
"offset": 13,
"selfDuration": 0,
"treeBaseDuration": 2,
},
Object {
"actualDuration": 0,
"didRender": false,
"id": 3,
"label": "Child key=\\"first\\"",
"name": "Child",
"offset": 10,
"selfDuration": 0,
"treeBaseDuration": 3,
},
],
],
}
`;
exports[`profiling charts ranked chart should contain valid data: 0: CommitTree 1`] = `
Object {
"nodes": Map {
1 => Object {
"children": Array [
2,
],
"displayName": null,
"hocDisplayNames": null,
"id": 1,
"key": null,
"parentID": 0,
"treeBaseDuration": 15,
"type": 11,
},
2 => Object {
"children": Array [
3,
4,
5,
],
"displayName": "Parent",
"hocDisplayNames": null,
"id": 2,
"key": null,
"parentID": 1,
"treeBaseDuration": 15,
"type": 5,
},
3 => Object {
"children": Array [],
"displayName": "Child",
"hocDisplayNames": null,
"id": 3,
"key": "first",
"parentID": 2,
"treeBaseDuration": 3,
"type": 8,
},
4 => Object {
"children": Array [],
"displayName": "Child",
"hocDisplayNames": null,
"id": 4,
"key": "second",
"parentID": 2,
"treeBaseDuration": 2,
"type": 8,
},
5 => Object {
"children": Array [],
"displayName": "Child",
"hocDisplayNames": null,
"id": 5,
"key": "third",
"parentID": 2,
"treeBaseDuration": 0,
"type": 8,
},
},
"rootID": 1,
}
`;
exports[`profiling charts ranked chart should contain valid data: 0: RankedChartData 1`] = `
Object {
"maxValue": 10,
"nodes": Array [
Object {
"id": 2,
"label": "Parent (10ms)",
"name": "Parent",
"value": 10,
},
Object {
"id": 3,
"label": "Child (Memo) key=\\"first\\" (3ms)",
"name": "Child",
"value": 3,
},
Object {
"id": 4,
"label": "Child (Memo) key=\\"second\\" (2ms)",
"name": "Child",
"value": 2,
},
Object {
"id": 5,
"label": "Child (Memo) key=\\"third\\" (<0.1ms)",
"name": "Child",
"value": 0,
},
],
}
`;
exports[`profiling charts ranked chart should contain valid data: 1: CommitTree 1`] = `
Object {
"nodes": Map {
1 => Object {
"children": Array [
2,
],
"displayName": null,
"hocDisplayNames": null,
"id": 1,
"key": null,
"parentID": 0,
"treeBaseDuration": 15,
"type": 11,
},
2 => Object {
"children": Array [
3,
4,
5,
],
"displayName": "Parent",
"hocDisplayNames": null,
"id": 2,
"key": null,
"parentID": 1,
"treeBaseDuration": 15,
"type": 5,
},
3 => Object {
"children": Array [],
"displayName": "Child",
"hocDisplayNames": null,
"id": 3,
"key": "first",
"parentID": 2,
"treeBaseDuration": 3,
"type": 8,
},
4 => Object {
"children": Array [],
"displayName": "Child",
"hocDisplayNames": null,
"id": 4,
"key": "second",
"parentID": 2,
"treeBaseDuration": 2,
"type": 8,
},
5 => Object {
"children": Array [],
"displayName": "Child",
"hocDisplayNames": null,
"id": 5,
"key": "third",
"parentID": 2,
"treeBaseDuration": 0,
"type": 8,
},
},
"rootID": 1,
}
`;
exports[`profiling charts ranked chart should contain valid data: 1: RankedChartData 1`] = `
Object {
"maxValue": 10,
"nodes": Array [
Object {
"id": 2,
"label": "Parent (10ms)",
"name": "Parent",
"value": 10,
},
],
}
`;
packages/react-devtools-shared/src/__tests__/__snapshots__/profilingCommitTreeBuilder-test.js.snap
-526
View File
@@ -1,526 +0,0 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`commit tree Lazy should support Lazy components (createRoot): 0: CommitTree 1`] = `
Object {
"nodes": Map {
1 => Object {
"children": Array [
2,
],
"displayName": null,
"hocDisplayNames": null,
"id": 1,
"key": null,
"parentID": 0,
"treeBaseDuration": 0,
"type": 11,
},
2 => Object {
"children": Array [
3,
],
"displayName": "App",
"hocDisplayNames": null,
"id": 2,
"key": null,
"parentID": 1,
"treeBaseDuration": 0,
"type": 5,
},
3 => Object {
"children": Array [],
"displayName": "Suspense",
"hocDisplayNames": null,
"id": 3,
"key": null,
"parentID": 2,
"treeBaseDuration": 0,
"type": 12,
},
},
"rootID": 1,
}
`;
exports[`commit tree Lazy should support Lazy components (createRoot): 1: CommitTree 1`] = `
Object {
"nodes": Map {
1 => Object {
"children": Array [
2,
],
"displayName": null,
"hocDisplayNames": null,
"id": 1,
"key": null,
"parentID": 0,
"treeBaseDuration": 0,
"type": 11,
},
2 => Object {
"children": Array [
3,
],
"displayName": "App",
"hocDisplayNames": null,
"id": 2,
"key": null,
"parentID": 1,
"treeBaseDuration": 0,
"type": 5,
},
3 => Object {
"children": Array [
6,
],
"displayName": "Suspense",
"hocDisplayNames": null,
"id": 3,
"key": null,
"parentID": 2,
"treeBaseDuration": 0,
"type": 12,
},
6 => Object {
"children": Array [],
"displayName": "LazyInnerComponent",
"hocDisplayNames": null,
"id": 6,
"key": null,
"parentID": 3,
"treeBaseDuration": 0,
"type": 5,
},
},
"rootID": 1,
}
`;
exports[`commit tree Lazy should support Lazy components (legacy render): 0: CommitTree 1`] = `
Object {
"nodes": Map {
1 => Object {
"children": Array [
2,
],
"displayName": null,
"hocDisplayNames": null,
"id": 1,
"key": null,
"parentID": 0,
"treeBaseDuration": 0,
"type": 11,
},
2 => Object {
"children": Array [
3,
],
"displayName": "App",
"hocDisplayNames": null,
"id": 2,
"key": null,
"parentID": 1,
"treeBaseDuration": 0,
"type": 5,
},
3 => Object {
"children": Array [],
"displayName": "Suspense",
"hocDisplayNames": null,
"id": 3,
"key": null,
"parentID": 2,
"treeBaseDuration": 0,
"type": 12,
},
},
"rootID": 1,
}
`;
exports[`commit tree Lazy should support Lazy components (legacy render): 1: CommitTree 1`] = `
Object {
"nodes": Map {
1 => Object {
"children": Array [
2,
],
"displayName": null,
"hocDisplayNames": null,
"id": 1,
"key": null,
"parentID": 0,
"treeBaseDuration": 0,
"type": 11,
},
2 => Object {
"children": Array [
3,
],
"displayName": "App",
"hocDisplayNames": null,
"id": 2,
"key": null,
"parentID": 1,
"treeBaseDuration": 0,
"type": 5,
},
3 => Object {
"children": Array [
6,
],
"displayName": "Suspense",
"hocDisplayNames": null,
"id": 3,
"key": null,
"parentID": 2,
"treeBaseDuration": 0,
"type": 12,
},
6 => Object {
"children": Array [],
"displayName": "LazyInnerComponent",
"hocDisplayNames": null,
"id": 6,
"key": null,
"parentID": 3,
"treeBaseDuration": 0,
"type": 5,
},
},
"rootID": 1,
}
`;
exports[`commit tree Lazy should support Lazy components that are unmounted before resolving (createRoot): 0: CommitTree 1`] = `
Object {
"nodes": Map {
1 => Object {
"children": Array [
2,
],
"displayName": null,
"hocDisplayNames": null,
"id": 1,
"key": null,
"parentID": 0,
"treeBaseDuration": 0,
"type": 11,
},
2 => Object {
"children": Array [
3,
],
"displayName": "App",
"hocDisplayNames": null,
"id": 2,
"key": null,
"parentID": 1,
"treeBaseDuration": 0,
"type": 5,
},
3 => Object {
"children": Array [],
"displayName": "Suspense",
"hocDisplayNames": null,
"id": 3,
"key": null,
"parentID": 2,
"treeBaseDuration": 0,
"type": 12,
},
},
"rootID": 1,
}
`;
exports[`commit tree Lazy should support Lazy components that are unmounted before resolving (createRoot): 1: CommitTree 1`] = `
Object {
"nodes": Map {
1 => Object {
"children": Array [
2,
],
"displayName": null,
"hocDisplayNames": null,
"id": 1,
"key": null,
"parentID": 0,
"treeBaseDuration": 0,
"type": 11,
},
2 => Object {
"children": Array [],
"displayName": "App",
"hocDisplayNames": null,
"id": 2,
"key": null,
"parentID": 1,
"treeBaseDuration": 0,
"type": 5,
},
},
"rootID": 1,
}
`;
exports[`commit tree Lazy should support Lazy components that are unmounted before resolving (legacy render): 0: CommitTree 1`] = `
Object {
"nodes": Map {
1 => Object {
"children": Array [
2,
],
"displayName": null,
"hocDisplayNames": null,
"id": 1,
"key": null,
"parentID": 0,
"treeBaseDuration": 0,
"type": 11,
},
2 => Object {
"children": Array [
3,
],
"displayName": "App",
"hocDisplayNames": null,
"id": 2,
"key": null,
"parentID": 1,
"treeBaseDuration": 0,
"type": 5,
},
3 => Object {
"children": Array [],
"displayName": "Suspense",
"hocDisplayNames": null,
"id": 3,
"key": null,
"parentID": 2,
"treeBaseDuration": 0,
"type": 12,
},
},
"rootID": 1,
}
`;
exports[`commit tree Lazy should support Lazy components that are unmounted before resolving (legacy render): 1: CommitTree 1`] = `
Object {
"nodes": Map {
1 => Object {
"children": Array [
2,
],
"displayName": null,
"hocDisplayNames": null,
"id": 1,
"key": null,
"parentID": 0,
"treeBaseDuration": 0,
"type": 11,
},
2 => Object {
"children": Array [],
"displayName": "App",
"hocDisplayNames": null,
"id": 2,
"key": null,
"parentID": 1,
"treeBaseDuration": 0,
"type": 5,
},
},
"rootID": 1,
}
`;
exports[`commit tree should be able to rebuild the store tree for each commit: 0: CommitTree 1`] = `
Object {
"nodes": Map {
1 => Object {
"children": Array [
2,
],
"displayName": null,
"hocDisplayNames": null,
"id": 1,
"key": null,
"parentID": 0,
"treeBaseDuration": 12,
"type": 11,
},
2 => Object {
"children": Array [
3,
],
"displayName": "Parent",
"hocDisplayNames": null,
"id": 2,
"key": null,
"parentID": 1,
"treeBaseDuration": 12,
"type": 5,
},
3 => Object {
"children": Array [],
"displayName": "Child",
"hocDisplayNames": null,
"id": 3,
"key": "0",
"parentID": 2,
"treeBaseDuration": 2,
"type": 8,
},
},
"rootID": 1,
}
`;
exports[`commit tree should be able to rebuild the store tree for each commit: 1: CommitTree 1`] = `
Object {
"nodes": Map {
1 => Object {
"children": Array [
2,
],
"displayName": null,
"hocDisplayNames": null,
"id": 1,
"key": null,
"parentID": 0,
"treeBaseDuration": 16,
"type": 11,
},
2 => Object {
"children": Array [
3,
4,
5,
],
"displayName": "Parent",
"hocDisplayNames": null,
"id": 2,
"key": null,
"parentID": 1,
"treeBaseDuration": 16,
"type": 5,
},
3 => Object {
"children": Array [],
"displayName": "Child",
"hocDisplayNames": null,
"id": 3,
"key": "0",
"parentID": 2,
"treeBaseDuration": 2,
"type": 8,
},
4 => Object {
"children": Array [],
"displayName": "Child",
"hocDisplayNames": null,
"id": 4,
"key": "1",
"parentID": 2,
"treeBaseDuration": 2,
"type": 8,
},
5 => Object {
"children": Array [],
"displayName": "Child",
"hocDisplayNames": null,
"id": 5,
"key": "2",
"parentID": 2,
"treeBaseDuration": 2,
"type": 8,
},
},
"rootID": 1,
}
`;
exports[`commit tree should be able to rebuild the store tree for each commit: 2: CommitTree 1`] = `
Object {
"nodes": Map {
1 => Object {
"children": Array [
2,
],
"displayName": null,
"hocDisplayNames": null,
"id": 1,
"key": null,
"parentID": 0,
"treeBaseDuration": 14,
"type": 11,
},
2 => Object {
"children": Array [
3,
4,
],
"displayName": "Parent",
"hocDisplayNames": null,
"id": 2,
"key": null,
"parentID": 1,
"treeBaseDuration": 14,
"type": 5,
},
3 => Object {
"children": Array [],
"displayName": "Child",
"hocDisplayNames": null,
"id": 3,
"key": "0",
"parentID": 2,
"treeBaseDuration": 2,
"type": 8,
},
4 => Object {
"children": Array [],
"displayName": "Child",
"hocDisplayNames": null,
"id": 4,
"key": "1",
"parentID": 2,
"treeBaseDuration": 2,
"type": 8,
},
},
"rootID": 1,
}
`;
exports[`commit tree should be able to rebuild the store tree for each commit: 3: CommitTree 1`] = `
Object {
"nodes": Map {
1 => Object {
"children": Array [
2,
],
"displayName": null,
"hocDisplayNames": null,
"id": 1,
"key": null,
"parentID": 0,
"treeBaseDuration": 10,
"type": 11,
},
2 => Object {
"children": Array [],
"displayName": "Parent",
"hocDisplayNames": null,
"id": 2,
"key": null,
"parentID": 1,
"treeBaseDuration": 10,
"type": 5,
},
},
"rootID": 1,
}
`;
packages/react-devtools-shared/src/__tests__/__snapshots__/store-test.js.snap
-672
View File
@@ -1,672 +0,0 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Store Lazy should support Lazy components (legacy render): 1: mounted + loading 1`] = `
[root]
▾ <App>
<Suspense>
`;
exports[`Store Lazy should support Lazy components (legacy render): 2: mounted + loaded 1`] = `
[root]
▾ <App>
▾ <Suspense>
<LazyInnerComponent>
`;
exports[`Store Lazy should support Lazy components (legacy render): 3: unmounted 1`] = `
[root]
<App>
`;
exports[`Store Lazy should support Lazy components in (createRoot): 1: mounted + loading 1`] = `
[root]
▾ <App>
<Suspense>
`;
exports[`Store Lazy should support Lazy components in (createRoot): 2: mounted + loaded 1`] = `
[root]
▾ <App>
▾ <Suspense>
<LazyInnerComponent>
`;
exports[`Store Lazy should support Lazy components in (createRoot): 3: unmounted 1`] = `
[root]
<App>
`;
exports[`Store Lazy should support Lazy components that are unmounted before they finish loading (legacy render): 1: mounted + loading 1`] = `
[root]
▾ <App>
<Suspense>
`;
exports[`Store Lazy should support Lazy components that are unmounted before they finish loading (legacy render): 2: unmounted 1`] = `
[root]
<App>
`;
exports[`Store Lazy should support Lazy components that are unmounted before they finish loading in (createRoot): 1: mounted + loading 1`] = `
[root]
▾ <App>
<Suspense>
`;
exports[`Store Lazy should support Lazy components that are unmounted before they finish loading in (createRoot): 2: unmounted 1`] = `
[root]
<App>
`;
exports[`Store collapseNodesByDefault:false should display Suspense nodes properly in various states: 1: loading 1`] = `
[root]
▾ <Wrapper>
<Component key="Outside">
▾ <Suspense>
<Loading>
`;
exports[`Store collapseNodesByDefault:false should display Suspense nodes properly in various states: 2: resolved 1`] = `
[root]
▾ <Wrapper>
<Component key="Outside">
▾ <Suspense>
<Component key="Inside">
`;
exports[`Store collapseNodesByDefault:false should display a partially rendered SuspenseList: 1: loading 1`] = `
[root]
▾ <Wrapper>
▾ <SuspenseList>
<Component key="A">
▾ <Suspense>
<Loading>
`;
exports[`Store collapseNodesByDefault:false should display a partially rendered SuspenseList: 2: resolved 1`] = `
[root]
▾ <Wrapper>
▾ <SuspenseList>
<Component key="A">
▾ <Suspense>
<Component key="B">
<Component key="C">
`;
exports[`Store collapseNodesByDefault:false should filter DOM nodes from the store tree: 1: mount 1`] = `
[root]
▾ <Grandparent>
▾ <Parent>
<Child>
▾ <Parent>
<Child>
`;
exports[`Store collapseNodesByDefault:false should support collapsing parts of the tree: 1: mount 1`] = `
[root]
▾ <Grandparent>
▾ <Parent>
<Child key="0">
<Child key="1">
▾ <Parent>
<Child key="0">
<Child key="1">
`;
exports[`Store collapseNodesByDefault:false should support collapsing parts of the tree: 2: collapse first Parent 1`] = `
[root]
▾ <Grandparent>
▸ <Parent>
▾ <Parent>
<Child key="0">
<Child key="1">
`;
exports[`Store collapseNodesByDefault:false should support collapsing parts of the tree: 3: collapse second Parent 1`] = `
[root]
▾ <Grandparent>
▸ <Parent>
▸ <Parent>
`;
exports[`Store collapseNodesByDefault:false should support collapsing parts of the tree: 4: expand first Parent 1`] = `
[root]
▾ <Grandparent>
▾ <Parent>
<Child key="0">
<Child key="1">
▸ <Parent>
`;
exports[`Store collapseNodesByDefault:false should support collapsing parts of the tree: 5: collapse Grandparent 1`] = `
[root]
▸ <Grandparent>
`;
exports[`Store collapseNodesByDefault:false should support collapsing parts of the tree: 6: expand Grandparent 1`] = `
[root]
▾ <Grandparent>
▾ <Parent>
<Child key="0">
<Child key="1">
▸ <Parent>
`;
exports[`Store collapseNodesByDefault:false should support mount and update operations for multiple roots: 1: mount 1`] = `
[root]
▾ <Parent key="A">
<Child key="0">
<Child key="1">
<Child key="2">
[root]
▾ <Parent key="B">
<Child key="0">
<Child key="1">
`;
exports[`Store collapseNodesByDefault:false should support mount and update operations for multiple roots: 2: update 1`] = `
[root]
▾ <Parent key="A">
<Child key="0">
<Child key="1">
<Child key="2">
<Child key="3">
[root]
▾ <Parent key="B">
<Child key="0">
`;
exports[`Store collapseNodesByDefault:false should support mount and update operations for multiple roots: 3: unmount B 1`] = `
[root]
▾ <Parent key="A">
<Child key="0">
<Child key="1">
<Child key="2">
<Child key="3">
`;
exports[`Store collapseNodesByDefault:false should support mount and update operations for multiple roots: 4: unmount A 1`] = ``;
exports[`Store collapseNodesByDefault:false should support mount and update operations: 1: mount 1`] = `
[root]
▾ <Grandparent>
▾ <Parent>
<Child key="0">
<Child key="1">
<Child key="2">
<Child key="3">
▾ <Parent>
<Child key="0">
<Child key="1">
<Child key="2">
<Child key="3">
`;
exports[`Store collapseNodesByDefault:false should support mount and update operations: 2: update 1`] = `
[root]
▾ <Grandparent>
▾ <Parent>
<Child key="0">
<Child key="1">
▾ <Parent>
<Child key="0">
<Child key="1">
`;
exports[`Store collapseNodesByDefault:false should support mount and update operations: 3: unmount 1`] = ``;
exports[`Store collapseNodesByDefault:false should support nested Suspense nodes: 1: third child is suspended 1`] = `
[root]
▾ <Wrapper>
<Component key="Outside">
▾ <Suspense>
<Component key="Unrelated at Start">
▾ <Suspense>
<Component key="Suspense 1 Content">
▾ <Suspense>
<Component key="Suspense 2 Content">
▾ <Suspense>
<Loading key="Suspense 3 Fallback">
<Component key="Unrelated at End">
`;
exports[`Store collapseNodesByDefault:false should support nested Suspense nodes: 2: first and third child are suspended 1`] = `
[root]
▾ <Wrapper>
<Component key="Outside">
▾ <Suspense>
<Component key="Unrelated at Start">
▾ <Suspense>
<Loading key="Suspense 1 Fallback">
▾ <Suspense>
<Component key="Suspense 2 Content">
▾ <Suspense>
<Loading key="Suspense 3 Fallback">
<Component key="Unrelated at End">
`;
exports[`Store collapseNodesByDefault:false should support nested Suspense nodes: 3: second and third child are suspended 1`] = `
[root]
▾ <Wrapper>
<Component key="Outside">
▾ <Suspense>
<Component key="Unrelated at Start">
▾ <Suspense>
<Component key="Suspense 1 Content">
▾ <Suspense>
<Loading key="Suspense 2 Fallback">
▾ <Suspense>
<Loading key="Suspense 3 Fallback">
<Component key="Unrelated at End">
`;
exports[`Store collapseNodesByDefault:false should support nested Suspense nodes: 4: first and third child are suspended 1`] = `
[root]
▾ <Wrapper>
<Component key="Outside">
▾ <Suspense>
<Component key="Unrelated at Start">
▾ <Suspense>
<Loading key="Suspense 1 Fallback">
▾ <Suspense>
<Component key="Suspense 2 Content">
▾ <Suspense>
<Loading key="Suspense 3 Fallback">
<Component key="Unrelated at End">
`;
exports[`Store collapseNodesByDefault:false should support nested Suspense nodes: 5: parent is suspended 1`] = `
[root]
▾ <Wrapper>
<Component key="Outside">
▾ <Suspense>
<Loading key="Parent Fallback">
`;
exports[`Store collapseNodesByDefault:false should support nested Suspense nodes: 6: all children are suspended 1`] = `
[root]
▾ <Wrapper>
<Component key="Outside">
▾ <Suspense>
<Component key="Unrelated at Start">
▾ <Suspense>
<Loading key="Suspense 1 Fallback">
▾ <Suspense>
<Loading key="Suspense 2 Fallback">
▾ <Suspense>
<Loading key="Suspense 3 Fallback">
<Component key="Unrelated at End">
`;
exports[`Store collapseNodesByDefault:false should support nested Suspense nodes: 7: only third child is suspended 1`] = `
[root]
▾ <Wrapper>
<Component key="Outside">
▾ <Suspense>
<Component key="Unrelated at Start">
▾ <Suspense>
<Component key="Suspense 1 Content">
▾ <Suspense>
<Component key="Suspense 2 Content">
▾ <Suspense>
<Loading key="Suspense 3 Fallback">
<Component key="Unrelated at End">
`;
exports[`Store collapseNodesByDefault:false should support nested Suspense nodes: 8: first and third child are suspended 1`] = `
[root]
▾ <Wrapper>
<Component key="Outside">
▾ <Suspense>
<Component key="Unrelated at Start">
▾ <Suspense>
<Loading key="Suspense 1 Fallback">
▾ <Suspense>
<Component key="Suspense 2 Content">
▾ <Suspense>
<Loading key="Suspense 3 Fallback">
<Component key="Unrelated at End">
`;
exports[`Store collapseNodesByDefault:false should support nested Suspense nodes: 9: parent is suspended 1`] = `
[root]
▾ <Wrapper>
<Component key="Outside">
▾ <Suspense>
<Loading key="Parent Fallback">
`;
exports[`Store collapseNodesByDefault:false should support nested Suspense nodes: 10: parent is suspended 1`] = `
[root]
▾ <Wrapper>
<Component key="Outside">
▾ <Suspense>
<Loading key="Parent Fallback">
`;
exports[`Store collapseNodesByDefault:false should support nested Suspense nodes: 11: all children are suspended 1`] = `
[root]
▾ <Wrapper>
<Component key="Outside">
▾ <Suspense>
<Component key="Unrelated at Start">
▾ <Suspense>
<Loading key="Suspense 1 Fallback">
▾ <Suspense>
<Loading key="Suspense 2 Fallback">
▾ <Suspense>
<Loading key="Suspense 3 Fallback">
<Component key="Unrelated at End">
`;
exports[`Store collapseNodesByDefault:false should support nested Suspense nodes: 12: all children are suspended 1`] = `
[root]
▾ <Wrapper>
<Component key="Outside">
▾ <Suspense>
<Component key="Unrelated at Start">
▾ <Suspense>
<Loading key="Suspense 1 Fallback">
▾ <Suspense>
<Loading key="Suspense 2 Fallback">
▾ <Suspense>
<Loading key="Suspense 3 Fallback">
<Component key="Unrelated at End">
`;
exports[`Store collapseNodesByDefault:false should support nested Suspense nodes: 13: third child is suspended 1`] = `
[root]
▾ <Wrapper>
<Component key="Outside">
▾ <Suspense>
<Component key="Unrelated at Start">
▾ <Suspense>
<Component key="Suspense 1 Content">
▾ <Suspense>
<Component key="Suspense 2 Content">
▾ <Suspense>
<Loading key="Suspense 3 Fallback">
<Component key="Unrelated at End">
`;
exports[`Store collapseNodesByDefault:false should support reordering of children: 1: mount 1`] = `
[root]
▾ <Root>
▾ <Foo key="foo">
<Component key="0">
▾ <Bar key="bar">
<Component key="0">
<Component key="1">
`;
exports[`Store collapseNodesByDefault:false should support reordering of children: 3: reorder children 1`] = `
[root]
▾ <Root>
▾ <Bar key="bar">
<Component key="0">
<Component key="1">
▾ <Foo key="foo">
<Component key="0">
`;
exports[`Store collapseNodesByDefault:false should support reordering of children: 4: collapse root 1`] = `
[root]
▸ <Root>
`;
exports[`Store collapseNodesByDefault:false should support reordering of children: 5: expand root 1`] = `
[root]
▾ <Root>
▾ <Bar key="bar">
<Component key="0">
<Component key="1">
▾ <Foo key="foo">
<Component key="0">
`;
exports[`Store collapseNodesByDefault:true should display Suspense nodes properly in various states: 1: loading 1`] = `
[root]
▸ <Wrapper>
`;
exports[`Store collapseNodesByDefault:true should display Suspense nodes properly in various states: 2: expand Wrapper and Suspense 1`] = `
[root]
▾ <Wrapper>
<Component key="Outside">
▾ <Suspense>
<Loading>
`;
exports[`Store collapseNodesByDefault:true should display Suspense nodes properly in various states: 2: resolved 1`] = `
[root]
▾ <Wrapper>
<Component key="Outside">
▾ <Suspense>
<Component key="Inside">
`;
exports[`Store collapseNodesByDefault:true should filter DOM nodes from the store tree: 1: mount 1`] = `
[root]
▸ <Grandparent>
`;
exports[`Store collapseNodesByDefault:true should filter DOM nodes from the store tree: 2: expand Grandparent 1`] = `
[root]
▾ <Grandparent>
▸ <Parent>
▸ <Parent>
`;
exports[`Store collapseNodesByDefault:true should filter DOM nodes from the store tree: 3: expand Parent 1`] = `
[root]
▾ <Grandparent>
▾ <Parent>
<Child>
▸ <Parent>
`;
exports[`Store collapseNodesByDefault:true should not add new nodes when suspense is toggled: 1: mount 1`] = `
[root]
▸ <SuspenseTree>
`;
exports[`Store collapseNodesByDefault:true should not add new nodes when suspense is toggled: 2: expand tree 1`] = `
[root]
▾ <SuspenseTree>
▾ <Suspense>
▸ <Parent>
`;
exports[`Store collapseNodesByDefault:true should not add new nodes when suspense is toggled: 3: toggle fallback on 1`] = `
[root]
▾ <SuspenseTree>
▾ <Suspense>
<Fallback>
`;
exports[`Store collapseNodesByDefault:true should not add new nodes when suspense is toggled: 4: toggle fallback on 1`] = `
[root]
▾ <SuspenseTree>
▾ <Suspense>
▸ <Parent>
`;
exports[`Store collapseNodesByDefault:true should support expanding deep parts of the tree: 1: mount 1`] = `
[root]
▸ <Wrapper>
`;
exports[`Store collapseNodesByDefault:true should support expanding deep parts of the tree: 2: expand deepest node 1`] = `
[root]
▾ <Wrapper>
▾ <Nested>
▾ <Nested>
▾ <Nested>
<Nested>
`;
exports[`Store collapseNodesByDefault:true should support expanding deep parts of the tree: 3: collapse root 1`] = `
[root]
▸ <Wrapper>
`;
exports[`Store collapseNodesByDefault:true should support expanding deep parts of the tree: 4: expand root 1`] = `
[root]
▾ <Wrapper>
▾ <Nested>
▾ <Nested>
▾ <Nested>
<Nested>
`;
exports[`Store collapseNodesByDefault:true should support expanding deep parts of the tree: 5: collapse middle node 1`] = `
[root]
▾ <Wrapper>
▸ <Nested>
`;
exports[`Store collapseNodesByDefault:true should support expanding deep parts of the tree: 6: expand middle node 1`] = `
[root]
▾ <Wrapper>
▾ <Nested>
▾ <Nested>
▾ <Nested>
<Nested>
`;
exports[`Store collapseNodesByDefault:true should support expanding parts of the tree: 1: mount 1`] = `
[root]
▸ <Grandparent>
`;
exports[`Store collapseNodesByDefault:true should support expanding parts of the tree: 2: expand Grandparent 1`] = `
[root]
▾ <Grandparent>
▸ <Parent>
▸ <Parent>
`;
exports[`Store collapseNodesByDefault:true should support expanding parts of the tree: 3: expand first Parent 1`] = `
[root]
▾ <Grandparent>
▾ <Parent>
<Child key="0">
<Child key="1">
▸ <Parent>
`;
exports[`Store collapseNodesByDefault:true should support expanding parts of the tree: 4: expand second Parent 1`] = `
[root]
▾ <Grandparent>
▾ <Parent>
<Child key="0">
<Child key="1">
▾ <Parent>
<Child key="0">
<Child key="1">
`;
exports[`Store collapseNodesByDefault:true should support expanding parts of the tree: 5: collapse first Parent 1`] = `
[root]
▾ <Grandparent>
▸ <Parent>
▾ <Parent>
<Child key="0">
<Child key="1">
`;
exports[`Store collapseNodesByDefault:true should support expanding parts of the tree: 6: collapse second Parent 1`] = `
[root]
▾ <Grandparent>
▸ <Parent>
▸ <Parent>
`;
exports[`Store collapseNodesByDefault:true should support expanding parts of the tree: 7: collapse Grandparent 1`] = `
[root]
▸ <Grandparent>
`;
exports[`Store collapseNodesByDefault:true should support mount and update operations for multiple roots: 1: mount 1`] = `
[root]
▸ <Parent key="A">
[root]
▸ <Parent key="B">
`;
exports[`Store collapseNodesByDefault:true should support mount and update operations for multiple roots: 2: update 1`] = `
[root]
▸ <Parent key="A">
[root]
▸ <Parent key="B">
`;
exports[`Store collapseNodesByDefault:true should support mount and update operations for multiple roots: 3: unmount B 1`] = `
[root]
▸ <Parent key="A">
`;
exports[`Store collapseNodesByDefault:true should support mount and update operations for multiple roots: 4: unmount A 1`] = ``;
exports[`Store collapseNodesByDefault:true should support mount and update operations: 1: mount 1`] = `
[root]
▸ <Parent>
▸ <Parent>
`;
exports[`Store collapseNodesByDefault:true should support mount and update operations: 2: update 1`] = `
[root]
▸ <Parent>
▸ <Parent>
`;
exports[`Store collapseNodesByDefault:true should support mount and update operations: 3: unmount 1`] = ``;
exports[`Store collapseNodesByDefault:true should support reordering of children: 1: mount 1`] = `
[root]
▸ <Root>
`;
exports[`Store collapseNodesByDefault:true should support reordering of children: 3: reorder children 1`] = `
[root]
▸ <Root>
`;
exports[`Store collapseNodesByDefault:true should support reordering of children: 4: expand root 1`] = `
[root]
▾ <Root>
▸ <Bar key="bar">
▸ <Foo key="foo">
`;
exports[`Store collapseNodesByDefault:true should support reordering of children: 5: expand leaves 1`] = `
[root]
▾ <Root>
▾ <Bar key="bar">
<Component key="0">
<Component key="1">
▾ <Foo key="foo">
<Component key="0">
`;
exports[`Store collapseNodesByDefault:true should support reordering of children: 6: collapse root 1`] = `
[root]
▸ <Root>
`;
exports[`Store should not allow a root node to be collapsed: 1: mount 1`] = `
[root]
<Component>
`;
exports[`Store should properly handle a root with no visible nodes: 1: mount 1`] = `
[root]
<Root>
`;
exports[`Store should properly handle a root with no visible nodes: 2: add host nodes 1`] = `[root]`;
exports[`Store should properly serialize non-string key values: 1: mount 1`] = `
[root]
<Child key="123">
`;
packages/react-devtools-shared/src/__tests__/__snapshots__/storeOwners-test.js.snap
-121
View File
@@ -1,121 +0,0 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Store owners list should drill through interleaved intermediate components: 1: mount 1`] = `
[root]
▾ <Root>
▾ <Intermediate key="intermediate">
<Leaf key="leaf">
▾ <Wrapper key="wrapper">
<Leaf>
<Leaf key="leaf">
`;
exports[`Store owners list should drill through interleaved intermediate components: 2: components owned by <Root> 1`] = `
" ▾ <Root>
▾ <Intermediate key=\\"intermediate\\">
<Leaf>
<Leaf key=\\"leaf\\">"
`;
exports[`Store owners list should drill through interleaved intermediate components: 3: components owned by <Intermediate> 1`] = `
" ▾ <Intermediate key=\\"intermediate\\">
<Leaf key=\\"leaf\\">
▾ <Wrapper key=\\"wrapper\\">"
`;
exports[`Store owners list should drill through intermediate components: 1: mount 1`] = `
[root]
▾ <Root>
▾ <Intermediate>
▾ <Wrapper>
<Leaf>
`;
exports[`Store owners list should drill through intermediate components: 2: components owned by <Root> 1`] = `
" ▾ <Root>
▾ <Intermediate>
<Leaf>"
`;
exports[`Store owners list should drill through intermediate components: 3: components owned by <Intermediate> 1`] = `
" ▾ <Intermediate>
▾ <Wrapper>"
`;
exports[`Store owners list should show the proper owners list order and contents after insertions and deletions: 1: mount 1`] = `
[root]
▾ <Root>
▾ <Intermediate>
▾ <Wrapper>
<Leaf>
`;
exports[`Store owners list should show the proper owners list order and contents after insertions and deletions: 2: components owned by <Root> 1`] = `
" ▾ <Root>
▾ <Intermediate>
<Leaf>"
`;
exports[`Store owners list should show the proper owners list order and contents after insertions and deletions: 3: update to add direct 1`] = `
[root]
▾ <Root>
<Leaf>
▾ <Intermediate>
▾ <Wrapper>
<Leaf>
`;
exports[`Store owners list should show the proper owners list order and contents after insertions and deletions: 4: components owned by <Root> 1`] = `
" ▾ <Root>
<Leaf>
▾ <Intermediate>
<Leaf>"
`;
exports[`Store owners list should show the proper owners list order and contents after insertions and deletions: 5: update to remove indirect 1`] = `
[root]
▾ <Root>
<Leaf>
`;
exports[`Store owners list should show the proper owners list order and contents after insertions and deletions: 6: components owned by <Root> 1`] = `
" ▾ <Root>
<Leaf>"
`;
exports[`Store owners list should show the proper owners list order and contents after insertions and deletions: 7: update to remove both 1`] = `
[root]
<Root>
`;
exports[`Store owners list should show the proper owners list order and contents after insertions and deletions: 8: components owned by <Root> 1`] = `" <Root>"`;
exports[`Store owners list should show the proper owners list ordering after reordered children: 1: mount (ascending) 1`] = `
[root]
▾ <Root>
<Leaf key="A">
<Leaf key="B">
<Leaf key="C">
`;
exports[`Store owners list should show the proper owners list ordering after reordered children: 2: components owned by <Root> 1`] = `
" ▾ <Root>
<Leaf key=\\"A\\">
<Leaf key=\\"B\\">
<Leaf key=\\"C\\">"
`;
exports[`Store owners list should show the proper owners list ordering after reordered children: 3: update (descending) 1`] = `
[root]
▾ <Root>
<Leaf key="C">
<Leaf key="B">
<Leaf key="A">
`;
exports[`Store owners list should show the proper owners list ordering after reordered children: 4: components owned by <Root> 1`] = `
" ▾ <Root>
<Leaf key=\\"C\\">
<Leaf key=\\"B\\">
<Leaf key=\\"A\\">"
`;
packages/react-devtools-shared/src/__tests__/legacy/__snapshots__/storeLegacy-v15-test.js.snap
-499
View File
@@ -1,499 +0,0 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Store (legacy) collapseNodesByDefault:false should not filter DOM nodes from the store tree: 1: mount 1`] = `
[root]
▾ <Grandparent>
▾ <div>
▾ <div>
▾ <Parent>
▾ <div>
▾ <Child>
<div>
▾ <Parent>
▾ <div>
▾ <Child>
<div>
<Nothing>
`;
exports[`Store (legacy) collapseNodesByDefault:false should not filter DOM nodes from the store tree: 2: update 1`] = `
[root]
▾ <Grandparent>
▾ <div>
▾ <div>
▾ <Parent>
▾ <div>
▾ <Child>
<div>
▾ <Parent>
▾ <div>
▾ <Child>
<div>
<Nothing>
`;
exports[`Store (legacy) collapseNodesByDefault:false should not filter DOM nodes from the store tree: 5: unmount 1`] = ``;
exports[`Store (legacy) collapseNodesByDefault:false should support adding and removing children: 1: mount 1`] = `
[root]
▾ <Root>
▾ <div>
▾ <Component key="a">
<div>
`;
exports[`Store (legacy) collapseNodesByDefault:false should support adding and removing children: 2: add child 1`] = `
[root]
▾ <Root>
▾ <div>
▾ <Component key="a">
<div>
▾ <Component key="b">
<div>
`;
exports[`Store (legacy) collapseNodesByDefault:false should support adding and removing children: 3: remove child 1`] = `
[root]
▾ <Root>
▾ <div>
▾ <Component key="b">
<div>
`;
exports[`Store (legacy) collapseNodesByDefault:false should support collapsing parts of the tree: 1: mount 1`] = `
[root]
▾ <Grandparent>
▾ <div>
▾ <Parent>
▾ <div>
▾ <Child key="0">
<div>
▾ <Child key="1">
<div>
▾ <Parent>
▾ <div>
▾ <Child key="0">
<div>
▾ <Child key="1">
<div>
`;
exports[`Store (legacy) collapseNodesByDefault:false should support collapsing parts of the tree: 2: collapse first Parent 1`] = `
[root]
▾ <Grandparent>
▾ <div>
▸ <Parent>
▾ <Parent>
▾ <div>
▾ <Child key="0">
<div>
▾ <Child key="1">
<div>
`;
exports[`Store (legacy) collapseNodesByDefault:false should support collapsing parts of the tree: 3: collapse second Parent 1`] = `
[root]
▾ <Grandparent>
▾ <div>
▸ <Parent>
▸ <Parent>
`;
exports[`Store (legacy) collapseNodesByDefault:false should support collapsing parts of the tree: 4: expand first Parent 1`] = `
[root]
▾ <Grandparent>
▾ <div>
▾ <Parent>
▾ <div>
▾ <Child key="0">
<div>
▾ <Child key="1">
<div>
▸ <Parent>
`;
exports[`Store (legacy) collapseNodesByDefault:false should support collapsing parts of the tree: 5: collapse Grandparent 1`] = `
[root]
▸ <Grandparent>
`;
exports[`Store (legacy) collapseNodesByDefault:false should support collapsing parts of the tree: 6: expand Grandparent 1`] = `
[root]
▾ <Grandparent>
▾ <div>
▾ <Parent>
▾ <div>
▾ <Child key="0">
<div>
▾ <Child key="1">
<div>
▸ <Parent>
`;
exports[`Store (legacy) collapseNodesByDefault:false should support mount and update operations for multiple roots: 1: mount 1`] = `
[root]
▾ <Parent key="A">
▾ <div>
▾ <Child key="0">
<div>
▾ <Child key="1">
<div>
▾ <Child key="2">
<div>
[root]
▾ <Parent key="B">
▾ <div>
▾ <Child key="0">
<div>
▾ <Child key="1">
<div>
`;
exports[`Store (legacy) collapseNodesByDefault:false should support mount and update operations for multiple roots: 2: update 1`] = `
[root]
▾ <Parent key="A">
▾ <div>
▾ <Child key="0">
<div>
▾ <Child key="1">
<div>
▾ <Child key="2">
<div>
▾ <Child key="3">
<div>
[root]
▾ <Parent key="B">
▾ <div>
▾ <Child key="0">
<div>
`;
exports[`Store (legacy) collapseNodesByDefault:false should support mount and update operations for multiple roots: 3: unmount B 1`] = `
[root]
▾ <Parent key="A">
▾ <div>
▾ <Child key="0">
<div>
▾ <Child key="1">
<div>
▾ <Child key="2">
<div>
▾ <Child key="3">
<div>
`;
exports[`Store (legacy) collapseNodesByDefault:false should support mount and update operations for multiple roots: 4: unmount A 1`] = ``;
exports[`Store (legacy) collapseNodesByDefault:false should support mount and update operations: 1: mount 1`] = `
[root]
▾ <Grandparent>
▾ <div>
▾ <Parent>
▾ <div>
▾ <Child key="0">
<div>
▾ <Child key="1">
<div>
▾ <Child key="2">
<div>
▾ <Child key="3">
<div>
▾ <Parent>
▾ <div>
▾ <Child key="0">
<div>
▾ <Child key="1">
<div>
▾ <Child key="2">
<div>
▾ <Child key="3">
<div>
`;
exports[`Store (legacy) collapseNodesByDefault:false should support mount and update operations: 2: update 1`] = `
[root]
▾ <Grandparent>
▾ <div>
▾ <Parent>
▾ <div>
▾ <Child key="0">
<div>
▾ <Child key="1">
<div>
▾ <Parent>
▾ <div>
▾ <Child key="0">
<div>
▾ <Child key="1">
<div>
`;
exports[`Store (legacy) collapseNodesByDefault:false should support mount and update operations: 3: unmount 1`] = ``;
exports[`Store (legacy) collapseNodesByDefault:false should support reordering of children: 1: mount 1`] = `
[root]
▾ <Root>
▾ <div>
▾ <Foo key="foo">
▾ <div>
▾ <Component key="0">
<div>
▾ <Bar key="bar">
▾ <div>
▾ <Component key="0">
<div>
▾ <Component key="1">
<div>
`;
exports[`Store (legacy) collapseNodesByDefault:false should support reordering of children: 2: reorder children 1`] = `
[root]
▾ <Root>
▾ <div>
▾ <Bar key="bar">
▾ <div>
▾ <Component key="0">
<div>
▾ <Component key="1">
<div>
▾ <Foo key="foo">
▾ <div>
▾ <Component key="0">
<div>
`;
exports[`Store (legacy) collapseNodesByDefault:false should support reordering of children: 3: collapse root 1`] = `
[root]
▸ <Root>
`;
exports[`Store (legacy) collapseNodesByDefault:false should support reordering of children: 4: expand root 1`] = `
[root]
▾ <Root>
▾ <div>
▾ <Bar key="bar">
▾ <div>
▾ <Component key="0">
<div>
▾ <Component key="1">
<div>
▾ <Foo key="foo">
▾ <div>
▾ <Component key="0">
<div>
`;
exports[`Store (legacy) collapseNodesByDefault:true should not filter DOM nodes from the store tree: 1: mount 1`] = `
[root]
▸ <Grandparent>
`;
exports[`Store (legacy) collapseNodesByDefault:true should not filter DOM nodes from the store tree: 2: expand Grandparent 1`] = `
[root]
▾ <Grandparent>
▸ <div>
`;
exports[`Store (legacy) collapseNodesByDefault:true should not filter DOM nodes from the store tree: 3: expand div 1`] = `
[root]
▾ <Grandparent>
▾ <div>
▸ <div>
▸ <Parent>
<Nothing>
`;
exports[`Store (legacy) collapseNodesByDefault:true should not filter DOM nodes from the store tree: 4: final update 1`] = `
[root]
▾ <Grandparent>
▾ <div>
▸ <div>
▸ <Parent>
<Nothing>
`;
exports[`Store (legacy) collapseNodesByDefault:true should not filter DOM nodes from the store tree: 5: unmount 1`] = ``;
exports[`Store (legacy) collapseNodesByDefault:true should support expanding deep parts of the tree: 1: mount 1`] = `
[root]
▸ <Wrapper>
`;
exports[`Store (legacy) collapseNodesByDefault:true should support expanding deep parts of the tree: 2: expand deepest node 1`] = `
[root]
▾ <Wrapper>
▾ <Nested>
▾ <Nested>
▾ <Nested>
▾ <Nested>
<div>
`;
exports[`Store (legacy) collapseNodesByDefault:true should support expanding deep parts of the tree: 3: collapse root 1`] = `
[root]
▸ <Wrapper>
`;
exports[`Store (legacy) collapseNodesByDefault:true should support expanding deep parts of the tree: 4: expand root 1`] = `
[root]
▾ <Wrapper>
▾ <Nested>
▾ <Nested>
▾ <Nested>
▾ <Nested>
<div>
`;
exports[`Store (legacy) collapseNodesByDefault:true should support expanding deep parts of the tree: 5: collapse middle node 1`] = `
[root]
▾ <Wrapper>
▸ <Nested>
`;
exports[`Store (legacy) collapseNodesByDefault:true should support expanding deep parts of the tree: 6: expand middle node 1`] = `
[root]
▾ <Wrapper>
▾ <Nested>
▾ <Nested>
▾ <Nested>
▾ <Nested>
<div>
`;
exports[`Store (legacy) collapseNodesByDefault:true should support expanding parts of the tree: 1: mount 1`] = `
[root]
▸ <Grandparent>
`;
exports[`Store (legacy) collapseNodesByDefault:true should support expanding parts of the tree: 2: expand Grandparent 1`] = `
[root]
▾ <Grandparent>
▸ <div>
`;
exports[`Store (legacy) collapseNodesByDefault:true should support expanding parts of the tree: 3: expand parent div 1`] = `
[root]
▾ <Grandparent>
▾ <div>
▸ <Parent>
▸ <Parent>
`;
exports[`Store (legacy) collapseNodesByDefault:true should support expanding parts of the tree: 4: expand first Parent 1`] = `
[root]
▾ <Grandparent>
▾ <div>
▾ <Parent>
▸ <div>
▸ <Parent>
`;
exports[`Store (legacy) collapseNodesByDefault:true should support expanding parts of the tree: 5: expand second Parent 1`] = `
[root]
▾ <Grandparent>
▾ <div>
▾ <Parent>
▸ <div>
▾ <Parent>
▸ <div>
`;
exports[`Store (legacy) collapseNodesByDefault:true should support expanding parts of the tree: 6: collapse first Parent 1`] = `
[root]
▾ <Grandparent>
▾ <div>
▸ <Parent>
▾ <Parent>
▸ <div>
`;
exports[`Store (legacy) collapseNodesByDefault:true should support expanding parts of the tree: 7: collapse second Parent 1`] = `
[root]
▾ <Grandparent>
▾ <div>
▸ <Parent>
▸ <Parent>
`;
exports[`Store (legacy) collapseNodesByDefault:true should support expanding parts of the tree: 8: collapse Grandparent 1`] = `
[root]
▸ <Grandparent>
`;
exports[`Store (legacy) collapseNodesByDefault:true should support mount and update operations for multiple roots: 1: mount 1`] = `
[root]
▸ <Parent key="A">
[root]
▸ <Parent key="B">
`;
exports[`Store (legacy) collapseNodesByDefault:true should support mount and update operations for multiple roots: 2: update 1`] = `
[root]
▸ <Parent key="A">
[root]
▸ <Parent key="B">
`;
exports[`Store (legacy) collapseNodesByDefault:true should support mount and update operations for multiple roots: 3: unmount B 1`] = `
[root]
▸ <Parent key="A">
`;
exports[`Store (legacy) collapseNodesByDefault:true should support mount and update operations for multiple roots: 4: unmount A 1`] = ``;
exports[`Store (legacy) collapseNodesByDefault:true should support mount and update operations: 1: mount 1`] = `
[root]
▸ <div>
`;
exports[`Store (legacy) collapseNodesByDefault:true should support mount and update operations: 2: update 1`] = `
[root]
▸ <div>
`;
exports[`Store (legacy) collapseNodesByDefault:true should support mount and update operations: 3: unmount 1`] = ``;
exports[`Store (legacy) collapseNodesByDefault:true should support reordering of children: 1: mount 1`] = `
[root]
▸ <Root>
`;
exports[`Store (legacy) collapseNodesByDefault:true should support reordering of children: 2: reorder children 1`] = `
[root]
▸ <Root>
`;
exports[`Store (legacy) collapseNodesByDefault:true should support reordering of children: 3: expand root 1`] = `
[root]
▾ <Root>
▸ <div>
`;
exports[`Store (legacy) collapseNodesByDefault:true should support reordering of children: 4: expand div 1`] = `
[root]
▾ <Root>
▾ <div>
▸ <Bar key="bar">
▸ <Foo key="foo">
`;
exports[`Store (legacy) collapseNodesByDefault:true should support reordering of children: 4: expand leaves 1`] = `
[root]
▾ <Root>
▾ <div>
▾ <Bar key="bar">
▸ <div>
▾ <Foo key="foo">
▸ <div>
`;
exports[`Store (legacy) collapseNodesByDefault:true should support reordering of children: 5: collapse root 1`] = `
[root]
▸ <Root>
`;
exports[`Store (legacy) should not allow a root node to be collapsed: 1: mount 1`] = `
[root]
▾ <Component>
<div>
`;
packages/react-devtools-shared/src/__tests__/legacy/storeLegacy-v15-test.js
Vendored
+442 -56
View File
@@ -38,7 +38,11 @@ describe('Store (legacy)', () => {
act(() =>
ReactDOM.render(<Component count={4} />, document.createElement('div')),
);
expect(store).toMatchSnapshot('1: mount');
expect(store).toMatchInlineSnapshot(`
[root]
▾ <Component>
<div>
`);
expect(store.roots).toHaveLength(1);
@@ -73,13 +77,53 @@ describe('Store (legacy)', () => {
const container = document.createElement('div');
act(() => ReactDOM.render(<Grandparent count={4} />, container));
expect(store).toMatchSnapshot('1: mount');
expect(store).toMatchInlineSnapshot(`
[root]
▾ <Grandparent>
▾ <div>
▾ <Parent>
▾ <div>
▾ <Child key="0">
<div>
▾ <Child key="1">
<div>
▾ <Child key="2">
<div>
▾ <Child key="3">
<div>
▾ <Parent>
▾ <div>
▾ <Child key="0">
<div>
▾ <Child key="1">
<div>
▾ <Child key="2">
<div>
▾ <Child key="3">
<div>
`);
act(() => ReactDOM.render(<Grandparent count={2} />, container));
expect(store).toMatchSnapshot('2: update');
expect(store).toMatchInlineSnapshot(`
[root]
▾ <Grandparent>
▾ <div>
▾ <Parent>
▾ <div>
▾ <Child key="0">
<div>
▾ <Child key="1">
<div>
▾ <Parent>
▾ <div>
▾ <Child key="0">
<div>
▾ <Child key="1">
<div>
`);
act(() => ReactDOM.unmountComponentAtNode(container));
expect(store).toMatchSnapshot('3: unmount');
expect(store).toMatchInlineSnapshot(``);
});
it('should support mount and update operations for multiple roots', () => {
@@ -99,19 +143,65 @@ describe('Store (legacy)', () => {
ReactDOM.render(<Parent key="A" count={3} />, containerA);
ReactDOM.render(<Parent key="B" count={2} />, containerB);
});
expect(store).toMatchSnapshot('1: mount');
expect(store).toMatchInlineSnapshot(`
[root]
▾ <Parent key="A">
▾ <div>
▾ <Child key="0">
<div>
▾ <Child key="1">
<div>
▾ <Child key="2">
<div>
[root]
▾ <Parent key="B">
▾ <div>
▾ <Child key="0">
<div>
▾ <Child key="1">
<div>
`);
act(() => {
ReactDOM.render(<Parent key="A" count={4} />, containerA);
ReactDOM.render(<Parent key="B" count={1} />, containerB);
});
expect(store).toMatchSnapshot('2: update');
expect(store).toMatchInlineSnapshot(`
[root]
▾ <Parent key="A">
▾ <div>
▾ <Child key="0">
<div>
▾ <Child key="1">
<div>
▾ <Child key="2">
<div>
▾ <Child key="3">
<div>
[root]
▾ <Parent key="B">
▾ <div>
▾ <Child key="0">
<div>
`);
act(() => ReactDOM.unmountComponentAtNode(containerB));
expect(store).toMatchSnapshot('3: unmount B');
expect(store).toMatchInlineSnapshot(`
[root]
▾ <Parent key="A">
▾ <div>
▾ <Child key="0">
<div>
▾ <Child key="1">
<div>
▾ <Child key="2">
<div>
▾ <Child key="3">
<div>
`);
act(() => ReactDOM.unmountComponentAtNode(containerA));
expect(store).toMatchSnapshot('4: unmount A');
expect(store).toMatchInlineSnapshot(``);
});
it('should not filter DOM nodes from the store tree', () => {
@@ -139,15 +229,43 @@ describe('Store (legacy)', () => {
act(() =>
ReactDOM.render(<Grandparent count={4} flip={false} />, container),
);
expect(store).toMatchSnapshot('1: mount');
expect(store).toMatchInlineSnapshot(`
[root]
▾ <Grandparent>
▾ <div>
▾ <div>
▾ <Parent>
▾ <div>
▾ <Child>
<div>
▾ <Parent>
▾ <div>
▾ <Child>
<div>
<Nothing>
`);
act(() =>
ReactDOM.render(<Grandparent count={4} flip={true} />, container),
);
expect(store).toMatchSnapshot('2: update');
expect(store).toMatchInlineSnapshot(`
[root]
▾ <Grandparent>
▾ <div>
▾ <div>
▾ <Parent>
▾ <div>
▾ <Child>
<div>
▾ <Parent>
▾ <div>
▾ <Child>
<div>
<Nothing>
`);
act(() => ReactDOM.unmountComponentAtNode(container));
expect(store).toMatchSnapshot('5: unmount');
expect(store).toMatchInlineSnapshot(``);
});
it('should support collapsing parts of the tree', () => {
@@ -172,26 +290,84 @@ describe('Store (legacy)', () => {
document.createElement('div'),
),
);
expect(store).toMatchSnapshot('1: mount');
expect(store).toMatchInlineSnapshot(`
[root]
▾ <Grandparent>
▾ <div>
▾ <Parent>
▾ <div>
▾ <Child key="0">
<div>
▾ <Child key="1">
<div>
▾ <Parent>
▾ <div>
▾ <Child key="0">
<div>
▾ <Child key="1">
<div>
`);
const grandparentID = store.getElementIDAtIndex(0);
const parentOneID = store.getElementIDAtIndex(2);
const parentTwoID = store.getElementIDAtIndex(8);
act(() => store.toggleIsCollapsed(parentOneID, true));
expect(store).toMatchSnapshot('2: collapse first Parent');
expect(store).toMatchInlineSnapshot(`
[root]
▾ <Grandparent>
▾ <div>
▸ <Parent>
▾ <Parent>
▾ <div>
▾ <Child key="0">
<div>
▾ <Child key="1">
<div>
`);
act(() => store.toggleIsCollapsed(parentTwoID, true));
expect(store).toMatchSnapshot('3: collapse second Parent');
expect(store).toMatchInlineSnapshot(`
[root]
▾ <Grandparent>
▾ <div>
▸ <Parent>
▸ <Parent>
`);
act(() => store.toggleIsCollapsed(parentOneID, false));
expect(store).toMatchSnapshot('4: expand first Parent');
expect(store).toMatchInlineSnapshot(`
[root]
▾ <Grandparent>
▾ <div>
▾ <Parent>
▾ <div>
▾ <Child key="0">
<div>
▾ <Child key="1">
<div>
▸ <Parent>
`);
act(() => store.toggleIsCollapsed(grandparentID, true));
expect(store).toMatchSnapshot('5: collapse Grandparent');
expect(store).toMatchInlineSnapshot(`
[root]
▸ <Grandparent>
`);
act(() => store.toggleIsCollapsed(grandparentID, false));
expect(store).toMatchSnapshot('6: expand Grandparent');
expect(store).toMatchInlineSnapshot(`
[root]
▾ <Grandparent>
▾ <div>
▾ <Parent>
▾ <div>
▾ <Child key="0">
<div>
▾ <Child key="1">
<div>
▸ <Parent>
`);
});
it('should support adding and removing children', () => {
@@ -208,7 +384,13 @@ describe('Store (legacy)', () => {
container,
),
);
expect(store).toMatchSnapshot('1: mount');
expect(store).toMatchInlineSnapshot(`
[root]
▾ <Root>
▾ <div>
▾ <Component key="a">
<div>
`);
act(() =>
ReactDOM.render(
@@ -219,7 +401,15 @@ describe('Store (legacy)', () => {
container,
),
);
expect(store).toMatchSnapshot('2: add child');
expect(store).toMatchInlineSnapshot(`
[root]
▾ <Root>
▾ <div>
▾ <Component key="a">
<div>
▾ <Component key="b">
<div>
`);
act(() =>
ReactDOM.render(
@@ -229,7 +419,13 @@ describe('Store (legacy)', () => {
container,
),
);
expect(store).toMatchSnapshot('3: remove child');
expect(store).toMatchInlineSnapshot(`
[root]
▾ <Root>
▾ <div>
▾ <Component key="b">
<div>
`);
});
it('should support reordering of children', () => {
@@ -246,16 +442,61 @@ describe('Store (legacy)', () => {
const container = document.createElement('div');
act(() => ReactDOM.render(<Root>{[foo, bar]}</Root>, container));
expect(store).toMatchSnapshot('1: mount');
expect(store).toMatchInlineSnapshot(`
[root]
▾ <Root>
▾ <div>
▾ <Foo key="foo">
▾ <div>
▾ <Component key="0">
<div>
▾ <Bar key="bar">
▾ <div>
▾ <Component key="0">
<div>
▾ <Component key="1">
<div>
`);
act(() => ReactDOM.render(<Root>{[bar, foo]}</Root>, container));
expect(store).toMatchSnapshot('2: reorder children');
expect(store).toMatchInlineSnapshot(`
[root]
▾ <Root>
▾ <div>
▾ <Bar key="bar">
▾ <div>
▾ <Component key="0">
<div>
▾ <Component key="1">
<div>
▾ <Foo key="foo">
▾ <div>
▾ <Component key="0">
<div>
`);
act(() => store.toggleIsCollapsed(store.getElementIDAtIndex(0), true));
expect(store).toMatchSnapshot('3: collapse root');
expect(store).toMatchInlineSnapshot(`
[root]
▸ <Root>
`);
act(() => store.toggleIsCollapsed(store.getElementIDAtIndex(0), false));
expect(store).toMatchSnapshot('4: expand root');
expect(store).toMatchInlineSnapshot(`
[root]
▾ <Root>
▾ <div>
▾ <Bar key="bar">
▾ <div>
▾ <Component key="0">
<div>
▾ <Component key="1">
<div>
▾ <Foo key="foo">
▾ <div>
▾ <Component key="0">
<div>
`);
});
});
@@ -285,7 +526,10 @@ describe('Store (legacy)', () => {
container,
),
);
expect(store).toMatchSnapshot('1: mount');
expect(store).toMatchInlineSnapshot(`
[root]
▸ <div>
`);
act(() =>
ReactDOM.render(
@@ -296,10 +540,13 @@ describe('Store (legacy)', () => {
container,
),
);
expect(store).toMatchSnapshot('2: update');
expect(store).toMatchInlineSnapshot(`
[root]
▸ <div>
`);
act(() => ReactDOM.unmountComponentAtNode(container));
expect(store).toMatchSnapshot('3: unmount');
expect(store).toMatchInlineSnapshot(``);
});
it('should support mount and update operations for multiple roots', () => {
@@ -319,19 +566,32 @@ describe('Store (legacy)', () => {
ReactDOM.render(<Parent key="A" count={3} />, containerA);
ReactDOM.render(<Parent key="B" count={2} />, containerB);
});
expect(store).toMatchSnapshot('1: mount');
expect(store).toMatchInlineSnapshot(`
[root]
▸ <Parent key="A">
[root]
▸ <Parent key="B">
`);
act(() => {
ReactDOM.render(<Parent key="A" count={4} />, containerA);
ReactDOM.render(<Parent key="B" count={1} />, containerB);
});
expect(store).toMatchSnapshot('2: update');
expect(store).toMatchInlineSnapshot(`
[root]
▸ <Parent key="A">
[root]
▸ <Parent key="B">
`);
act(() => ReactDOM.unmountComponentAtNode(containerB));
expect(store).toMatchSnapshot('3: unmount B');
expect(store).toMatchInlineSnapshot(`
[root]
▸ <Parent key="A">
`);
act(() => ReactDOM.unmountComponentAtNode(containerA));
expect(store).toMatchSnapshot('4: unmount A');
expect(store).toMatchInlineSnapshot(``);
});
it('should not filter DOM nodes from the store tree', () => {
@@ -359,21 +619,42 @@ describe('Store (legacy)', () => {
act(() =>
ReactDOM.render(<Grandparent count={4} flip={false} />, container),
);
expect(store).toMatchSnapshot('1: mount');
expect(store).toMatchInlineSnapshot(`
[root]
▸ <Grandparent>
`);
act(() => store.toggleIsCollapsed(store.getElementIDAtIndex(0), false));
expect(store).toMatchSnapshot('2: expand Grandparent');
expect(store).toMatchInlineSnapshot(`
[root]
▾ <Grandparent>
▸ <div>
`);
act(() => store.toggleIsCollapsed(store.getElementIDAtIndex(1), false));
expect(store).toMatchSnapshot('3: expand div');
expect(store).toMatchInlineSnapshot(`
[root]
▾ <Grandparent>
▾ <div>
▸ <div>
▸ <Parent>
<Nothing>
`);
act(() =>
ReactDOM.render(<Grandparent count={4} flip={true} />, container),
);
expect(store).toMatchSnapshot('4: final update');
expect(store).toMatchInlineSnapshot(`
[root]
▾ <Grandparent>
▾ <div>
▸ <div>
▸ <Parent>
<Nothing>
`);
act(() => ReactDOM.unmountComponentAtNode(container));
expect(store).toMatchSnapshot('5: unmount');
expect(store).toMatchInlineSnapshot(``);
});
it('should support expanding parts of the tree', () => {
@@ -398,34 +679,78 @@ describe('Store (legacy)', () => {
document.createElement('div'),
),
);
expect(store).toMatchSnapshot('1: mount');
expect(store).toMatchInlineSnapshot(`
[root]
▸ <Grandparent>
`);
const grandparentID = store.getElementIDAtIndex(0);
act(() => store.toggleIsCollapsed(grandparentID, false));
expect(store).toMatchSnapshot('2: expand Grandparent');
expect(store).toMatchInlineSnapshot(`
[root]
▾ <Grandparent>
▸ <div>
`);
const parentDivID = store.getElementIDAtIndex(1);
act(() => store.toggleIsCollapsed(parentDivID, false));
expect(store).toMatchSnapshot('3: expand parent div');
expect(store).toMatchInlineSnapshot(`
[root]
▾ <Grandparent>
▾ <div>
▸ <Parent>
▸ <Parent>
`);
const parentOneID = store.getElementIDAtIndex(2);
const parentTwoID = store.getElementIDAtIndex(3);
act(() => store.toggleIsCollapsed(parentOneID, false));
expect(store).toMatchSnapshot('4: expand first Parent');
expect(store).toMatchInlineSnapshot(`
[root]
▾ <Grandparent>
▾ <div>
▾ <Parent>
▸ <div>
▸ <Parent>
`);
act(() => store.toggleIsCollapsed(parentTwoID, false));
expect(store).toMatchSnapshot('5: expand second Parent');
expect(store).toMatchInlineSnapshot(`
[root]
▾ <Grandparent>
▾ <div>
▾ <Parent>
▸ <div>
▾ <Parent>
▸ <div>
`);
act(() => store.toggleIsCollapsed(parentOneID, true));
expect(store).toMatchSnapshot('6: collapse first Parent');
expect(store).toMatchInlineSnapshot(`
[root]
▾ <Grandparent>
▾ <div>
▸ <Parent>
▾ <Parent>
▸ <div>
`);
act(() => store.toggleIsCollapsed(parentTwoID, true));
expect(store).toMatchSnapshot('7: collapse second Parent');
expect(store).toMatchInlineSnapshot(`
[root]
▾ <Grandparent>
▾ <div>
▸ <Parent>
▸ <Parent>
`);
act(() => store.toggleIsCollapsed(grandparentID, true));
expect(store).toMatchSnapshot('8: collapse Grandparent');
expect(store).toMatchInlineSnapshot(`
[root]
▸ <Grandparent>
`);
});
it('should support expanding deep parts of the tree', () => {
@@ -450,28 +775,62 @@ describe('Store (legacy)', () => {
document.createElement('div'),
),
);
expect(store).toMatchSnapshot('1: mount');
expect(store).toMatchInlineSnapshot(`
[root]
▸ <Wrapper>
`);
const deepestedNodeID = global.agent.getIDForNode(ref);
act(() => store.toggleIsCollapsed(deepestedNodeID, false));
expect(store).toMatchSnapshot('2: expand deepest node');
expect(store).toMatchInlineSnapshot(`
[root]
▾ <Wrapper>
▾ <Nested>
▾ <Nested>
▾ <Nested>
▾ <Nested>
<div>
`);
const rootID = store.getElementIDAtIndex(0);
act(() => store.toggleIsCollapsed(rootID, true));
expect(store).toMatchSnapshot('3: collapse root');
expect(store).toMatchInlineSnapshot(`
[root]
▸ <Wrapper>
`);
act(() => store.toggleIsCollapsed(rootID, false));
expect(store).toMatchSnapshot('4: expand root');
expect(store).toMatchInlineSnapshot(`
[root]
▾ <Wrapper>
▾ <Nested>
▾ <Nested>
▾ <Nested>
▾ <Nested>
<div>
`);
const id = store.getElementIDAtIndex(1);
act(() => store.toggleIsCollapsed(id, true));
expect(store).toMatchSnapshot('5: collapse middle node');
expect(store).toMatchInlineSnapshot(`
[root]
▾ <Wrapper>
▸ <Nested>
`);
act(() => store.toggleIsCollapsed(id, false));
expect(store).toMatchSnapshot('6: expand middle node');
expect(store).toMatchInlineSnapshot(`
[root]
▾ <Wrapper>
▾ <Nested>
▾ <Nested>
▾ <Nested>
▾ <Nested>
<div>
`);
});
it('should support reordering of children', () => {
@@ -488,25 +847,52 @@ describe('Store (legacy)', () => {
const container = document.createElement('div');
act(() => ReactDOM.render(<Root>{[foo, bar]}</Root>, container));
expect(store).toMatchSnapshot('1: mount');
expect(store).toMatchInlineSnapshot(`
[root]
▸ <Root>
`);
act(() => ReactDOM.render(<Root>{[bar, foo]}</Root>, container));
expect(store).toMatchSnapshot('2: reorder children');
expect(store).toMatchInlineSnapshot(`
[root]
▸ <Root>
`);
act(() => store.toggleIsCollapsed(store.getElementIDAtIndex(0), false));
expect(store).toMatchSnapshot('3: expand root');
expect(store).toMatchInlineSnapshot(`
[root]
▾ <Root>
▸ <div>
`);
act(() => store.toggleIsCollapsed(store.getElementIDAtIndex(1), false));
expect(store).toMatchSnapshot('4: expand div');
expect(store).toMatchInlineSnapshot(`
[root]
▾ <Root>
▾ <div>
▸ <Bar key="bar">
▸ <Foo key="foo">
`);
act(() => {
store.toggleIsCollapsed(store.getElementIDAtIndex(3), false);
store.toggleIsCollapsed(store.getElementIDAtIndex(2), false);
});
expect(store).toMatchSnapshot('4: expand leaves');
expect(store).toMatchInlineSnapshot(`
[root]
▾ <Root>
▾ <div>
▾ <Bar key="bar">
▸ <div>
▾ <Foo key="foo">
▸ <div>
`);
act(() => store.toggleIsCollapsed(store.getElementIDAtIndex(0), true));
expect(store).toMatchSnapshot('5: collapse root');
expect(store).toMatchInlineSnapshot(`
[root]
▸ <Root>
`);
});
});
packages/react-devtools-shared/src/__tests__/ownersListContext-test.js
Vendored
+81 -101
View File
@@ -61,6 +61,31 @@ describe('OwnersListContext', () => {
</BridgeContext.Provider>
);
async function getOwnersListForOwner(owner) {
let ownerDisplayNames = null;
function Suspender() {
const read = React.useContext(OwnersListContext);
const owners = read(owner.id);
ownerDisplayNames = owners.map(({displayName}) => displayName);
return null;
}
await utils.actAsync(() =>
TestRenderer.create(
<Contexts defaultOwnerID={owner.id}>
<React.Suspense fallback={null}>
<Suspender owner={owner} />
</React.Suspense>
</Contexts>,
),
);
expect(ownerDisplayNames).not.toBeNull();
return ownerDisplayNames;
}
it('should fetch the owners list for the selected element', async () => {
const Grandparent = () => <Parent />;
const Parent = () => {
@@ -77,45 +102,31 @@ describe('OwnersListContext', () => {
legacyRender(<Grandparent />, document.createElement('div')),
);
expect(store).toMatchSnapshot('mount');
expect(store).toMatchInlineSnapshot(`
[root]
▾ <Grandparent>
▾ <Parent>
<Child>
<Child>
`);
const parent = ((store.getElementAtIndex(1): any): Element);
const firstChild = ((store.getElementAtIndex(2): any): Element);
let didFinish = false;
expect(await getOwnersListForOwner(parent)).toMatchInlineSnapshot(`
Array [
"Grandparent",
"Parent",
]
`);
function Suspender({owner}) {
const read = React.useContext(OwnersListContext);
const owners = read(owner.id);
expect(owners).toMatchSnapshot(
`owners for "${(owner && owner.displayName) || ''}"`,
);
didFinish = true;
return null;
}
await utils.actAsync(() =>
TestRenderer.create(
<Contexts defaultOwnerID={parent.id}>
<React.Suspense fallback={null}>
<Suspender owner={parent} />
</React.Suspense>
</Contexts>,
),
);
expect(didFinish).toBe(true);
didFinish = false;
await utils.actAsync(() =>
TestRenderer.create(
<Contexts defaultOwnerID={firstChild.id}>
<React.Suspense fallback={null}>
<Suspender owner={firstChild} />
</React.Suspense>
</Contexts>,
),
);
expect(didFinish).toBe(true);
expect(await getOwnersListForOwner(firstChild)).toMatchInlineSnapshot(`
Array [
"Grandparent",
"Parent",
"Child",
]
`);
});
it('should fetch the owners list for the selected element that includes filtered components', async () => {
@@ -136,32 +147,22 @@ describe('OwnersListContext', () => {
legacyRender(<Grandparent />, document.createElement('div')),
);
expect(store).toMatchSnapshot('mount');
expect(store).toMatchInlineSnapshot(`
[root]
▾ <Grandparent>
<Child>
<Child>
`);
const firstChild = ((store.getElementAtIndex(1): any): Element);
let didFinish = false;
function Suspender({owner}) {
const read = React.useContext(OwnersListContext);
const owners = read(owner.id);
expect(owners).toMatchSnapshot(
`owners for "${(owner && owner.displayName) || ''}"`,
);
didFinish = true;
return null;
}
await utils.actAsync(() =>
TestRenderer.create(
<Contexts defaultOwnerID={firstChild.id}>
<React.Suspense fallback={null}>
<Suspender owner={firstChild} />
</React.Suspense>
</Contexts>,
),
);
expect(didFinish).toBe(true);
expect(await getOwnersListForOwner(firstChild)).toMatchInlineSnapshot(`
Array [
"Grandparent",
"Parent",
"Child",
]
`);
});
it('should include the current element even if there are no other owners', async () => {
@@ -174,32 +175,18 @@ describe('OwnersListContext', () => {
legacyRender(<Grandparent />, document.createElement('div')),
);
expect(store).toMatchSnapshot('mount');
expect(store).toMatchInlineSnapshot(`
[root]
<Grandparent>
`);
const grandparent = ((store.getElementAtIndex(0): any): Element);
let didFinish = false;
function Suspender({owner}) {
const read = React.useContext(OwnersListContext);
const owners = read(owner.id);
expect(owners).toMatchSnapshot(
`owners for "${(owner && owner.displayName) || ''}"`,
);
didFinish = true;
return null;
}
await utils.actAsync(() =>
TestRenderer.create(
<Contexts defaultOwnerID={grandparent.id}>
<React.Suspense fallback={null}>
<Suspender owner={grandparent} />
</React.Suspense>
</Contexts>,
),
);
expect(didFinish).toBe(true);
expect(await getOwnersListForOwner(grandparent)).toMatchInlineSnapshot(`
Array [
"Grandparent",
]
`);
});
it('should include all owners for a component wrapped in react memo', async () => {
@@ -215,28 +202,21 @@ describe('OwnersListContext', () => {
legacyRender(<Grandparent />, document.createElement('div')),
);
let didFinish = false;
function Suspender({owner}) {
const read = React.useContext(OwnersListContext);
const owners = read(owner.id);
didFinish = true;
expect(owners.length).toBe(3);
expect(owners).toMatchSnapshot(
`owners for "${(owner && owner.displayName) || ''}"`,
);
return null;
}
expect(store).toMatchInlineSnapshot(`
[root]
▾ <Grandparent>
▾ <InnerComponent> [Memo]
<InnerComponent> [ForwardRef]
`);
const wrapped = ((store.getElementAtIndex(2): any): Element);
await utils.actAsync(() =>
TestRenderer.create(
<Contexts defaultOwnerID={wrapped.id}>
<React.Suspense fallback={null}>
<Suspender owner={wrapped} />
</React.Suspense>
</Contexts>,
),
);
expect(didFinish).toBe(true);
expect(await getOwnersListForOwner(wrapped)).toMatchInlineSnapshot(`
Array [
"Grandparent",
"InnerComponent",
"InnerComponent",
]
`);
});
});
packages/react-devtools-shared/src/__tests__/profilerContext-test.js
Vendored
+35 -5
View File
@@ -153,7 +153,14 @@ describe('ProfilerContext', () => {
const containerTwo = document.createElement('div');
utils.act(() => legacyRender(<Parent />, containerOne));
utils.act(() => legacyRender(<Parent />, containerTwo));
expect(store).toMatchSnapshot('mounted');
expect(store).toMatchInlineSnapshot(`
[root]
▾ <Parent>
<Child>
[root]
▾ <Parent>
<Child>
`);
// Profile and record updates to both roots.
await utils.actAsync(() => store.profilerStore.startProfiling());
@@ -192,7 +199,14 @@ describe('ProfilerContext', () => {
const containerTwo = document.createElement('div');
utils.act(() => legacyRender(<Parent />, containerOne));
utils.act(() => legacyRender(<Parent />, containerTwo));
expect(store).toMatchSnapshot('mounted');
expect(store).toMatchInlineSnapshot(`
[root]
▾ <Parent>
<Child>
[root]
▾ <Parent>
<Child>
`);
// Profile and record updates to only the first root.
await utils.actAsync(() => store.profilerStore.startProfiling());
@@ -231,7 +245,14 @@ describe('ProfilerContext', () => {
const containerB = document.createElement('div');
utils.act(() => legacyRender(<Parent />, containerA));
utils.act(() => legacyRender(<Parent />, containerB));
expect(store).toMatchSnapshot('mounted');
expect(store).toMatchInlineSnapshot(`
[root]
▾ <Parent>
<Child>
[root]
▾ <Parent>
<Child>
`);
// Profile and record updates.
await utils.actAsync(() => store.profilerStore.startProfiling());
@@ -290,7 +311,12 @@ describe('ProfilerContext', () => {
utils.act(() =>
legacyRender(<GrandParent includeChild={true} />, container),
);
expect(store).toMatchSnapshot('mounted');
expect(store).toMatchInlineSnapshot(`
[root]
▾ <GrandParent>
▾ <Parent>
<Child>
`);
const parentID = ((store.getElementIDAtIndex(1): any): number);
const childID = ((store.getElementIDAtIndex(2): any): number);
@@ -305,7 +331,11 @@ describe('ProfilerContext', () => {
);
await utils.actAsync(() => store.profilerStore.stopProfiling());
expect(store).toMatchSnapshot('updated');
expect(store).toMatchInlineSnapshot(`
[root]
▾ <GrandParent>
<Parent>
`);
let context: Context = ((null: any): Context);
let selectedElementID = null;
packages/react-devtools-shared/src/__tests__/profilingCache-test.js
Vendored
+464 -260
View File
@@ -7,7 +7,6 @@
* @flow
*/
import typeof ReactTestRenderer from 'react-test-renderer';
import type {FrontendBridge} from 'react-devtools-shared/src/bridge';
import type Store from 'react-devtools-shared/src/devtools/store';
@@ -17,7 +16,6 @@ describe('ProfilingCache', () => {
let ReactDOM;
let ReactDOMClient;
let Scheduler;
let TestRenderer: ReactTestRenderer;
let bridge: FrontendBridge;
let legacyRender;
let store: Store;
@@ -39,7 +37,6 @@ describe('ProfilingCache', () => {
ReactDOM = require('react-dom');
ReactDOMClient = require('react-dom/client');
Scheduler = require('scheduler');
TestRenderer = utils.requireTestRenderer();
});
it('should collect data for each root (including ones added or mounted after profiling started)', () => {
@@ -61,68 +58,95 @@ describe('ProfilingCache', () => {
};
const MemoizedChild = React.memo(Child);
const RootA = ({children}) => children;
const RootB = ({children}) => children;
const RootC = ({children}) => children;
const containerA = document.createElement('div');
const containerB = document.createElement('div');
const containerC = document.createElement('div');
utils.act(() => legacyRender(<Parent count={2} />, containerA));
utils.act(() => legacyRender(<Parent count={1} />, containerB));
utils.act(() =>
legacyRender(
<RootA>
<Parent count={2} />
</RootA>,
containerA,
),
);
utils.act(() =>
legacyRender(
<RootB>
<Parent count={1} />
</RootB>,
containerB,
),
);
utils.act(() => store.profilerStore.startProfiling());
utils.act(() => legacyRender(<Parent count={3} />, containerA));
utils.act(() => legacyRender(<Parent count={1} />, containerC));
utils.act(() => legacyRender(<Parent count={1} />, containerA));
utils.act(() =>
legacyRender(
<RootA>
<Parent count={3} />
</RootA>,
containerA,
),
);
utils.act(() =>
legacyRender(
<RootC>
<Parent count={1} />
</RootC>,
containerC,
),
);
utils.act(() =>
legacyRender(
<RootA>
<Parent count={1} />
</RootA>,
containerA,
),
);
utils.act(() => ReactDOM.unmountComponentAtNode(containerB));
utils.act(() => legacyRender(<Parent count={0} />, containerA));
utils.act(() =>
legacyRender(
<RootA>
<Parent count={0} />
</RootA>,
containerA,
),
);
utils.act(() => store.profilerStore.stopProfiling());
utils.act(() => ReactDOM.unmountComponentAtNode(containerA));
const allProfilingDataForRoots = [];
const rootIDs = Array.from(
store.profilerStore.profilingData.dataForRoots.values(),
).map(({rootID}) => rootID);
expect(rootIDs).toHaveLength(3);
function Validator({previousProfilingDataForRoot, rootID}) {
const profilingDataForRoot = store.profilerStore.getDataForRoot(rootID);
if (previousProfilingDataForRoot != null) {
expect(profilingDataForRoot).toEqual(previousProfilingDataForRoot);
} else {
expect(profilingDataForRoot).toMatchSnapshot(
`Data for root ${profilingDataForRoot.displayName}`,
);
}
allProfilingDataForRoots.push(profilingDataForRoot);
return null;
}
const originalProfilingDataForRoot = [];
const dataForRoots =
store.profilerStore.profilingData !== null
? store.profilerStore.profilingData.dataForRoots
: null;
let data = store.profilerStore.getDataForRoot(rootIDs[0]);
expect(data.displayName).toMatchInlineSnapshot(`"RootA"`);
expect(data.commitData).toHaveLength(3);
originalProfilingDataForRoot.push(data);
expect(dataForRoots).not.toBeNull();
data = store.profilerStore.getDataForRoot(rootIDs[1]);
expect(data.displayName).toMatchInlineSnapshot(`"RootC"`);
expect(data.commitData).toHaveLength(1);
originalProfilingDataForRoot.push(data);
if (dataForRoots !== null) {
dataForRoots.forEach(dataForRoot => {
utils.act(() =>
TestRenderer.create(
<Validator
previousProfilingDataForRoot={null}
rootID={dataForRoot.rootID}
/>,
),
);
});
}
expect(allProfilingDataForRoots).toHaveLength(3);
data = store.profilerStore.getDataForRoot(rootIDs[2]);
expect(data.displayName).toMatchInlineSnapshot(`"RootB"`);
expect(data.commitData).toHaveLength(1);
originalProfilingDataForRoot.push(data);
utils.exportImportHelper(bridge, store);
allProfilingDataForRoots.forEach(profilingDataForRoot => {
utils.act(() =>
TestRenderer.create(
<Validator
previousProfilingDataForRoot={profilingDataForRoot}
rootID={profilingDataForRoot.rootID}
/>,
),
);
rootIDs.forEach((rootID, index) => {
const current = store.profilerStore.getDataForRoot(rootID);
const prev = originalProfilingDataForRoot[index];
expect(current).toEqual(prev);
});
});
@@ -154,50 +178,20 @@ describe('ProfilingCache', () => {
utils.act(() => legacyRender(<Parent count={0} />, container));
utils.act(() => store.profilerStore.stopProfiling());
const allCommitData = [];
function Validator({commitIndex, previousCommitDetails, rootID}) {
const commitData = store.profilerStore.getCommitData(rootID, commitIndex);
if (previousCommitDetails != null) {
expect(commitData).toEqual(previousCommitDetails);
} else {
allCommitData.push(commitData);
expect(commitData).toMatchSnapshot(
`CommitDetails commitIndex: ${commitIndex}`,
);
}
return null;
}
const rootID = store.roots[0];
for (let commitIndex = 0; commitIndex < 4; commitIndex++) {
utils.act(() => {
TestRenderer.create(
<Validator
commitIndex={commitIndex}
previousCommitDetails={null}
rootID={rootID}
/>,
);
});
}
expect(allCommitData).toHaveLength(4);
const prevCommitData = store.profilerStore.getDataForRoot(rootID)
.commitData;
expect(prevCommitData).toHaveLength(4);
utils.exportImportHelper(bridge, store);
for (let commitIndex = 0; commitIndex < 4; commitIndex++) {
utils.act(() => {
TestRenderer.create(
<Validator
commitIndex={commitIndex}
previousCommitDetails={allCommitData[commitIndex]}
rootID={rootID}
/>,
);
});
}
const nextCommitData = store.profilerStore.getDataForRoot(rootID)
.commitData;
expect(nextCommitData).toHaveLength(4);
nextCommitData.forEach((commitData, index) => {
expect(commitData).toEqual(prevCommitData[index]);
});
});
it('should record changed props/state/context/hooks', () => {
@@ -265,49 +259,256 @@ describe('ProfilingCache', () => {
utils.act(() => legacyRender(<LegacyContextProvider />, container));
utils.act(() => store.profilerStore.stopProfiling());
const allCommitData = [];
function Validator({commitIndex, previousCommitDetails, rootID}) {
const commitData = store.profilerStore.getCommitData(rootID, commitIndex);
if (previousCommitDetails != null) {
expect(commitData).toEqual(previousCommitDetails);
} else {
allCommitData.push(commitData);
expect(commitData).toMatchSnapshot(
`CommitDetails commitIndex: ${commitIndex}`,
);
}
return null;
}
const rootID = store.roots[0];
for (let commitIndex = 0; commitIndex < 5; commitIndex++) {
utils.act(() => {
TestRenderer.create(
<Validator
commitIndex={commitIndex}
previousCommitDetails={null}
rootID={rootID}
/>,
);
});
}
expect(allCommitData).toHaveLength(5);
let changeDescriptions = store.profilerStore
.getDataForRoot(rootID)
.commitData.map(commitData => commitData.changeDescriptions);
expect(changeDescriptions).toHaveLength(5);
expect(changeDescriptions[0]).toMatchInlineSnapshot(`
Map {
2 => Object {
"context": null,
"didHooksChange": false,
"isFirstMount": true,
"props": null,
"state": null,
},
4 => Object {
"context": null,
"didHooksChange": false,
"isFirstMount": true,
"props": null,
"state": null,
},
5 => Object {
"context": null,
"didHooksChange": false,
"isFirstMount": true,
"props": null,
"state": null,
},
6 => Object {
"context": null,
"didHooksChange": false,
"isFirstMount": true,
"props": null,
"state": null,
},
7 => Object {
"context": null,
"didHooksChange": false,
"isFirstMount": true,
"props": null,
"state": null,
},
}
`);
expect(changeDescriptions[1]).toMatchInlineSnapshot(`
Map {
5 => Object {
"context": null,
"didHooksChange": false,
"hooks": Array [],
"isFirstMount": false,
"props": Array [
"count",
],
"state": null,
},
4 => Object {
"context": true,
"didHooksChange": false,
"hooks": null,
"isFirstMount": false,
"props": Array [],
"state": null,
},
7 => Object {
"context": null,
"didHooksChange": false,
"hooks": Array [],
"isFirstMount": false,
"props": Array [
"count",
],
"state": null,
},
6 => Object {
"context": Array [
"count",
],
"didHooksChange": false,
"hooks": null,
"isFirstMount": false,
"props": Array [],
"state": null,
},
2 => Object {
"context": null,
"didHooksChange": false,
"hooks": Array [],
"isFirstMount": false,
"props": Array [],
"state": Array [
"count",
],
},
}
`);
expect(changeDescriptions[2]).toMatchInlineSnapshot(`
Map {
5 => Object {
"context": null,
"didHooksChange": false,
"hooks": Array [],
"isFirstMount": false,
"props": Array [],
"state": null,
},
4 => Object {
"context": false,
"didHooksChange": false,
"hooks": null,
"isFirstMount": false,
"props": Array [],
"state": null,
},
7 => Object {
"context": null,
"didHooksChange": false,
"hooks": Array [],
"isFirstMount": false,
"props": Array [],
"state": null,
},
6 => Object {
"context": Array [],
"didHooksChange": false,
"hooks": null,
"isFirstMount": false,
"props": Array [],
"state": null,
},
2 => Object {
"context": null,
"didHooksChange": false,
"hooks": Array [],
"isFirstMount": false,
"props": Array [
"foo",
],
"state": Array [],
},
}
`);
expect(changeDescriptions[3]).toMatchInlineSnapshot(`
Map {
5 => Object {
"context": null,
"didHooksChange": false,
"hooks": Array [],
"isFirstMount": false,
"props": Array [],
"state": null,
},
4 => Object {
"context": false,
"didHooksChange": false,
"hooks": null,
"isFirstMount": false,
"props": Array [],
"state": null,
},
7 => Object {
"context": null,
"didHooksChange": false,
"hooks": Array [],
"isFirstMount": false,
"props": Array [],
"state": null,
},
6 => Object {
"context": Array [],
"didHooksChange": false,
"hooks": null,
"isFirstMount": false,
"props": Array [],
"state": null,
},
2 => Object {
"context": null,
"didHooksChange": false,
"hooks": Array [],
"isFirstMount": false,
"props": Array [
"foo",
"bar",
],
"state": Array [],
},
}
`);
expect(changeDescriptions[4]).toMatchInlineSnapshot(`
Map {
5 => Object {
"context": null,
"didHooksChange": false,
"hooks": Array [],
"isFirstMount": false,
"props": Array [],
"state": null,
},
4 => Object {
"context": false,
"didHooksChange": false,
"hooks": null,
"isFirstMount": false,
"props": Array [],
"state": null,
},
7 => Object {
"context": null,
"didHooksChange": false,
"hooks": Array [],
"isFirstMount": false,
"props": Array [],
"state": null,
},
6 => Object {
"context": Array [],
"didHooksChange": false,
"hooks": null,
"isFirstMount": false,
"props": Array [],
"state": null,
},
2 => Object {
"context": null,
"didHooksChange": false,
"hooks": Array [],
"isFirstMount": false,
"props": Array [
"bar",
],
"state": Array [],
},
}
`);
utils.exportImportHelper(bridge, store);
const prevChangeDescriptions = [...changeDescriptions];
changeDescriptions = store.profilerStore
.getDataForRoot(rootID)
.commitData.map(commitData => commitData.changeDescriptions);
expect(changeDescriptions).toHaveLength(5);
for (let commitIndex = 0; commitIndex < 5; commitIndex++) {
utils.act(() => {
TestRenderer.create(
<Validator
commitIndex={commitIndex}
previousCommitDetails={allCommitData[commitIndex]}
rootID={rootID}
/>,
);
});
expect(changeDescriptions[commitIndex]).toEqual(
prevChangeDescriptions[commitIndex],
);
}
});
@@ -420,33 +621,13 @@ describe('ProfilingCache', () => {
const rootID = store.roots[0];
const allChangeDescriptions = [];
function getChangeDescriptions(commitIndex, label) {
let changeDescriptions;
function Validator() {
const commitData = store.profilerStore.getCommitData(
rootID,
commitIndex,
);
changeDescriptions = commitData.changeDescriptions;
allChangeDescriptions.push(changeDescriptions);
return null;
}
utils.act(() => {
TestRenderer.create(<Validator />);
});
return changeDescriptions;
}
const changeDescriptions = store.profilerStore
.getDataForRoot(rootID)
.commitData.map(commitData => commitData.changeDescriptions);
expect(changeDescriptions).toHaveLength(6);
// 1st render: No change
expect(getChangeDescriptions(0)).toMatchInlineSnapshot(`
expect(changeDescriptions[0]).toMatchInlineSnapshot(`
Map {
3 => Object {
"context": null,
@@ -459,7 +640,7 @@ describe('ProfilingCache', () => {
`);
// 2nd render: Changed props
expect(getChangeDescriptions(1)).toMatchInlineSnapshot(`
expect(changeDescriptions[1]).toMatchInlineSnapshot(`
Map {
3 => Object {
"context": false,
@@ -475,7 +656,7 @@ describe('ProfilingCache', () => {
`);
// 3rd render: Changed useReducer
expect(getChangeDescriptions(2)).toMatchInlineSnapshot(`
expect(changeDescriptions[2]).toMatchInlineSnapshot(`
Map {
3 => Object {
"context": false,
@@ -491,7 +672,7 @@ describe('ProfilingCache', () => {
`);
// 4th render: Changed useState
expect(getChangeDescriptions(3)).toMatchInlineSnapshot(`
expect(changeDescriptions[3]).toMatchInlineSnapshot(`
Map {
3 => Object {
"context": false,
@@ -507,7 +688,7 @@ describe('ProfilingCache', () => {
`);
// 5th render: Changed context
expect(getChangeDescriptions(4)).toMatchInlineSnapshot(`
expect(changeDescriptions[4]).toMatchInlineSnapshot(`
Map {
3 => Object {
"context": true,
@@ -521,7 +702,7 @@ describe('ProfilingCache', () => {
`);
// 6th render: Sync external store
expect(getChangeDescriptions(5)).toMatchInlineSnapshot(`
expect(changeDescriptions[5]).toMatchInlineSnapshot(`
Map {
3 => Object {
"context": false,
@@ -536,31 +717,20 @@ describe('ProfilingCache', () => {
}
`);
expect(allChangeDescriptions).toHaveLength(6);
expect(changeDescriptions).toHaveLength(6);
// Export and re-import profile data and make sure it is retained.
utils.exportImportHelper(bridge, store);
function ExportImportValidator({commitIndex}) {
const commitData = store.profilerStore.getCommitData(rootID, commitIndex);
expect(commitData.changeDescriptions).toEqual(
allChangeDescriptions[commitIndex],
);
return null;
}
for (let commitIndex = 0; commitIndex < 6; commitIndex++) {
utils.act(() => {
TestRenderer.create(
<ExportImportValidator commitIndex={commitIndex} />,
);
});
const commitData = store.profilerStore.getCommitData(rootID, commitIndex);
expect(commitData.changeDescriptions).toEqual(
changeDescriptions[commitIndex],
);
}
});
it('should calculate a self duration based on actual children (not filtered children)', () => {
it('should calculate durations based on actual children (not filtered children)', () => {
store.componentFilters = [utils.createDisplayNameFilter('^Parent$')];
const Grandparent = () => {
@@ -587,26 +757,38 @@ describe('ProfilingCache', () => {
);
utils.act(() => store.profilerStore.stopProfiling());
let commitData = null;
function Validator({commitIndex, rootID}) {
commitData = store.profilerStore.getCommitData(rootID, commitIndex);
expect(commitData).toMatchSnapshot(
`CommitDetails with filtered self durations`,
);
return null;
}
expect(store).toMatchInlineSnapshot(`
[root]
▾ <Grandparent>
<Child>
<Child>
`);
const rootID = store.roots[0];
const commitData = store.profilerStore.getDataForRoot(rootID).commitData;
expect(commitData).toHaveLength(1);
utils.act(() => {
TestRenderer.create(<Validator commitIndex={0} rootID={rootID} />);
});
// Actual duration should also include both filtered <Parent> components.
expect(commitData[0].fiberActualDurations).toMatchInlineSnapshot(`
Map {
1 => 16,
2 => 16,
4 => 1,
6 => 1,
}
`);
expect(commitData).not.toBeNull();
expect(commitData[0].fiberSelfDurations).toMatchInlineSnapshot(`
Map {
1 => 0,
2 => 10,
4 => 1,
6 => 1,
}
`);
});
it('should calculate self duration correctly for suspended views', async () => {
it('should calculate durations correctly for suspended views', async () => {
let data;
const getData = () => {
if (data) {
@@ -642,28 +824,37 @@ describe('ProfilingCache', () => {
);
utils.act(() => store.profilerStore.stopProfiling());
const allCommitData = [];
function Validator({commitIndex, rootID}) {
const commitData = store.profilerStore.getCommitData(rootID, commitIndex);
allCommitData.push(commitData);
expect(commitData).toMatchSnapshot(
`CommitDetails with filtered self durations`,
);
return null;
}
const rootID = store.roots[0];
for (let commitIndex = 0; commitIndex < 2; commitIndex++) {
utils.act(() => {
TestRenderer.create(
<Validator commitIndex={commitIndex} rootID={rootID} />,
);
});
}
expect(allCommitData).toHaveLength(2);
const commitData = store.profilerStore.getDataForRoot(rootID).commitData;
expect(commitData).toHaveLength(2);
expect(commitData[0].fiberActualDurations).toMatchInlineSnapshot(`
Map {
1 => 15,
2 => 15,
3 => 5,
4 => 2,
}
`);
expect(commitData[0].fiberSelfDurations).toMatchInlineSnapshot(`
Map {
1 => 0,
2 => 10,
3 => 3,
4 => 2,
}
`);
expect(commitData[1].fiberActualDurations).toMatchInlineSnapshot(`
Map {
7 => 3,
3 => 3,
}
`);
expect(commitData[1].fiberSelfDurations).toMatchInlineSnapshot(`
Map {
7 => 3,
3 => 0,
}
`);
});
it('should collect data for each rendered fiber', () => {
@@ -693,60 +884,53 @@ describe('ProfilingCache', () => {
utils.act(() => legacyRender(<Parent count={3} />, container));
utils.act(() => store.profilerStore.stopProfiling());
const rootID = store.roots[0];
const allFiberCommits = [];
function Validator({fiberID, previousFiberCommits, rootID}) {
for (let index = 0; index < store.numElements; index++) {
const fiberID = store.getElementIDAtIndex(index);
const fiberCommits = store.profilerStore.profilingCache.getFiberCommits({
fiberID,
rootID,
});
if (previousFiberCommits != null) {
expect(fiberCommits).toEqual(previousFiberCommits);
} else {
allFiberCommits.push(fiberCommits);
expect(fiberCommits).toMatchSnapshot(
`FiberCommits: element ${fiberID}`,
);
}
return null;
allFiberCommits.push(fiberCommits);
}
const rootID = store.roots[0];
for (let index = 0; index < store.numElements; index++) {
utils.act(() => {
const fiberID = store.getElementIDAtIndex(index);
if (fiberID == null) {
throw Error(`Unexpected null ID for element at index ${index}`);
}
TestRenderer.create(
<Validator
fiberID={fiberID}
previousFiberCommits={null}
rootID={rootID}
/>,
);
});
}
expect(allFiberCommits).toHaveLength(store.numElements);
expect(allFiberCommits).toMatchInlineSnapshot(`
Array [
Array [
0,
1,
2,
],
Array [
0,
1,
2,
],
Array [
1,
2,
],
Array [
2,
],
Array [
0,
],
]
`);
utils.exportImportHelper(bridge, store);
for (let index = 0; index < store.numElements; index++) {
utils.act(() => {
const fiberID = store.getElementIDAtIndex(index);
if (fiberID == null) {
throw Error(`Unexpected null ID for element at index ${index}`);
}
TestRenderer.create(
<Validator
fiberID={fiberID}
previousFiberCommits={allFiberCommits[index]}
rootID={rootID}
/>,
);
const fiberID = store.getElementIDAtIndex(index);
const fiberCommits = store.profilerStore.profilingCache.getFiberCommits({
fiberID,
rootID,
});
expect(fiberCommits).toEqual(allFiberCommits[index]);
}
});
@@ -757,17 +941,37 @@ describe('ProfilingCache', () => {
utils.act(() => legacyRender(<React.Suspense />, container));
utils.act(() => store.profilerStore.stopProfiling());
function Validator({commitIndex, rootID}) {
const profilingDataForRoot = store.profilerStore.getDataForRoot(rootID);
expect(profilingDataForRoot).toMatchSnapshot('Empty Suspense node');
return null;
}
const rootID = store.roots[0];
utils.act(() => {
TestRenderer.create(<Validator commitIndex={0} rootID={rootID} />);
});
const commitData = store.profilerStore.getDataForRoot(rootID).commitData;
expect(commitData).toMatchInlineSnapshot(`
Array [
Object {
"changeDescriptions": Map {},
"duration": 0,
"effectDuration": null,
"fiberActualDurations": Map {
1 => 0,
2 => 0,
},
"fiberSelfDurations": Map {
1 => 0,
2 => 0,
},
"passiveEffectDuration": null,
"priorityLevel": "Immediate",
"timestamp": 0,
"updaters": Array [
Object {
"displayName": "render()",
"hocDisplayNames": null,
"id": 1,
"key": null,
"type": 11,
},
],
},
]
`);
});
// See https://github.com/facebook/react/issues/18831
packages/react-devtools-shared/src/__tests__/profilingCharts-test.js
Vendored
+206 -67
View File
@@ -7,13 +7,11 @@
* @flow
*/
import typeof TestRendererType from 'react-test-renderer';
import type Store from 'react-devtools-shared/src/devtools/store';
describe('profiling charts', () => {
let React;
let Scheduler;
let TestRenderer: TestRendererType;
let legacyRender;
let store: Store;
let utils;
@@ -30,9 +28,36 @@ describe('profiling charts', () => {
React = require('react');
Scheduler = require('scheduler');
TestRenderer = utils.requireTestRenderer();
});
function getFlamegraphChartData(rootID, commitIndex) {
const commitTree = store.profilerStore.profilingCache.getCommitTree({
commitIndex,
rootID,
});
const chartData = store.profilerStore.profilingCache.getFlamegraphChartData(
{
commitIndex,
commitTree,
rootID,
},
);
return {commitTree, chartData};
}
function getRankedChartData(rootID, commitIndex) {
const commitTree = store.profilerStore.profilingCache.getCommitTree({
commitIndex,
rootID,
});
const chartData = store.profilerStore.profilingCache.getRankedChartData({
commitIndex,
commitTree,
rootID,
});
return {commitTree, chartData};
}
describe('flamegraph chart', () => {
it('should contain valid data', () => {
const Parent = (_: {||}) => {
@@ -55,47 +80,130 @@ describe('profiling charts', () => {
const container = document.createElement('div');
utils.act(() => store.profilerStore.startProfiling());
utils.act(() => legacyRender(<Parent />, container));
expect(store).toMatchInlineSnapshot(`
[root]
▾ <Parent>
<Child key="first"> [Memo]
<Child key="second"> [Memo]
<Child key="third"> [Memo]
`);
utils.act(() => legacyRender(<Parent />, container));
expect(store).toMatchInlineSnapshot(`
[root]
▾ <Parent>
<Child key="first"> [Memo]
<Child key="second"> [Memo]
<Child key="third"> [Memo]
`);
utils.act(() => store.profilerStore.stopProfiling());
let renderFinished = false;
function Validator({commitIndex, rootID}) {
const commitTree = store.profilerStore.profilingCache.getCommitTree({
commitIndex,
rootID,
});
const chartData = store.profilerStore.profilingCache.getFlamegraphChartData(
{
commitIndex,
commitTree,
rootID,
},
);
expect(commitTree).toMatchSnapshot(`${commitIndex}: CommitTree`);
expect(chartData).toMatchSnapshot(
`${commitIndex}: FlamegraphChartData`,
);
renderFinished = true;
return null;
}
const rootID = store.roots[0];
for (let commitIndex = 0; commitIndex < 2; commitIndex++) {
renderFinished = false;
const firstCommitData = getFlamegraphChartData(rootID, 0);
expect(firstCommitData.commitTree.nodes.size).toBe(5);
expect(firstCommitData.chartData.rows).toMatchInlineSnapshot(`
Array [
Array [
Object {
"actualDuration": 15,
"didRender": true,
"id": 2,
"label": "Parent (10ms of 15ms)",
"name": "Parent",
"offset": 0,
"selfDuration": 10,
"treeBaseDuration": 15,
},
],
Array [
Object {
"actualDuration": 0,
"didRender": true,
"id": 5,
"label": "Child key=\\"third\\" (<0.1ms of <0.1ms)",
"name": "Child",
"offset": 15,
"selfDuration": 0,
"treeBaseDuration": 0,
},
Object {
"actualDuration": 2,
"didRender": true,
"id": 4,
"label": "Child key=\\"second\\" (2ms of 2ms)",
"name": "Child",
"offset": 13,
"selfDuration": 2,
"treeBaseDuration": 2,
},
Object {
"actualDuration": 3,
"didRender": true,
"id": 3,
"label": "Child key=\\"first\\" (3ms of 3ms)",
"name": "Child",
"offset": 10,
"selfDuration": 3,
"treeBaseDuration": 3,
},
],
]
`);
utils.act(() => {
TestRenderer.create(
<Validator commitIndex={commitIndex} rootID={rootID} />,
);
});
expect(renderFinished).toBe(true);
}
expect(renderFinished).toBe(true);
const secondCommitData = getFlamegraphChartData(rootID, 1);
expect(secondCommitData.commitTree.nodes.size).toBe(5);
expect(secondCommitData.chartData.rows).toMatchInlineSnapshot(`
Array [
Array [
Object {
"actualDuration": 10,
"didRender": true,
"id": 2,
"label": "Parent (10ms of 10ms)",
"name": "Parent",
"offset": 0,
"selfDuration": 10,
"treeBaseDuration": 15,
},
],
Array [
Object {
"actualDuration": 0,
"didRender": false,
"id": 5,
"label": "Child key=\\"third\\"",
"name": "Child",
"offset": 15,
"selfDuration": 0,
"treeBaseDuration": 0,
},
Object {
"actualDuration": 0,
"didRender": false,
"id": 4,
"label": "Child key=\\"second\\"",
"name": "Child",
"offset": 13,
"selfDuration": 0,
"treeBaseDuration": 2,
},
Object {
"actualDuration": 0,
"didRender": false,
"id": 3,
"label": "Child key=\\"first\\"",
"name": "Child",
"offset": 10,
"selfDuration": 0,
"treeBaseDuration": 3,
},
],
]
`);
});
});
@@ -121,43 +229,74 @@ describe('profiling charts', () => {
const container = document.createElement('div');
utils.act(() => store.profilerStore.startProfiling());
utils.act(() => legacyRender(<Parent />, container));
expect(store).toMatchInlineSnapshot(`
[root]
▾ <Parent>
<Child key="first"> [Memo]
<Child key="second"> [Memo]
<Child key="third"> [Memo]
`);
utils.act(() => legacyRender(<Parent />, container));
expect(store).toMatchInlineSnapshot(`
[root]
▾ <Parent>
<Child key="first"> [Memo]
<Child key="second"> [Memo]
<Child key="third"> [Memo]
`);
utils.act(() => store.profilerStore.stopProfiling());
let renderFinished = false;
function Validator({commitIndex, rootID}) {
const commitTree = store.profilerStore.profilingCache.getCommitTree({
commitIndex,
rootID,
});
const chartData = store.profilerStore.profilingCache.getRankedChartData(
{
commitIndex,
commitTree,
rootID,
},
);
expect(commitTree).toMatchSnapshot(`${commitIndex}: CommitTree`);
expect(chartData).toMatchSnapshot(`${commitIndex}: RankedChartData`);
renderFinished = true;
return null;
}
const rootID = store.roots[0];
for (let commitIndex = 0; commitIndex < 2; commitIndex++) {
renderFinished = false;
// Everything should render the first time.
const firstCommitData = getRankedChartData(rootID, 0);
expect(firstCommitData.commitTree.nodes.size).toBe(5);
expect(firstCommitData.chartData.nodes).toMatchInlineSnapshot(`
Array [
Object {
"id": 2,
"label": "Parent (10ms)",
"name": "Parent",
"value": 10,
},
Object {
"id": 3,
"label": "Child (Memo) key=\\"first\\" (3ms)",
"name": "Child",
"value": 3,
},
Object {
"id": 4,
"label": "Child (Memo) key=\\"second\\" (2ms)",
"name": "Child",
"value": 2,
},
Object {
"id": 5,
"label": "Child (Memo) key=\\"third\\" (<0.1ms)",
"name": "Child",
"value": 0,
},
]
`);
utils.act(() => {
TestRenderer.create(
<Validator commitIndex={commitIndex} rootID={rootID} />,
);
});
expect(renderFinished).toBe(true);
}
// Only parent should render the second time, since child props have not changed.
const secondCommitData = getRankedChartData(rootID, 1);
expect(secondCommitData.commitTree.nodes.size).toBe(5);
expect(secondCommitData.chartData.nodes).toMatchInlineSnapshot(`
Array [
Object {
"id": 2,
"label": "Parent (10ms)",
"name": "Parent",
"value": 10,
},
]
`);
});
});
});
packages/react-devtools-shared/src/__tests__/profilingCommitTreeBuilder-test.js
Vendored
+126 -115
View File
@@ -7,14 +7,12 @@
* @flow
*/
import typeof TestRendererType from 'react-test-renderer';
import type Store from 'react-devtools-shared/src/devtools/store';
describe('commit tree', () => {
let React;
let ReactDOMClient;
let Scheduler;
let TestRenderer: TestRendererType;
let legacyRender;
let store: Store;
let utils;
@@ -32,7 +30,6 @@ describe('commit tree', () => {
React = require('react');
ReactDOMClient = require('react-dom/client');
Scheduler = require('scheduler');
TestRenderer = utils.requireTestRenderer();
});
it('should be able to rebuild the store tree for each commit', () => {
@@ -51,36 +48,48 @@ describe('commit tree', () => {
utils.act(() => store.profilerStore.startProfiling());
utils.act(() => legacyRender(<Parent count={1} />, container));
expect(store).toMatchInlineSnapshot(`
[root]
▾ <Parent>
<Child key="0"> [Memo]
`);
utils.act(() => legacyRender(<Parent count={3} />, container));
expect(store).toMatchInlineSnapshot(`
[root]
▾ <Parent>
<Child key="0"> [Memo]
<Child key="1"> [Memo]
<Child key="2"> [Memo]
`);
utils.act(() => legacyRender(<Parent count={2} />, container));
expect(store).toMatchInlineSnapshot(`
[root]
▾ <Parent>
<Child key="0"> [Memo]
<Child key="1"> [Memo]
`);
utils.act(() => legacyRender(<Parent count={0} />, container));
expect(store).toMatchInlineSnapshot(`
[root]
<Parent>
`);
utils.act(() => store.profilerStore.stopProfiling());
let renderFinished = false;
function Validator({commitIndex, rootID}) {
const commitTree = store.profilerStore.profilingCache.getCommitTree({
commitIndex,
rootID,
});
expect(commitTree).toMatchSnapshot(`${commitIndex}: CommitTree`);
renderFinished = true;
return null;
}
const rootID = store.roots[0];
const commitTrees = [];
for (let commitIndex = 0; commitIndex < 4; commitIndex++) {
renderFinished = false;
utils.act(() => {
TestRenderer.create(
<Validator commitIndex={commitIndex} rootID={rootID} />,
);
});
expect(renderFinished).toBe(true);
commitTrees.push(
store.profilerStore.profilingCache.getCommitTree({
commitIndex,
rootID,
}),
);
}
expect(commitTrees[0].nodes.size).toBe(3); // <Root> + <Parent> + <Child>
expect(commitTrees[1].nodes.size).toBe(5); // <Root> + <Parent> + <Child> x 3
expect(commitTrees[2].nodes.size).toBe(4); // <Root> + <Parent> + <Child> x 2
expect(commitTrees[3].nodes.size).toBe(2); // <Root> + <Parent>
});
describe('Lazy', () => {
@@ -113,35 +122,39 @@ describe('commit tree', () => {
utils.act(() => store.profilerStore.startProfiling());
utils.act(() => legacyRender(<App renderChildren={true} />, container));
await Promise.resolve();
expect(store).toMatchInlineSnapshot(`
[root]
▾ <App>
<Suspense>
`);
utils.act(() => legacyRender(<App renderChildren={true} />, container));
expect(store).toMatchInlineSnapshot(`
[root]
▾ <App>
▾ <Suspense>
<LazyInnerComponent>
`);
utils.act(() => legacyRender(<App renderChildren={false} />, container));
expect(store).toMatchInlineSnapshot(`
[root]
<App>
`);
utils.act(() => store.profilerStore.stopProfiling());
let renderFinished = false;
function Validator({commitIndex, rootID}) {
const commitTree = store.profilerStore.profilingCache.getCommitTree({
commitIndex,
rootID,
});
expect(commitTree).toMatchSnapshot(`${commitIndex}: CommitTree`);
renderFinished = true;
return null;
}
const rootID = store.roots[0];
for (let commitIndex = 0; commitIndex < 2; commitIndex++) {
renderFinished = false;
utils.act(() => {
TestRenderer.create(
<Validator commitIndex={commitIndex} rootID={rootID} />,
);
});
expect(renderFinished).toBe(true);
const commitTrees = [];
for (let commitIndex = 0; commitIndex < 3; commitIndex++) {
commitTrees.push(
store.profilerStore.profilingCache.getCommitTree({
commitIndex,
rootID,
}),
);
}
expect(commitTrees[0].nodes.size).toBe(3); // <Root> + <App> + <Suspense>
expect(commitTrees[1].nodes.size).toBe(4); // <Root> + <App> + <Suspense> + <LazyInnerComponent>
expect(commitTrees[2].nodes.size).toBe(2); // <Root> + <App>
});
it('should support Lazy components (createRoot)', async () => {
@@ -151,35 +164,39 @@ describe('commit tree', () => {
utils.act(() => store.profilerStore.startProfiling());
utils.act(() => root.render(<App renderChildren={true} />));
await Promise.resolve();
expect(store).toMatchInlineSnapshot(`
[root]
▾ <App>
<Suspense>
`);
utils.act(() => root.render(<App renderChildren={true} />));
expect(store).toMatchInlineSnapshot(`
[root]
▾ <App>
▾ <Suspense>
<LazyInnerComponent>
`);
utils.act(() => root.render(<App renderChildren={false} />));
expect(store).toMatchInlineSnapshot(`
[root]
<App>
`);
utils.act(() => store.profilerStore.stopProfiling());
let renderFinished = false;
function Validator({commitIndex, rootID}) {
const commitTree = store.profilerStore.profilingCache.getCommitTree({
commitIndex,
rootID,
});
expect(commitTree).toMatchSnapshot(`${commitIndex}: CommitTree`);
renderFinished = true;
return null;
}
const rootID = store.roots[0];
for (let commitIndex = 0; commitIndex < 2; commitIndex++) {
renderFinished = false;
utils.act(() => {
TestRenderer.create(
<Validator commitIndex={commitIndex} rootID={rootID} />,
);
});
expect(renderFinished).toBe(true);
const commitTrees = [];
for (let commitIndex = 0; commitIndex < 3; commitIndex++) {
commitTrees.push(
store.profilerStore.profilingCache.getCommitTree({
commitIndex,
rootID,
}),
);
}
expect(commitTrees[0].nodes.size).toBe(3); // <Root> + <App> + <Suspense>
expect(commitTrees[1].nodes.size).toBe(4); // <Root> + <App> + <Suspense> + <LazyInnerComponent>
expect(commitTrees[2].nodes.size).toBe(2); // <Root> + <App>
});
it('should support Lazy components that are unmounted before resolving (legacy render)', async () => {
@@ -187,34 +204,31 @@ describe('commit tree', () => {
utils.act(() => store.profilerStore.startProfiling());
utils.act(() => legacyRender(<App renderChildren={true} />, container));
expect(store).toMatchInlineSnapshot(`
[root]
▾ <App>
<Suspense>
`);
utils.act(() => legacyRender(<App renderChildren={false} />, container));
expect(store).toMatchInlineSnapshot(`
[root]
<App>
`);
utils.act(() => store.profilerStore.stopProfiling());
let renderFinished = false;
function Validator({commitIndex, rootID}) {
const commitTree = store.profilerStore.profilingCache.getCommitTree({
commitIndex,
rootID,
});
expect(commitTree).toMatchSnapshot(`${commitIndex}: CommitTree`);
renderFinished = true;
return null;
}
const rootID = store.roots[0];
const commitTrees = [];
for (let commitIndex = 0; commitIndex < 2; commitIndex++) {
renderFinished = false;
utils.act(() => {
TestRenderer.create(
<Validator commitIndex={commitIndex} rootID={rootID} />,
);
});
expect(renderFinished).toBe(true);
commitTrees.push(
store.profilerStore.profilingCache.getCommitTree({
commitIndex,
rootID,
}),
);
}
expect(commitTrees[0].nodes.size).toBe(3); // <Root> + <App> + <Suspense>
expect(commitTrees[1].nodes.size).toBe(2); // <Root> + <App>
});
it('should support Lazy components that are unmounted before resolving (createRoot)', async () => {
@@ -223,34 +237,31 @@ describe('commit tree', () => {
utils.act(() => store.profilerStore.startProfiling());
utils.act(() => root.render(<App renderChildren={true} />));
expect(store).toMatchInlineSnapshot(`
[root]
▾ <App>
<Suspense>
`);
utils.act(() => root.render(<App renderChildren={false} />));
expect(store).toMatchInlineSnapshot(`
[root]
<App>
`);
utils.act(() => store.profilerStore.stopProfiling());
let renderFinished = false;
function Validator({commitIndex, rootID}) {
const commitTree = store.profilerStore.profilingCache.getCommitTree({
commitIndex,
rootID,
});
expect(commitTree).toMatchSnapshot(`${commitIndex}: CommitTree`);
renderFinished = true;
return null;
}
const rootID = store.roots[0];
const commitTrees = [];
for (let commitIndex = 0; commitIndex < 2; commitIndex++) {
renderFinished = false;
utils.act(() => {
TestRenderer.create(
<Validator commitIndex={commitIndex} rootID={rootID} />,
);
});
expect(renderFinished).toBe(true);
commitTrees.push(
store.profilerStore.profilingCache.getCommitTree({
commitIndex,
rootID,
}),
);
}
expect(commitTrees[0].nodes.size).toBe(3); // <Root> + <App> + <Suspense>
expect(commitTrees[1].nodes.size).toBe(2); // <Root> + <App>
});
});
});
packages/react-devtools-shared/src/__tests__/store-test.js
Vendored
+587 -84
View File
File diff suppressed because it is too large Load Diff
packages/react-devtools-shared/src/__tests__/storeOwners-test.js
Vendored
+109 -42
View File
@@ -26,6 +26,11 @@ describe('Store owners list', () => {
legacyRender = utils.legacyRender;
});
function getFormattedOwnersList(elementID) {
const ownersList = store.getOwnersListForElement(elementID);
return printOwnersList(ownersList);
}
it('should drill through intermediate components', () => {
const Root = () => (
<Intermediate>
@@ -39,17 +44,26 @@ describe('Store owners list', () => {
const Intermediate = ({children}) => <Wrapper>{children}</Wrapper>;
act(() => legacyRender(<Root />, document.createElement('div')));
expect(store).toMatchSnapshot('1: mount');
expect(store).toMatchInlineSnapshot(`
[root]
▾ <Root>
▾ <Intermediate>
▾ <Wrapper>
<Leaf>
`);
const rootID = store.getElementIDAtIndex(0);
expect(
printOwnersList(store.getOwnersListForElement(rootID)),
).toMatchSnapshot('2: components owned by <Root>');
expect(getFormattedOwnersList(rootID)).toMatchInlineSnapshot(`
" ▾ <Root>
▾ <Intermediate>
<Leaf>"
`);
const intermediateID = store.getElementIDAtIndex(1);
expect(
printOwnersList(store.getOwnersListForElement(intermediateID)),
).toMatchSnapshot('3: components owned by <Intermediate>');
expect(getFormattedOwnersList(intermediateID)).toMatchInlineSnapshot(`
" ▾ <Intermediate>
▾ <Wrapper>"
`);
});
it('should drill through interleaved intermediate components', () => {
@@ -67,17 +81,30 @@ describe('Store owners list', () => {
];
act(() => legacyRender(<Root />, document.createElement('div')));
expect(store).toMatchSnapshot('1: mount');
expect(store).toMatchInlineSnapshot(`
[root]
▾ <Root>
▾ <Intermediate key="intermediate">
<Leaf key="leaf">
▾ <Wrapper key="wrapper">
<Leaf>
<Leaf key="leaf">
`);
const rootID = store.getElementIDAtIndex(0);
expect(
printOwnersList(store.getOwnersListForElement(rootID)),
).toMatchSnapshot('2: components owned by <Root>');
expect(getFormattedOwnersList(rootID)).toMatchInlineSnapshot(`
" ▾ <Root>
▾ <Intermediate key=\\"intermediate\\">
<Leaf>
<Leaf key=\\"leaf\\">"
`);
const intermediateID = store.getElementIDAtIndex(1);
expect(
printOwnersList(store.getOwnersListForElement(intermediateID)),
).toMatchSnapshot('3: components owned by <Intermediate>');
expect(getFormattedOwnersList(intermediateID)).toMatchInlineSnapshot(`
" ▾ <Intermediate key=\\"intermediate\\">
<Leaf key=\\"leaf\\">
▾ <Wrapper key=\\"wrapper\\">"
`);
});
it('should show the proper owners list order and contents after insertions and deletions', () => {
@@ -103,12 +130,20 @@ describe('Store owners list', () => {
container,
),
);
expect(store).toMatchSnapshot('1: mount');
const rootID = store.getElementIDAtIndex(0);
expect(
printOwnersList(store.getOwnersListForElement(rootID)),
).toMatchSnapshot('2: components owned by <Root>');
expect(store).toMatchInlineSnapshot(`
[root]
▾ <Root>
▾ <Intermediate>
▾ <Wrapper>
<Leaf>
`);
expect(getFormattedOwnersList(rootID)).toMatchInlineSnapshot(`
" ▾ <Root>
▾ <Intermediate>
<Leaf>"
`);
act(() =>
legacyRender(
@@ -116,11 +151,20 @@ describe('Store owners list', () => {
container,
),
);
expect(store).toMatchSnapshot('3: update to add direct');
expect(
printOwnersList(store.getOwnersListForElement(rootID)),
).toMatchSnapshot('4: components owned by <Root>');
expect(store).toMatchInlineSnapshot(`
[root]
▾ <Root>
<Leaf>
▾ <Intermediate>
▾ <Wrapper>
<Leaf>
`);
expect(getFormattedOwnersList(rootID)).toMatchInlineSnapshot(`
" ▾ <Root>
<Leaf>
▾ <Intermediate>
<Leaf>"
`);
act(() =>
legacyRender(
@@ -128,11 +172,15 @@ describe('Store owners list', () => {
container,
),
);
expect(store).toMatchSnapshot('5: update to remove indirect');
expect(
printOwnersList(store.getOwnersListForElement(rootID)),
).toMatchSnapshot('6: components owned by <Root>');
expect(store).toMatchInlineSnapshot(`
[root]
▾ <Root>
<Leaf>
`);
expect(getFormattedOwnersList(rootID)).toMatchInlineSnapshot(`
" ▾ <Root>
<Leaf>"
`);
act(() =>
legacyRender(
@@ -140,11 +188,13 @@ describe('Store owners list', () => {
container,
),
);
expect(store).toMatchSnapshot('7: update to remove both');
expect(
printOwnersList(store.getOwnersListForElement(rootID)),
).toMatchSnapshot('8: components owned by <Root>');
expect(store).toMatchInlineSnapshot(`
[root]
<Root>
`);
expect(getFormattedOwnersList(rootID)).toMatchInlineSnapshot(
`" <Root>"`,
);
});
it('should show the proper owners list ordering after reordered children', () => {
@@ -156,18 +206,35 @@ describe('Store owners list', () => {
const container = document.createElement('div');
act(() => legacyRender(<Root ascending={true} />, container));
expect(store).toMatchSnapshot('1: mount (ascending)');
const rootID = store.getElementIDAtIndex(0);
expect(
printOwnersList(store.getOwnersListForElement(rootID)),
).toMatchSnapshot('2: components owned by <Root>');
expect(store).toMatchInlineSnapshot(`
[root]
▾ <Root>
<Leaf key="A">
<Leaf key="B">
<Leaf key="C">
`);
expect(getFormattedOwnersList(rootID)).toMatchInlineSnapshot(`
" ▾ <Root>
<Leaf key=\\"A\\">
<Leaf key=\\"B\\">
<Leaf key=\\"C\\">"
`);
act(() => legacyRender(<Root ascending={false} />, container));
expect(store).toMatchSnapshot('3: update (descending)');
expect(
printOwnersList(store.getOwnersListForElement(rootID)),
).toMatchSnapshot('4: components owned by <Root>');
expect(store).toMatchInlineSnapshot(`
[root]
▾ <Root>
<Leaf key="C">
<Leaf key="B">
<Leaf key="A">
`);
expect(getFormattedOwnersList(rootID)).toMatchInlineSnapshot(`
" ▾ <Root>
<Leaf key=\\"C\\">
<Leaf key=\\"B\\">
<Leaf key=\\"A\\">"
`);
});
});
packages/react-devtools-shared/src/__tests__/utils.js
Vendored
+1 -1
View File
@@ -232,7 +232,7 @@ export function exportImportHelper(bridge: FrontendBridge, store: Store): void {
);
// Snapshot the JSON-parsed object, rather than the raw string, because Jest formats the diff nicer.
expect(parsedProfilingDataExport).toMatchSnapshot('imported data');
// expect(parsedProfilingDataExport).toMatchSnapshot('imported data');
act(() => {
// Apply the new exported-then-imported data so tests can re-run assertions.