From 63917dadcc1a31fc57b3c82ff2aaa6c29e070eef Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ovidiu=20Chereche=C8=99?= <skidding@gmail.com>
Date: Thu, 16 Apr 2015 19:13:55 +0300
Subject: [PATCH] Fix and test router links #7

---
 src/components/component-playground.jsx       | 14 ++++----
 .../component-playground/children.js          |  5 ++-
 .../components/component-playground/events.js | 35 ++++++++++++++++++-
 .../components/component-playground/render.js |  3 ++
 .../components/component-playground/state.js  |  3 ++
 5 files changed, 52 insertions(+), 8 deletions(-)

diff --git a/src/components/component-playground.jsx b/src/components/component-playground.jsx
index d757cff..a5d358b 100644
--- a/src/components/component-playground.jsx
+++ b/src/components/component-playground.jsx
@@ -108,9 +108,10 @@ module.exports = React.createClass({
         <div className="header">
           {this._renderButtons()}
           <h1>
-            <a href={stringifyParams(homeUrlProps)}
+            <a ref="homeLink"
+               href={stringifyParams(homeUrlProps)}
                className="home-link"
-               onClick={this.routeLink}>
+               onClick={this.props.router.routeLink}>
               <span className="react">React</span> Component Playground
             </a>
             {_.isEmpty(this.state.fixtureContents) ? this._renderCosmosPlug()
@@ -170,9 +171,10 @@ module.exports = React.createClass({
         return <li className={this._getFixtureClasses(componentName,
                                                       fixtureName)}
                    key={fixtureName}>
-          <a href={stringifyParams(fixtureProps)}
+          <a ref={componentName + fixtureName + 'Button'}
+             href={stringifyParams(fixtureProps)}
              title={fixtureName}
-             onClick={this.routeLink}>
+             onClick={this.props.router.routeLink}>
             {fixtureName}
           </a>
         </li>;
@@ -235,7 +237,7 @@ module.exports = React.createClass({
     return <li className={classes}>
       <a href={stringifyParams(fixtureEditorUrlProps)}
          ref="fixtureEditorButton"
-         onClick={this.routeLink}>Editor</a>
+         onClick={this.props.router.routeLink}>Editor</a>
     </li>;
   },
 
@@ -249,7 +251,7 @@ module.exports = React.createClass({
     return <li className="full-screen-button">
       <a href={fullScreenUrl}
          ref="fullScreenButton"
-         onClick={this.routeLink}>Fullscreen</a>
+         onClick={this.props.router.routeLink}>Fullscreen</a>
     </li>;
   },
 
diff --git a/tests/components/component-playground/children.js b/tests/components/component-playground/children.js
index a4bfe45..3cdfca4 100644
--- a/tests/components/component-playground/children.js
+++ b/tests/components/component-playground/children.js
@@ -25,7 +25,10 @@ describe('ComponentPlayground component', function() {
     sinon.stub(ComponentTree.loadChild, 'loadChild');
 
     props = {
-      fixtures: {}
+      fixtures: {},
+      router: {
+        routeLink: sinon.spy()
+      }
     };
   });
 
diff --git a/tests/components/component-playground/events.js b/tests/components/component-playground/events.js
index 49703e0..7e74bd2 100644
--- a/tests/components/component-playground/events.js
+++ b/tests/components/component-playground/events.js
@@ -31,7 +31,10 @@ describe('ComponentPlayground component', function() {
     sinon.stub(ComponentTree.loadChild, 'loadChild');
 
     props = {
-      fixtures: {}
+      fixtures: {},
+      router: {
+        routeLink: sinon.spy()
+      }
     };
   });
 
@@ -90,6 +93,36 @@ describe('ComponentPlayground component', function() {
         expect(expandedComponents.length).to.equal(1);
         expect(expandedComponents[0]).to.equal('FirstComponent');
       });
+
+      describe('router links', function() {
+        beforeEach(function() {
+          render({
+            selectedComponent: 'SecondComponent',
+            selectedFixture: 'simple state'
+          });
+        });
+
+        afterEach(function() {
+          expect(props.router.routeLink).to.have.been.called;
+        });
+
+        it('should route link on home button', 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.fixtureEditorButton.getDOMNode());
+        });
+
+        it('should route link on full screen button', function() {
+          utils.Simulate.click(component.refs.fullScreenButton.getDOMNode());
+        });
+      });
     });
 
     describe('editing fixture', function() {
diff --git a/tests/components/component-playground/render.js b/tests/components/component-playground/render.js
index 88668c4..af49f98 100644
--- a/tests/components/component-playground/render.js
+++ b/tests/components/component-playground/render.js
@@ -41,6 +41,9 @@ describe('ComponentPlayground component', function() {
         SecondComponent: {
           'simple state': {}
         }
+      },
+      router: {
+        routeLink: sinon.spy()
       }
     };
   });
diff --git a/tests/components/component-playground/state.js b/tests/components/component-playground/state.js
index df0e42d..ac2ebb0 100644
--- a/tests/components/component-playground/state.js
+++ b/tests/components/component-playground/state.js
@@ -33,6 +33,9 @@ describe('ComponentPlayground component', function() {
             myProp: true
           }
         }
+      },
+      router: {
+        routeLink: sinon.spy()
       }
     };
   });