diff --git a/__tests__/components/NavExpandableGroup.test.jsx b/__tests__/components/NavExpandableGroup.test.jsx new file mode 100644 index 0000000000..68cf571f7d --- /dev/null +++ b/__tests__/components/NavExpandableGroup.test.jsx @@ -0,0 +1,63 @@ +import React from 'react'; +import { MemoryRouter } from 'react-router-dom'; +import { mount } from 'enzyme'; + +import { Nav } from '@patternfly/react-core'; +import NavExpandableGroup from '../../src/components/NavExpandableGroup'; + +describe('NavExpandableGroup', () => { + test('initialization and render', () => { + const component = mount( + + + + ).find('NavExpandableGroup').instance(); + + expect(component.navItemPaths).toEqual(['/foo', '/bar', '/fiz']); + expect(component.isActiveGroup()).toEqual(true); + }); + + describe('isActivePath', () => { + const params = [ + ['/fo', '/foo', false], + ['/foo', '/foo', true], + ['/foo/1/bar/fiz', '/foo', true], + ['/foo/1/bar/fiz', 'foo', false], + ['/foo/1/bar/fiz', 'foo/', false], + ['/foo/1/bar/fiz', '/bar', false], + ['/foo/1/bar/fiz', '/fiz', false], + ]; + + params.forEach(([location, path, expected]) => { + test(`when location is ${location}', isActivePath('${path}') returns ${expected} `, () => { + const component = mount( + + + + ).find('NavExpandableGroup').instance(); + + expect(component.isActivePath(path)).toEqual(expected); + }); + }); + }); +}); diff --git a/src/App.jsx b/src/App.jsx index 69e300dd75..38465599d8 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -11,9 +11,7 @@ import { BackgroundImage, BackgroundImageSrc, Nav, - NavExpandable, NavList, - NavItem, Page, PageHeader, PageSidebar, @@ -30,6 +28,7 @@ import HelpDropdown from './components/HelpDropdown'; import LogoutButton from './components/LogoutButton'; import TowerLogo from './components/TowerLogo'; import ConditionalRedirect from './components/ConditionalRedirect'; +import NavExpandableGroup from './components/NavExpandableGroup'; import Applications from './pages/Applications'; import Credentials from './pages/Credentials'; @@ -67,41 +66,6 @@ const language = (navigator.languages && navigator.languages[0]) const languageWithoutRegionCode = language.toLowerCase().split(/[_-]+/)[0]; -const SideNavItems = ({ items, history }) => { - const currentPath = history.location.pathname.split('/')[1]; - let activeGroup; - if (currentPath !== '') { - [{ groupName: activeGroup }] = items - .map(({ groupName, routes }) => ({ - groupName, - paths: routes.map(({ path }) => path) - })) - .filter(({ paths }) => paths.indexOf(currentPath) > -1); - } else { - activeGroup = 'views'; - } - - return (items.map(({ title, groupName, routes }) => ( - - {routes.map(({ path, title: itemTitle }) => ( - - {itemTitle} - - ))} - - ))); -}; class App extends React.Component { constructor (props) { @@ -160,7 +124,12 @@ class App extends React.Component { }} /> - api.isAuthenticated()} redirectPath="/" path="/login" component={() => } /> + api.isAuthenticated()} + redirectPath="/" + path="/login" + component={() => } + /> (