From ffbcf39efe070334dc4d9ce023e8c0f1418542c7 Mon Sep 17 00:00:00 2001
From: AlexKVal <alexkval@gmail.com>
Date: Fri, 3 Jul 2015 13:48:32 +0300
Subject: [PATCH] [fixed] html id and class attributes handling for Nav

className - for the wrapper `nav` element
ulClassName - for the inner `ul` element
id - for the wrapper `nav` element
ulId - for the inner `ul` element
---
 src/Nav.js      | 19 ++++++++++++++-
 test/NavSpec.js | 62 +++++++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 80 insertions(+), 1 deletion(-)

diff --git a/src/Nav.js b/src/Nav.js
index d4873cc2b4..e1c6f6d293 100644
--- a/src/Nav.js
+++ b/src/Nav.js
@@ -18,6 +18,22 @@ const Nav = React.createClass({
     justified: React.PropTypes.bool,
     onSelect: React.PropTypes.func,
     collapsible: React.PropTypes.bool,
+    /**
+     * CSS classes for the wrapper `nav` element
+     */
+    className: React.PropTypes.string,
+    /**
+     * HTML id for the wrapper `nav` element
+     */
+    id: React.PropTypes.string,
+    /**
+     * CSS classes for the inner `ul` element
+     */
+    ulClassName: React.PropTypes.string,
+    /**
+     * HTML id for the inner `ul` element
+     */
+    ulId: React.PropTypes.string,
     expanded: React.PropTypes.bool,
     navbar: React.PropTypes.bool,
     eventKey: React.PropTypes.any,
@@ -69,7 +85,8 @@ const Nav = React.createClass({
     return (
       <ul {...this.props}
         role={this.props.bsStyle === 'tabs' ? 'tablist' : null}
-        className={classNames(this.props.className, classes)}
+        className={classNames(this.props.ulClassName, classes)}
+        id={this.props.ulId}
         ref="ul"
       >
         {ValidComponentChildren.map(this.props.children, this.renderNavItem)}
diff --git a/test/NavSpec.js b/test/NavSpec.js
index c53a5bbb55..947666e573 100644
--- a/test/NavSpec.js
+++ b/test/NavSpec.js
@@ -115,6 +115,68 @@ describe('Nav', function () {
     assert.ok(items[0].props.navItem);
   });
 
+  it('Should apply className only to the wrapper nav element', function () {
+    const instance = ReactTestUtils.renderIntoDocument(
+      <Nav bsStyle="tabs" activeKey={1} className="nav-specific">
+        <NavItem key={1}>Tab 1 content</NavItem>
+        <NavItem key={2}>Tab 2 content</NavItem>
+      </Nav>
+    );
+
+    let ulNode = React.findDOMNode(ReactTestUtils.findRenderedDOMComponentWithTag(instance, 'ul'));
+    assert.notInclude(ulNode.className, 'nav-specific');
+
+    let navNode = React.findDOMNode(ReactTestUtils.findRenderedDOMComponentWithTag(instance, 'nav'));
+    assert.include(navNode.className, 'nav-specific');
+  });
+
+  it('Should apply ulClassName to the inner ul element', function () {
+    const instance = ReactTestUtils.renderIntoDocument(
+      <Nav bsStyle="tabs" activeKey={1} className="nav-specific" ulClassName="ul-specific">
+        <NavItem key={1}>Tab 1 content</NavItem>
+        <NavItem key={2}>Tab 2 content</NavItem>
+      </Nav>
+    );
+
+    let ulNode = React.findDOMNode(ReactTestUtils.findRenderedDOMComponentWithTag(instance, 'ul'));
+    assert.include(ulNode.className, 'ul-specific');
+    assert.notInclude(ulNode.className, 'nav-specific');
+
+    let navNode = React.findDOMNode(ReactTestUtils.findRenderedDOMComponentWithTag(instance, 'nav'));
+    assert.notInclude(navNode.className, 'ul-specific');
+    assert.include(navNode.className, 'nav-specific');
+  });
+
+  it('Should apply id to the wrapper nav element', function () {
+    const instance = ReactTestUtils.renderIntoDocument(
+      <Nav bsStyle="tabs" activeKey={1} id="nav-id">
+        <NavItem key={1}>Tab 1 content</NavItem>
+        <NavItem key={2}>Tab 2 content</NavItem>
+      </Nav>
+    );
+
+    let navNode = React.findDOMNode(ReactTestUtils.findRenderedDOMComponentWithTag(instance, 'nav'));
+    assert.equal(navNode.id, 'nav-id');
+
+    let ulNode = React.findDOMNode(ReactTestUtils.findRenderedDOMComponentWithTag(instance, 'ul'));
+    assert.notEqual(ulNode.id, 'nav-id');
+  });
+
+  it('Should apply ulId to the inner ul element', function () {
+    const instance = ReactTestUtils.renderIntoDocument(
+      <Nav bsStyle="tabs" activeKey={1} id="nav-id" ulId="ul-id">
+        <NavItem key={1}>Tab 1 content</NavItem>
+        <NavItem key={2}>Tab 2 content</NavItem>
+      </Nav>
+    );
+
+    let ulNode = React.findDOMNode(ReactTestUtils.findRenderedDOMComponentWithTag(instance, 'ul'));
+    assert.equal(ulNode.id, 'ul-id');
+
+    let navNode = React.findDOMNode(ReactTestUtils.findRenderedDOMComponentWithTag(instance, 'nav'));
+    assert.equal(navNode.id, 'nav-id');
+  });
+
 
   describe('Web Accessibility', function(){