Bind links to router instance

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>;
   },
 

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()
+      }
     };
   });
 

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() {

tests/components/component-playground/render.js

@@ -41,6 +41,9 @@ describe('ComponentPlayground component', function() {
         SecondComponent: {
           'simple state': {}
         }
+      },
+      router: {
+        routeLink: sinon.spy()
       }
     };
   });

tests/components/component-playground/state.js

@@ -33,6 +33,9 @@ describe('ComponentPlayground component', function() {
             myProp: true
           }
         }
+      },
+      router: {
+        routeLink: sinon.spy()
       }
     };
   });