External-Mirrors/awx
2
0
Fork 0
mirror of https://github.com/ansible/awx.git synced 2026-05-06 17:07:36 -02:30
Code Issues Packages Projects Releases Wiki Activity

fix RoutedTabs tests

Browse Source 
Signed-off-by: Alex Corey <alex.swansboro@gmail.com>
This commit is contained in:
Keith Grant
2019-04-17 15:45:42 -04:00
committed by Alex Corey
parent ca6153c955
commit 25db22e072
2 changed files with 76 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files

94
__tests__/components/RoutedTabs.test.jsx
View File

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

52
src/components/Tabs/RoutedTabs.jsx
View File

@@ -1,25 +1,23 @@
import React from 'react'; 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 { function RoutedTabs (props) {
Tab,
Tabs
} from '@patternfly/react-core';
export default function RoutedTabs (props) {
const { history, tabsArray } = props; const { history, tabsArray } = props;
const getActiveTabId = () => { const getActiveTabId = () => {
if (history && history.location.pathname) { const match = tabsArray.find(tab => tab.link === history.location.pathname);
const matchTab = tabsArray.find(selectedTab => selectedTab.link if (match) {
=== history.location.pathname); return match.id;
return matchTab.id;
} }
return 0; return 0;
}; };
function handleTabSelect (event, eventKey) { function handleTabSelect (event, eventKey) {
if (history && history.location.pathname) { const match = tabsArray.find(tab => tab.id === eventKey);
const tab = tabsArray.find(tabElement => tabElement.id === eventKey); if (match) {
history.push(tab.link); history.push(match.link);
} }
} }
@@ -28,17 +26,31 @@ export default function RoutedTabs (props) {
activeKey={getActiveTabId()} activeKey={getActiveTabId()}
onSelect={handleTabSelect} onSelect={handleTabSelect}
> >
{tabsArray.map(tabElement => ( {tabsArray.map(tab => (
<Tab <Tab
className={`${tabElement.name}`} className={`${tab.name}`}
aria-label={`${tabElement.name}`} aria-label={`${tab.name}`}
eventKey={tabElement.id} eventKey={tab.id}
key={tabElement.id} key={tab.id}
link={tabElement.link} link={tab.link}
title={tabElement.name} title={tab.name}
/> />
))} ))}
</Tabs> </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);