fix RoutedTabs tests

Signed-off-by: Alex Corey <alex.swansboro@gmail.com>

__tests__/components/RoutedTabs.test.jsx

@@ -1,69 +1,63 @@
 import React from 'react';
-import { mount } from 'enzyme';
-
+import { mount, shallow } from 'enzyme';
 import { Router } from 'react-router-dom';
 import { createMemoryHistory } from 'history';
 import { I18nProvider } from '@lingui/react';
-import RoutedTabs from '../../src/components/Tabs/RoutedTabs';
+import RoutedTabs, { _RoutedTabs } from '../../src/components/Tabs/RoutedTabs';
 
 let wrapper;
-
 let history;
 
-beforeEach(() => {
-  history = createMemoryHistory({
-    initialEntries: ['/organizations/19/details'],
-  });
-});
-
 const tabs = [
-  { name: 'Details', link: 'organizations/19/details', id: 0 },
-  { name: 'Access', link: 'organizations/19/access', id: 1 },
-  { name: 'Teams', link: 'organizations/19/teams', id: 2 },
-  { name: 'Notification', link: 'organizations/19/notification', id: 3 }
+  { name: 'Details', link: '/organizations/19/details', id: 1 },
+  { name: 'Access', link: '/organizations/19/access', id: 2 },
+  { name: 'Teams', link: '/organizations/19/teams', id: 3 },
+  { name: 'Notification', link: '/organizations/19/notification', id: 4 }
 ];
 
 describe('<RoutedTabs />', () => {
+  beforeEach(() => {
+    history = createMemoryHistory({
+      initialEntries: ['/organizations/19/teams'],
+    });
+  });
+
   test('RoutedTabs renders successfully', () => {
-    wrapper = mount(
-      <I18nProvider>
-        <Router history={history}>
-          <RoutedTabs
-            tabsArray={tabs}
-          />
-        </Router>
-      </I18nProvider>
-    ).find('RoutedTabs');
+    wrapper = shallow(
+      <_RoutedTabs
+        tabsArray={tabs}
+        history={history}
+      />
+    );
+    expect(wrapper.find('Tab')).toHaveLength(4);
   });
 
-  test('Given a URL the correct tab is displayed', async (done) => {
+  test('Given a URL the correct tab is active', async () => {
     wrapper = mount(
-      <I18nProvider>
-        <Router history={history}>
-          <RoutedTabs
-            tabsArray={tabs}
-          />
-        </Router>
-      </I18nProvider>
-    ).find('RoutedTabs');
-    wrapper.find('Tabs').prop('onSelect')({}, 1);
+      <Router history={history}>
+        <RoutedTabs
+          tabsArray={tabs}
+        />
+      </Router>
+    );
+
+    expect(history.location.pathname).toEqual('/organizations/19/teams');
+    expect(wrapper.find('Tabs').prop('activeKey')).toBe(3);
+  });
+
+  test('should update history when new tab selected', async () => {
+    wrapper = mount(
+      <Router history={history}>
+        <RoutedTabs
+          tabsArray={tabs}
+        />
+      </Router>
+    );
+
+    wrapper.find('Tabs').prop('onSelect')({}, 2);
+    wrapper.update();
+
     expect(history.location.pathname).toEqual('/organizations/19/access');
-    done();
-  });
-
-  test('the correct tab is rendered', async () => {
-    wrapper = mount(
-      <I18nProvider>
-        <Router history={history}>
-          <RoutedTabs
-            tabsArray={tabs}
-          />
-        </Router>
-      </I18nProvider>
-    ).find('RoutedTabs');
-    const selectedTab = wrapper.find('section').get(2).props.hidden;
-    wrapper.find('button').at(2).simulate('click');
-    expect(selectedTab).toBe(false);
+    expect(wrapper.find('Tabs').prop('activeKey')).toBe(2);
   });
 });
-

src/components/Tabs/RoutedTabs.jsx

@@ -1,25 +1,23 @@
 import React from 'react';
+import { shape, string, number, arrayOf } from 'prop-types';
+import { Tab, Tabs } from '@patternfly/react-core';
+import { withRouter } from 'react-router-dom';
 
-import {
-  Tab,
-  Tabs
-} from '@patternfly/react-core';
-
-export default function RoutedTabs (props) {
+function RoutedTabs (props) {
   const { history, tabsArray } = props;
+
   const getActiveTabId = () => {
-    if (history && history.location.pathname) {
-      const matchTab = tabsArray.find(selectedTab => selectedTab.link
-        === history.location.pathname);
-      return matchTab.id;
+    const match = tabsArray.find(tab => tab.link === history.location.pathname);
+    if (match) {
+      return match.id;
     }
     return 0;
   };
 
   function handleTabSelect (event, eventKey) {
-    if (history && history.location.pathname) {
-      const tab = tabsArray.find(tabElement => tabElement.id === eventKey);
-      history.push(tab.link);
+    const match = tabsArray.find(tab => tab.id === eventKey);
+    if (match) {
+      history.push(match.link);
     }
   }
 
@@ -28,17 +26,31 @@ export default function RoutedTabs (props) {
       activeKey={getActiveTabId()}
       onSelect={handleTabSelect}
     >
-      {tabsArray.map(tabElement => (
+      {tabsArray.map(tab => (
         <Tab
-          className={`${tabElement.name}`}
-          aria-label={`${tabElement.name}`}
-          eventKey={tabElement.id}
-          key={tabElement.id}
-          link={tabElement.link}
-          title={tabElement.name}
+          className={`${tab.name}`}
+          aria-label={`${tab.name}`}
+          eventKey={tab.id}
+          key={tab.id}
+          link={tab.link}
+          title={tab.name}
         />
       ))}
     </Tabs>
   );
 }
+RoutedTabs.propTypes = {
+  history: shape({
+    location: shape({
+      pathname: string.isRequired
+    }).isRequired,
+  }).isRequired,
+  tabsArray: arrayOf(shape({
+    id: number.isRequired,
+    link: string.isRequired,
+    name: string.isRequired,
+  })).isRequired,
+};
 
+export { RoutedTabs as _RoutedTabs };
+export default withRouter(RoutedTabs);