From 3950a977d88553ed4cd74fa61912ca78f1e769f5 Mon Sep 17 00:00:00 2001
From: Ovidiu Chereches <skidding@gmail.com>
Date: Sun, 17 May 2015 14:23:05 +0300
Subject: [PATCH 1/8] Ensure default value for all state #13

---
 src/components/component-playground.jsx | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/components/component-playground.jsx b/src/components/component-playground.jsx
index 9be0424..244379f 100644
--- a/src/components/component-playground.jsx
+++ b/src/components/component-playground.jsx
@@ -81,7 +81,12 @@ module.exports = React.createClass({
   },
 
   getInitialState: function() {
-    return this.constructor.getFixtureState(this.props, []);
+    var defaultState = {
+      isEditorFocused: false
+    };
+
+    return _.assign(defaultState,
+                    this.constructor.getFixtureState(this.props, []));
   },
 
   children: {

From 75a19d77bcdd53252023ec10abbb497d87a337fb Mon Sep 17 00:00:00 2001
From: Ovidiu Chereches <skidding@gmail.com>
Date: Sun, 17 May 2015 14:52:55 +0300
Subject: [PATCH 2/8] Exclude default props from URL #13

---
 src/components/component-playground.jsx       | 41 ++++++++++++-------
 .../components/component-playground/render.js | 31 +++++++-------
 2 files changed, 42 insertions(+), 30 deletions(-)

diff --git a/src/components/component-playground.jsx b/src/components/component-playground.jsx
index 244379f..6440380 100644
--- a/src/components/component-playground.jsx
+++ b/src/components/component-playground.jsx
@@ -167,11 +167,10 @@ module.exports = React.createClass({
     return <ul className="component-fixtures">
       {_.map(fixtures, function(props, fixtureName) {
 
-        var fixtureProps = {
+        var fixtureProps = this._extendFixtureRoute({
           component: componentName,
-          fixture: fixtureName,
-          editor: this.props.editor
-        };
+          fixture: fixtureName
+        });
 
         return <li className={this._getFixtureClasses(componentName,
                                                       fixtureName)}
@@ -227,11 +226,9 @@ module.exports = React.createClass({
       'selected-button': this.props.editor
     });
 
-    var editorUrlProps = {
-      editor: !this.props.editor,
-      component: this.props.component,
-      fixture: this.props.fixture
-    };
+    var editorUrlProps = this._extendFixtureRoute({
+      editor: !this.props.editor
+    });
 
     return <li className={classes}>
       <a href={stringifyParams(editorUrlProps)}
@@ -241,14 +238,13 @@ module.exports = React.createClass({
   },
 
   _renderFullScreenButton: function() {
-    var fullScreenUrl = stringifyParams({
-      component: this.props.component,
-      fixture: this.props.fixture,
-      fullScreen: true
+    var fullScreenProps = this._extendFixtureRoute({
+      fullScreen: true,
+      editor: false
     });
 
     return <li className="full-screen-button">
-      <a href={fullScreenUrl}
+      <a href={stringifyParams(fullScreenProps)}
          ref="fullScreenButton"
          onClick={this.props.router.routeLink}>Fullscreen</a>
     </li>;
@@ -387,6 +383,23 @@ module.exports = React.createClass({
     return classNames(classes);
   },
 
+  _extendFixtureRoute: function(newProps) {
+    var currentProps = {
+      component: this.props.component,
+      fixture: this.props.fixture,
+      editor: this.props.editor,
+      fullScreen: this.props.fullScreen
+    };
+
+    var defaultProps = this.constructor.getDefaultProps(),
+        props = _.assign(_.omit(currentProps, _.keys(newProps)), newProps);
+
+    // No need to include props with default values
+    return _.omit(props, function(value, key) {
+      return value === defaultProps[key];
+    });
+  },
+
   _focusOnEditor: function() {
     this.refs.editor.getDOMNode().focus();
   },
diff --git a/tests/components/component-playground/render.js b/tests/components/component-playground/render.js
index 59c12a1..4a9b149 100644
--- a/tests/components/component-playground/render.js
+++ b/tests/components/component-playground/render.js
@@ -269,10 +269,15 @@ describe('ComponentPlayground component', function() {
           var element = component.refs.editorButton.getDOMNode(),
               urlProps = getUrlProps(element);
 
-          expect(urlProps.editor).to.equal(false);
+          expect(urlProps.component).to.equal('FirstComponent');
+          expect(urlProps.fixture).to.equal('simple state');
+          // The editor prop is undefined because default values are ignored
+          expect(urlProps.editor).to.equal(undefined);
         });
 
         it('should include fixtor editor in fixture url', function() {
+          render();
+
           var firstFixtureLink = $component.find('.component-fixture a'),
               urlProps = getUrlProps(firstFixtureLink);
 
@@ -281,6 +286,15 @@ describe('ComponentPlayground component', function() {
           expect(urlProps.editor).to.equal(true);
         });
 
+        it('should not include editor prop in full-screen url', function() {
+          render();
+
+          var element = component.refs.fullScreenButton.getDOMNode(),
+              urlProps = getUrlProps(element);
+
+          expect(urlProps.editor).to.equal(undefined);
+        });
+
         it('should add invalid class on fixture editor on state flag',
            function() {
           render({
@@ -293,21 +307,6 @@ describe('ComponentPlayground component', function() {
                  .hasClass('invalid-syntax')).to.be.true;
         });
       });
-
-      it('should generate url for closing editor with fixture', function() {
-        render({
-          component: 'FirstComponent',
-          fixture: 'simple state',
-          editor: true
-        });
-
-        var element = component.refs.editorButton.getDOMNode(),
-            urlProps = getUrlProps(element);
-
-        expect(urlProps.component).to.equal('FirstComponent');
-        expect(urlProps.fixture).to.equal('simple state');
-        expect(urlProps.editor).to.equal(false);
-      });
     });
   });
 });

From 20a90426b58e3a7e3f32519dbffac285ff3471f4 Mon Sep 17 00:00:00 2001
From: Ovidiu Chereches <skidding@gmail.com>
Date: Sun, 17 May 2015 15:06:46 +0300
Subject: [PATCH 3/8] Sometimes it takes a bit to render the preview child #13

---
 src/components/component-playground.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/component-playground.jsx b/src/components/component-playground.jsx
index 6440380..5515877 100644
--- a/src/components/component-playground.jsx
+++ b/src/components/component-playground.jsx
@@ -321,7 +321,7 @@ module.exports = React.createClass({
   },
 
   onFixtureUpdate: function() {
-    if (!this.constructor.isFixtureSelected(this.props) ||
+    if (!this.refs.preview ||
         // Don't update fixture contents while the user is editing the fixture
         this.state.isEditorFocused) {
       return;

From 0626c60719b68a23bf30068ca880313bf4e16b37 Mon Sep 17 00:00:00 2001
From: Ovidiu Chereches <skidding@gmail.com>
Date: Sun, 17 May 2015 15:08:37 +0300
Subject: [PATCH 4/8] Add helper method for checking if fixture changed #13

---
 src/components/component-playground.jsx | 13 +++++++------
 1 file changed, 7 insertions(+), 6 deletions(-)

diff --git a/src/components/component-playground.jsx b/src/components/component-playground.jsx
index 5515877..8d05b7a 100644
--- a/src/components/component-playground.jsx
+++ b/src/components/component-playground.jsx
@@ -38,6 +38,11 @@ module.exports = React.createClass({
       return props.component && props.fixture;
     },
 
+    didFixtureChange: function(prevProps, nextProps) {
+      return prevProps.component !== nextProps.component ||
+             prevProps.fixture !== nextProps.fixture;
+    },
+
     getSelectedComponentClass: function(props) {
       return props.components[props.component].class;
     },
@@ -260,21 +265,17 @@ module.exports = React.createClass({
   },
 
   componentWillReceiveProps: function(nextProps) {
-    if (nextProps.component !== this.props.component ||
-        nextProps.fixture !== this.props.fixture) {
+    if (this.constructor.didFixtureChange(this.props, nextProps)) {
       this.setState(this.constructor.getFixtureState(
           nextProps, this.state.expandedComponents));
     }
   },
 
   componentDidUpdate: function(prevProps, prevState) {
-    var fixtureChanged = this.props.component !== prevProps.component ||
-                         this.props.fixture !== prevProps.fixture;
-
     if (this.refs.preview && (
         // Avoid deep comparing the fixture contents when component and/or
         // fixture changed, because it's more expensive
-        fixtureChanged ||
+        this.constructor.didFixtureChange(prevProps, this.props) ||
         !_.isEqual(this.state.fixtureContents, prevState.fixtureContents))) {
       this._injectPreviewChildState();
     }

From 696e3f1bb6af4999a27c9aaa6adae1a850a9a8b0 Mon Sep 17 00:00:00 2001
From: Ovidiu Chereches <skidding@gmail.com>
Date: Sun, 17 May 2015 15:15:13 +0300
Subject: [PATCH 5/8] Speed up refresh rate #13

---
 src/components/component-playground.jsx         | 2 +-
 tests/components/component-playground/events.js | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/component-playground.jsx b/src/components/component-playground.jsx
index 8d05b7a..e3aaf4f 100644
--- a/src/components/component-playground.jsx
+++ b/src/components/component-playground.jsx
@@ -257,7 +257,7 @@ module.exports = React.createClass({
 
   componentDidMount: function() {
     // TODO: Make interval a configurable prop
-    this._fixtureUpdateInterval = setInterval(this.onFixtureUpdate, 400);
+    this._fixtureUpdateInterval = setInterval(this.onFixtureUpdate, 100);
 
     if (this.refs.preview) {
       this._injectPreviewChildState();
diff --git a/tests/components/component-playground/events.js b/tests/components/component-playground/events.js
index ad878d6..d8e9bf3 100644
--- a/tests/components/component-playground/events.js
+++ b/tests/components/component-playground/events.js
@@ -280,7 +280,7 @@ describe('ComponentPlayground component', function() {
 
         var setIntervalArgs = window.setInterval.lastCall.args;
         expect(setIntervalArgs[0]).to.equal(component.onFixtureUpdate);
-        expect(setIntervalArgs[1]).to.equal(400);
+        expect(setIntervalArgs[1]).to.equal(100);
       });
 
       it('should clear interval on unmount', function() {

From 08c550fee6c250be6491c096269b4822530d11d6 Mon Sep 17 00:00:00 2001
From: Ovidiu Chereches <skidding@gmail.com>
Date: Sun, 17 May 2015 15:44:54 +0300
Subject: [PATCH 6/8] Redesign the key of the preview component #13

Stringifying entire contents was way to slow
---
 src/components/component-playground.jsx       | 20 +++++--
 .../component-playground/children.js          | 13 ++--
 .../components/component-playground/events.js | 59 +++++++++++--------
 .../components/component-playground/state.js  | 16 +++++
 4 files changed, 74 insertions(+), 34 deletions(-)

diff --git a/src/components/component-playground.jsx b/src/components/component-playground.jsx
index e3aaf4f..dd9df6f 100644
--- a/src/components/component-playground.jsx
+++ b/src/components/component-playground.jsx
@@ -87,6 +87,7 @@ module.exports = React.createClass({
 
   getInitialState: function() {
     var defaultState = {
+      fixtureChange: 0,
       isEditorFocused: false
     };
 
@@ -99,7 +100,7 @@ module.exports = React.createClass({
       var params = {
         component: this.constructor.getSelectedComponentClass(this.props),
         // Child should re-render whenever fixture changes
-        key: JSON.stringify(this.state.fixtureContents)
+        key: this._getPreviewComponentKey()
       };
 
       return _.merge(params, _.omit(this.state.fixtureContents, 'state'));
@@ -273,10 +274,8 @@ module.exports = React.createClass({
 
   componentDidUpdate: function(prevProps, prevState) {
     if (this.refs.preview && (
-        // Avoid deep comparing the fixture contents when component and/or
-        // fixture changed, because it's more expensive
         this.constructor.didFixtureChange(prevProps, this.props) ||
-        !_.isEqual(this.state.fixtureContents, prevState.fixtureContents))) {
+        prevState.fixtureChange !== this.state.fixtureChange)) {
       this._injectPreviewChildState();
     }
   },
@@ -350,8 +349,11 @@ module.exports = React.createClass({
         _.merge(fixtureContents, JSON.parse(userInput));
       }
 
-      newState.fixtureContents = fixtureContents;
-      newState.isFixtureUserInputValid = true;
+      _.assign(newState, {
+        fixtureContents: fixtureContents,
+        fixtureChange: this.state.fixtureChange + 1,
+        isFixtureUserInputValid: true
+      });
     } catch (e) {
       newState.isFixtureUserInputValid = false;
       console.error(e);
@@ -360,6 +362,12 @@ module.exports = React.createClass({
     this.setState(newState);
   },
 
+  _getPreviewComponentKey: function() {
+    return this.props.component + '-' +
+           this.props.fixture + '-' +
+           this.state.fixtureChange;
+  },
+
   _getPreviewClasses: function() {
     var classes = {
       'preview': true,
diff --git a/tests/components/component-playground/children.js b/tests/components/component-playground/children.js
index 8d18c6c..439304e 100644
--- a/tests/components/component-playground/children.js
+++ b/tests/components/component-playground/children.js
@@ -65,6 +65,7 @@ describe('ComponentPlayground component', function() {
       beforeEach(function() {
         _.assign(params, {
           component: 'FirstComponent',
+          fixture: 'default state',
           // Children draw their props from state.fixtureContents. Generating
           // state from props is tested in the state.js suite
           state: {
@@ -74,7 +75,8 @@ describe('ComponentPlayground component', function() {
               state: {
                 paused: true
               }
-            }
+            },
+            fixtureChange: 155
           }
         });
       });
@@ -101,13 +103,14 @@ describe('ComponentPlayground component', function() {
         expect(childParams.state).to.be.undefined;
       });
 
-      it('should use fixture contents as key for preview child', function() {
+      it('should use fixture component, name and change id as key for ' +
+         'preview child', function() {
         render();
 
-        var fixtureContents = component.state.fixtureContents,
-            stringifiedFixtureContents = JSON.stringify(fixtureContents);
+        var fixtureChange = component.state.fixtureChange;
 
-        expect(childParams.key).to.equal(stringifiedFixtureContents);
+        expect(childParams.key).to.equal(
+              'FirstComponent-default state-' + fixtureChange);
       });
 
       it('should clone fixture contents sent to child', function() {
diff --git a/tests/components/component-playground/events.js b/tests/components/component-playground/events.js
index d8e9bf3..bf7ec64 100644
--- a/tests/components/component-playground/events.js
+++ b/tests/components/component-playground/events.js
@@ -164,7 +164,8 @@ describe('ComponentPlayground component', function() {
           state: {
             fixtureContents: {
               lorem: 'dolor sit'
-            }
+            },
+            fixtureChange: 5
           }
         });
       });
@@ -187,40 +188,52 @@ describe('ComponentPlayground component', function() {
         expect(component.state.fixtureUserInput).to.equal('lorem ipsum');
       });
 
-      it('should update fixture contents on valid change', function() {
-        triggerEditorChange('{"lorem": "ipsum"}');
-
-        expect(component.state.fixtureContents.lorem).to.equal('ipsum');
-      });
-
-      it('should not update fixture contents on invalid change', function() {
-        triggerEditorChange('lorem ipsum');
-
-        expect(component.state.fixtureContents.lorem).to.equal('dolor sit');
-      });
-
       it('should empty fixture contents on empty input', function() {
         triggerEditorChange('');
 
         expect(component.state.fixtureContents).to.deep.equal({});
       });
 
-      it('should call console.error on invalid change', function() {
-        triggerEditorChange('lorem ipsum');
+      describe("on valid change", function() {
+        beforeEach(function() {
+          triggerEditorChange('{"lorem": "ipsum"}');
+        });
 
-        expect(console.error.lastCall.args[0]).to.be.an.instanceof(Error);
-      });
+        it('should update fixture contents', function() {
+          expect(component.state.fixtureContents.lorem).to.equal('ipsum');
+        });
 
-      it('should mark valid change in state', function() {
-        triggerEditorChange('{"lorem": "ipsum"}');
+        it('should mark valid change in state', function() {
+          expect(component.state.isFixtureUserInputValid).to.equal(true);
+        });
 
-        expect(component.state.isFixtureUserInputValid).to.equal(true);
+        it('should bump fixture change counter', function() {
+          expect(component.state.fixtureChange)
+                .to.equal(params.state.fixtureChange + 1);
+        });
       });
 
-      it('should mark invalid change in state', function() {
-        triggerEditorChange('lorem ipsum');
+      describe("on invalid change", function() {
+        beforeEach(function() {
+          triggerEditorChange('lorem ipsum');
+        });
+
+        it('should not update fixture contents', function() {
+          expect(component.state.fixtureContents.lorem).to.equal('dolor sit');
+        });
+
+        it('should call console.error', function() {
+          expect(console.error.lastCall.args[0]).to.be.an.instanceof(Error);
+        });
 
-        expect(component.state.isFixtureUserInputValid).to.equal(false);
+        it('should mark invalid change in state', function() {
+          expect(component.state.isFixtureUserInputValid).to.equal(false);
+        });
+
+        it('should not bump fixture change counter', function() {
+          expect(component.state.fixtureChange)
+                .to.equal(params.state.fixtureChange);
+        });
       });
     });
 
diff --git a/tests/components/component-playground/state.js b/tests/components/component-playground/state.js
index 53d12a3..9709986 100644
--- a/tests/components/component-playground/state.js
+++ b/tests/components/component-playground/state.js
@@ -147,6 +147,22 @@ describe('ComponentPlayground component', function() {
           expect(args[1].somethingHappened).to.equal(false);
         });
       });
+
+      it('should inject preview state again when fixture changes', function() {
+        render({
+          state: {
+            fixtureChange: 5
+          }
+        });
+        var injectStateCalls = ComponentTree.injectState.callCount;
+
+        component.setState({
+          fixtureChange: 6
+        });
+
+        expect(ComponentTree.injectState.callCount)
+              .to.equal(injectStateCalls + 1);
+      });
     });
   });
 });

From 8feeb7287ee6e3c473f397e3ed5383255fd8720b Mon Sep 17 00:00:00 2001
From: Ovidiu Chereches <skidding@gmail.com>
Date: Sun, 17 May 2015 15:52:02 +0300
Subject: [PATCH 7/8] Use consistent quotes #13

---
 tests/components/component-playground/events.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/tests/components/component-playground/events.js b/tests/components/component-playground/events.js
index bf7ec64..c504a99 100644
--- a/tests/components/component-playground/events.js
+++ b/tests/components/component-playground/events.js
@@ -194,7 +194,7 @@ describe('ComponentPlayground component', function() {
         expect(component.state.fixtureContents).to.deep.equal({});
       });
 
-      describe("on valid change", function() {
+      describe('on valid change', function() {
         beforeEach(function() {
           triggerEditorChange('{"lorem": "ipsum"}');
         });
@@ -213,7 +213,7 @@ describe('ComponentPlayground component', function() {
         });
       });
 
-      describe("on invalid change", function() {
+      describe('on invalid change', function() {
         beforeEach(function() {
           triggerEditorChange('lorem ipsum');
         });

From ab7000cdac8a4106858f798512b617abdbde6e87 Mon Sep 17 00:00:00 2001
From: Ovidiu Chereches <skidding@gmail.com>
Date: Sun, 17 May 2015 16:26:49 +0300
Subject: [PATCH 8/8] Allow resetting currently selected fixture to original
 state #13

---
 src/components/component-playground.jsx       | 24 +++++++-
 .../components/component-playground/events.js | 61 +++++++++++++++++--
 2 files changed, 77 insertions(+), 8 deletions(-)

diff --git a/src/components/component-playground.jsx b/src/components/component-playground.jsx
index dd9df6f..288e7fb 100644
--- a/src/components/component-playground.jsx
+++ b/src/components/component-playground.jsx
@@ -4,7 +4,8 @@ var _ = require('lodash'),
     React = require('react'),
     classNames = require('classnames'),
     ComponentTree = require('react-component-tree'),
-    stringifyParams = require('react-querystring-router').uri.stringifyParams;
+    stringifyParams = require('react-querystring-router').uri.stringifyParams,
+    parseLocation = require('react-querystring-router').uri.parseLocation;
 
 module.exports = React.createClass({
   /**
@@ -302,7 +303,26 @@ module.exports = React.createClass({
   },
 
   onFixtureClick: function(event) {
-    this.props.router.routeLink(event);
+    event.preventDefault();
+
+    var location = event.currentTarget.href,
+        params = parseLocation(location);
+
+    if (this.constructor.didFixtureChange(this.props, params)) {
+      this.props.router.goTo(location);
+    } else {
+      // This happens when we want to reset a fixture to its original state by
+      // clicking on the fixture button while already selected
+      var originalState =
+          this.constructor.getFixtureState(this.props,
+                                           this.state.expandedComponents);
+
+      // We also need to bump fixtureChange to trigger a key change for the
+      // preview child, because the component and fixture names didn't change
+      this.setState(_.assign(originalState, {
+        fixtureChange: this.state.fixtureChange + 1
+      }));
+    }
 
     // Focus on the editor when changing fixture, to prevent overriding
     // its contents with the state generated by the initial unfolding of the
diff --git a/tests/components/component-playground/events.js b/tests/components/component-playground/events.js
index c504a99..641ee8e 100644
--- a/tests/components/component-playground/events.js
+++ b/tests/components/component-playground/events.js
@@ -38,6 +38,7 @@ describe('ComponentPlayground component', function() {
     params = {
       components: {},
       router: {
+        goTo: sinon.spy(),
         routeLink: sinon.spy()
       }
     };
@@ -56,7 +57,8 @@ describe('ComponentPlayground component', function() {
           FirstComponent: {},
           SecondComponent: {
             fixtures: {
-              'simple state': {}
+              'simple state': {},
+              'complex state': {}
             }
           }
         };
@@ -133,11 +135,6 @@ describe('ComponentPlayground component', function() {
           utils.Simulate.click(component.refs.homeLink.getDOMNode());
         });
 
-        it('should route link on component fixture button', function() {
-          utils.Simulate.click(
-              component.refs['SecondComponentsimple stateButton'].getDOMNode());
-        });
-
         it('should route link on fixture editor button', function() {
           utils.Simulate.click(component.refs.editorButton.getDOMNode());
         });
@@ -146,6 +143,58 @@ describe('ComponentPlayground component', function() {
           utils.Simulate.click(component.refs.fullScreenButton.getDOMNode());
         });
       });
+
+      describe('on fixture button click', function() {
+        beforeEach(function() {
+          render({
+            component: 'SecondComponent',
+            fixture: 'simple state',
+            state: {
+              fixtureChange: 10
+            }
+          });
+        });
+
+        it('should route link on new fixture', function() {
+          utils.Simulate.click(
+              component.refs['SecondComponentcomplex stateButton']
+                       .getDOMNode());
+
+          expect(params.router.goTo).to.have.been.called;
+        });
+
+        describe('on already selected fixture', function() {
+          var stateSet;
+
+          beforeEach(function() {
+            sinon.spy(component, 'setState');
+
+            utils.Simulate.click(
+                component.refs['SecondComponentsimple stateButton']
+                         .getDOMNode());
+
+            stateSet = component.setState.lastCall.args[0];
+          });
+
+          it('should not route link', function() {
+            expect(params.router.goTo).to.not.have.been.called;
+          });
+
+          it('should reset state', function() {
+            expect(stateSet.expandedComponents.length).to.equal(1);
+            expect(stateSet.expandedComponents[0]).to.equal('SecondComponent');
+            expect(stateSet.fixtureContents).to.equal(
+                params.components.SecondComponent.fixtures['simple state']);
+            expect(stateSet.fixtureUserInput).to.equal('{}');
+            expect(stateSet.isFixtureUserInputValid).to.equal(true);
+          });
+
+          it('should bump fixture change', function() {
+            expect(stateSet.fixtureChange)
+                  .to.equal(params.state.fixtureChange + 1);
+          });
+        });
+      });
     });
 
     describe('editing fixture', function() {