Added another (disabled) test; refactored getChildren slightly

src/__tests__/legacy/storeLegacy-v15-test.js

@@ -176,6 +176,45 @@ describe('Store (legacy)', () => {
       expect(store).toMatchSnapshot('6: expand Grandparent');
     });
 
+    // TODO Re-enable this test once the renderer supports it.
+    xit('should support adding and removing children', () => {
+      const Root = ({ children }) => <div>{children}</div>;
+      const Component = () => null;
+
+      const container = document.createElement('div');
+
+      act(() =>
+        ReactDOM.render(
+          <Root>
+            <Component key="a" />
+          </Root>,
+          container
+        )
+      );
+      expect(store).toMatchSnapshot('1: mount');
+
+      act(() =>
+        ReactDOM.render(
+          <Root>
+            <Component key="a" />
+            <Component key="b" />
+          </Root>,
+          container
+        )
+      );
+      expect(store).toMatchSnapshot('2: add child');
+
+      act(() =>
+        ReactDOM.render(
+          <Root>
+            <Component key="b" />
+          </Root>,
+          container
+        )
+      );
+      expect(store).toMatchSnapshot('3: remove child');
+    });
+
     // TODO Re-enable this test once the renderer supports it.
     xit('should support reordering of children', () => {
       const Root = ({ children }) => <div>{children}</div>;
@@ -194,13 +233,13 @@ describe('Store (legacy)', () => {
       expect(store).toMatchSnapshot('1: mount');
 
       act(() => ReactDOM.render(<Root>{[bar, foo]}</Root>, container));
-      expect(store).toMatchSnapshot('3: reorder children');
+      expect(store).toMatchSnapshot('2: reorder children');
 
       act(() => store.toggleIsCollapsed(store.getElementIDAtIndex(0), true));
-      expect(store).toMatchSnapshot('4: collapse root');
+      expect(store).toMatchSnapshot('3: collapse root');
 
       act(() => store.toggleIsCollapsed(store.getElementIDAtIndex(0), false));
-      expect(store).toMatchSnapshot('5: expand root');
+      expect(store).toMatchSnapshot('4: expand root');
     });
   });
 
@@ -422,19 +461,19 @@ describe('Store (legacy)', () => {
       expect(store).toMatchSnapshot('1: mount');
 
       act(() => ReactDOM.render(<Root>{[bar, foo]}</Root>, container));
-      expect(store).toMatchSnapshot('3: reorder children');
+      expect(store).toMatchSnapshot('2: reorder children');
 
       act(() => store.toggleIsCollapsed(store.getElementIDAtIndex(0), false));
-      expect(store).toMatchSnapshot('4: expand root');
+      expect(store).toMatchSnapshot('3: expand root');
 
       act(() => {
         store.toggleIsCollapsed(store.getElementIDAtIndex(2), false);
         store.toggleIsCollapsed(store.getElementIDAtIndex(1), false);
       });
-      expect(store).toMatchSnapshot('5: expand leaves');
+      expect(store).toMatchSnapshot('4: expand leaves');
 
       act(() => store.toggleIsCollapsed(store.getElementIDAtIndex(0), true));
-      expect(store).toMatchSnapshot('6: collapse root');
+      expect(store).toMatchSnapshot('5: collapse root');
     });
   });
 });

src/backend/legacy/getChildren.js

@@ -1,22 +1,30 @@
 // @flow
 
+import traverseAllChildrenImpl from './traverseAllChildrenImpl';
+
+// TODO (legacy) Respect component filters
+
 export default function getChildren(internalInstance: Object): Array<any> {
+  let children = [];
+
   // If the parent is a native node without rendered children, but with
   // multiple string children, then the `element` that gets passed in here is
   // a plain value -- a string or number.
-  if (internalInstance._renderedComponent) {
-    return [internalInstance._renderedComponent];
+  if (typeof internalInstance !== 'object') {
+    // No children
+  } else if (
+    internalInstance._currentElement === null ||
+    internalInstance._currentElement === false
+  ) {
+    // No children
+  } else if (internalInstance._renderedComponent) {
+    children = [internalInstance._renderedComponent];
   } else if (internalInstance._renderedChildren) {
-    return childrenToArray(internalInstance._renderedChildren);
+    children = renderedChildrenToArray(internalInstance._renderedChildren);
   } else if (
     internalInstance._currentElement &&
     internalInstance._currentElement.props
   ) {
-    // DevTools doesn't need to display primative child types,
-    // So we can filter them out early.
-    /*
-    const children = [];
-
     // This is a native node without rendered children -- meaning the children
     // prop is the unfiltered list of children.
     // This may include 'null' or even other invalid values, so we need to
@@ -34,30 +42,26 @@ export default function getChildren(internalInstance: Object): Array<any> {
           children.push(child);
         }
       }
-      // traverseContext
     );
-
-    return children;
-    */
   }
 
-  if (internalInstance._instance) {
-    var inst = internalInstance._instance;
+  const instance = internalInstance._instance;
+  if (instance) {
     // TODO: React ART currently falls in this bucket, but this doesn't
     // actually make sense and we should clean this up after stabilizing our
     // API for backends
-    if (inst._renderedChildren) {
-      return childrenToArray(inst._renderedChildren);
+    if (instance._renderedChildren) {
+      children = renderedChildrenToArray(instance._renderedChildren);
     }
   }
 
-  return [];
+  return children;
 }
 
-function childrenToArray(children) {
-  const array = [];
-  for (var name in children) {
-    array.push(children[name]);
+function renderedChildrenToArray(renderedChildren): Array<any> {
+  const childrenArray = [];
+  for (let name in renderedChildren) {
+    childrenArray.push(renderedChildren[name]);
   }
-  return array;
+  return childrenArray;
 }