diff --git a/packages/react-devtools-shared/src/__tests__/profilingCommitTreeBuilder-test.js b/packages/react-devtools-shared/src/__tests__/profilingCommitTreeBuilder-test.js index 5879032bada1..f5a653592a67 100644 --- a/packages/react-devtools-shared/src/__tests__/profilingCommitTreeBuilder-test.js +++ b/packages/react-devtools-shared/src/__tests__/profilingCommitTreeBuilder-test.js @@ -124,7 +124,7 @@ describe('commit tree', () => { ▾ [suspense-root] rects={null} - + `); utils.act(() => render()); expect(store).toMatchInlineSnapshot(` @@ -133,7 +133,7 @@ describe('commit tree', () => { ▾ [suspense-root] rects={null} - + `); utils.act(() => render()); expect(store).toMatchInlineSnapshot(` @@ -167,7 +167,7 @@ describe('commit tree', () => { ▾ [suspense-root] rects={null} - + `); utils.act(() => render()); expect(store).toMatchInlineSnapshot(` diff --git a/packages/react-devtools-shared/src/__tests__/store-test.js b/packages/react-devtools-shared/src/__tests__/store-test.js index 871b44827e77..97cb49a66f42 100644 --- a/packages/react-devtools-shared/src/__tests__/store-test.js +++ b/packages/react-devtools-shared/src/__tests__/store-test.js @@ -164,7 +164,7 @@ describe('Store', () => { ▾ [suspense-root] rects={null} - + `); }); @@ -520,7 +520,7 @@ describe('Store', () => { ▾ [suspense-root] rects={[{x:1,y:2,width:5,height:1}, {x:1,y:2,width:10,height:1}]} - + `); await act(() => { @@ -533,7 +533,7 @@ describe('Store', () => { ▾ [suspense-root] rects={[{x:1,y:2,width:5,height:1}, {x:1,y:2,width:5,height:1}]} - + `); }); @@ -609,10 +609,10 @@ describe('Store', () => { [suspense-root] rects={[{x:1,y:2,width:10,height:1}]} - - - - + + + + `); await act(() => render( @@ -637,10 +637,10 @@ describe('Store', () => { [suspense-root] rects={[{x:1,y:2,width:10,height:1}, {x:1,y:2,width:10,height:1}]} - - - - + + + + `); await act(() => render( @@ -665,10 +665,10 @@ describe('Store', () => { [suspense-root] rects={[{x:1,y:2,width:10,height:1}, {x:1,y:2,width:10,height:1}]} - - - - + + + + `); await act(() => render( @@ -693,10 +693,10 @@ describe('Store', () => { [suspense-root] rects={[{x:1,y:2,width:10,height:1}, {x:1,y:2,width:10,height:1}]} - - - - + + + + `); await act(() => render( @@ -714,10 +714,10 @@ describe('Store', () => { ▾ [suspense-root] rects={[{x:1,y:2,width:10,height:1}, {x:1,y:2,width:10,height:1}, {x:1,y:2,width:10,height:1}]} - - - - + + + + `); await act(() => render( @@ -742,10 +742,10 @@ describe('Store', () => { [suspense-root] rects={[{x:1,y:2,width:10,height:1}, {x:1,y:2,width:10,height:1}, {x:1,y:2,width:10,height:1}]} - - - - + + + + `); await act(() => render( @@ -770,10 +770,10 @@ describe('Store', () => { [suspense-root] rects={[{x:1,y:2,width:10,height:1}]} - - - - + + + + `); const rendererID = getRendererID(); @@ -798,10 +798,10 @@ describe('Store', () => { [suspense-root] rects={[{x:1,y:2,width:10,height:1}, {x:1,y:2,width:10,height:1}]} - - - - + + + + `); await act(() => agent.overrideSuspense({ @@ -817,10 +817,10 @@ describe('Store', () => { ▾ [suspense-root] rects={[{x:1,y:2,width:10,height:1}, {x:1,y:2,width:10,height:1}, {x:1,y:2,width:10,height:1}]} - - - - + + + + `); await act(() => render( @@ -838,10 +838,10 @@ describe('Store', () => { ▾ [suspense-root] rects={[{x:1,y:2,width:10,height:1}, {x:1,y:2,width:10,height:1}, {x:1,y:2,width:10,height:1}]} - - - - + + + + `); await actAsync(() => agent.overrideSuspense({ @@ -864,10 +864,10 @@ describe('Store', () => { [suspense-root] rects={[{x:1,y:2,width:10,height:1}, {x:1,y:2,width:10,height:1}, {x:1,y:2,width:10,height:1}]} - - - - + + + + `); await act(() => agent.overrideSuspense({ @@ -890,10 +890,10 @@ describe('Store', () => { [suspense-root] rects={[{x:1,y:2,width:10,height:1}, {x:1,y:2,width:10,height:1}, {x:1,y:2,width:10,height:1}]} - - - - + + + + `); await act(() => render( @@ -918,10 +918,10 @@ describe('Store', () => { [suspense-root] rects={[{x:1,y:2,width:10,height:1}]} - - - - + + + + `); }); @@ -973,10 +973,10 @@ describe('Store', () => { [suspense-root] rects={[{x:1,y:2,width:5,height:1}, {x:1,y:2,width:5,height:1}, {x:1,y:2,width:5,height:1}, {x:1,y:2,width:5,height:1}, {x:1,y:2,width:5,height:1}, {x:1,y:2,width:5,height:1}]} - - - - + + + + `); await actAsync(() => { @@ -1002,10 +1002,10 @@ describe('Store', () => { [suspense-root] rects={[{x:1,y:2,width:5,height:1}, {x:1,y:2,width:5,height:1}, {x:1,y:2,width:5,height:1}, {x:1,y:2,width:5,height:1}, {x:1,y:2,width:5,height:1}, {x:1,y:2,width:5,height:1}, {x:1,y:2,width:5,height:1}, {x:1,y:2,width:5,height:1}]} - - - - + + + + `); await actAsync(() => { @@ -1028,10 +1028,10 @@ describe('Store', () => { [suspense-root] rects={[{x:1,y:2,width:5,height:1}, {x:1,y:2,width:5,height:1}, {x:1,y:2,width:5,height:1}, {x:1,y:2,width:5,height:1}, {x:1,y:2,width:5,height:1}, {x:1,y:2,width:5,height:1}]} - - - - + + + + `); }); @@ -1069,7 +1069,7 @@ describe('Store', () => { ▾ [suspense-root] rects={[{x:1,y:2,width:5,height:1}, {x:1,y:2,width:10,height:1}]} - + `); await act(() => { @@ -1084,7 +1084,7 @@ describe('Store', () => { [suspense-root] rects={[{x:1,y:2,width:5,height:1}, {x:1,y:2,width:5,height:1}, {x:1,y:2,width:5,height:1}]} - + `); }); @@ -1419,7 +1419,7 @@ describe('Store', () => { [root] ▸ [suspense-root] rects={[{x:1,y:2,width:5,height:1}, {x:1,y:2,width:10,height:1}]} - + `); // This test isn't meaningful unless we expand the suspended tree @@ -1436,7 +1436,7 @@ describe('Store', () => { ▾ [suspense-root] rects={[{x:1,y:2,width:5,height:1}, {x:1,y:2,width:10,height:1}]} - + `); await act(() => { @@ -1449,7 +1449,7 @@ describe('Store', () => { ▾ [suspense-root] rects={[{x:1,y:2,width:5,height:1}, {x:1,y:2,width:5,height:1}]} - + `); }); @@ -1675,7 +1675,7 @@ describe('Store', () => { [root] ▸ [suspense-root] rects={null} - + `); await act(() => @@ -1690,7 +1690,7 @@ describe('Store', () => { ▾ [suspense-root] rects={null} - + `); const rendererID = getRendererID(); @@ -1709,7 +1709,7 @@ describe('Store', () => { ▾ [suspense-root] rects={null} - + `); await act(() => @@ -1725,7 +1725,7 @@ describe('Store', () => { ▾ [suspense-root] rects={null} - + `); }); }); @@ -2030,7 +2030,7 @@ describe('Store', () => { ▾ [suspense-root] rects={null} - + `); await Promise.resolve(); @@ -2044,7 +2044,7 @@ describe('Store', () => { ▾ [suspense-root] rects={null} - + `); // Render again to unmount it @@ -2537,7 +2537,7 @@ describe('Store', () => { ▾ [suspense-root] rects={null} - + `); await actAsync(() => render()); @@ -2548,7 +2548,7 @@ describe('Store', () => { ▾ [suspense-root] rects={null} - + `); }); }); @@ -2909,8 +2909,8 @@ describe('Store', () => { ▾ [suspense-root] rects={[{x:1,y:2,width:19,height:1}]} - - + + `); await actAsync(() => { @@ -2923,8 +2923,8 @@ describe('Store', () => { ▾ [suspense-root] rects={[{x:1,y:2,width:10,height:1}]} - - + + `); await actAsync(() => { @@ -2936,7 +2936,7 @@ describe('Store', () => { ▾ [suspense-root] rects={[{x:1,y:2,width:4,height:1}]} - + `); }); @@ -3039,10 +3039,10 @@ describe('Store', () => { ▾ [suspense-root] rects={[{x:1,y:2,width:19,height:1}, {x:1,y:2,width:19,height:1}]} - - - - + + + + `); await actAsync(() => { @@ -3062,8 +3062,8 @@ describe('Store', () => { ▾ [suspense-root] rects={[{x:1,y:2,width:4,height:1}, {x:1,y:2,width:4,height:1}]} - - + + `); // Resuspend head content @@ -3092,9 +3092,9 @@ describe('Store', () => { ▾ [suspense-root] rects={[{x:1,y:2,width:4,height:1}, {x:1,y:2,width:10,height:1}, {x:1,y:2,width:4,height:1}]} - - - + + + `); // Resuspend head fallback @@ -3123,9 +3123,9 @@ describe('Store', () => { ▾ [suspense-root] rects={[{x:1,y:2,width:4,height:1}, {x:1,y:2,width:10,height:1}, {x:1,y:2,width:19,height:1}, {x:1,y:2,width:4,height:1}]} - - - + + + `); await actAsync(() => render(null)); @@ -3159,7 +3159,7 @@ describe('Store', () => { ▾ [suspense-root] rects={[{x:1,y:2,width:1,height:1}]} - + `); await actAsync(() => @@ -3175,7 +3175,7 @@ describe('Store', () => { ▾ [suspense-root] rects={[{x:1,y:2,width:5,height:1}]} - + `); await actAsync(() => render(null)); @@ -3223,7 +3223,7 @@ describe('Store', () => { [root] [suspense-root] rects={null} - + `); await actAsync(() => resolveContent('content')); @@ -3232,7 +3232,7 @@ describe('Store', () => { ▾ [suspense-root] rects={null} - + `); }); @@ -3295,7 +3295,7 @@ describe('Store', () => { ▾ [suspense-root] rects={null} - + `); } @@ -3305,8 +3305,8 @@ describe('Store', () => { ▾ [suspense-root] rects={null} - - + + `); await actAsync(() => resolveContent('content')); @@ -3316,8 +3316,8 @@ describe('Store', () => { ▾ [suspense-root] rects={null} - - + + `); }); @@ -3362,7 +3362,7 @@ describe('Store', () => { [suspense-root] rects={[{x:1,y:2,width:15,height:1}]} - + `); // mount as visible @@ -3383,9 +3383,9 @@ describe('Store', () => { ▾ [suspense-root] rects={[{x:1,y:2,width:15,height:1}, {x:1,y:2,width:15,height:1}]} - - - + + + `); await actAsync(() => { @@ -3398,8 +3398,8 @@ describe('Store', () => { [suspense-root] rects={[{x:1,y:2,width:15,height:1}, {x:1,y:2,width:15,height:1}]} - - + + `); await actAsync(() => { @@ -3416,9 +3416,9 @@ describe('Store', () => { ▾ [suspense-root] rects={[{x:1,y:2,width:15,height:1}, {x:1,y:2,width:15,height:1}]} - - - + + + `); }); @@ -3458,7 +3458,7 @@ describe('Store', () => { ▾ [suspense-root] rects={[{x:1,y:2,width:13,height:1}]} - + `); await actAsync(() => { @@ -3472,8 +3472,8 @@ describe('Store', () => { ▾ [suspense-root] rects={[{x:1,y:2,width:6,height:1}, {x:1,y:2,width:6,height:1}]} - - + + `); }); @@ -3528,8 +3528,8 @@ describe('Store', () => { ▾ [suspense-root] rects={[{x:1,y:2,width:13,height:1}, {x:1,y:2,width:13,height:1}]} - - + + `); let outerResolve; @@ -3551,8 +3551,8 @@ describe('Store', () => { ▾ [suspense-root] rects={[{x:1,y:2,width:13,height:1}, {x:1,y:2,width:13,height:1}, {x:1,y:2,width:13,height:1}]} - - + + `); await actAsync(() => { @@ -3568,8 +3568,8 @@ describe('Store', () => { ▾ [suspense-root] rects={[{x:1,y:2,width:15,height:1}, {x:1,y:2,width:14,height:1}]} - - + + `); }); diff --git a/packages/react-devtools-shared/src/__tests__/storeComponentFilters-test.js b/packages/react-devtools-shared/src/__tests__/storeComponentFilters-test.js index 16b013cb4ecf..f29801b95e9e 100644 --- a/packages/react-devtools-shared/src/__tests__/storeComponentFilters-test.js +++ b/packages/react-devtools-shared/src/__tests__/storeComponentFilters-test.js @@ -169,8 +169,8 @@ describe('Store component filters', () => { ▾
[suspense-root] rects={[{x:1,y:2,width:7,height:1}, {x:1,y:2,width:6,height:1}]} - - + + `); await actAsync( @@ -187,8 +187,8 @@ describe('Store component filters', () => { ▾
[suspense-root] rects={[{x:1,y:2,width:7,height:1}, {x:1,y:2,width:6,height:1}]} - - + + `); await actAsync( @@ -205,8 +205,8 @@ describe('Store component filters', () => { ▾
[suspense-root] rects={[{x:1,y:2,width:7,height:1}, {x:1,y:2,width:6,height:1}]} - - + + `); }); @@ -809,7 +809,7 @@ describe('Store component filters', () => { ▾
[suspense-root] rects={[{x:1,y:2,width:0,height:1}, {x:1,y:2,width:0,height:1}, {x:1,y:2,width:0,height:1}]} - + `); await actAsync(() => { @@ -825,7 +825,7 @@ describe('Store component filters', () => { ▾
[suspense-root] rects={[{x:1,y:2,width:0,height:1}, {x:1,y:2,width:0,height:1}]} - + `); }); @@ -883,8 +883,8 @@ describe('Store component filters', () => { ▾
[suspense-root] rects={[{x:1,y:2,width:4,height:1}, {x:1,y:2,width:13,height:1}]} - - + + `); await actAsync( @@ -903,8 +903,8 @@ describe('Store component filters', () => { ▾ [suspense-root] rects={[{x:1,y:2,width:4,height:1}, {x:1,y:2,width:13,height:1}]} - - + + `); await actAsync(async () => (store.componentFilters = [])); @@ -924,8 +924,8 @@ describe('Store component filters', () => { ▾
[suspense-root] rects={[{x:1,y:2,width:4,height:1}, {x:1,y:2,width:13,height:1}]} - - + + `); }); }); diff --git a/packages/react-devtools-shared/src/__tests__/treeContext-test.js b/packages/react-devtools-shared/src/__tests__/treeContext-test.js index 9b6b7e7ab073..c48aec8f10ac 100644 --- a/packages/react-devtools-shared/src/__tests__/treeContext-test.js +++ b/packages/react-devtools-shared/src/__tests__/treeContext-test.js @@ -1369,8 +1369,8 @@ describe('TreeListContext', () => { ▾ [suspense-root] rects={null} - - + + `); const outerSuspenseID = ((store.getElementIDAtIndex(1): any): number); @@ -1411,8 +1411,8 @@ describe('TreeListContext', () => { ▾ [suspense-root] rects={null} - - + + `); }); }); @@ -2370,7 +2370,7 @@ describe('TreeListContext', () => { [root] [suspense-root] rects={null} - + `); selectNextErrorOrWarning(); @@ -2379,7 +2379,7 @@ describe('TreeListContext', () => { [root] [suspense-root] rects={null} - + `); }); @@ -2405,7 +2405,7 @@ describe('TreeListContext', () => { [root] [suspense-root] rects={null} - + `); await Promise.resolve(); @@ -2427,7 +2427,7 @@ describe('TreeListContext', () => { [suspense-root] rects={null} - + `); }); @@ -2457,7 +2457,7 @@ describe('TreeListContext', () => { ▾ ✕ [suspense-root] rects={null} - + `); await Promise.resolve(); @@ -2476,7 +2476,7 @@ describe('TreeListContext', () => { ▾ [suspense-root] rects={null} - + `); }); }); diff --git a/packages/react-devtools-shared/src/devtools/utils.js b/packages/react-devtools-shared/src/devtools/utils.js index 640f0d19b579..b6438b47623c 100644 --- a/packages/react-devtools-shared/src/devtools/utils.js +++ b/packages/react-devtools-shared/src/devtools/utils.js @@ -64,9 +64,10 @@ function printRects(rects: SuspenseNode['rects']): string { function printSuspense(suspense: SuspenseNode): string { const name = ` name="${suspense.name || 'Unknown'}"`; + const hasUniqueSuspenders = ` uniqueSuspenders={${suspense.hasUniqueSuspenders ? 'true' : 'false'}}`; const printedRects = printRects(suspense.rects); - return ``; + return ``; } function printSuspenseWithChildren(