Adapt to ComponentTree

karma.conf.js

@@ -29,7 +29,7 @@ module.exports = function(config) {
           loader: 'style-loader!css-loader!less-loader'
         }],
         postLoaders: [{
-          test: /\.js$/,
+          test: /\.jsx?$/,
           exclude: /(node_modules|tests)\//,
           loader: 'istanbul-instrumenter'
         }]

package.json

@@ -14,6 +14,7 @@
     "babel-core": "^5.0.12",
     "babel-loader": "^5.0.0",
     "chai": "^2.2.0",
+    "classnames": "^1.2.0",
     "coveralls": "^2.11.2",
     "css-loader": "^0.10.1",
     "esprima-fb": "^14001.1.0-dev-harmony-fb",
@@ -35,6 +36,8 @@
     "less-loader": "^2.2.0",
     "mocha": "^2.2.4",
     "react": "^0.13.1",
+    "react-component-tree": "^0.2.1",
+    "react-minimal-router": "^0.1.3",
     "sinon": "^1.14.1",
     "sinon-chai": "^2.7.0",
     "style-loader": "^0.10.1",

src/components/component-playground.jsx

@@ -1,10 +1,10 @@
 require('./component-playground.less');
 
 var _ = require('lodash'),
-    React = require('react/addons'),
-    classSet = React.addons.classSet;
-//ComponentTree = require('../mixins/component-tree.js'),
-//RouterMixin = require('../mixins/router.js');
+    React = require('react'),
+    classNames = require('classnames'),
+    ComponentTree = require('react-component-tree'),
+    stringifyParams = require('react-minimal-router').uri.stringifyParams;
 
 module.exports = React.createClass({
   /**
@@ -14,7 +14,7 @@ module.exports = React.createClass({
    */
   displayName: 'ComponentPlayground',
 
-  mixins: [/*ComponentTree, RouterMixin*/],
+  mixins: [ComponentTree.Mixin],
 
   propTypes: {
     fixtures: React.PropTypes.object.isRequired,
@@ -89,16 +89,12 @@ module.exports = React.createClass({
         key: JSON.stringify(this.state.fixtureContents)
       };
 
-      if (this.props.router) {
-        props.router = this.props.router;
-      }
-
       return _.merge(props, this.state.fixtureContents);
     }
   },
 
   render: function() {
-    var classes = classSet({
+    var classes = classNames({
       'component-playground': true,
       'full-screen': this.props.fullScreen
     });
@@ -112,7 +108,7 @@ module.exports = React.createClass({
         <div className="header">
           {this._renderButtons()}
           <h1>
-            <a href={this.getUrlFromProps(homeUrlProps)}
+            <a href={stringifyParams(homeUrlProps)}
                className="home-link"
                onClick={this.routeLink}>
               <span className="react">React</span> Component Playground
@@ -140,7 +136,7 @@ module.exports = React.createClass({
     return <ul className="components">
       {_.map(this.props.fixtures, function(fixtures, componentName) {
 
-        var classes = classSet({
+        var classes = classNames({
           'component': true,
           'expanded': _.contains(this.state.expandedComponents, componentName)
         });
@@ -174,7 +170,7 @@ module.exports = React.createClass({
         return <li className={this._getFixtureClasses(componentName,
                                                       fixtureName)}
                    key={fixtureName}>
-          <a href={this.getUrlFromProps(fixtureProps)}
+          <a href={stringifyParams(fixtureProps)}
              title={fixtureName}
              onClick={this.routeLink}>
             {fixtureName}
@@ -196,7 +192,7 @@ module.exports = React.createClass({
   },
 
   _renderFixtureEditor: function() {
-    var editorClasses = classSet({
+    var editorClasses = classNames({
       'fixture-editor': true,
       'invalid-syntax': !this.state.isFixtureUserInputValid
     });
@@ -220,7 +216,7 @@ module.exports = React.createClass({
   },
 
   _renderFixtureEditorButton: function() {
-    var classes = classSet({
+    var classes = classNames({
       'fixture-editor-button': true,
       'selected-button': this.props.fixtureEditor
     });
@@ -237,14 +233,14 @@ module.exports = React.createClass({
     }
 
     return <li className={classes}>
-      <a href={this.getUrlFromProps(fixtureEditorUrlProps)}
+      <a href={stringifyParams(fixtureEditorUrlProps)}
          ref="fixtureEditorButton"
          onClick={this.routeLink}>Editor</a>
     </li>;
   },
 
   _renderFullScreenButton: function() {
-    var fullScreenUrl = this.getUrlFromProps({
+    var fullScreenUrl = stringifyParams({
       selectedComponent: this.props.selectedComponent,
       selectedFixture: this.props.selectedFixture,
       fullScreen: true
@@ -314,7 +310,7 @@ module.exports = React.createClass({
       classes[this.props.containerClassName] = true;
     }
 
-    return classSet(classes);
+    return classNames(classes);
   },
 
   _getFixtureClasses: function(componentName, fixtureName) {
@@ -325,6 +321,6 @@ module.exports = React.createClass({
     classes['selected'] = componentName === this.props.selectedComponent &&
                           fixtureName === this.props.selectedFixture;
 
-    return classSet(classes);
+    return classNames(classes);
   }
 });

tests/components/component-playground/children.js

@@ -1,45 +1,55 @@
-var $ = require('jquery'),
-    Cosmos = require('../../../cosmos.js'),
-    renderComponent = require('../../helpers/render-component.js'),
+var ComponentTree = require('react-component-tree'),
     ComponentPlayground =
-      require('../../../src/components/component-playground.jsx');
+        require('../../../src/components/component-playground.jsx');
 
 describe('ComponentPlayground component', function() {
   var component,
-      $component,
       props,
-      childProps;
+      childParams;
 
   function render(extraProps) {
     // Alow tests to extend fixture before rendering
     _.merge(props, extraProps);
 
-    component = renderComponent(ComponentPlayground, props);
-    $component = $(component.getDOMNode());
+    component = ComponentTree.render({
+      component: ComponentPlayground,
+      snapshot: props,
+      container: document.createElement('div')
+    });
 
-    if (Cosmos.createElement.callCount) {
-      childProps = Cosmos.createElement.lastCall.args[0];
-    }
-  };
+    childParams = component.children.preview.call(component);
+  }
 
   beforeEach(function() {
     // Don't render any children
-    sinon.stub(Cosmos, 'createElement');
+    sinon.stub(ComponentTree.loadChild, 'loadChild');
 
     props = {
       fixtures: {}
     };
   });
 
   afterEach(function() {
-    Cosmos.createElement.restore();
+    ComponentTree.loadChild.loadChild.restore();
   })
 
   describe('children', function() {
     it('should not render child without fixture contents', function() {
       render();
 
-      expect(Cosmos.createElement).to.not.have.been.called;
+      expect(ComponentTree.loadChild.loadChild).to.not.have.been.called;
+    });
+
+    it('should render child with fixture contents', function() {
+      render({
+        state: {
+          fixtureContents: {
+            component: 'MyComponent'
+          }
+        }
+      });
+
+      expect(ComponentTree.loadChild.loadChild).to.have.been.called;
     });
 
     describe('with fixture contents', function() {
@@ -61,17 +71,9 @@ describe('ComponentPlayground component', function() {
         render();
 
         var fixtureContents = component.state.fixtureContents;
-        expect(childProps.component).to.equal(fixtureContents.component);
-        expect(childProps.width).to.equal(fixtureContents.width);
-        expect(childProps.height).to.equal(fixtureContents.height);
-      });
-
-      it('should send (Cosmos) router instance to preview child', function() {
-        render({
-          router: {}
-        });
-
-        expect(childProps.router).to.equal(props.router);
+        expect(childParams.component).to.equal(fixtureContents.component);
+        expect(childParams.width).to.equal(fixtureContents.width);
+        expect(childParams.height).to.equal(fixtureContents.height);
       });
 
       it('should use fixture contents as key for preview child', function() {
@@ -80,7 +82,7 @@ describe('ComponentPlayground component', function() {
         var fixtureContents = component.state.fixtureContents,
             stringifiedFixtureContents = JSON.stringify(fixtureContents);
 
-        expect(childProps.key).to.equal(stringifiedFixtureContents);
+        expect(childParams.key).to.equal(stringifiedFixtureContents);
       });
 
       it('should clone fixture contents sent to child', function() {
@@ -94,7 +96,7 @@ describe('ComponentPlayground component', function() {
           }
         });
 
-        expect(childProps.shouldBeCloned).to.not.equal(obj);
+        expect(childParams.shouldBeCloned).to.not.equal(obj);
       });
     });
   });

tests/components/component-playground/events.js

@@ -1,22 +1,22 @@
 var React = require('react/addons'),
-    $ = require('jquery'),
-    Cosmos = require('../../../cosmos.js'),
-    renderComponent = require('../../helpers/render-component.js'),
+    ComponentTree = require('react-component-tree'),
     ComponentPlayground =
-      require('../../../src/components/component-playground.jsx');
+        require('../../../src/components/component-playground.jsx');
 
 describe('ComponentPlayground component', function() {
   var utils = React.addons.TestUtils,
       component,
-      $component,
       props;
 
   function render(extraProps) {
     // Alow tests to extend fixture before rendering
     _.merge(props, extraProps);
 
-    component = renderComponent(ComponentPlayground, props);
-    $component = $(component.getDOMNode());
+    component = ComponentTree.render({
+      component: ComponentPlayground,
+      snapshot: props,
+      container: document.createElement('div')
+    });
   };
 
   var triggerChange = function(value) {
@@ -28,7 +28,7 @@ describe('ComponentPlayground component', function() {
     sinon.stub(console, 'error');
 
     // Don't render any children
-    sinon.stub(Cosmos, 'createElement');
+    sinon.stub(ComponentTree.loadChild, 'loadChild');
 
     props = {
       fixtures: {}
@@ -38,7 +38,7 @@ describe('ComponentPlayground component', function() {
   afterEach(function() {
     console.error.restore();
 
-    Cosmos.createElement.restore();
+    ComponentTree.loadChild.loadChild.restore();
   })
 
   describe('events', function() {

tests/components/component-playground/render.js

@@ -1,9 +1,8 @@
 var $ = require('jquery'),
-    Cosmos = require('../../../cosmos.js'),
-    serialize = require('../../../lib/serialize.js'),
-    renderComponent = require('../../helpers/render-component.js'),
+    ComponentTree = require('react-component-tree'),
+    parseLocation = require('react-minimal-router').uri.parseLocation,
     ComponentPlayground =
-      require('../../../src/components/component-playground.jsx');
+        require('../../../src/components/component-playground.jsx');
 
 describe('ComponentPlayground component', function() {
   var component,
@@ -14,20 +13,23 @@ describe('ComponentPlayground component', function() {
     // Alow tests to extend fixture before rendering
     _.merge(props, extraProps);
 
-    component = renderComponent(ComponentPlayground, props);
+    component = ComponentTree.render({
+      component: ComponentPlayground,
+      snapshot: props,
+      container: document.createElement('div')
+    });
     $component = $(component.getDOMNode());
   }
 
   function getUrlProps(element) {
     var href = $(element).attr('href');
 
-    // The serialize and router.url libs are already tested
-    return serialize.getPropsFromQueryString(href.substr(1));
+    return parseLocation(href);
   }
 
   beforeEach(function() {
     // Don't render any children
-    sinon.stub(Cosmos, 'createElement');
+    sinon.stub(ComponentTree.loadChild, 'loadChild');
 
     props = {
       fixtures: {
@@ -44,7 +46,7 @@ describe('ComponentPlayground component', function() {
   });
 
   afterEach(function() {
-    Cosmos.createElement.restore();
+    ComponentTree.loadChild.loadChild.restore();
   })
 
   describe('render', function() {

tests/components/component-playground/state.js

@@ -1,25 +1,25 @@
-var $ = require('jquery'),
-    Cosmos = require('../../../cosmos.js'),
-    renderComponent = require('../../helpers/render-component.js'),
+var ComponentTree = require('react-component-tree'),
     ComponentPlayground =
-      require('../../../src/components/component-playground.jsx');
+        require('../../../src/components/component-playground.jsx');
 
 describe('ComponentPlayground component', function() {
   var component,
-      $component,
       props;
 
   function render(extraProps) {
     // Alow tests to extend fixture before rendering
     _.merge(props, extraProps);
 
-    component = renderComponent(ComponentPlayground, props);
-    $component = $(component.getDOMNode());
+    component = ComponentTree.render({
+      component: ComponentPlayground,
+      snapshot: props,
+      container: document.createElement('div')
+    });
   };
 
   beforeEach(function() {
     // Don't render any children
-    sinon.stub(Cosmos, 'createElement');
+    sinon.stub(ComponentTree.loadChild, 'loadChild');
 
     props = {
       fixtures: {
@@ -38,7 +38,7 @@ describe('ComponentPlayground component', function() {
   });
 
   afterEach(function() {
-    Cosmos.createElement.restore();
+    ComponentTree.loadChild.loadChild.restore();
   })
 
   describe('state', function() {