Add <Link> component tests

Also, removed deprecated static <Link> props.

Author: mjackson

modules/components/Link.js

@@ -1,10 +1,7 @@
 var React = require('react');
-var warning = require('react/lib/warning');
+var merge = require('react/lib/merge');
 var ActiveState = require('../mixins/ActiveState');
-var RouteLookup = require('../mixins/RouteLookup');
 var Transitions = require('../mixins/Transitions');
-var withoutProperties = require('../utils/withoutProperties');
-var hasOwnProperty = require('../utils/hasOwnProperty');
 
 function isLeftClickEvent(event) {
   return event.button === 0;
@@ -14,66 +11,29 @@ function isModifiedEvent(event) {
   return !!(event.metaKey || event.altKey || event.ctrlKey || event.shiftKey);
 }
 
-/**
- * DEPRECATED: A map of <Link> component props that are reserved for use by the
- * router and/or React. All other props are used as params that are
- * interpolated into the link's path.
- */
-var RESERVED_PROPS = {
-  to: true,
-  key: true,
-  className: true,
-  activeClassName: true,
-  query: true,
-  onClick:true,
-  children: true // ReactChildren
-};
-
 /**
  * <Link> components are used to create an <a> element that links to a route.
  * When that route is active, the link gets an "active" class name (or the
  * value of its `activeClassName` prop).
  *
  * For example, assuming you have the following route:
  *
- *   <Route name="showPost" path="/posts/:postId" handler={Post}/>
+ *   <Route name="showPost" path="/posts/:postID" handler={Post}/>
  *
  * You could use the following component to link to that route:
  *
- *   <Link to="showPost" params={{postId: "123"}} />
+ *   <Link to="showPost" params={{ postID: "123" }} />
  *
  * In addition to params, links may pass along query string parameters
  * using the `query` prop.
  *
- *   <Link to="showPost" params={{postId: "123"}} query={{show:true}}/>
+ *   <Link to="showPost" params={{ postID: "123" }} query={{ show:true }}/>
  */
 var Link = React.createClass({
 
   displayName: 'Link',
 
-  mixins: [ ActiveState, RouteLookup, Transitions ],
-
-  statics: {
-
-    // TODO: Deprecate passing props as params in v1.0
-    getUnreservedProps: function (props) {
-      var props = withoutProperties(props, RESERVED_PROPS);
-      warning(
-        Object.keys(props).length === 0,
-        'Passing props for params on <Link>s is deprecated, '+
-        'please use the `params` property.'
-      );
-      return props;
-    },
-
-    /**
-     * Returns a hash of URL parameters to use in this <Link>'s path.
-     */
-    getParams: function (props) {
-      return props.params || Link.getUnreservedProps(props);
-    }
-
-  },
+  mixins: [ ActiveState, Transitions ],
 
   propTypes: {
     to: React.PropTypes.string.isRequired,
@@ -95,71 +55,63 @@ var Link = React.createClass({
     };
   },
 
-  /**
-   * Returns the value of the "href" attribute to use on the DOM element.
-   */
-  getHref: function () {
-    return this.makeHref(this.props.to, Link.getParams(this.props), this.props.query);
-  },
-
-  /**
-   * Returns the value of the "class" attribute to use on the DOM element, which contains
-   * the value of the activeClassName property when this <Link> is active.
-   */
-  getClassName: function () {
-    var className = this.props.className || '';
-
-    if (this.state.isActive)
-      return className + ' ' + this.props.activeClassName;
-
-    return className;
-  },
-
-  componentWillReceiveProps: function (nextProps) {
-    var params = Link.getParams(nextProps);
-
+  updateActiveState: function () {
     this.setState({
-      isActive: this.isActive(nextProps.to, params, nextProps.query)
+      isActive: this.isActive(this.props.to, this.props.params, this.props.query)
     });
   },
 
-  updateActiveState: function () {
+  componentWillReceiveProps: function (nextProps) {
     this.setState({
-      isActive: this.isActive(this.props.to, Link.getParams(this.props), this.props.query)
+      isActive: this.isActive(nextProps.to, nextProps.params, nextProps.query)
     });
   },
 
   handleClick: function (event) {
     var allowTransition = true;
-    var ret;
+    var onClickResult;
 
     if (this.props.onClick)
-      ret = this.props.onClick(event);
+      onClickResult = this.props.onClick(event);
 
     if (isModifiedEvent(event) || !isLeftClickEvent(event))
       return;
 
-    if (ret === false || event.defaultPrevented === true)
+    if (onClickResult === false || event.defaultPrevented === true)
       allowTransition = false;
 
     event.preventDefault();
 
     if (allowTransition)
-      this.transitionTo(this.props.to, Link.getParams(this.props), this.props.query);
+      this.transitionTo(this.props.to, this.props.params, this.props.query);
+  },
+
+  /**
+   * Returns the value of the "href" attribute to use on the DOM element.
+   */
+  getHref: function () {
+    return this.makeHref(this.props.to, this.props.params, this.props.query);
+  },
+
+  /**
+   * Returns the value of the "class" attribute to use on the DOM element, which contains
+   * the value of the activeClassName property when this <Link> is active.
+   */
+  getClassName: function () {
+    var className = this.props.className || '';
+
+    if (this.state.isActive)
+      className += ' ' + this.props.activeClassName;
+
+    return className;
   },
 
   render: function () {
-    var props = {
+    var props = merge(this.props, {
       href: this.getHref(),
       className: this.getClassName(),
       onClick: this.handleClick
-    };
-
-    // pull in props without overriding
-    for (var propName in this.props) {
-      if (hasOwnProperty(this.props, propName) && hasOwnProperty(props, propName) === false)
-        props[propName] = this.props[propName];
-    }
+    });
 
     return React.DOM.a(props, this.props.children);
   }

modules/components/__tests__/Link-test.js

@@ -0,0 +1,40 @@
+var assert = require('assert');
+var expect = require('expect');
+var React = require('react/addons');
+var ReactTestUtils = React.addons.TestUtils;
+var Routes = require('../Routes');
+var DefaultRoute = require('../DefaultRoute');
+var Link = require('../Link');
+
+describe('A Link', function () {
+  describe('when its route is active', function () {
+    var Home = React.createClass({
+      render: function () {
+        return Link({ ref: 'link', to: 'home', className: 'a-link', activeClassName: 'highlight' });
+      }
+    });
+
+    var component;
+    beforeEach(function () {
+      component = ReactTestUtils.renderIntoDocument(
+        Routes(null,
+          DefaultRoute({ name: 'home', handler: Home })
+        )
+      );
+    });
+
+    afterEach(function () {
+      React.unmountComponentAtNode(component.getDOMNode());
+    });
+
+    it('is active', function () {
+      var linkComponent = component.getActiveRoute().refs.link;
+      assert(linkComponent.isActive);
+    });
+
+    it('has its active class name', function () {
+      var linkComponent = component.getActiveRoute().refs.link;
+      expect(linkComponent.getClassName()).toEqual('a-link highlight');
+    });
+  });
+});

tests.js

@@ -1,4 +1,5 @@
 require('./modules/components/__tests__/DefaultRoute-test');
+require('./modules/components/__tests__/Link-test');
 require('./modules/components/__tests__/NotFoundRoute-test');
 require('./modules/mixins/__tests__/ActiveDelegate-test');
 require('./modules/mixins/__tests__/AsyncState-test');