diff --git a/__tests__/components/RoutedTabs.test.jsx b/__tests__/components/RoutedTabs.test.jsx
index 87053a30a9..01788a77ba 100644
--- a/__tests__/components/RoutedTabs.test.jsx
+++ b/__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('', () => {
+ beforeEach(() => {
+ history = createMemoryHistory({
+ initialEntries: ['/organizations/19/teams'],
+ });
+ });
+
test('RoutedTabs renders successfully', () => {
- wrapper = mount(
-
-
-
-
-
- ).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(
-
-
-
-
-
- ).find('RoutedTabs');
- wrapper.find('Tabs').prop('onSelect')({}, 1);
+
+
+
+ );
+
+ 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(
+
+
+
+ );
+
+ 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(
-
-
-
-
-
- ).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);
});
});
-
diff --git a/src/components/Tabs/RoutedTabs.jsx b/src/components/Tabs/RoutedTabs.jsx
index 3293e64087..4100e766b6 100644
--- a/src/components/Tabs/RoutedTabs.jsx
+++ b/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 => (
))}
);
}
+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);