Fixed a bug with re-ordering of children within a collapsed node

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]
+  ▾ <Component>
+    ▾ <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]
+  ▾ <Component>
+    ▾ <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>
@@ -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]
+  ▸ <Component>
+`;
+
+exports[`Store collapseNodesByDefault:true should support reordering of children: 3: reorder children 1`] = `
+[root]
+  ▸ <Component>
+`;
+
 exports[`Store should not allow a root node to be collapsed: 1: mount 1`] = `
 [root]
     <Component>

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 = () => [<Component key="0" />];
+      const Bar = () => [<Component key="0" />, <Component key="1" />];
+      const foo = <Foo key="foo" />;
+      const bar = <Bar key="bar" />;
+
+      const container = document.createElement('div');
+
+      act(() =>
+        ReactDOM.render(<Component>{[foo, bar]}</Component>, container)
+      );
+      expect(store).toMatchSnapshot('1: mount');
+
+      act(() =>
+        ReactDOM.render(<Component>{[bar, foo]}</Component>, 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 = () => [<Component key="0" />];
+      const Bar = () => [<Component key="0" />, <Component key="1" />];
+      const foo = <Foo key="foo" />;
+      const bar = <Bar key="bar" />;
+
+      const container = document.createElement('div');
+
+      act(() =>
+        ReactDOM.render(<Component>{[foo, bar]}</Component>, container)
+      );
+      expect(store).toMatchSnapshot('1: mount');
+
+      act(() =>
+        ReactDOM.render(<Component>{[bar, foo]}</Component>, container)
+      );
+      expect(store).toMatchSnapshot('3: reorder children');
+    });
   });
 });

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]);
   };