fix: ∆

Pearson-Higher-Ed · Jan 13, 2017 · 4dff8b0 · 4dff8b0
1 parent a048da6
commit 4dff8b0
Show file tree

Hide file tree

Showing 5 changed files with 110 additions and 95 deletions.
diff --git a/src/js/AlertList.js b/src/js/AlertList.js
@@ -2,98 +2,48 @@ import React, { Component } from 'react';
 import Alert                from './Alert';
 
 
-
 class AlertList extends Component {
 
-
   constructor(props) {
     super(props);
 
-    this.state = {
-      alertList : []
-    };
-
-    this.renderAlert   = _renderAlert.bind(this);
-    this.handleClose   = _handleClose.bind(this);
-    this.generateAlert = _generateAlert.bind(this);
-
-  }
-
-
-  componentWillMount() {
-    document.body.addEventListener( 'triggerAlert',
-      e => this.setState({ alertList:this.state.alertList.concat(e.detail.alertList) })
-    );
+    this.state = { alertList : [] };
 
-    document.body.addEventListener( 'clearAlert',
-      () => this.setState({ alertList:[] })
-    );
-  }
+    this.renderAlert = _renderAlert.bind(this);
+    this.handleClose = _handleClose.bind(this);
 
-  componentDidMount() {
-    this.state.alertList = this.state.alertList.filter((e, index, a) => a[index] !== a[this.state.currentIndex]);
+    document.body.addEventListener( 'triggerAlert', e => this.setState( {alertList:this.state.alertList.concat(e.detail.alertList)} ) );
+    document.body.addEventListener( 'clearAlert', () => this.setState({ alertList:[] }) );
   }
 
-
   render () {
+    const { alertList, closeIndex } = this.state;
 
-    const { alertList } = this.state;
-    return <ul className={"alertList"}>{alertList.length > 0 ? this.renderAlert(alertList) : null}</ul>;
-
+    return <ul className="alertList">{this.renderAlert(alertList, closeIndex)}</ul>;
   }
 
-
 }
 
 
-
 export default AlertList;
 
 
-
 function _handleClose (currentIndex) {
-
-  this.setState({
-    dismissAlert      : 'close-title-animation',
-    currentCloseIndex : currentIndex
-  });
-
+  this.setState({ closeIndex : currentIndex });
 }
 
-
-function _renderAlert (alertList) {
-
-  const alertsToRender = [];
-
-  alertList.forEach((alert, index) => {
-    if (this.state.currentCloseIndex === index) {
-      const dismiss = this.state.dismissAlert;
-      this.generateAlert(alert, dismiss, index, alertsToRender);
-
-    } else {
-      const dismiss = '';
-      this.generateAlert(alert, dismiss, index, alertsToRender);
-    }
-
-  })
-
-  this.state.dismissAlert = '';
-
-
-  return alertsToRender;
-
-}
-
-
-function _generateAlert (alert, dismiss, index, alertsToRender) {
-  alertsToRender.push(
-      <Alert
-        index        = {index}
-        key          = {index}
-        alertType    = {alert.alertType}
-        alertMessage = {alert.alertMessage}
-        dismissAlert = {dismiss}
-        handleClose  = {this.handleClose}
-      />
-  )
+function _renderAlert (alertList, closeIndex) {
+  const alertListFiltered = alertList.filter((e, index) => index !== closeIndex)
+  this.state.closeIndex   = undefined;
+  this.state.alertList    = alertListFiltered;
+  return alertListFiltered.map((alert, index) =>
+    <Alert
+      index        = {index}
+      closeIndex   = {closeIndex}
+      key          = {index}
+      alertType    = {alert.alertType}
+      alertMessage = {alert.alertMessage}
+      handleClose  = {this.handleClose}
+    />
+  );
 }
diff --git a/src/js/alert.js b/src/js/alert.js
@@ -2,27 +2,27 @@ import React from 'react';
 import Icon  from './icon';
 
 
-const Alert = (props) => (
-      <li
-        className = {`pe-alert ${props.dismissAlert}`}
-        id        = {`alert-${props.alertType}-${props.index}`}
-        role      = "alert"
-        >
-
-        <strong className={`pe-label ${props.alertType}-title`}>
-          {props.alertType}
-        </strong>
-
-        <button className="close-title" onClick={() => props.handleClose(props.index)} aria-label="Close alert">
-          <Icon name="remove-lg-18" />
-        </button><br/>
-
-        <span className="pe-copy">
-          {props.alertMessage}
-        </span>
-
-      </li>
-    )
+const Alert = (props) =>  (
+        <li
+          className = {(props.index !== props.closeIndex) ? `pe-alert` : `pe-alert pe-alert close-title-animation`}
+          id        = {`alert-${props.alertType}-${props.index}`}
+          role      = "alert"
+          >
+
+          <strong className={`pe-label ${props.alertType}-title`}>
+            {props.alertType}
+          </strong>
+
+          <button className="close-title" onClick={() => props.handleClose(props.index)} aria-label="Close alert">
+            <Icon name="remove-lg-18" />
+          </button><br/>
+
+          <span className="pe-copy">
+            {props.alertMessage}
+          </span>
+
+        </li>
+      )
 
 
 

diff --git a/src/scss/component-specific.scss b/src/scss/component-specific.scss
@@ -33,7 +33,7 @@ svg {
 }
 
 @keyframes openAlert {
-  0% { top: -500px; }
+  0% { top: -700px; }
   100% { top: 0px; }
 }
 

diff --git a/test/__tests__/Alert-test.js b/test/__tests__/Alert-test.js
@@ -0,0 +1,65 @@
+import expect             from 'expect';
+import expectJSX          from 'expect-jsx';
+import React              from 'react';
+import { createRenderer } from 'react-addons-test-utils';
+import Alert              from '../../src/js/Alert';
+import Icon               from '../../src/js/icon';
+import { shallow }        from 'enzyme';
+import { jsdom }          from 'jsdom';
+
+expect.extend(expectJSX);
+
+describe('Alert', () => {
+  describe('Basic Alert Test', () => {
+    beforeEach(function() {
+      global.window = jsdom(undefined, { url: 'about:blank' }).defaultView;
+      global.document = global.window.document;
+      this.wrapper = shallow(<Alert>Test Alert</Alert>);
+    });
+
+    it('should render the Alert', function() {
+      expect(this.wrapper.node.type).toEqual('li');
+    });
+
+    it('should render Alert', () => {
+
+    const index = 1;
+    const closeIndex = 1;
+    const alertType = 'success';
+    const alertMessage = 'hi';
+    const handleClose = () => {};
+    const hasClicked = false;
+
+    let renderer = createRenderer();
+
+    renderer.render(<Alert
+      index        = {index}
+      closeIndex   = {closeIndex}
+      key          = {index}
+      alertType    = {alertType}
+      alertMessage = {alertMessage}
+      handleClose  = {handleClose}
+    />);
+
+    let actualElement = renderer.getRenderOutput();
+    let actualElementClicked = renderer.getRenderOutput().props.onClick();
+
+    // expect(actualElement).toEqualJSX(
+    //   <li
+    //     className = {(index !== closeIndex) ? `pe-alert` : `pe-alert pe-alert close-title-animation`}
+    //     id        = {`alert-${alertType}-${index}`}
+    //     role      = "alert">
+    //     <strong className={`pe-label ${alertType}-title`}>{alertType}</strong>
+    //     <button className="close-title" onClick={handleClose} aria-label="Close alert">
+    //       <Icon name="remove-lg-18" />
+    //     </button><br/>
+    //     <span className="pe-copy">{alertMessage}</span>
+    //
+    //   </li>
+    // );
+
+
+  });
+
+  });
+});
diff --git a/test/__tests__/AlertList-test.js b/test/__tests__/AlertList-test.js
@@ -16,7 +16,7 @@ describe('AlertList', () => {
       this.wrapper = shallow(<AlertList>Test Alert</AlertList>);
     });
 
-    it('should render the Alert', function() {
+    it('should render the AlertList', function() {
       expect(this.wrapper.node.type).toEqual('ul');
     });