diff --git a/src/__tests__/__snapshots__/store-test.js.snap b/src/__tests__/__snapshots__/store-test.js.snap index 1e1af1d669..a3b156a40b 100644 --- a/src/__tests__/__snapshots__/store-test.js.snap +++ b/src/__tests__/__snapshots__/store-test.js.snap @@ -214,6 +214,32 @@ exports[`Store collapseNodesByDefault:true should filter DOM nodes from the stor ▸ `; +exports[`Store collapseNodesByDefault:true should not add new nodes when suspense is toggled: 1: mount 1`] = ` +[root] + ▸ +`; + +exports[`Store collapseNodesByDefault:true should not add new nodes when suspense is toggled: 2: expand tree 1`] = ` +[root] + ▾ + ▾ + ▸ +`; + +exports[`Store collapseNodesByDefault:true should not add new nodes when suspense is toggled: 3: toggle fallback on 1`] = ` +[root] + ▾ + ▾ + +`; + +exports[`Store collapseNodesByDefault:true should not add new nodes when suspense is toggled: 4: toggle fallback on 1`] = ` +[root] + ▾ + ▾ + ▸ +`; + exports[`Store collapseNodesByDefault:true should support expanding deep parts of the tree: 1: mount 1`] = ` [root] ▸ diff --git a/src/__tests__/store-test.js b/src/__tests__/store-test.js index 5dad4ed956..46383476be 100644 --- a/src/__tests__/store-test.js +++ b/src/__tests__/store-test.js @@ -4,6 +4,7 @@ describe('Store', () => { let React; let ReactDOM; let TestUtils; + let agent; let store; const act = (callback: Function) => { @@ -14,6 +15,7 @@ describe('Store', () => { }; beforeEach(() => { + agent = global.agent; store = global.store; React = require('react'); @@ -409,7 +411,7 @@ describe('Store', () => { ); expect(store).toMatchSnapshot('1: mount'); - const deepestedNodeID = global.agent.getIDForNode(ref.current); + const deepestedNodeID = agent.getIDForNode(ref.current); act(() => store.toggleIsCollapsed(deepestedNodeID, false)); expect(store).toMatchSnapshot('2: expand deepest node'); @@ -460,5 +462,50 @@ describe('Store', () => { act(() => store.toggleIsCollapsed(store.getElementIDAtIndex(0), true)); expect(store).toMatchSnapshot('6: collapse root'); }); + + it('should not add new nodes when suspense is toggled', () => { + const SuspenseTree = () => { + return ( + Loading outer}> + + + ); + }; + + const Fallback = () => null; + const Parent = () => ; + const Child = () => null; + + act(() => + ReactDOM.render(, document.createElement('div')) + ); + expect(store).toMatchSnapshot('1: mount'); + + act(() => store.toggleIsCollapsed(store.getElementIDAtIndex(0), false)); + act(() => store.toggleIsCollapsed(store.getElementIDAtIndex(1), false)); + expect(store).toMatchSnapshot('2: expand tree'); + + // HACK There's only one renderer for this test + const rendererID = Object.keys(agent._rendererInterfaces)[0]; + const suspenseID = store.getElementIDAtIndex(1); + + act(() => + agent.overrideSuspense({ + id: suspenseID, + rendererID, + forceFallback: true, + }) + ); + expect(store).toMatchSnapshot('3: toggle fallback on'); + + act(() => + agent.overrideSuspense({ + id: suspenseID, + rendererID, + forceFallback: false, + }) + ); + expect(store).toMatchSnapshot('4: toggle fallback on'); + }); }); }); diff --git a/src/devtools/store.js b/src/devtools/store.js index d1bc5884e1..9ac8ac5598 100644 --- a/src/devtools/store.js +++ b/src/devtools/store.js @@ -551,7 +551,7 @@ export default class Store extends EventEmitter { if (__DEBUG__) { console.groupCollapsed('onBridgeOperations'); - debug('onBridgeOperations', operations); + debug('onBridgeOperations', operations.join(',')); } let haveRootsChanged = false; @@ -772,7 +772,7 @@ export default class Store extends EventEmitter { children.forEach(childID => { const child = ((this._idToElement.get(childID): any): Element); - childWeight += child.weight; + childWeight += child.isCollapsed ? 1 : child.weight; }); element.weight = childWeight + 1;