fix: ∆

.gitignore

@@ -9,3 +9,4 @@ build/dev*
 build/dist*
 npm_scripts/*.js
 yarn.lock
+coverage

demo/index.html

@@ -11,7 +11,7 @@ <h1>Alerts Demo</h1>
     <h4>Instance 1</h4>
     <div id="demo-target1"></div>
 
-    <button onclick="buttonHandler('succes')">Success Alert!</button>
+    <button onclick="buttonHandler('success')">Success Alert!</button>
     <br />
     <br />
     <button onclick="buttonHandler('error')">Error Alert!</button>

main.js

@@ -1,8 +1,9 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import ComponentOwner from './src/js/component-owner';
+import ReactDOM         from 'react-dom';
+import AlertList        from './src/js/AlertList';
 import { IntlProvider } from 'react-intl';
 
+import './src/scss/component-specific.scss';
+
 export default class AlertsComponent {
 
   constructor(config) {
@@ -17,7 +18,7 @@ export default class AlertsComponent {
 
     ReactDOM.render(
       <IntlProvider locale={locale}>
-          <ComponentOwner data={config} />
+          <AlertList data={config} />
       </IntlProvider>,
       document.getElementById(config.elementId)
     );

package.json

@@ -8,7 +8,7 @@
     "dev": "node ./npm_scripts/dev.js",
     "start": "npm run dev",
     "pretest": "node ./npm_scripts/pretest.js",
-    "test": "node ./npm_scripts/test.js",
+    "test": "jest --coverage",
     "build": "node ./npm_scripts/build.js",
     "lint": "node ./npm_scripts/lint.js",
     "gen-changelog": "node ./npm_scripts/gen-changelog.js",
@@ -24,13 +24,35 @@
     "type": "git",
     "url": "https://github.com/Pearson-Higher-Ed/alerts"
   },
+  "jest": {
+    "moduleFileExtensions": [
+      "jsx",
+      "js",
+      "json"
+    ],
+    "collectCoverageFrom": [
+      "**/src/js/AlertList.js",
+      "**/src/js/Alert.js"
+    ],
+    "coverageThreshold": {
+      "global": {
+        "lines": 80
+      }
+    },
+    "testPathIgnorePatterns": [
+      "<rootDir>/(build|node_modules|demo|fonts|npm_scripts|translations|coverage)/"
+    ],
+    "testEnvironment": "node",
+    "verbose": true
+  },
   "dependencies": {
     "react-intl": "~2.0.1"
   },
   "devDependencies": {
     "@pearson-components/npm-scripts": "^0.3.7",
     "babel-core": "~6.3.17",
     "babel-eslint": "~4.1.6",
+    "babel-jest": "^18.0.0",
     "babel-loader": "~6.2.0",
     "babel-polyfill": "~6.7.4",
     "babel-preset-es2015": "~6.3.13",
@@ -40,6 +62,7 @@
     "colors": "~1.1.2",
     "conventional-changelog": "~1.1.0",
     "css-loader": "~0.23.0",
+    "enzyme": "^2.7.0",
     "eslint": "~1.10.3",
     "eslint-loader": "~1.1.1",
     "eslint-plugin-react": "~3.16.1",
@@ -49,7 +72,8 @@
     "fs-extra": "^1.0.0",
     "ignore-styles": "~5.0.1",
     "intl": "~1.1.0",
-    "jsdom": "~8.5.0",
+    "jest": "^18.1.0",
+    "jsdom": "^8.5.0",
     "json-loader": "~0.5.4",
     "mocha": "~2.4.5",
     "node-sass": "~3.7.0",

src/js/component-owner.js → src/js/AlertList.js

@@ -1,30 +1,23 @@
 import React, { Component }      from 'react';
-import { intlShape, injectIntl } from 'react-intl';
-import Alert                     from './alert';
-import Helper                    from './helper';
+import Alert                     from './Alert';
 
-import '../scss/component-specific.scss';
 
 
-
-class ComponentOwner extends Component {
-
-  static propTypes = { intl: intlShape.isRequired }
+class AlertList extends Component {
 
 
   constructor(props) {
     super(props);
 
     this.state = {
-      opacity      : 0,
+      opacity      : 1,
       closeProp    : '',
-      alertType    : '',
-      alertMessage : '',
       alertList    : []
     };
 
     this.handleClose  = _handleClose.bind(this);
     this.renderAlert  = _renderAlert.bind(this);
+    this.whichTransitionEvent = _whichTransitionEvent.bind(this);
 
   }
 
@@ -39,7 +32,8 @@ class ComponentOwner extends Component {
   render () {
 
     const { alertList } = this.state;
-    return alertList.length > 0 ? this.renderAlert(alertList) : null;
+    return <ul className={"alertList"}>{alertList.length > 0 ? this.renderAlert(alertList) : null}</ul>;
+
 
   }
 
@@ -48,7 +42,7 @@ class ComponentOwner extends Component {
 
 
 
-export default injectIntl(ComponentOwner);
+export default AlertList;
 
 
 
@@ -58,8 +52,9 @@ function _renderAlert (alertList) {
   alertList.forEach((alert, index) => {
     alertsToRender.push(
         <Alert
+          key            = {`pe-alert-${alert.alertType}-${index}`}
           index          = {index}
-          opacity        = {1}
+          opacity        = {this.state.opacity}
           closeTitleProp = {this.state.closeProp}
           alertType      = {alert.alertType}
           alertMessage   = {alert.alertMessage}
@@ -68,26 +63,37 @@ function _renderAlert (alertList) {
       )
   })
 
-  return <ul>{alertsToRender}</ul>;
+  return alertsToRender;
 
 }
 
+function _whichTransitionEvent () {
 
-function _handleClose() {
+  let transition;
 
-  const alert1 = document.getElementById('demo-target1');
+  const transitions = {
+    transition: 'animationend',
+    WebkitTransition: 'webkitAnimationEnd'
+  };
 
-  const removeEL = () => {
-    if (this.state.alertIsOpen === false) {
-      alert1.removeEventListener(Helper.whichTransitionEvent(), removeEL);
+  Object.keys(transitions).forEach(transitionKey => {
+    if (document.getElementById('demo-target1').style[transitionKey] !== undefined) {
+      transition = transitions[transitionKey];
     }
-  }
+  });
+
+  return transition;
+
+}
+
+
+function _handleClose() {
+
+  this.whichTransitionEvent();
 
   this.setState({
     closeProp    : 'close-title-animation',
-    opacity      : 0,
-    alertType    : '',
-    alertMessage : ''
+    opacity      : 0
   });
 
 };

src/js/alert.js

@@ -3,21 +3,23 @@ import Icon  from './icon';
 
 const Alert = (props) => (
   <li
-    key       = {props.index}
     className = {`pe-alert pe-template__static-small ${props.closeTitleProp}`}
-    id        = {`${props.alertType}`}
+    id        = {`alert-${props.alertType}-${props.index}`}
     role      = "alert"
-    style     = {{opacity: props.opacity}}>
+    style     = {{opacity: props.opacity}}
+    >
 
-    <strong className={`pe-label ${props.alertType}-title`}>{props.alertType}</strong>
+    <strong className={`pe-label ${props.alertType}-title`}>
+      {props.alertType}
+    </strong>
 
-      <button className="close-title" onClick={props.handleClose} aria-label="Close alert">
-        <Icon name="remove-lg-18" />
-      </button><br/>
+    <button className="close-title" onClick={props.handleClose} aria-label="Close alert">
+      <Icon name="remove-lg-18" />
+    </button><br/>
 
-      <span className="pe-copy">
-        {props.alertMessage}
-      </span>
+    <span className="pe-copy">
+      {props.alertMessage}
+    </span>
 
   </li>
 )

src/scss/component-specific.scss

@@ -3,6 +3,11 @@
 
 .pe-alert {
   margin-top: 30px;
+  list-style:none;
+}
+
+.alertList {
+  right: 0;
 }
 
 .pe-template__static-small {
@@ -15,11 +20,11 @@
   animation-duration: .3s;
 }
 
-#Error {
+li[id^="alert-error"] {
   border-top: $alert-border-top $pe-color-strawberry-red;
 }
 
-#Success {
+li[id^="alert-success"] {
   border-top: $alert-border-top $pe-color-digital-grass-green;
 }
 
@@ -33,11 +38,11 @@ svg {
   100% { top: 50px; }
 }
 
-.Error-title {
+.error-title {
   color: $pe-color-strawberry-red;
 }
 
-.Success-title {
+.success-title {
   color: $pe-color-digital-grass-green;
 }
 

test/__tests__/AlertList-test.js

@@ -0,0 +1,24 @@
+import expect      from 'expect';
+import expectJSX   from 'expect-jsx';
+import React       from 'react';
+import TestUtils   from 'react-addons-test-utils';
+import AlertList   from '../../src/js/AlertList';
+import { shallow } from 'enzyme';
+import { jsdom }   from 'jsdom';
+
+expect.extend(expectJSX);
+
+describe('AlertList', () => {
+  describe('Basic AlertList Test', () => {
+    beforeEach(function() {
+      global.window = jsdom(undefined, { url: 'about:blank' }).defaultView;
+      global.document = global.window.document;
+      this.wrapper = shallow(<AlertList>Test Alert</AlertList>);
+    });
+
+    it('should render the Alert', function() {
+      expect(this.wrapper.node.type).toEqual('ul');
+    });
+
+  });
+});