Segments only allow Segment children

Author: Josh Habdas

package.json

@@ -46,6 +46,7 @@
     "eslint-plugin-mocha": "^1.0.0",
     "eslint-plugin-react": "^3.5.1",
     "faker": "^3.0.1",
+    "fbjs": "^0.4.0",
     "gulp": "^3.9.0",
     "gulp-help": "^1.6.1",
     "gulp-html-replace": "^1.5.4",

src/elements/Segment/Segments.js

@@ -1,13 +1,25 @@
-import React, {Component, PropTypes} from 'react';
+import React, {Children, Component, PropTypes} from 'react';
+import _ from 'lodash';
+import invariant from 'fbjs/lib/invariant';
 import classNames from 'classnames';
 import META from 'src/utils/Meta';
+import Segment from './Segment';
 
 export default class Segments extends Component {
   static propTypes = {
-    children: PropTypes.node.isRequired,
+    children: PropTypes.node,
     className: PropTypes.string,
   };
 
+  componentDidMount() {
+    const {children} = this.props;
+
+    invariant(
+      !_.any( Children.map(children, child => child.type !== Segment) ),
+      'May only contain children of type Segment.',
+    );
+  }
+
   static _meta = {
     library: META.library.semanticUI,
     name: 'Segments',

test/specs/elements/Segment/Segments-test.js

@@ -22,12 +22,24 @@ describe('Segments', () => {
     const [component] = render(
       <Segments>
         <Segment>Top</Segment>
+        <Segment>Middle</Segment>
         <Segment>Bottom</Segment>
       </Segments>
     ).scryClass('sd-segments');
 
     expect(
       component.querySelectorAll('.sd-segment').length
-    ).to.equal(2);
+    ).to.equal(3);
+  });
+
+  it('only allows children of type Segment', () => {
+    expect(global.shallowRender(
+      <Segments>Some text</Segments>
+    )).to.throw;
+
+    // FIXME: Figure out why this is giving false positives
+    expect(global.shallowRender(
+      <Segments>Some text</Segments>
+    )).to.not.throw;
   });
 });