COMPASS-4409: Adds icon click handler to modal status message (#25)

Author: rose-m

packages/hadron-react-components/src/modal-status-message.jsx

@@ -1,11 +1,20 @@
-import React from 'react';
 import PropTypes from 'prop-types';
+import React from 'react';
 import { Panel } from 'react-bootstrap';
 
 /**
  * Component for the status message.
  */
 class ModalStatusMessage extends React.Component {
+  /**
+   * Called when the icon of the message is clicked.
+   * @param {Event} evt
+   */
+  onIconClickHandler(evt) {
+    evt.preventDefault();
+    evt.stopPropagation();
+    this.props.onIconClickHandler();
+  }
 
   /**
    * Render the status message.
@@ -19,9 +28,16 @@ class ModalStatusMessage extends React.Component {
       <Panel className={classPrefix}>
         <div className="row">
           <div className="col-md-1">
-            <i
-              className={`fa fa-${this.props.icon} ${classPrefix}-icon`}
-              aria-hidden="true"></i>
+            {this.props.onIconClickHandler
+              ? (
+                <i
+                  className={`fa fa-${this.props.icon} ${classPrefix}-icon ${classPrefix}-icon-interactible`}
+                  onClick={this.onIconClickHandler.bind(this)} />
+              ) : (
+                <i
+                  className={`fa fa-${this.props.icon} ${classPrefix}-icon`}
+                  aria-hidden="true" />
+              )}
           </div>
           <div className="col-md-11">
             <p
@@ -40,7 +56,8 @@ ModalStatusMessage.displayName = 'ModalStatusMessage';
 ModalStatusMessage.propTypes = {
   icon: PropTypes.string.isRequired,
   message: PropTypes.string.isRequired,
-  type: PropTypes.string.isRequired
+  type: PropTypes.string.isRequired,
+  onIconClickHandler: PropTypes.func
 };
 
 export default ModalStatusMessage;

packages/hadron-react-components/test/modal-status-message.test.jsx

@@ -1,40 +1,60 @@
-import React from 'react';
 import { expect } from 'chai';
-import { shallow } from 'enzyme';
+import { mount, shallow } from 'enzyme';
+import React from 'react';
+import sinon from 'sinon';
 import { ModalStatusMessage } from '../';
 
 describe('<ModalStatusMessage />', () => {
-  const component = shallow(
-    <ModalStatusMessage icon="error" message="bad things" type="error" />
-  );
-  const iconColumn = component.find('.col-md-1');
-  const messageColumn = component.find('.col-md-11');
-
-  it('sets the base class', () => {
-    expect(component.hasClass('modal-status-error')).to.equal(true);
-  });
-
-  it('sets the child div', () => {
-    expect(component.find('.row')).to.have.length(1);
-  });
-
-  it('sets the icon column', () => {
-    expect(iconColumn).to.have.length(1);
+  context('when just showing some content', () => {
+    const component = shallow(
+      <ModalStatusMessage icon="error" message="bad things" type="error" />
+    );
+    const iconColumn = component.find('.col-md-1');
+    const messageColumn = component.find('.col-md-11');
+
+    it('sets the base class', () => {
+      expect(component.hasClass('modal-status-error')).to.equal(true);
+    });
+
+    it('sets the child div', () => {
+      expect(component.find('.row')).to.have.length(1);
+    });
+
+    it('sets the icon column', () => {
+      expect(iconColumn).to.have.length(1);
+    });
+
+    it('sets the message column', () => {
+      expect(messageColumn).to.have.length(1);
+    });
+
+    it('sets the icon', () => {
+      expect(iconColumn.find('.fa-error')).to.have.length(1);
+    });
+
+    it('sets the message paragraph', () => {
+      expect(messageColumn.find('.modal-status-error-message')).to.have.length(1);
+    });
+
+    it('sets the message text', () => {
+      expect(messageColumn.find('.modal-status-error-message').text()).to.equal('bad things');
+    });
+
+    it('does not show an interactible icon without click handler', () => {
+      expect(component.find('.modal-status-error-icon-interactible')).not.to.be.present;
+    });
   });
 
-  it('sets the message column', () => {
-    expect(messageColumn).to.have.length(1);
-  });
+  context('when providing an icon clicked handler', () => {
+    const clickSpy = sinon.spy();
+    const component = mount(
+      <ModalStatusMessage icon="times" message="An Error Occurred..." type="error" onIconClickHandler={clickSpy} />
+    );
 
-  it('sets the icon', () => {
-    expect(iconColumn.find('.fa-error')).to.have.length(1);
-  });
-
-  it('sets the message paragraph', () => {
-    expect(messageColumn.find('.modal-status-error-message')).to.have.length(1);
-  });
+    it('is called when clicked', () => {
+      component.find('.modal-status-error-icon-interactible').first().simulate('click');
 
-  it('sets the message text', () => {
-    expect(messageColumn.find('.modal-status-error-message').text()).to.equal('bad things');
+      expect(clickSpy.called).to.be.true;
+    });
   });
 });