coverage

.storybook/__snapshots__/Storyshots.test.js.snap

@@ -490,7 +490,7 @@ exports[`Storyshots Paragon Welcome 1`] = `
 </div>
 `;
 
-exports[`Storyshots Tabs minimal usage 1`] = `
+exports[`Storyshots Tabs basic usage 1`] = `
 <div>
   <ul
     className="nav nav-tabs"
@@ -551,7 +551,6 @@ exports[`Storyshots Tabs minimal usage 1`] = `
       className="tab-pane active"
       id="tab-panel-tabInterface11-0"
       role="tabpanel"
-      tabId={0}
     >
       <div>
         Hello I am the first panel
@@ -563,7 +562,6 @@ exports[`Storyshots Tabs minimal usage 1`] = `
       className="tab-pane"
       id="tab-panel-tabInterface11-1"
       role="tabpanel"
-      tabId={1}
     >
       <div>
         Hello I am the second panel
@@ -575,7 +573,6 @@ exports[`Storyshots Tabs minimal usage 1`] = `
       className="tab-pane"
       id="tab-panel-tabInterface11-2"
       role="tabpanel"
-      tabId={2}
     >
       <div>
         Hello I am the third panel

src/Tabs/Tabs.stories.jsx

@@ -5,17 +5,16 @@ import { storiesOf } from '@storybook/react';
 import Tabs from './index';
 
 storiesOf('Tabs', module)
-  .add('minimal usage', () => (
+  .add('basic usage', () => (
     <Tabs
       labels={[
         'Panel 1',
         'Panel 2',
         'Panel 3',
       ]}
-      panels={[
-        <div>Hello I am the first panel</div>,
-        <div>Hello I am the second panel</div>,
-        <div>Hello I am the third panel</div>,
-      ]}
-    />
+    >
+      <div>Hello I am the first panel</div>
+      <div>Hello I am the second panel</div>
+      <div>Hello I am the third panel</div>
+    </Tabs>
   ));

src/Tabs/Tabs.test.jsx

+/* eslint-disable import/no-extraneous-dependencies */
+import React from 'react';
+import { shallow } from 'enzyme';
+
+import Tabs from './index';
+
+const props = {
+  labels: [
+    'first',
+    'second',
+    'third',
+  ],
+  children: [
+    <div>first</div>,
+    <div>second</div>,
+    <div>third</div>,
+  ],
+};
+
+const tabSelectedAtIndex = (index, wrapper) => {
+  wrapper.find('a').forEach((node, i) => {
+    expect(node.prop('aria-selected')).toEqual(i === index);
+  });
+
+  wrapper.find('.tab-pane').forEach((node, i) => {
+    expect(node.hasClass('active')).toEqual(i === index);
+  });
+};
+
+describe('<Tabs />', () => {
+  it('renders with first tab selected', () => {
+    const wrapper = shallow(
+      <Tabs
+        {...props}
+      />,
+    );
+    tabSelectedAtIndex(0, wrapper);
+  });
+
+  describe('switches tab selection', () => {
+    it('on click', () => {
+      const wrapper = shallow(
+        <Tabs
+          {...props}
+        />,
+      );
+      wrapper.find('a').forEach((node, i) => {
+        node.simulate('click');
+        tabSelectedAtIndex(i, wrapper);
+      });
+    });
+  });
+});

src/Tabs/index.jsx

@@ -62,7 +62,7 @@ class Tabs extends React.Component {
   }
 
   buildPanels() {
-    return this.props.panels.map((panel, i) => {
+    return this.props.children.map((panel, i) => {
       const selected = this.state.activeTab === i;
       const panelId = this.genPanelId(i);
 
@@ -77,7 +77,6 @@ class Tabs extends React.Component {
           id={panelId}
           key={panelId}
           role="tabpanel"
-          tabId={i}
         >
           {panel}
         </div>
@@ -114,7 +113,7 @@ Tabs.propTypes = {
     PropTypes.arrayOf(PropTypes.string),
     PropTypes.arrayOf(PropTypes.element),
   ]).isRequired,
-  panels: PropTypes.arrayOf(PropTypes.element).isRequired,
+  children: PropTypes.arrayOf(PropTypes.element).isRequired,
 };
 
 export default Tabs;