Add tests

Author: selvagsz

src/components/Tab.js

@@ -71,8 +71,8 @@ module.exports = React.createClass({
  'ReactTabs__Tab',
  className,
  {
- [`${activeTabClassName}`]: selected,
- [`${disabledTabClassName}`]: disabled,
+ [activeTabClassName]: selected,
+ [disabledTabClassName]: disabled,
  }
  )}
  role="tab"

src/components/TabList.js

@@ -15,14 +15,21 @@ module.exports = React.createClass({
 
  propTypes: {
  className: PropTypes.string,
+ activeTabClassName: PropTypes.string,
+ disabledTabClassName: PropTypes.string,
  children: PropTypes.oneOfType([
  PropTypes.object,
  PropTypes.array,
  ]),
  },
 
  render() {
- const { className, ...attributes } = this.props;
+ const {
+ className,
+ activeTabClassName,
+ disabledTabClassName,
+ children,
+ ...attributes } = this.props;
 
  return (
  <ul
@@ -33,7 +40,7 @@ module.exports = React.createClass({
  )}
  role="tablist"
  >
- {renderChildren(this.props)}
+ {renderChildren({ activeTabClassName, disabledTabClassName, children })}
  </ul>
  );
  },

src/components/__tests__/TabList-test.js

@@ -1,7 +1,13 @@
 /* global jest, describe, it, expect */
 import React from 'react';
-import { shallow } from 'enzyme';
+import { shallow, mount } from 'enzyme';
+import Tab from '../Tab';
 import TabList from '../TabList';
+import Tabs from '../Tabs';
+
+function hasClassAt(wrapper, index, className) {
+ return wrapper.childAt(index).find('li').hasClass(className);
+}
 
 describe('<TabList />', () => {
  it('should have sane defaults', () => {
@@ -30,4 +36,37 @@ describe('<TabList />', () => {
 
  expect(wrapper.prop('role')).toBe('tablist');
  });
+
+ it('should retain the default classnames for active and disabled tab', () => {
+ const wrapper = mount(
+ <Tabs selectedIndex={0}>
+ <TabList>
+ <Tab>Foo</Tab>
+ <Tab disabled>Bar</Tab>
+ </TabList>
+ </Tabs>
+ );
+
+ const tabsList = wrapper.childAt(0);
+ expect(hasClassAt(tabsList, 0, 'ReactTabs__Tab--selected')).toBe(true);
+ expect(hasClassAt(tabsList, 1, 'ReactTabs__Tab--disabled')).toBe(true);
+ });
+
+ it('should display the custom classnames for active and disabled tab', () => {
+ const wrapper = mount(
+ <Tabs selectedIndex={0}>
+ <TabList activeTabClassName="active" disabledTabClassName="disabled">
+ <Tab>Foo</Tab>
+ <Tab disabled>Bar</Tab>
+ </TabList>
+ </Tabs>
+ );
+
+ const tabsList = wrapper.childAt(0);
+ expect(hasClassAt(tabsList, 0, 'ReactTabs__Tab--selected')).toBe(false);
+ expect(hasClassAt(tabsList, 1, 'ReactTabs__Tab--disabled')).toBe(false);
+
+ expect(hasClassAt(tabsList, 0, 'active')).toBe(true);
+ expect(hasClassAt(tabsList, 1, 'disabled')).toBe(true);
+ });
 });