diff --git a/src/__tests__/__snapshots__/store-test.js.snap b/src/__tests__/__snapshots__/store-test.js.snap index bfa9d217b1..fe37abce49 100644 --- a/src/__tests__/__snapshots__/store-test.js.snap +++ b/src/__tests__/__snapshots__/store-test.js.snap @@ -138,6 +138,26 @@ exports[`Store collapseNodesByDefault:false should support mount and update oper exports[`Store collapseNodesByDefault:false should support mount and update operations: 3: unmount 1`] = ``; +exports[`Store collapseNodesByDefault:false should support reordering of children: 1: mount 1`] = ` +[root] + ▾ + ▾ + + ▾ + + +`; + +exports[`Store collapseNodesByDefault:false should support reordering of children: 3: reorder children 1`] = ` +[root] + ▾ + ▾ + + + ▾ + +`; + exports[`Store collapseNodesByDefault:true should display Suspense nodes properly in various states: 1: loading 1`] = ` [root] ▸ @@ -310,6 +330,16 @@ exports[`Store collapseNodesByDefault:true should support mount and update opera 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] + ▸ +`; + +exports[`Store collapseNodesByDefault:true should support reordering of children: 3: reorder children 1`] = ` +[root] + ▸ +`; + exports[`Store should not allow a root node to be collapsed: 1: mount 1`] = ` [root] diff --git a/src/__tests__/store-test.js b/src/__tests__/store-test.js index c4e6b42497..bfe0d88da8 100644 --- a/src/__tests__/store-test.js +++ b/src/__tests__/store-test.js @@ -187,6 +187,27 @@ describe('Store', () => { act(() => store.toggleIsCollapsed(grandparentID, false)); expect(store).toMatchSnapshot('6: expand Grandparent'); }); + + it('should support reordering of children', () => { + const Component = ({ children = null }) => children; + + const Foo = () => []; + const Bar = () => [, ]; + const foo = ; + const bar = ; + + const container = document.createElement('div'); + + act(() => + ReactDOM.render({[foo, bar]}, container) + ); + expect(store).toMatchSnapshot('1: mount'); + + act(() => + ReactDOM.render({[bar, foo]}, container) + ); + expect(store).toMatchSnapshot('3: reorder children'); + }); }); describe('collapseNodesByDefault:true', () => { @@ -406,5 +427,26 @@ describe('Store', () => { act(() => store.toggleIsCollapsed(id, false)); expect(store).toMatchSnapshot('6: expand middle node'); }); + + it('should support reordering of children', () => { + const Component = ({ children = null }) => children; + + const Foo = () => []; + const Bar = () => [, ]; + const foo = ; + const bar = ; + + const container = document.createElement('div'); + + act(() => + ReactDOM.render({[foo, bar]}, container) + ); + expect(store).toMatchSnapshot('1: mount'); + + act(() => + ReactDOM.render({[bar, foo]}, container) + ); + expect(store).toMatchSnapshot('3: reorder children'); + }); }); }); diff --git a/src/devtools/store.js b/src/devtools/store.js index 2451abd98f..817af3daf0 100644 --- a/src/devtools/store.js +++ b/src/devtools/store.js @@ -544,6 +544,7 @@ export default class Store extends EventEmitter { } if (__DEBUG__) { + console.groupCollapsed('onBridgeOperations'); debug('onBridgeOperations', operations); } @@ -797,17 +798,19 @@ export default class Store extends EventEmitter { element = ((this._idToElement.get(id): any): Element); element.children = Array.from(children); - const prevWeight = element.weight; - let childWeight = 0; + if (!element.isCollapsed) { + const prevWeight = element.weight; + let childWeight = 0; - children.forEach(childID => { - const child = ((this._idToElement.get(childID): any): Element); - childWeight += child.weight; - }); + children.forEach(childID => { + const child = ((this._idToElement.get(childID): any): Element); + childWeight += child.weight; + }); - element.weight = childWeight + 1; + element.weight = childWeight + 1; - weightDelta = childWeight + 1 - prevWeight; + weightDelta = childWeight + 1 - prevWeight; + } break; case TREE_OPERATION_UPDATE_TREE_BASE_DURATION: // Base duration updates are only sent while profiling is in progress. @@ -861,6 +864,11 @@ export default class Store extends EventEmitter { this.emit('roots'); } + if (__DEBUG__) { + console.log(this.__toSnapshot(true)); + console.groupEnd(); + } + this.emit('mutated', [addedElementIDs, removedElementIDs]); };