From 7296c05ab8cc816af7c3d55990158efc8a16f6b3 Mon Sep 17 00:00:00 2001 From: Ben Biggs Date: Mon, 24 Jun 2019 15:09:12 -0500 Subject: [PATCH] feat(AlertBanner): add className, onKeyDownClose, closeBtnProps and otherProps to container --- react/src/lib/Alert/index.js | 6 +- react/src/lib/Alert/tests/index.spec.js | 15 ++- react/src/lib/AlertBanner/index.js | 94 +++++++++++++------ .../tests/__snapshots__/index.spec.js.snap | 87 ++++++----------- react/src/lib/AlertBanner/tests/index.spec.js | 75 +++++++++++++++ 5 files changed, 184 insertions(+), 93 deletions(-) diff --git a/react/src/lib/Alert/index.js b/react/src/lib/Alert/index.js index 1bfdee5e0f..c5cdf54a46 100644 --- a/react/src/lib/Alert/index.js +++ b/react/src/lib/Alert/index.js @@ -58,20 +58,20 @@ class Alert extends React.PureComponent { } Alert.defaultProps = { - dismissBtnProps: null, closable: true, + dismissBtnProps: null, message: '', title: '', type: 'info', }; Alert.propTypes = { - /** @prop Props to be passed to dismiss button | null */ - dismissBtnProps: PropTypes.object, /** @prop Optional css class string | '' */ className: PropTypes.string, /** @prop To show/hide Close button of the Alert | true */ closable: PropTypes.bool, + /** @prop Props to be passed to dismiss button | null */ + dismissBtnProps: PropTypes.object, /** @prop Optional Alert message | '' */ message: PropTypes.string, /** @prop Set Alert visibility */ diff --git a/react/src/lib/Alert/tests/index.spec.js b/react/src/lib/Alert/tests/index.spec.js index 5f0eeada72..2ed2c90181 100644 --- a/react/src/lib/Alert/tests/index.spec.js +++ b/react/src/lib/Alert/tests/index.spec.js @@ -15,6 +15,19 @@ describe('tests for ', () => { expect(container.find('.md-alert').length).toEqual(1); }); + it('should pass otherProps to container', () => { + const container = mount(); + + expect(container.find('#testid').exists()).toEqual(true); + }); + + it('should pass className prop', () => { + const container = mount(); + + expect(container.find('.testing').exists()).toEqual(true); + expect(container.find('Alert').hasClass('testing')).toEqual(true); + }); + it('should render title', () => { const container = shallow(); @@ -66,7 +79,7 @@ describe('tests for ', () => { expect(count).toEqual(1); }); - it('should pass otherProps prop', () => { + it('should pass dismissBtnProps prop', () => { const container = mount(); expect(container.find('Button').props().ariaLabel).toEqual('test'); diff --git a/react/src/lib/AlertBanner/index.js b/react/src/lib/AlertBanner/index.js index 447f1319e1..7fb6b1a132 100644 --- a/react/src/lib/AlertBanner/index.js +++ b/react/src/lib/AlertBanner/index.js @@ -5,34 +5,59 @@ import PropTypes from 'prop-types'; import { Icon } from '@momentum-ui/react'; const AlertBanner = props => { - const { show, type, closable, children, onHide } = props; - - const handleKeyPress = e => { - e.preventDefault(); - if (e.which === 32 || e.which === 13) { - return onHide(e); - } else if (e.charCode === 32 || e.charCode === 13) { - return onHide(e); + const { + className, + closable, + closeBtnProps, + children, + onHide, + onKeyDownClose, + show, + type, + ...otherProps + } = props; + + const handleKeyDown = e => { + if ( + e.which === 32 + || e.charCode === 32 + || e.which === 13 + || e.charCode === 13 + ) { + onHide && onHide(e); + e.preventDefault(); } + + onKeyDownClose && onKeyDownClose(e); }; return ( show && ( -
-
-
{children}
- {closable && ( -
- -
- )} +
+
+ {children}
+ {closable && ( +
onHide(e) }} + {...(onHide || onKeyDownClose) && { + onKeyDown: e => handleKeyDown(e), + role: 'button', + tabIndex: 0 + }} + {...closeBtnProps} + > + +
+ )}
) ); @@ -40,22 +65,31 @@ const AlertBanner = props => { AlertBanner.defaultProps = { children: null, - type: 'info', + className: '', closable: false, - onHide: () => {}, + closeBtnProps: null, + onKeyDownClose: null, + onHide: null, + type: 'info', }; AlertBanner.propTypes = { - /** @prop Set AlertBanner visibility */ - show: PropTypes.bool.isRequired, + /** @prop Optional css class string | '' */ + className: PropTypes.string, + /** @prop Sets the visibility of AlertBanner's close button | false */ + closable: PropTypes.bool, + /** @prop Props to be passed to close button | null */ + closeBtnProps: PropTypes.object, /** @prop Children nodes to render inside AccordionHeader | null */ children: PropTypes.node, + /** @prop Invoked when the user presses on the AlertBanner's close button | null */ + onHide: PropTypes.func, + /** @prop Optional callback function invoked on keydown of close button | null */ + onKeyDownClose: PropTypes.func, + /** @prop Set AlertBanner visibility */ + show: PropTypes.bool.isRequired, /** @prop Sets the AlertBanner type | 'info' */ type: PropTypes.oneOf(['info', 'warning', 'error']), - /** @prop Mandatory handler invoked when the user presses on the AlertBanner's close button or hit's the esc key | () => {} */ - onHide: PropTypes.func, - /** @prop Sets the visibility of AlertBanner's close button | false */ - closable: PropTypes.bool, }; AlertBanner.displayName = 'AlertBanner'; diff --git a/react/src/lib/AlertBanner/tests/__snapshots__/index.spec.js.snap b/react/src/lib/AlertBanner/tests/__snapshots__/index.spec.js.snap index 25e8b9d41c..644060442a 100644 --- a/react/src/lib/AlertBanner/tests/__snapshots__/index.spec.js.snap +++ b/react/src/lib/AlertBanner/tests/__snapshots__/index.spec.js.snap @@ -4,8 +4,11 @@ exports[`tests for should match SnapShot 1`] = ` ShallowWrapper { Symbol(enzyme.__root__): [Circular], Symbol(enzyme.__unrendered__): , @@ -23,17 +26,34 @@ ShallowWrapper { "key": undefined, "nodeType": "host", "props": Object { - "children":
+ "children": Array [
-
, - "type": "info", + />, + false, + ], + "className": "md-alert-banner md-alert-banner--info", }, "ref": null, - "rendered": Object { + "rendered": Array [ + Object { + "instance": null, + "key": undefined, + "nodeType": "host", + "props": Object { + "children": null, + "className": "md-alert-banner__text", + }, + "ref": null, + "rendered": null, + "type": "div", + }, + false, + ], + "type": "div", + }, + Symbol(enzyme.__nodes__): Array [ + Object { "instance": null, "key": undefined, "nodeType": "host", @@ -64,57 +84,6 @@ ShallowWrapper { ], "type": "div", }, - "type": "div", - }, - Symbol(enzyme.__nodes__): Array [ - Object { - "instance": null, - "key": undefined, - "nodeType": "host", - "props": Object { - "children":
-
-
, - "type": "info", - }, - "ref": null, - "rendered": Object { - "instance": null, - "key": undefined, - "nodeType": "host", - "props": Object { - "children": Array [ -
, - false, - ], - "className": "md-alert-banner md-alert-banner--info", - }, - "ref": null, - "rendered": Array [ - Object { - "instance": null, - "key": undefined, - "nodeType": "host", - "props": Object { - "children": null, - "className": "md-alert-banner__text", - }, - "ref": null, - "rendered": null, - "type": "div", - }, - false, - ], - "type": "div", - }, - "type": "div", - }, ], Symbol(enzyme.__options__): Object { "adapter": ReactSixteenAdapter { diff --git a/react/src/lib/AlertBanner/tests/index.spec.js b/react/src/lib/AlertBanner/tests/index.spec.js index a79797cfe4..38a0ee0a57 100644 --- a/react/src/lib/AlertBanner/tests/index.spec.js +++ b/react/src/lib/AlertBanner/tests/index.spec.js @@ -9,6 +9,25 @@ describe('tests for ', () => { expect(container).toMatchSnapshot(); }); + it('should pass className prop', () => { + const container = mount(); + + expect(container.find('.testing').exists()).toEqual(true); + expect(container.find('AlertBanner').hasClass('testing')).toEqual(true); + }); + + it('should pass closeBtnProps', () => { + const container = mount(); + + expect(container.find('.md-alert-banner__close').props()['aria-label']).toEqual('test'); + }); + + it('should pass otherProps to container', () => { + const container = mount(); + + expect(container.find('#testid').exists()).toEqual(true); + }); + it('should default to type "info"', () => { const container = shallow(); @@ -49,4 +68,60 @@ describe('tests for ', () => { container.find('.md-alert-banner__close').simulate('click'); expect(onClose).toHaveBeenCalled(); }); + + it('should close the banner on keyDown of Space', () => { + const onClose = jest.fn(); + + const container = mount( + + ShowBanner + + ); + + container.find('.md-alert-banner__close').simulate('keyDown', { which: 13 }); + expect(onClose).toHaveBeenCalled(); + container.find('.md-alert-banner__close').simulate('keyDown', { charCode: 13 }); + expect(onClose).toHaveBeenCalledTimes(2); + }); + + it('should close the banner on keyDown of Enter', () => { + const onClose = jest.fn(); + + const container = mount( + + ShowBanner + + ); + + container.find('.md-alert-banner__close').simulate('keyDown', { which: 32 }); + expect(onClose).toHaveBeenCalled(); + container.find('.md-alert-banner__close').simulate('keyDown', { charCode: 32 }); + expect(onClose).toHaveBeenCalledTimes(2); + }); + + it('should do nothing on keyDown of letter d', () => { + const onClose = jest.fn(); + + const container = mount( + + ShowBanner + + ); + + container.find('.md-alert-banner__close').simulate('keyDown', { which: 100 }); + expect(onClose).toHaveBeenCalledTimes(0); + }); + + it('should pass onKeyDownClose function', () => { + const onKeyDown = jest.fn(); + + const container = mount( + + ShowBanner + + ); + + container.find('.md-alert-banner__close').simulate('keyDown', { which: 100 }); + expect(onKeyDown).toHaveBeenCalled(); + }); });