[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
kyletsang · Jul 3, 2015 · ffbcf39 · ffbcf39
1 parent 8abc998
commit ffbcf39
Show file tree

Hide file tree

Showing 2 changed files with 80 additions and 1 deletion.
diff --git 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
@@ -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(){