Skip to content
Permalink
Browse files

Refs #25217 - Refactor notifications prop-types

* Adds snapshot testing for notifications toggle-icon
  • Loading branch information...
sharvit authored and ohadlevy committed Nov 25, 2018
1 parent 6a9879c commit ba99da20f3c017a9d29a80f162ba2312489d9f19
@@ -1,7 +1,9 @@
import { OverlayTrigger, Tooltip } from 'react-bootstrap';
import React from 'react';
import { OverlayTrigger, Tooltip } from 'react-bootstrap';
import PropTypes from 'prop-types';
import { noop } from '../../../common/helpers';

export default ({ hasUnreadMessages, onClick }) => {
const ToggleIcon = ({ hasUnreadMessages, onClick }) => {
const iconType = hasUnreadMessages ? 'fa-bell' : 'fa-bell-o';
const tooltip = <Tooltip id="tooltip">Notifications</Tooltip>;

@@ -19,3 +21,15 @@ export default ({ hasUnreadMessages, onClick }) => {
</OverlayTrigger>
);
};

ToggleIcon.propTypes = {
hasUnreadMessages: PropTypes.bool,
onClick: PropTypes.func,
};

ToggleIcon.defaultProps = {
hasUnreadMessages: false,
onClick: noop,
};

export default ToggleIcon;
@@ -0,0 +1,10 @@
import { testComponentSnapshotsWithFixtures } from '../../../common/testHelpers';

import ToggleIcon from './ToggleIcon';

const fixtures = {
'render ToggleIcon': {},
'render ToggleIcon with unread-messages': { hasUnreadMessages: true },
};

describe('ToggleIcon', () => testComponentSnapshotsWithFixtures(ToggleIcon, fixtures));
@@ -0,0 +1,59 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`ToggleIcon render ToggleIcon 1`] = `
<OverlayTrigger
defaultOverlayShown={false}
id="notifications-toggle-icon"
overlay={
<Tooltip
bsClass="tooltip"
id="tooltip"
placement="right"
>
Notifications
</Tooltip>
}
placement="bottom"
trigger={
Array [
"hover",
"focus",
]
}
>
<span
aria-describedby="tooltip"
className="fa fa-bell-o"
onClick={[Function]}
/>
</OverlayTrigger>
`;

exports[`ToggleIcon render ToggleIcon with unread-messages 1`] = `
<OverlayTrigger
defaultOverlayShown={false}
id="notifications-toggle-icon"
overlay={
<Tooltip
bsClass="tooltip"
id="tooltip"
placement="right"
>
Notifications
</Tooltip>
}
placement="bottom"
trigger={
Array [
"hover",
"focus",
]
}
>
<span
aria-describedby="tooltip"
className="fa fa-bell"
onClick={[Function]}
/>
</OverlayTrigger>
`;
@@ -1,18 +1,22 @@
import onClickOutside from 'react-onclickoutside';
import React from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import { groupBy } from 'lodash';
import { NotificationDrawerWrapper } from 'patternfly-react';
import { translate as __ } from '../../../react_app/common/I18n';
import * as NotificationActions from '../../redux/actions/notifications';
import { noop } from '../../common/helpers';

import './notifications.scss';
import ToggleIcon from './toggleIcon';

import ToggleIcon from './ToggleIcon/ToggleIcon';

class notificationContainer extends React.Component {
componentDidMount() {
const { startNotificationsPolling, data: { url } } = this.props;
const {
startNotificationsPolling,
data: { url },
} = this.props;

startNotificationsPolling(url);
}
@@ -59,28 +63,65 @@ class notificationContainer extends React.Component {

return (
<div>
<ToggleIcon hasUnreadMessages={hasUnreadMessages} onClick={toggleDrawer} />
{isReady &&
isDrawerOpen && (
<NotificationDrawerWrapper
panels={notificationGroups}
expandedPanel={expandedGroup}
togglePanel={expandGroup}
onNotificationAsRead={markAsRead}
onNotificationHide={clearNotification}
onMarkPanelAsRead={markGroupAsRead}
onMarkPanelAsClear={clearGroup}
onClickedLink={clickedLink}
toggleDrawerHide={toggleDrawer}
isExpandable={false}
translations={translations}
/>
)}
<ToggleIcon
hasUnreadMessages={hasUnreadMessages}
onClick={toggleDrawer}
/>
{isReady && isDrawerOpen && (
<NotificationDrawerWrapper
panels={notificationGroups}
expandedPanel={expandedGroup}
togglePanel={expandGroup}
onNotificationAsRead={markAsRead}
onNotificationHide={clearNotification}
onMarkPanelAsRead={markGroupAsRead}
onMarkPanelAsClear={clearGroup}
onClickedLink={clickedLink}
toggleDrawerHide={toggleDrawer}
isExpandable={false}
translations={translations}
/>
)}
</div>
);
}
}

notificationContainer.propTypes = {
data: PropTypes.shape({
url: PropTypes.string.isRequired,
}).isRequired,
isDrawerOpen: PropTypes.bool,
isReady: PropTypes.bool,
notifications: PropTypes.object,
expandedGroup: PropTypes.string,
hasUnreadMessages: PropTypes.bool,
clickedLink: PropTypes.func,
startNotificationsPolling: PropTypes.func,
toggleDrawer: PropTypes.func,
expandGroup: PropTypes.func,
markAsRead: PropTypes.func,
markGroupAsRead: PropTypes.func,
clearNotification: PropTypes.func,
clearGroup: PropTypes.func,
};

notificationContainer.defaultProps = {
isDrawerOpen: false,
isReady: false,
notifications: {},
expandedGroup: null,
hasUnreadMessages: false,
clickedLink: noop,
startNotificationsPolling: noop,
toggleDrawer: noop,
expandGroup: noop,
markAsRead: noop,
markGroupAsRead: noop,
clearNotification: noop,
clearGroup: noop,
};

const mapStateToProps = (state) => {
const {
notifications,
@@ -100,4 +141,7 @@ const mapStateToProps = (state) => {
};
};

export default connect(mapStateToProps, NotificationActions)(onClickOutside(notificationContainer));
export default connect(
mapStateToProps,
NotificationActions,
)(onClickOutside(notificationContainer));

0 comments on commit ba99da2

Please sign in to comment.
You can’t perform that action at this time.