Merge pull request #13 from FormidableLabs/task-updateDocsAndSupportE…

…mptyPropTypes

Update docs and support empty prop types

demo/app.jsx

@@ -2,6 +2,7 @@
 import React from "react";
 import ReactDOM from "react-dom";
 import Ecology from "../src/index";
+import * as docgen from "react-docgen";
 
 import "./styles.styl";
 
@@ -11,8 +12,8 @@ class App extends React.Component {
       <div className="demo">
         <Ecology
           overview={require("!!raw!./ecology.md")}
-          source={require("json!./sample.json")}
-          scope={{React, ReactDOM, SampleClass: require("./sample")}}
+          source={docgen.parse(require("!!raw!./sample"))}
+          scope={{React, ReactDOM, SampleClass: require("./sample")}}/>
           playgroundtheme="blackboard"/>
       </div>
     );

demo/sample.jsx

@@ -26,9 +26,12 @@ SampleClass.propTypes = {
    */
   indexes: React.PropTypes.arrayOf(React.PropTypes.number),
   /**
-   * Union test
+   * Component test
    */
   test: React.PropTypes.instanceOf(Test),
+  /**
+   * Union test
+   */
   optionalUnion: React.PropTypes.oneOfType([
     React.PropTypes.string,
     React.PropTypes.number

src/components/api.jsx

@@ -30,6 +30,9 @@ const renderType = ({name, value}) => {
 export default class API extends React.Component {
   render() {
     const docObj = this.props.source;
+    if (!docObj.props) {
+      return <em>This component has no PropTypes defined.</em>;
+    }
     const propMap = makeArray(docObj.props);
     return (
       <table className="Props">

test/client/spec/components/api.spec.jsx

@@ -0,0 +1,43 @@
+import React from "react/addons";
+
+import API from "src/components/api";
+
+const TestUtils = React.addons.TestUtils;
+
+describe("components/api", function () {
+
+  it("renders propType documentation table", function () {
+    const renderer = TestUtils.createRenderer();
+    const sourceFake = {
+      props: {
+        name: {
+          name: "propName",
+          required: false,
+          type: {
+            name: "string"
+          },
+          description: "Name description\n@examples \"propValue1\"",
+          defaultValue: {
+            computed: false,
+            value: "test"
+          }
+        }
+      }
+    };
+    renderer.render(<API source={sourceFake} />);
+
+    const output = renderer.getRenderOutput();
+
+    expect(output.type).to.equal("table");
+  });
+
+  it("renders default message when proptypes are missing", function () {
+    const renderer = TestUtils.createRenderer();
+    const sourceFake = { props: null };
+    renderer.render(<API source={sourceFake} />);
+
+    const output = renderer.getRenderOutput();
+
+    expect(output.type).to.equal("em");
+  });
+});

test/client/spec/components/ecology.spec.jsx

@@ -2,7 +2,7 @@
  * Client tests
  */
 import React from "react/addons";
-import Component from "src/components/ecology";
+import Ecology from "src/components/ecology";
 
 // Use `TestUtils` to inject into DOM, simulate events, etc.
 // See: https://facebook.github.io/react/docs/test-utils.html
@@ -16,7 +16,7 @@ describe("components/ecology", function () {
     //
     // https://facebook.github.io/react/docs/test-utils.html#shallow-rendering
     const renderer = TestUtils.createRenderer();
-    renderer.render(<Component />);
+    renderer.render(<Ecology />);
     const output = renderer.getRenderOutput();
     expect(output.type).to.equal("div");
   });