FFE-31 Tests for context-message

dev/dev-app.js

@@ -12,7 +12,9 @@ import {
 render(
     <div className="ffe-body-text">
         <div style={{margin: '25px 0'}}>
-            <ContextInfoMessage>
+            <ContextInfoMessage
+                header='Info'
+            >
                 Her kan det stå en nyhet eller informasjon som ikke er kritisk.
                 Her kan det stå en nyhet eller informasjon som ikke er kritisk.
                 Her kan det stå en nyhet eller informasjon som ikke er kritisk.

package.json

@@ -24,7 +24,7 @@
   "peerDependencies": {
     "ffe-core": "^8.1.2",
     "ffe-icons-react": "^2.1.0",
-    "ffe-context-message": "^0.0.1"
+    "ffe-context-message": "^1.0.0"
   },
   "devDependencies": {
     "babel-cli": "^6.10.1",
@@ -56,6 +56,7 @@
     "react": "^15.1.0",
     "react-addons-test-utils": "^15.1.0",
     "react-dom": "^15.1.0",
+    "sinon": "^1.17.6",
     "style-loader": "^0.13.1"
   },
   "publishConfig": {

src/base.js

@@ -9,15 +9,16 @@ export default class Base extends Component {
         this.close = this.close.bind(this);
     }
 
+    static closeDurationMs : 50;
+
     close() {
-        const {closeDurationMs, onCloseStart, onCloseEnd} = this.props;
+        const {onClosed} = this.props;
         const element = findDOMNode(this.refs.self);
         element.style.height = `${element.offsetHeight}px`;
-        onCloseStart();
         setTimeout(() => {
             element.style.height = 0;
-            onCloseEnd();
-        }, closeDurationMs);
+            onClosed();
+        }, Base.closeDurationMs);
     }
 
     render() {
@@ -45,30 +46,28 @@ export default class Base extends Component {
                         {header && <header className='ffe-h5'>{header}</header>}
                         {children}
                     </div>
-                    <div
-                        className='ffe-context-message__close'
-                        role='button'
-                        aria-label='Lukk'
-                        tabIndex='0'
-                        onClick={this.close}
-                    >
-                        <CloseIcon className='ffe-context-message__close-svg'/>
+                    <div className='ffe-context-message__close'>
+                        <button
+                            className='ffe-context-message__close-button'
+                            tabIndex='0'
+                            aria-label='Lukk'
+                            onClick={this.close}
+                        >
+                            <CloseIcon className='ffe-context-message__close-button-svg'/>
+                        </button>
                     </div>
                 </div>
             </div>
         );
     }
-
 }
 
 Base.propTypes = {
     children: PropTypes.node.isRequired,
     header: PropTypes.string,
     messageType: PropTypes.oneOf(['info', 'tip']).isRequired,
     icon: PropTypes.element.isRequired,
-    // style: PropTypes.object,
-    closeDurationMs: PropTypes.number.isRequired,
-    onCloseStart: PropTypes.func.isRequired,
-    onCloseEnd: PropTypes.func.isRequired,
+    style: PropTypes.object,
+    onClosed: PropTypes.func,
 };
 

src/context-info-message.js

@@ -1,16 +1,15 @@
 import React, {PropTypes} from 'react';
-import InfoCircleIcon from 'ffe-icons-react/info-sirkel-ikon';
+import InfoIcon from 'ffe-icons-react/info-ikon';
 import Base from './base';
 
-export default function ContextInfoMessage({style, children, icon, closeDurationMs, onCloseStart, onCloseEnd}) {
+export default function ContextInfoMessage({style, children, header, icon, onClosed}) {
     return (
         <Base
             messageType='info'
             icon={icon}
+            header={header}
             style={style}
-            closeDurationMs={closeDurationMs}
-            onCloseStart={onCloseStart}
-            onCloseEnd={onCloseEnd}
+            onCloseed={onClosed}
         >
             {children}
         </Base>
@@ -19,17 +18,13 @@ export default function ContextInfoMessage({style, children, icon, closeDuration
 
 ContextInfoMessage.propTypes = {
     children: PropTypes.node.isRequired,
+    header : PropTypes.string,
     style: PropTypes.object,
-    closeDurationMs: PropTypes.number,
-    onCloseStart: PropTypes.func.isRequired,
-    onCloseEnd: PropTypes.func.isRequired,
+    onClosed: PropTypes.func,
 };
 
 ContextInfoMessage.defaultProps = {
-    icon: <InfoCircleIcon />,
-    closeDurationMs: 50,
-    onCloseStart: ()=> {
-    },
-    onCloseEnd: ()=> {
+    icon: <InfoIcon />,
+    onClosed: ()=> {
     },
 };

src/context-tip-message.js

@@ -1,33 +1,30 @@
 import React, {PropTypes} from 'react';
-import InfoCircleIcon from 'ffe-icons-react/info-sirkel-ikon';
+import InfoIcon from 'ffe-icons-react/info-ikon';
 import Base from './base';
 
-export default function ContextTipMessage({style, children, icon, closeDurationMs, onCloseStart, onCloseEnd}) {
+export default function ContextInfoMessage({style, children, header, icon, onClosed}) {
     return (
         <Base
             messageType='tip'
             icon={icon}
+            header={header}
             style={style}
-            closeDurationMs={closeDurationMs}
-            onCloseStart={onCloseStart}
-            onCloseEnd={onCloseEnd}
+            onCloseed={onClosed}
         >
             {children}
         </Base>
     );
 }
 
-ContextTipMessage.propTypes = {
+ContextInfoMessage.propTypes = {
     children: PropTypes.node.isRequired,
+    header : PropTypes.string,
     style: PropTypes.object,
-    closeDurationMs: PropTypes.number,
+    onClosed: PropTypes.func,
 };
 
-ContextTipMessage.defaultProps = {
-    icon: <InfoCircleIcon />,
-    closeDurationMs: 50,
-    onCloseStart: ()=> {
-    },
-    onCloseEnd: ()=> {
+ContextInfoMessage.defaultProps = {
+    icon: <InfoIcon />,
+    onClosed: ()=> {
     },
 };

src/test/context-message.spec.js

@@ -0,0 +1,89 @@
+import React, {cloneElement} from 'react';
+import {shallow, mount} from 'enzyme';
+import sinon from 'sinon';
+import {
+    ContextInfoMessage,
+    ContextTipMessage,
+} from '../';
+import Base from '../base';
+import InfoCircleIcon from 'ffe-icons-react/info-sirkel-ikon';
+
+
+describe('Test Base', () => {
+    let wrapper;
+    let element;
+
+    beforeEach(() => {
+        element =
+            <Base
+                messageType='tip'
+                icon={<InfoCircleIcon />}
+            >
+                <p>content</p>
+            </Base>;
+        wrapper = mount(
+            element
+        )
+    });
+
+    it('renders with provided content', () => {
+        const content = wrapper.find('.ffe-context-message__content').find('p');
+        expect(content.length).to.be(1);
+        expect(content.text()).to.be('content');
+    });
+
+    it('renders with provided header', () => {
+        const header = 'header';
+        wrapper = mount(cloneElement(element, {header}));
+        const headerText = wrapper.find('.ffe-context-message__content').find('header');
+        expect(headerText.length).to.be(1);
+        expect(headerText.text()).to.be(header);
+    });
+
+    it('renders provided styles to outermost container', () => {
+        const component = shallow(cloneElement(element, {style: {marginTop: '40px'}}));
+        expect(component.props().style.marginTop).to.be('40px');
+    });
+
+    it('closes itself after a click on the close button', done => {
+        const onClickSpy = sinon.spy();
+        wrapper = mount(cloneElement(element, {onClosed: onClickSpy}));
+        wrapper.find('.ffe-context-message__close-button').simulate('click');
+        setTimeout(() => {
+            const component = wrapper.find('.ffe-context-message-wrapper');
+            expect(component.get(0).style.getPropertyValue('height')).to.be('0px');
+            expect(onClickSpy.calledOnce);
+            done();
+        }, 100);
+    });
+});
+
+describe('Test ContextInfoMessage', () => {
+    const wrapper = mount(
+        <ContextInfoMessage
+            icon={<InfoCircleIcon />}
+        >
+            <p>content</p>
+        </ContextInfoMessage>
+    );
+
+    it('creates ContextInfoMessage', () => {
+        const component = wrapper.find('.ffe-context-message-wrapper');
+        expect(component.hasClass('ffe-context-message-wrapper--info')).to.be(true);
+    });
+});
+
+describe('Test ContextTipMessage', () => {
+    const wrapper = mount(
+        <ContextTipMessage
+            icon={<InfoCircleIcon />}
+        >
+            <p>content</p>
+        </ContextTipMessage>
+    );
+
+    it('creates ContextInfoMessage', () => {
+        const component = wrapper.find('.ffe-context-message-wrapper');
+        expect(component.hasClass('ffe-context-message-wrapper--tip')).to.be(true);
+    });
+});