Revision b51f2297
Added by Amir Fefer almost 6 years ago
webpack/assets/javascripts/react_app/components/BreadcrumbBar/BreadcrumbBar.fixtures.js | ||
---|---|---|
export const mockBreadcrumbItemOnClick = jest.fn();
|
||
|
||
export const breadcrumbItems = {
|
||
items: [
|
||
{
|
||
... | ... | |
url: '/some-url',
|
||
},
|
||
{
|
||
caption: 'child',
|
||
caption: 'child with onClick',
|
||
onClick: mockBreadcrumbItemOnClick,
|
||
},
|
||
{
|
||
caption: 'active child',
|
||
},
|
||
],
|
||
};
|
webpack/assets/javascripts/react_app/components/BreadcrumbBar/BreadcrumbBar.js | ||
---|---|---|
searchQuery,
|
||
removeSearchQuery,
|
||
searchDebounceTimeout,
|
||
onSwitcherItemClick,
|
||
} = this.props;
|
||
|
||
const isTitle = breadcrumbItems.length === 1;
|
||
... | ... | |
page: Number(currentPage) + pageIncrement,
|
||
});
|
||
|
||
const handleSwitcherItemClick = (e, url) => {
|
||
closeSwitcher();
|
||
onSwitcherItemClick(e, url);
|
||
};
|
||
|
||
return (
|
||
<div className="breadcrumb-bar">
|
||
<Breadcrumb title items={breadcrumbItems} isTitle={isTitle}>
|
||
... | ... | |
onTogglerClick={() => toggleSwitcher()}
|
||
onHide={() => closeSwitcher()}
|
||
onOpen={() => this.handleOpen()}
|
||
onResourceClick={() => closeSwitcher()}
|
||
onSearchChange={event =>
|
||
loadSwitcherResourcesByResource(resource, { searchQuery: event.target.value })
|
||
}
|
||
... | ... | |
searchValue={searchQuery}
|
||
onSearchClear={() => removeSearchQuery(resource)}
|
||
searchDebounceTimeout={searchDebounceTimeout}
|
||
onResourceClick={(e, url) => handleSwitcherItemClick(e, url)}
|
||
/>
|
||
)}
|
||
</Breadcrumb>
|
||
... | ... | |
closeSwitcher: PropTypes.func,
|
||
loadSwitcherResourcesByResource: PropTypes.func,
|
||
onSearchChange: PropTypes.func,
|
||
onSwitcherItemClick: PropTypes.func,
|
||
};
|
||
|
||
BreadcrumbBar.defaultProps = {
|
||
... | ... | |
loadSwitcherResourcesByResource: noop,
|
||
onSearchChange: noop,
|
||
searchDebounceTimeout: 300,
|
||
onSwitcherItemClick: noop,
|
||
};
|
||
|
||
export default BreadcrumbBar;
|
webpack/assets/javascripts/react_app/components/BreadcrumbBar/__tests__/BreadcrumbBar.test.js | ||
---|---|---|
import { testComponentSnapshotsWithFixtures } from '../../../common/testHelpers';
|
||
|
||
import BreadcrumbBar from '../BreadcrumbBar';
|
||
import { breadcrumbBar, breadcrumbBarSwithcable } from '../BreadcrumbBar.fixtures';
|
||
import {
|
||
breadcrumbBar,
|
||
breadcrumbBarSwithcable,
|
||
mockBreadcrumbItemOnClick,
|
||
} from '../BreadcrumbBar.fixtures';
|
||
|
||
const createStubs = () => ({
|
||
toggleSwitcher: jest.fn(),
|
||
... | ... | |
|
||
expect(props.loadSwitcherResourcesByResource.mock.calls).toMatchSnapshot('loadSwitcherResourcesByResource calls');
|
||
});
|
||
|
||
it('onclick callbacks should work', () => {
|
||
const props = {
|
||
...breadcrumbBarSwithcable,
|
||
...createStubs(),
|
||
onSwitcherItemClick: jest.fn(),
|
||
resourceSwitcherItems: [{ name: 'a', id: '1' }],
|
||
};
|
||
const component = mount(<BreadcrumbBar {...props} />);
|
||
|
||
// test breadcrumb switcher item click
|
||
expect(props.onSwitcherItemClick.mock.calls.length).toBe(0);
|
||
component.setProps({ isSwitcherOpen: true });
|
||
component.update();
|
||
component.find('.scrollable-list.list-group button').simulate('click');
|
||
expect(props.onSwitcherItemClick.mock.calls.length).toBe(1);
|
||
|
||
// test breadcrumb item click
|
||
component.find('.breadcrumbs-pf-title.breadcrumb a').at(1).simulate('click');
|
||
expect(mockBreadcrumbItemOnClick.mock.calls.length).toBe(1);
|
||
});
|
||
});
|
||
});
|
webpack/assets/javascripts/react_app/components/BreadcrumbBar/__tests__/__snapshots__/BreadcrumbBar.test.js.snap | ||
---|---|---|
"url": "/some-url",
|
||
},
|
||
Object {
|
||
"caption": "child",
|
||
"caption": "child with onClick",
|
||
"onClick": [Function],
|
||
},
|
||
Object {
|
||
"caption": "active child",
|
||
},
|
||
]
|
||
}
|
||
... | ... | |
"url": "/some-url",
|
||
},
|
||
Object {
|
||
"caption": "child",
|
||
"caption": "child with onClick",
|
||
"onClick": [Function],
|
||
},
|
||
Object {
|
||
"caption": "active child",
|
||
},
|
||
]
|
||
}
|
webpack/assets/javascripts/react_app/components/BreadcrumbBar/components/Breadcrumb.js | ||
---|---|---|
<PfBreadcrumb.Item
|
||
key={index}
|
||
active={index === items.length - 1}
|
||
onClick={item.onClick}
|
||
href={item.url}
|
||
dangerouslySetInnerHTML={{ __html: item.caption }}
|
||
/>
|
webpack/assets/javascripts/react_app/components/BreadcrumbBar/components/BreadcrumbSwitcher.js | ||
---|---|---|
resources,
|
||
onTogglerClick,
|
||
onHide,
|
||
onResourceClick,
|
||
onNextPageClick,
|
||
onPrevPageClick,
|
||
onSearchChange,
|
||
searchValue,
|
||
onSearchClear,
|
||
searchDebounceTimeout,
|
||
onResourceClick,
|
||
} = this.props;
|
||
|
||
return (
|
||
... | ... | |
hasError={hasError}
|
||
onSearchChange={onSearchChange}
|
||
resources={resources}
|
||
onResourceClick={onResourceClick}
|
||
onNextPageClick={onNextPageClick}
|
||
onPrevPageClick={onPrevPageClick}
|
||
currentPage={currentPage}
|
||
... | ... | |
searchValue={searchValue}
|
||
onSearchClear={onSearchClear}
|
||
searchDebounceTimeout={searchDebounceTimeout}
|
||
onResourceClick={onResourceClick}
|
||
/>
|
||
</Overlay>
|
||
</div>
|
||
... | ... | |
onTogglerClick: PropTypes.func,
|
||
onHide: PropTypes.func,
|
||
onOpen: PropTypes.func,
|
||
onResourceClick: PropTypes.func,
|
||
onPrevPageClick: PropTypes.func,
|
||
onNextPageClick: PropTypes.func,
|
||
onResourceClick: PropTypes.func,
|
||
};
|
||
|
||
BreadcrumbSwitcher.defaultProps = {
|
webpack/assets/javascripts/react_app/components/BreadcrumbBar/components/BreadcrumbSwitcherPopover.js | ||
---|---|---|
import { Popover, ListGroup, ListGroupItem, Pager, Icon } from 'patternfly-react';
|
||
import EllipsisWithTooltip from 'react-ellipsis-with-tooltip';
|
||
import SearchInput from '../../common/SearchInput';
|
||
import { noop } from '../../../common/helpers';
|
||
import SubstringWrapper from '../../common/SubstringWrapper';
|
||
import { noop } from '../../../common/helpers';
|
||
import './BreadcrumbSwitcherPopover.scss';
|
||
|
||
const BreadcrumbSwitcherPopover = ({
|
||
resources,
|
||
onResourceClick,
|
||
onNextPageClick,
|
||
onPrevPageClick,
|
||
loading,
|
||
... | ... | |
onSearchClear,
|
||
searchValue,
|
||
searchDebounceTimeout,
|
||
onResourceClick,
|
||
...props
|
||
}) => {
|
||
let popoverBody;
|
||
... | ... | |
</div>
|
||
);
|
||
} else {
|
||
const handleItemClick = (item) => {
|
||
onResourceClick(item);
|
||
if (item.onClick) item.onClick();
|
||
};
|
||
|
||
const createItemProps = (item) => {
|
||
const { id, url, name } = item;
|
||
const key = `${id}-${name}`;
|
||
... | ... | |
return { ...itemProps, disabled: true };
|
||
}
|
||
|
||
return { ...itemProps, onClick: () => handleItemClick(item), href: url };
|
||
return { ...itemProps, onClick: e => onResourceClick(e, url), href: url };
|
||
};
|
||
|
||
popoverBody = (
|
||
... | ... | |
hasError: PropTypes.bool,
|
||
currentPage: PropTypes.number,
|
||
totalPages: PropTypes.number,
|
||
onResourceClick: PropTypes.func,
|
||
resources: PropTypes.arrayOf(PropTypes.shape({
|
||
id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
|
||
name: PropTypes.string.isRequired,
|
||
... | ... | |
})),
|
||
onSearchChange: PropTypes.func,
|
||
searchValue: PropTypes.string,
|
||
onResourceClick: PropTypes.func,
|
||
};
|
||
|
||
BreadcrumbSwitcherPopover.defaultProps = {
|
||
... | ... | |
hasError: false,
|
||
currentPage: 1,
|
||
totalPages: 1,
|
||
onResourceClick: noop,
|
||
resources: [],
|
||
onResourceClick: noop,
|
||
};
|
||
|
||
export default BreadcrumbSwitcherPopover;
|
webpack/assets/javascripts/react_app/components/BreadcrumbBar/components/__snapshots__/Breadcrumb.test.js.snap | ||
---|---|---|
key="0"
|
||
/>
|
||
<BreadcrumbItem
|
||
active={true}
|
||
active={false}
|
||
dangerouslySetInnerHTML={
|
||
Object {
|
||
"__html": "child",
|
||
"__html": "child with onClick",
|
||
}
|
||
}
|
||
key="1"
|
||
onClick={[Function]}
|
||
/>
|
||
<BreadcrumbItem
|
||
active={true}
|
||
dangerouslySetInnerHTML={
|
||
Object {
|
||
"__html": "active child",
|
||
}
|
||
}
|
||
key="2"
|
||
/>
|
||
</Breadcrumb>
|
||
`;
|
Also available in: Unified diff
Fixes #23977 - add onClick callback to breadcrumbs