[fixed] Link module adds extra space

danieljuhl · Jun 19, 2015 · 0630488 · 0630488
1 parent 8b81218
commit 0630488
Show file tree

Hide file tree

Showing 2 changed files with 46 additions and 2 deletions.
diff --git a/modules/Link.js b/modules/Link.js
@@ -81,8 +81,8 @@ export var Link = React.createClass({
 
     // ignore if rendered outside of the context of a router, simplifies unit testing
     if (router && router.isActive(to, query)) {
-      if (props.activeClassName)
-        props.className += ` ${props.activeClassName}`;
+      if (props.activeClassName) 
+        props.className += props.className !== '' ? ` ${props.activeClassName}` : props.activeClassName;
 
       if (props.activeStyle)
         Object.assign(props.style, props.activeStyle);

diff --git a/modules/__tests__/Link-test.js b/modules/__tests__/Link-test.js
@@ -114,6 +114,50 @@ describe('A <Link>', function () {
     });
   });
 
+  describe('when its route is active and className is empty', function () {
+    it('it shouldn\'t have an active class', function (done) {
+      var LinkWrapper = React.createClass({
+        render() {
+          return (
+            <div>
+              <Link to="hello" className="dontKillMe" activeClassName="">Link</Link>
+              {this.props.children}
+            </div>
+          );
+        }
+      });
+
+      var a, steps = [
+        function () {
+          a = div.querySelector('a');
+          expect(a.className).toEqual('dontKillMe');
+          this.transitionTo('hello');
+        },
+        function () {
+          expect(a.className).toEqual('dontKillMe');
+          done();
+        }
+      ];
+
+      function execNextStep() {
+        try {
+          steps.shift().apply(this, arguments);
+        } catch (error) {
+          done(error);
+        }
+      }
+
+      render((
+        <Router history={new MemoryHistory('/goodbye')} onUpdate={execNextStep}>
+          <Route path="/" component={LinkWrapper}>
+            <Route path="goodbye" component={Goodbye}/>
+            <Route path="hello" component={Hello}/>
+          </Route>
+        </Router>
+      ), div, execNextStep);
+    });
+  });
+
   describe('when its route is active', function () {
     it('has its activeClassName', function (done) {
       var LinkWrapper = React.createClass({