feat(FirestoreCollection and FirestoreDocument): add the 'children' p…

…rop as another rendering method (#15)

fix #14

src/FirestoreCollection.js

@@ -11,7 +11,8 @@ class FirestoreCollection extends Component {
       PropTypes.arrayOf(PropTypes.string),
       PropTypes.arrayOf(PropTypes.array),
     ]),
-    render: PropTypes.func.isRequired,
+    children: PropTypes.func,
+    render: PropTypes.func,
   };
 
   static contextTypes = {
@@ -106,14 +107,13 @@ class FirestoreCollection extends Component {
   };
 
   render() {
-    const { isLoading, data, snapshot } = this.state;
-    const { render } = this.props;
+    const { children, render } = this.props;
 
-    return render({
-      isLoading,
-      data,
-      snapshot,
-    });
+    if (render) return render(this.state);
+
+    if (typeof children === 'function') return children(this.state);
+
+    return null;
   }
 }
 

src/FirestoreDocument.js

@@ -4,7 +4,8 @@ import PropTypes from 'prop-types';
 class FirestoreDocument extends Component {
   static propTypes = {
     path: PropTypes.string.isRequired,
-    render: PropTypes.func.isRequired,
+    children: PropTypes.func,
+    render: PropTypes.func,
   };
 
   static contextTypes = {
@@ -62,14 +63,13 @@ class FirestoreDocument extends Component {
   };
 
   render() {
-    const { isLoading, data, snapshot } = this.state;
-    const { render } = this.props;
+    const { children, render } = this.props;
 
-    return render({
-      isLoading,
-      data,
-      snapshot,
-    });
+    if (render) return render(this.state);
+
+    if (typeof children === 'function') return children(this.state);
+
+    return null;
   }
 }
 

src/__tests__/collection.initial-state.js

@@ -24,6 +24,53 @@ test('initial state set up correctly', () => {
     expect.objectContaining({
       isLoading: true,
       data: [],
-    })
+    }),
   );
 });
+
+test('renders child prop', () => {
+  const {
+    firestoreMock,
+    collectionMock,
+    onSnapshotMock,
+  } = createMocksForCollection();
+  const renderMock = jest.fn().mockReturnValue(<div />);
+  const collectionName = 'users';
+
+  mount(
+    <FirestoreCollection path={collectionName}>
+      {renderMock}
+    </FirestoreCollection>,
+    {
+      context: { firestoreDatabase: firestoreMock, firestoreCache: {} },
+    },
+  );
+
+  expect(collectionMock).toHaveBeenCalledTimes(1);
+  expect(collectionMock).toHaveBeenCalledWith(collectionName);
+  expect(onSnapshotMock).toHaveBeenCalledTimes(1);
+  expect(renderMock).toHaveBeenCalledTimes(1);
+  expect(renderMock).toHaveBeenCalledWith(
+    expect.objectContaining({
+      isLoading: true,
+      data: [],
+    }),
+  );
+});
+
+test('renders nothing if passed no render prop or children', () => {
+  const {
+    firestoreMock,
+    collectionMock,
+    onSnapshotMock,
+  } = createMocksForCollection();
+  const collectionName = 'users';
+
+  mount(<FirestoreCollection path={collectionName} />, {
+    context: { firestoreDatabase: firestoreMock, firestoreCache: {} },
+  });
+
+  expect(collectionMock).toHaveBeenCalledTimes(1);
+  expect(collectionMock).toHaveBeenCalledWith(collectionName);
+  expect(onSnapshotMock).toHaveBeenCalledTimes(1);
+});

src/__tests__/document.initial-state.js

@@ -24,6 +24,51 @@ test('initial state set up correctly', () => {
     expect.objectContaining({
       isLoading: true,
       data: null,
-    })
+    }),
   );
 });
+
+test('renders child prop', () => {
+  const {
+    firestoreMock,
+    documentMock,
+    onSnapshotMock,
+  } = createMocksForDocument();
+  const renderMock = jest.fn().mockReturnValue(<div />);
+  const documentPath = 'users/1';
+
+  mount(
+    <FirestoreDocument path={documentPath}>{renderMock}</FirestoreDocument>,
+    {
+      context: { firestoreDatabase: firestoreMock, firestoreCache: {} },
+    },
+  );
+
+  expect(documentMock).toHaveBeenCalledTimes(1);
+  expect(documentMock).toHaveBeenCalledWith(documentPath);
+  expect(onSnapshotMock).toHaveBeenCalledTimes(1);
+  expect(renderMock).toHaveBeenCalledTimes(1);
+  expect(renderMock).toHaveBeenCalledWith(
+    expect.objectContaining({
+      isLoading: true,
+      data: null,
+    }),
+  );
+});
+
+test('renders nothing if passed no render prop or children', () => {
+  const {
+    firestoreMock,
+    documentMock,
+    onSnapshotMock,
+  } = createMocksForDocument();
+  const documentPath = 'users/1';
+
+  mount(<FirestoreDocument path={documentPath} />, {
+    context: { firestoreDatabase: firestoreMock, firestoreCache: {} },
+  });
+
+  expect(documentMock).toHaveBeenCalledTimes(1);
+  expect(documentMock).toHaveBeenCalledWith(documentPath);
+  expect(onSnapshotMock).toHaveBeenCalledTimes(1);
+});