couchdb-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From gar...@apache.org
Subject [06/27] fauxton commit: updated refs/heads/master to 0ca35da
Date Tue, 31 May 2016 07:58:34 GMT
http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/0ca35da7/app/addons/fauxton/notifications/notifications.react.jsx
----------------------------------------------------------------------
diff --git a/app/addons/fauxton/notifications/notifications.react.jsx b/app/addons/fauxton/notifications/notifications.react.jsx
index a307bf7..a8f7814 100644
--- a/app/addons/fauxton/notifications/notifications.react.jsx
+++ b/app/addons/fauxton/notifications/notifications.react.jsx
@@ -10,449 +10,442 @@
 // License for the specific language governing permissions and limitations under
 // the License.
 
-define([
-  '../../../app',
-  '../../../core/api',
-  'react',
-  'react-dom',
-  './actions',
-  './stores',
-  '../components.react',
-
-  'velocity-react',
-  "velocity-animate/velocity",
-  "velocity-animate/velocity.ui"
-],
-
-function (app, FauxtonAPI, React, ReactDOM, Actions, Stores, Components, VelocityReact) {
-
-  var store = Stores.notificationStore;
-  var Clipboard = Components.Clipboard;
-  var VelocityComponent = VelocityReact.VelocityComponent;
-
-
-  // The one-stop-shop for Fauxton notifications. This controller handler the header notifications and the rightmost
-  // notification center panel
-  var NotificationController = React.createClass({
-
-    getInitialState: function () {
-      return this.getStoreState();
-    },
-
-    getStoreState: function () {
-      return {
-        notificationCenterVisible: store.isNotificationCenterVisible(),
-        notificationCenterFilter: store.getNotificationFilter(),
-        notifications: store.getNotifications()
-      };
-    },
-
-    componentDidMount: function () {
-      store.on('change', this.onChange, this);
-    },
-
-    componentWillUnmount: function () {
-      store.off('change', this.onChange);
-    },
-
-    onChange: function () {
-      if (this.isMounted()) {
-        this.setState(this.getStoreState());
-      }
-    },
-
-    render: function () {
-      return (
-        <div>
-          <GlobalNotifications
-            notifications={this.state.notifications} />
-          <NotificationCenterPanel
-            visible={this.state.notificationCenterVisible}
-            filter={this.state.notificationCenterFilter}
-            notifications={this.state.notifications} />
-        </div>
-      );
+import app from "../../../app";
+import FauxtonAPI from "../../../core/api";
+import React from "react";
+import ReactDOM from "react-dom";
+import Actions from "./actions";
+import Stores from "./stores";
+import Components from "../components.react";
+import VelocityReact from "velocity-react";
+import "velocity-animate/velocity";
+import "velocity-animate/velocity.ui";
+
+var store = Stores.notificationStore;
+var Clipboard = Components.Clipboard;
+var VelocityComponent = VelocityReact.VelocityComponent;
+
+
+// The one-stop-shop for Fauxton notifications. This controller handler the header notifications and the rightmost
+// notification center panel
+var NotificationController = React.createClass({
+
+  getInitialState: function () {
+    return this.getStoreState();
+  },
+
+  getStoreState: function () {
+    return {
+      notificationCenterVisible: store.isNotificationCenterVisible(),
+      notificationCenterFilter: store.getNotificationFilter(),
+      notifications: store.getNotifications()
+    };
+  },
+
+  componentDidMount: function () {
+    store.on('change', this.onChange, this);
+  },
+
+  componentWillUnmount: function () {
+    store.off('change', this.onChange);
+  },
+
+  onChange: function () {
+    if (this.isMounted()) {
+      this.setState(this.getStoreState());
     }
-  });
+  },
+
+  render: function () {
+    return (
+      <div>
+        <GlobalNotifications
+          notifications={this.state.notifications} />
+        <NotificationCenterPanel
+          visible={this.state.notificationCenterVisible}
+          filter={this.state.notificationCenterFilter}
+          notifications={this.state.notifications} />
+      </div>
+    );
+  }
+});
 
 
-  var GlobalNotifications = React.createClass({
-    propTypes: {
-      notifications: React.PropTypes.array.isRequired
-    },
+var GlobalNotifications = React.createClass({
+  propTypes: {
+    notifications: React.PropTypes.array.isRequired
+  },
 
-    componentDidMount: function () {
-      $(document).on('keydown.notificationClose', this.onKeyDown);
-    },
+  componentDidMount: function () {
+    $(document).on('keydown.notificationClose', this.onKeyDown);
+  },
 
-    componentWillUnmount: function () {
-      $(document).off('keydown.notificationClose', this.onKeyDown);
-    },
+  componentWillUnmount: function () {
+    $(document).off('keydown.notificationClose', this.onKeyDown);
+  },
 
-    onKeyDown: function (e) {
-      var code = e.keyCode || e.which;
-      if (code === 27) {
-        Actions.hideAllVisibleNotifications();
-      }
-    },
+  onKeyDown: function (e) {
+    var code = e.keyCode || e.which;
+    if (code === 27) {
+      Actions.hideAllVisibleNotifications();
+    }
+  },
 
-    getNotifications: function () {
-      if (!this.props.notifications.length) {
-        return null;
-      }
+  getNotifications: function () {
+    if (!this.props.notifications.length) {
+      return null;
+    }
 
-      return _.map(this.props.notifications, function (notification, index) {
+    return _.map(this.props.notifications, function (notification, index) {
 
-        // notifications are completely removed from the DOM once they're
-        if (!notification.visible) {
-          return;
-        }
+      // notifications are completely removed from the DOM once they're
+      if (!notification.visible) {
+        return;
+      }
 
-        return (
-          <Notification
-            notificationId={notification.notificationId}
-            isHiding={notification.isHiding}
-            key={index}
-            msg={notification.msg}
-            type={notification.type}
-            escape={notification.escape}
-            onStartHide={Actions.startHidingNotification}
-            onHideComplete={Actions.hideNotification} />
-        );
-      }, this);
-    },
-
-    render: function () {
       return (
-        <div id="global-notifications">
-          {this.getNotifications()}
-        </div>
+        <Notification
+          notificationId={notification.notificationId}
+          isHiding={notification.isHiding}
+          key={index}
+          msg={notification.msg}
+          type={notification.type}
+          escape={notification.escape}
+          onStartHide={Actions.startHidingNotification}
+          onHideComplete={Actions.hideNotification} />
       );
+    }, this);
+  },
+
+  render: function () {
+    return (
+      <div id="global-notifications">
+        {this.getNotifications()}
+      </div>
+    );
+  }
+});
+
+
+var Notification = React.createClass({
+  propTypes: {
+    msg: React.PropTypes.string.isRequired,
+    onStartHide: React.PropTypes.func.isRequired,
+    onHideComplete: React.PropTypes.func.isRequired,
+    type: React.PropTypes.oneOf(['error', 'info', 'success']),
+    escape: React.PropTypes.bool,
+    isHiding: React.PropTypes.bool.isRequired,
+    visibleTime: React.PropTypes.number
+  },
+
+  getDefaultProps: function () {
+    return {
+      type: 'info',
+      visibleTime: 8000,
+      escape: true,
+      slideInTime: 200,
+      slideOutTime: 200
+    };
+  },
+
+  componentWillUnmount: function () {
+    if (this.timeout) {
+      window.clearTimeout(this.timeout);
     }
-  });
-
-
-  var Notification = React.createClass({
-    propTypes: {
-      msg: React.PropTypes.string.isRequired,
-      onStartHide: React.PropTypes.func.isRequired,
-      onHideComplete: React.PropTypes.func.isRequired,
-      type: React.PropTypes.oneOf(['error', 'info', 'success']),
-      escape: React.PropTypes.bool,
-      isHiding: React.PropTypes.bool.isRequired,
-      visibleTime: React.PropTypes.number
-    },
-
-    getDefaultProps: function () {
-      return {
-        type: 'info',
-        visibleTime: 8000,
-        escape: true,
-        slideInTime: 200,
-        slideOutTime: 200
-      };
-    },
-
-    componentWillUnmount: function () {
-      if (this.timeout) {
-        window.clearTimeout(this.timeout);
+  },
+
+  getInitialState: function () {
+    return {
+      animation: { opacity: 0, minHeight: 0 }
+    };
+  },
+
+  componentDidMount: function () {
+    this.setState({
+      animation: {
+        opacity: (this.props.isHiding) ? 0 : 1,
+        minHeight: (this.props.isHiding) ? 0 : ReactDOM.findDOMNode(this.refs.notification).offsetHeight
       }
-    },
+    });
 
-    getInitialState: function () {
-      return {
-        animation: { opacity: 0, minHeight: 0 }
-      };
-    },
+    this.timeout = setTimeout(function () {
+      this.hide();
+    }.bind(this), this.props.visibleTime);
+  },
 
-    componentDidMount: function () {
+  componentDidUpdate: function (prevProps) {
+    if (!prevProps.isHiding && this.props.isHiding) {
       this.setState({
         animation: {
-          opacity: (this.props.isHiding) ? 0 : 1,
-          minHeight: (this.props.isHiding) ? 0 : ReactDOM.findDOMNode(this.refs.notification).offsetHeight
+          opacity: 0,
+          minHeight: 0
         }
       });
+    }
+  },
 
-      this.timeout = setTimeout(function () {
-        this.hide();
-      }.bind(this), this.props.visibleTime);
-    },
-
-    componentDidUpdate: function (prevProps) {
-      if (!prevProps.isHiding && this.props.isHiding) {
-        this.setState({
-          animation: {
-            opacity: 0,
-            minHeight: 0
-          }
-        });
-      }
-    },
+  getHeight: function () {
+    return $(ReactDOM.findDOMNode(this)).outerHeight(true);
+  },
 
-    getHeight: function () {
-      return $(ReactDOM.findDOMNode(this)).outerHeight(true);
-    },
+  hide: function (e) {
+    if (e) {
+      e.preventDefault();
+    }
+    this.props.onStartHide(this.props.notificationId);
+  },
+
+  // many messages contain HTML, hence the need for dangerouslySetInnerHTML
+  getMsg: function () {
+    var msg = (this.props.escape) ? _.escape(this.props.msg) : this.props.msg;
+    return {
+      __html: msg
+    };
+  },
+
+  onAnimationComplete: function () {
+    if (this.props.isHiding) {
+      this.props.onHideComplete(this.props.notificationId);
+    }
+  },
+
+  render: function () {
+    var iconMap = {
+      error: 'fonticon-attention-circled',
+      info: 'fonticon-info-circled',
+      success: 'fonticon-ok-circled'
+    };
+
+    return (
+      <VelocityComponent animation={this.state.animation}
+        runOnMount={true} duration={this.props.slideInTime} complete={this.onAnimationComplete}>
+          <div className="notification-wrapper">
+            <div className={'global-notification alert alert-' + this.props.type} ref="notification">
+              <a data-bypass href="#" onClick={this.hide}><i className="pull-right fonticon-cancel" /></a>
+              <i className={'notification-icon ' + iconMap[this.props.type]} />
+              <span dangerouslySetInnerHTML={this.getMsg()}></span>
+            </div>
+          </div>
+      </VelocityComponent>
+    );
+  }
+});
 
-    hide: function (e) {
-      if (e) {
-        e.preventDefault();
-      }
-      this.props.onStartHide(this.props.notificationId);
-    },
-
-    // many messages contain HTML, hence the need for dangerouslySetInnerHTML
-    getMsg: function () {
-      var msg = (this.props.escape) ? _.escape(this.props.msg) : this.props.msg;
-      return {
-        __html: msg
-      };
-    },
-
-    onAnimationComplete: function () {
-      if (this.props.isHiding) {
-        this.props.onHideComplete(this.props.notificationId);
-      }
-    },
 
-    render: function () {
-      var iconMap = {
-        error: 'fonticon-attention-circled',
-        info: 'fonticon-info-circled',
-        success: 'fonticon-ok-circled'
-      };
+var NotificationCenterButton = React.createClass({
+  getInitialState: function () {
+    return {
+      visible: true
+    };
+  },
 
-      return (
-        <VelocityComponent animation={this.state.animation}
-          runOnMount={true} duration={this.props.slideInTime} complete={this.onAnimationComplete}>
-            <div className="notification-wrapper">
-              <div className={'global-notification alert alert-' + this.props.type} ref="notification">
-                <a data-bypass href="#" onClick={this.hide}><i className="pull-right fonticon-cancel" /></a>
-                <i className={'notification-icon ' + iconMap[this.props.type]} />
-                <span dangerouslySetInnerHTML={this.getMsg()}></span>
-              </div>
-            </div>
-        </VelocityComponent>
-      );
-    }
-  });
+  hide: function () {
+    this.setState({ visible: false });
+  },
 
+  show: function () {
+    this.setState({ visible: true });
+  },
 
-  var NotificationCenterButton = React.createClass({
-    getInitialState: function () {
-      return {
-        visible: true
-      };
-    },
+  render: function () {
+    var classes = 'fonticon fonticon-bell' + ((!this.state.visible) ? ' hide' : '');
+    return (
+      <div className={classes} onClick={Actions.showNotificationCenter}></div>
+    );
+  }
+});
 
-    hide: function () {
-      this.setState({ visible: false });
-    },
 
-    show: function () {
-      this.setState({ visible: true });
-    },
+var NotificationCenterPanel = React.createClass({
+  propTypes: {
+    visible: React.PropTypes.bool.isRequired,
+    filter: React.PropTypes.string.isRequired,
+    notifications: React.PropTypes.array.isRequired
+  },
 
-    render: function () {
-      var classes = 'fonticon fonticon-bell' + ((!this.state.visible) ? ' hide' : '');
+  getNotifications: function () {
+    if (!this.props.notifications.length) {
       return (
-        <div className={classes} onClick={Actions.showNotificationCenter}></div>
+        <li className="no-notifications">No notifications.</li>
       );
     }
-  });
-
 
-  var NotificationCenterPanel = React.createClass({
-    propTypes: {
-      visible: React.PropTypes.bool.isRequired,
-      filter: React.PropTypes.string.isRequired,
-      notifications: React.PropTypes.array.isRequired
-    },
-
-    getNotifications: function () {
-      if (!this.props.notifications.length) {
-        return (
-          <li className="no-notifications">No notifications.</li>
-        );
-      }
-
-      return _.map(this.props.notifications, function (notification) {
-        return (
-          <NotificationPanelRow
-            isVisible={this.props.visible}
-            item={notification}
-            filter={this.props.filter}
-            key={notification.notificationId}
-          />
-        );
-      }, this);
-    },
-
-    render: function () {
-      var panelClasses = 'notification-center-panel flex-layout flex-col';
-      if (this.props.visible) {
-        panelClasses += ' visible';
-      }
-
-      var filterClasses = {
-        all: 'flex-body',
-        success: 'flex-body',
-        error: 'flex-body',
-        info: 'flex-body'
-      };
-      filterClasses[this.props.filter] += ' selected';
-
-      var maskClasses = 'notification-page-mask' + ((this.props.visible) ? ' visible' : '');
+    return _.map(this.props.notifications, function (notification) {
       return (
-        <div id="notification-center">
-          <div className={panelClasses}>
-
-            <header className="flex-layout flex-row">
-              <span className="fonticon fonticon-bell" />
-              <h1 className="flex-body">Notifications</h1>
-              <button type="button" onClick={Actions.hideNotificationCenter}>×</button>
-            </header>
-
-            <ul className="notification-filter flex-layout flex-row">
-              <li className={filterClasses.all} title="All notifications" data-filter="all"
-                  onClick={Actions.selectNotificationFilter.bind(this, 'all')}>All</li>
-              <li className={filterClasses.success} title="Success notifications" data-filter="success"
-                  onClick={Actions.selectNotificationFilter.bind(this, 'success')}>
-                <span className="fonticon fonticon-ok-circled" />
-              </li>
-              <li className={filterClasses.error} title="Error notifications" data-filter="error"
-                  onClick={Actions.selectNotificationFilter.bind(this, 'error')}>
-                <span className="fonticon fonticon-attention-circled" />
-              </li>
-              <li className={filterClasses.info} title="Info notifications" data-filter="info"
-                  onClick={Actions.selectNotificationFilter.bind(this, 'info')}>
-                <span className="fonticon fonticon-info-circled" />
-              </li>
-            </ul>
+        <NotificationPanelRow
+          isVisible={this.props.visible}
+          item={notification}
+          filter={this.props.filter}
+          key={notification.notificationId}
+        />
+      );
+    }, this);
+  },
 
-            <div className="flex-body">
-              <ul className="notification-list">
-                {this.getNotifications()}
-              </ul>
-            </div>
+  render: function () {
+    var panelClasses = 'notification-center-panel flex-layout flex-col';
+    if (this.props.visible) {
+      panelClasses += ' visible';
+    }
 
-            <footer>
-              <input
-                type="button"
-                value="Clear All"
-                className="btn btn-small btn-info"
-                onClick={Actions.clearAllNotifications} />
-            </footer>
+    var filterClasses = {
+      all: 'flex-body',
+      success: 'flex-body',
+      error: 'flex-body',
+      info: 'flex-body'
+    };
+    filterClasses[this.props.filter] += ' selected';
+
+    var maskClasses = 'notification-page-mask' + ((this.props.visible) ? ' visible' : '');
+    return (
+      <div id="notification-center">
+        <div className={panelClasses}>
+
+          <header className="flex-layout flex-row">
+            <span className="fonticon fonticon-bell" />
+            <h1 className="flex-body">Notifications</h1>
+            <button type="button" onClick={Actions.hideNotificationCenter}>×</button>
+          </header>
+
+          <ul className="notification-filter flex-layout flex-row">
+            <li className={filterClasses.all} title="All notifications" data-filter="all"
+                onClick={Actions.selectNotificationFilter.bind(this, 'all')}>All</li>
+            <li className={filterClasses.success} title="Success notifications" data-filter="success"
+                onClick={Actions.selectNotificationFilter.bind(this, 'success')}>
+              <span className="fonticon fonticon-ok-circled" />
+            </li>
+            <li className={filterClasses.error} title="Error notifications" data-filter="error"
+                onClick={Actions.selectNotificationFilter.bind(this, 'error')}>
+              <span className="fonticon fonticon-attention-circled" />
+            </li>
+            <li className={filterClasses.info} title="Info notifications" data-filter="info"
+                onClick={Actions.selectNotificationFilter.bind(this, 'info')}>
+              <span className="fonticon fonticon-info-circled" />
+            </li>
+          </ul>
+
+          <div className="flex-body">
+            <ul className="notification-list">
+              {this.getNotifications()}
+            </ul>
           </div>
 
-          <div className={maskClasses} onClick={Actions.hideNotificationCenter}></div>
+          <footer>
+            <input
+              type="button"
+              value="Clear All"
+              className="btn btn-small btn-info"
+              onClick={Actions.clearAllNotifications} />
+          </footer>
         </div>
-      );
-    }
-  });
-
-
-  var NotificationPanelRow = React.createClass({
-    propTypes: {
-      item: React.PropTypes.object.isRequired,
-      filter: React.PropTypes.string.isRequired,
-      transitionSpeed: React.PropTypes.number
-    },
-
-    getDefaultProps: function () {
-      return {
-        transitionSpeed: 300
-      };
-    },
-
-    clearNotification: function () {
-      var notificationId = this.props.item.notificationId;
-      this.hide(function () {
-        Actions.clearSingleNotification(notificationId);
-      });
-    },
 
-    componentDidMount: function () {
-      this.setState({
-        elementHeight: this.getHeight()
-      });
-    },
-
-    componentDidUpdate: function (prevProps) {
-      // in order for the nice slide effects to work we need a concrete element height to slide to and from.
-      // $.outerHeight() only works reliably on visible elements, hence this additional setState here
-      if (!prevProps.isVisible && this.props.isVisible) {
-        this.setState({
-          elementHeight: this.getHeight()
-        });
-      }
-
-      var show = true;
-      if (this.props.filter !== 'all') {
-        show = this.props.item.type === this.props.filter;
-      }
-      if (show) {
-        $(ReactDOM.findDOMNode(this)).velocity({ opacity: 1, height: this.state.elementHeight }, this.props.transitionSpeed);
-        return;
-      }
-      this.hide();
-    },
+        <div className={maskClasses} onClick={Actions.hideNotificationCenter}></div>
+      </div>
+    );
+  }
+});
 
-    getHeight: function () {
-      return $(ReactDOM.findDOMNode(this)).outerHeight(true);
-    },
 
-    hide: function (onHidden) {
-      $(ReactDOM.findDOMNode(this)).velocity({ opacity: 0, height: 0 }, this.props.transitionSpeed, function () {
-        if (onHidden) {
-          onHidden();
-        }
+var NotificationPanelRow = React.createClass({
+  propTypes: {
+    item: React.PropTypes.object.isRequired,
+    filter: React.PropTypes.string.isRequired,
+    transitionSpeed: React.PropTypes.number
+  },
+
+  getDefaultProps: function () {
+    return {
+      transitionSpeed: 300
+    };
+  },
+
+  clearNotification: function () {
+    var notificationId = this.props.item.notificationId;
+    this.hide(function () {
+      Actions.clearSingleNotification(notificationId);
+    });
+  },
+
+  componentDidMount: function () {
+    this.setState({
+      elementHeight: this.getHeight()
+    });
+  },
+
+  componentDidUpdate: function (prevProps) {
+    // in order for the nice slide effects to work we need a concrete element height to slide to and from.
+    // $.outerHeight() only works reliably on visible elements, hence this additional setState here
+    if (!prevProps.isVisible && this.props.isVisible) {
+      this.setState({
+        elementHeight: this.getHeight()
       });
-    },
-
-    render: function () {
-      var iconMap = {
-        success: 'fonticon-ok-circled',
-        error: 'fonticon-attention-circled',
-        info: 'fonticon-info-circled'
-      };
+    }
 
-      var timeElapsed = this.props.item.time.fromNow();
+    var show = true;
+    if (this.props.filter !== 'all') {
+      show = this.props.item.type === this.props.filter;
+    }
+    if (show) {
+      $(ReactDOM.findDOMNode(this)).velocity({ opacity: 1, height: this.state.elementHeight }, this.props.transitionSpeed);
+      return;
+    }
+    this.hide();
+  },
 
-      // we can safely do this because the store ensures all notifications are of known types
-      var rowIconClasses = 'fonticon ' + iconMap[this.props.item.type];
-      var hidden = (this.props.filter === 'all' || this.props.filter === this.props.item.type) ? false : true;
+  getHeight: function () {
+    return $(ReactDOM.findDOMNode(this)).outerHeight(true);
+  },
 
-      // N.B. wrapper <div> needed to ensure smooth hide/show transitions
-      return (
-        <li aria-hidden={hidden}>
-          <div className="flex-layout flex-row">
-            <span className={rowIconClasses}></span>
-            <div className="flex-body">
-              <p>{this.props.item.cleanMsg}</p>
-              <div className="notification-actions">
-                <span className="time-elapsed">{timeElapsed}</span>
-                <span className="divider">|</span>
-                <Clipboard text={this.props.item.cleanMsg} displayType="text" />
-              </div>
+  hide: function (onHidden) {
+    $(ReactDOM.findDOMNode(this)).velocity({ opacity: 0, height: 0 }, this.props.transitionSpeed, function () {
+      if (onHidden) {
+        onHidden();
+      }
+    });
+  },
+
+  render: function () {
+    var iconMap = {
+      success: 'fonticon-ok-circled',
+      error: 'fonticon-attention-circled',
+      info: 'fonticon-info-circled'
+    };
+
+    var timeElapsed = this.props.item.time.fromNow();
+
+    // we can safely do this because the store ensures all notifications are of known types
+    var rowIconClasses = 'fonticon ' + iconMap[this.props.item.type];
+    var hidden = (this.props.filter === 'all' || this.props.filter === this.props.item.type) ? false : true;
+
+    // N.B. wrapper <div> needed to ensure smooth hide/show transitions
+    return (
+      <li aria-hidden={hidden}>
+        <div className="flex-layout flex-row">
+          <span className={rowIconClasses}></span>
+          <div className="flex-body">
+            <p>{this.props.item.cleanMsg}</p>
+            <div className="notification-actions">
+              <span className="time-elapsed">{timeElapsed}</span>
+              <span className="divider">|</span>
+              <Clipboard text={this.props.item.cleanMsg} displayType="text" />
             </div>
-            <button type="button" onClick={this.clearNotification}>×</button>
           </div>
-        </li>
-      );
-    }
-  });
-
+          <button type="button" onClick={this.clearNotification}>×</button>
+        </div>
+      </li>
+    );
+  }
+});
 
-  return {
-    NotificationController: NotificationController,
-    NotificationCenterButton: NotificationCenterButton,
-    NotificationCenterPanel: NotificationCenterPanel,
-    NotificationPanelRow: NotificationPanelRow,
-    Notification: Notification,
 
-    renderNotificationController: function (el) {
-      return ReactDOM.render(<NotificationController />, el);
-    }
-  };
+export default {
+  NotificationController: NotificationController,
+  NotificationCenterButton: NotificationCenterButton,
+  NotificationCenterPanel: NotificationCenterPanel,
+  NotificationPanelRow: NotificationPanelRow,
+  Notification: Notification,
 
-});
+  renderNotificationController: function (el) {
+    return ReactDOM.render(<NotificationController />, el);
+  }
+};

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/0ca35da7/app/addons/fauxton/notifications/stores.js
----------------------------------------------------------------------
diff --git a/app/addons/fauxton/notifications/stores.js b/app/addons/fauxton/notifications/stores.js
index 08becfb..f99fd27 100644
--- a/app/addons/fauxton/notifications/stores.js
+++ b/app/addons/fauxton/notifications/stores.js
@@ -10,171 +10,165 @@
 // License for the specific language governing permissions and limitations under
 // the License.
 
-define([
-  '../../../core/api',
-  '../../../app',
-  './actiontypes',
-  'moment'
-],
-
-function (FauxtonAPI, app, ActionTypes, moment) {
-  var Stores = {};
-
-  // static var used to assign a unique ID to each notification
-  var counter = 0;
-  var validNotificationTypes = ['success', 'error', 'info'];
-
-
-  /**
-   * Notifications are of the form:
-   * {
-   *   notificationId: N,
-   *   message: "string",
-   *   type: "success"|etc. see above list
-   *   clear: true|false,
-   *   escape: true|false
-   * }
-   */
-
-  Stores.NotificationStore = FauxtonAPI.Store.extend({
-    initialize: function () {
-      this.reset();
-    },
-
-    reset: function () {
-      this._notifications = [];
-      this._notificationCenterVisible = false;
-      this._selectedNotificationFilter = 'all';
-    },
-
-    isNotificationCenterVisible: function () {
-      return this._notificationCenterVisible;
-    },
-
-    addNotification: function (info) {
-      if (_.isEmpty(info.type) || !_.contains(validNotificationTypes, info.type)) {
-        console.warn('Invalid message type: ', info);
-        return;
-      }
-
-      info.notificationId = ++counter;
-      info.cleanMsg = app.utils.stripHTML(info.msg);
-      info.time = moment();
-
-      // all new notifications are visible by default. They get hidden after their time expires, by the component
-      info.visible = true;
-      info.isHiding = false;
-
-      // clear: true causes all visible messages to be hidden
-      if (info.clear) {
-        this._notifications.forEach(function (notification) {
-          if (notification.visible) {
-            notification.isHiding = true;
-          }
-        });
-      }
-      this._notifications.unshift(info);
-    },
-
-    getNotifications: function () {
-      return this._notifications;
-    },
-
-    clearNotification: function (notificationId) {
-      this._notifications = _.without(this._notifications, _.findWhere(this._notifications, { notificationId: notificationId }));
-    },
+import FauxtonAPI from "../../../core/api";
+import app from "../../../app";
+import ActionTypes from "./actiontypes";
+import moment from "moment";
+var Stores = {};
+
+// static var used to assign a unique ID to each notification
+var counter = 0;
+var validNotificationTypes = ['success', 'error', 'info'];
+
+
+/**
+ * Notifications are of the form:
+ * {
+ *   notificationId: N,
+ *   message: "string",
+ *   type: "success"|etc. see above list
+ *   clear: true|false,
+ *   escape: true|false
+ * }
+ */
+
+Stores.NotificationStore = FauxtonAPI.Store.extend({
+  initialize: function () {
+    this.reset();
+  },
+
+  reset: function () {
+    this._notifications = [];
+    this._notificationCenterVisible = false;
+    this._selectedNotificationFilter = 'all';
+  },
+
+  isNotificationCenterVisible: function () {
+    return this._notificationCenterVisible;
+  },
+
+  addNotification: function (info) {
+    if (_.isEmpty(info.type) || !_.contains(validNotificationTypes, info.type)) {
+      console.warn('Invalid message type: ', info);
+      return;
+    }
 
-    clearNotifications: function () {
-      this._notifications = [];
-    },
+    info.notificationId = ++counter;
+    info.cleanMsg = app.utils.stripHTML(info.msg);
+    info.time = moment();
 
-    hideNotification: function (notificationId) {
-      var notification = _.findWhere(this._notifications, { notificationId: notificationId });
-      notification.visible = false;
-      notification.isHiding = false;
-    },
+    // all new notifications are visible by default. They get hidden after their time expires, by the component
+    info.visible = true;
+    info.isHiding = false;
 
-    hideAllNotifications: function () {
+    // clear: true causes all visible messages to be hidden
+    if (info.clear) {
       this._notifications.forEach(function (notification) {
         if (notification.visible) {
           notification.isHiding = true;
         }
       });
-    },
-
-      startHidingNotification: function (notificationId) {
-      var notification = _.findWhere(this._notifications, { notificationId: notificationId });
-      notification.isHiding = true;
-    },
-
-    getNotificationFilter: function () {
-      return this._selectedNotificationFilter;
-    },
-
-    setNotificationFilter: function (filter) {
-      if ((_.isEmpty(filter) || !_.contains(validNotificationTypes, filter)) && filter !== 'all') {
-        console.warn('Invalid notification filter: ', filter);
-        return;
-      }
-      this._selectedNotificationFilter = filter;
-    },
-
-    dispatch: function (action) {
-      switch (action.type) {
-        case ActionTypes.ADD_NOTIFICATION:
-          this.addNotification(action.options.info);
-          this.triggerChange();
-        break;
-
-        case ActionTypes.CLEAR_ALL_NOTIFICATIONS:
-          this.clearNotifications();
-          this.triggerChange();
-        break;
-
-        case ActionTypes.CLEAR_SINGLE_NOTIFICATION:
-          this.clearNotification(action.options.notificationId);
-        break;
-
-        case ActionTypes.START_HIDING_NOTIFICATION:
-          this.startHidingNotification(action.options.notificationId);
-          this.triggerChange();
-        break;
-
-        case ActionTypes.HIDE_NOTIFICATION:
-          this.hideNotification(action.options.notificationId);
-          this.triggerChange();
-        break;
-
-        case ActionTypes.HIDE_ALL_NOTIFICATIONS:
-          this.hideAllNotifications();
-          this.triggerChange();
-        break;
-
-        case ActionTypes.SHOW_NOTIFICATION_CENTER:
-          this._notificationCenterVisible = true;
-          this.triggerChange();
-        break;
-
-        case ActionTypes.HIDE_NOTIFICATION_CENTER:
-          this._notificationCenterVisible = false;
-          this.triggerChange();
-        break;
-
-        case ActionTypes.SELECT_NOTIFICATION_FILTER:
-          this.setNotificationFilter(action.options.filter);
-          this.triggerChange();
-        break;
-
-        default:
-        return;
-          // do nothing
+    }
+    this._notifications.unshift(info);
+  },
+
+  getNotifications: function () {
+    return this._notifications;
+  },
+
+  clearNotification: function (notificationId) {
+    this._notifications = _.without(this._notifications, _.findWhere(this._notifications, { notificationId: notificationId }));
+  },
+
+  clearNotifications: function () {
+    this._notifications = [];
+  },
+
+  hideNotification: function (notificationId) {
+    var notification = _.findWhere(this._notifications, { notificationId: notificationId });
+    notification.visible = false;
+    notification.isHiding = false;
+  },
+
+  hideAllNotifications: function () {
+    this._notifications.forEach(function (notification) {
+      if (notification.visible) {
+        notification.isHiding = true;
       }
+    });
+  },
+
+    startHidingNotification: function (notificationId) {
+    var notification = _.findWhere(this._notifications, { notificationId: notificationId });
+    notification.isHiding = true;
+  },
+
+  getNotificationFilter: function () {
+    return this._selectedNotificationFilter;
+  },
+
+  setNotificationFilter: function (filter) {
+    if ((_.isEmpty(filter) || !_.contains(validNotificationTypes, filter)) && filter !== 'all') {
+      console.warn('Invalid notification filter: ', filter);
+      return;
     }
-  });
-
-  Stores.notificationStore = new Stores.NotificationStore();
-  Stores.notificationStore.dispatchToken = FauxtonAPI.dispatcher.register(Stores.notificationStore.dispatch);
+    this._selectedNotificationFilter = filter;
+  },
+
+  dispatch: function (action) {
+    switch (action.type) {
+      case ActionTypes.ADD_NOTIFICATION:
+        this.addNotification(action.options.info);
+        this.triggerChange();
+      break;
+
+      case ActionTypes.CLEAR_ALL_NOTIFICATIONS:
+        this.clearNotifications();
+        this.triggerChange();
+      break;
+
+      case ActionTypes.CLEAR_SINGLE_NOTIFICATION:
+        this.clearNotification(action.options.notificationId);
+      break;
+
+      case ActionTypes.START_HIDING_NOTIFICATION:
+        this.startHidingNotification(action.options.notificationId);
+        this.triggerChange();
+      break;
+
+      case ActionTypes.HIDE_NOTIFICATION:
+        this.hideNotification(action.options.notificationId);
+        this.triggerChange();
+      break;
+
+      case ActionTypes.HIDE_ALL_NOTIFICATIONS:
+        this.hideAllNotifications();
+        this.triggerChange();
+      break;
+
+      case ActionTypes.SHOW_NOTIFICATION_CENTER:
+        this._notificationCenterVisible = true;
+        this.triggerChange();
+      break;
+
+      case ActionTypes.HIDE_NOTIFICATION_CENTER:
+        this._notificationCenterVisible = false;
+        this.triggerChange();
+      break;
+
+      case ActionTypes.SELECT_NOTIFICATION_FILTER:
+        this.setNotificationFilter(action.options.filter);
+        this.triggerChange();
+      break;
+
+      default:
+      return;
+        // do nothing
+    }
+  }
+});
 
-  return Stores;
+Stores.notificationStore = new Stores.NotificationStore();
+Stores.notificationStore.dispatchToken = FauxtonAPI.dispatcher.register(Stores.notificationStore.dispatch);
 
-});
+export default Stores;

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/0ca35da7/app/addons/fauxton/notifications/tests/actionsSpec.js
----------------------------------------------------------------------
diff --git a/app/addons/fauxton/notifications/tests/actionsSpec.js b/app/addons/fauxton/notifications/tests/actionsSpec.js
index 1afd7de..8d61628 100644
--- a/app/addons/fauxton/notifications/tests/actionsSpec.js
+++ b/app/addons/fauxton/notifications/tests/actionsSpec.js
@@ -9,41 +9,41 @@
 // WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
 // License for the specific language governing permissions and limitations under
 // the License.
-define([
-  '../../../../core/api',
-  '../notifications.react',
-  '../stores',
-  '../actions',
-  '../../../../../test/mocha/testUtils',
-  'react',
-  'react-dom',
-  'moment',
-  'react-addons-test-utils',
-  'sinon'
-], function (FauxtonAPI, Views, {notificationStore: store}, Actions, {assert, restore}, React, ReactDOM, moment, TestUtils) {
+import FauxtonAPI from "../../../../core/api";
+import Views from "../notifications.react";
+import Stores from "../stores";
+import Actions from "../actions";
+import utils from "../../../../../test/mocha/testUtils";
+import React from "react";
+import ReactDOM from "react-dom";
+import moment from "moment";
+import TestUtils from "react-addons-test-utils";
+import "sinon";
 
-  describe('NotificationPanel', function () {
-    var container;
+const store = Stores.notificationStore;
+const {restore, assert} = utils;
 
-    beforeEach(function () {
-      container = document.createElement('div');
-      store.reset();
-    });
+describe('NotificationPanel', function () {
+  var container;
 
-    afterEach(function () {
-      restore(Actions.clearAllNotifications);
-      ReactDOM.unmountComponentAtNode(container);
-    });
+  beforeEach(function () {
+    container = document.createElement('div');
+    store.reset();
+  });
+
+  afterEach(function () {
+    restore(Actions.clearAllNotifications);
+    ReactDOM.unmountComponentAtNode(container);
+  });
 
-    it('clear all action fires', function () {
-      var stub = sinon.stub(Actions, 'clearAllNotifications');
+  it('clear all action fires', function () {
+    var stub = sinon.stub(Actions, 'clearAllNotifications');
 
-      var panelEl = TestUtils.renderIntoDocument(<Views.NotificationCenterPanel
-        notifications={[]} filter={'all'}
-        visible={true} />, container);
+    var panelEl = TestUtils.renderIntoDocument(<Views.NotificationCenterPanel
+      notifications={[]} filter={'all'}
+      visible={true} />, container);
 
-      TestUtils.Simulate.click($(ReactDOM.findDOMNode(panelEl)).find('footer input')[0]);
-      assert.ok(stub.calledOnce);
-    });
+    TestUtils.Simulate.click($(ReactDOM.findDOMNode(panelEl)).find('footer input')[0]);
+    assert.ok(stub.calledOnce);
   });
 });

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/0ca35da7/app/addons/fauxton/notifications/tests/componentsSpec.react.jsx
----------------------------------------------------------------------
diff --git a/app/addons/fauxton/notifications/tests/componentsSpec.react.jsx b/app/addons/fauxton/notifications/tests/componentsSpec.react.jsx
index 0f4d72a..13d5c40 100644
--- a/app/addons/fauxton/notifications/tests/componentsSpec.react.jsx
+++ b/app/addons/fauxton/notifications/tests/componentsSpec.react.jsx
@@ -9,185 +9,181 @@
 // WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
 // License for the specific language governing permissions and limitations under
 // the License.
-define([
-  '../../../../core/api',
-  '../notifications.react',
-  '../stores',
-  '../actions',
-  '../../../../../test/mocha/testUtils',
-  'react',
-  'react-dom',
-  'moment',
-  'react-addons-test-utils',
-  'sinon'
-], function (FauxtonAPI, Views, Stores, Actions, utils, React, ReactDOM, moment, TestUtils) {
-  var assert = utils.assert;
-  var store = Stores.notificationStore;
-
-
-  describe('NotificationController', function () {
-    var container;
-
-    beforeEach(function () {
-      container = document.createElement('div');
-      store.reset();
-    });
-
-    afterEach(function () {
-      ReactDOM.unmountComponentAtNode(container);
-    });
-
-    it('notifications should be escaped by default', function () {
-      var component = TestUtils.renderIntoDocument(<Views.NotificationController />, container);
-      FauxtonAPI.addNotification({ msg: '<script>window.whatever=1;</script>' });
-      assert.ok(/&lt;script&gt;window.whatever=1;&lt;\/script&gt;/.test(ReactDOM.findDOMNode(component).innerHTML));
-    });
-
-    it('notifications should be able to render unescaped', function () {
-      var component = TestUtils.renderIntoDocument(<Views.NotificationController />, container);
-      FauxtonAPI.addNotification({ msg: '<script>window.whatever=1;</script>', escape: false });
-      assert.ok(/<script>window.whatever=1;<\/script>/.test(ReactDOM.findDOMNode(component).innerHTML));
-    });
+import FauxtonAPI from "../../../../core/api";
+import Views from "../notifications.react";
+import Stores from "../stores";
+import Actions from "../actions";
+import utils from "../../../../../test/mocha/testUtils";
+import React from "react";
+import ReactDOM from "react-dom";
+import moment from "moment";
+import TestUtils from "react-addons-test-utils";
+import "sinon";
+var assert = utils.assert;
+var store = Stores.notificationStore;
+
+
+describe('NotificationController', function () {
+  var container;
+
+  beforeEach(function () {
+    container = document.createElement('div');
+    store.reset();
   });
 
-  describe('NotificationPanelRow', function () {
-    var container;
-
-    var notifications = {
-      success: {
-        notificationId: 1,
-        type: 'success',
-        msg: 'Success!',
-        time: moment()
-      },
-      info: {
-        notificationId: 2,
-        type: 'info',
-        msg: 'Error!',
-        time: moment()
-      },
-      error: {
-        notificationId: 3,
-        type: 'error',
-        msg: 'Error!',
-        time: moment()
-      }
-    };
-
-    beforeEach(function () {
-      container = document.createElement('div');
-    });
-
-    afterEach(function () {
-      ReactDOM.unmountComponentAtNode(container);
-    });
-
-    it('shows all notification types when "all" filter applied', function () {
-      var row1 = TestUtils.renderIntoDocument(
-        <Views.NotificationPanelRow filter="all" item={notifications.success}/>,
-        container
-      );
-      assert.equal($(ReactDOM.findDOMNode(row1)).attr('aria-hidden'), 'false');
-      ReactDOM.unmountComponentAtNode(container);
-
-      var row2 = TestUtils.renderIntoDocument(
-        <Views.NotificationPanelRow filter="all" item={notifications.error}/>,
-        container
-      );
-      assert.equal($(ReactDOM.findDOMNode(row2)).attr('aria-hidden'), 'false');
-      ReactDOM.unmountComponentAtNode(container);
-
-      var row3 = TestUtils.renderIntoDocument(
-        <Views.NotificationPanelRow filter="all" item={notifications.info}/>,
-        container
-      );
-      assert.equal($(ReactDOM.findDOMNode(row3)).attr('aria-hidden'), 'false');
-      ReactDOM.unmountComponentAtNode(container);
-    });
-
-    it('hides notification when filter doesn\'t match', function () {
-      var rowEl = TestUtils.renderIntoDocument(
-        <Views.NotificationPanelRow filter="success" item={notifications.info}/>,
-        container
-      );
-      assert.equal($(ReactDOM.findDOMNode(rowEl)).attr('aria-hidden'), 'true');
-    });
-
-    it('shows notification when filter exact match', function () {
-      var rowEl = TestUtils.renderIntoDocument(
-        <Views.NotificationPanelRow filter="info" item={notifications.info}/>,
-        container
-      );
-      assert.equal($(ReactDOM.findDOMNode(rowEl)).attr('aria-hidden'), 'false');
-    });
+  afterEach(function () {
+    ReactDOM.unmountComponentAtNode(container);
   });
 
+  it('notifications should be escaped by default', function () {
+    var component = TestUtils.renderIntoDocument(<Views.NotificationController />, container);
+    FauxtonAPI.addNotification({ msg: '<script>window.whatever=1;</script>' });
+    assert.ok(/&lt;script&gt;window.whatever=1;&lt;\/script&gt;/.test(ReactDOM.findDOMNode(component).innerHTML));
+  });
+
+  it('notifications should be able to render unescaped', function () {
+    var component = TestUtils.renderIntoDocument(<Views.NotificationController />, container);
+    FauxtonAPI.addNotification({ msg: '<script>window.whatever=1;</script>', escape: false });
+    assert.ok(/<script>window.whatever=1;<\/script>/.test(ReactDOM.findDOMNode(component).innerHTML));
+  });
+});
+
+describe('NotificationPanelRow', function () {
+  var container;
+
+  var notifications = {
+    success: {
+      notificationId: 1,
+      type: 'success',
+      msg: 'Success!',
+      time: moment()
+    },
+    info: {
+      notificationId: 2,
+      type: 'info',
+      msg: 'Error!',
+      time: moment()
+    },
+    error: {
+      notificationId: 3,
+      type: 'error',
+      msg: 'Error!',
+      time: moment()
+    }
+  };
+
+  beforeEach(function () {
+    container = document.createElement('div');
+  });
+
+  afterEach(function () {
+    ReactDOM.unmountComponentAtNode(container);
+  });
+
+  it('shows all notification types when "all" filter applied', function () {
+    var row1 = TestUtils.renderIntoDocument(
+      <Views.NotificationPanelRow filter="all" item={notifications.success}/>,
+      container
+    );
+    assert.equal($(ReactDOM.findDOMNode(row1)).attr('aria-hidden'), 'false');
+    ReactDOM.unmountComponentAtNode(container);
+
+    var row2 = TestUtils.renderIntoDocument(
+      <Views.NotificationPanelRow filter="all" item={notifications.error}/>,
+      container
+    );
+    assert.equal($(ReactDOM.findDOMNode(row2)).attr('aria-hidden'), 'false');
+    ReactDOM.unmountComponentAtNode(container);
+
+    var row3 = TestUtils.renderIntoDocument(
+      <Views.NotificationPanelRow filter="all" item={notifications.info}/>,
+      container
+    );
+    assert.equal($(ReactDOM.findDOMNode(row3)).attr('aria-hidden'), 'false');
+    ReactDOM.unmountComponentAtNode(container);
+  });
+
+  it('hides notification when filter doesn\'t match', function () {
+    var rowEl = TestUtils.renderIntoDocument(
+      <Views.NotificationPanelRow filter="success" item={notifications.info}/>,
+      container
+    );
+    assert.equal($(ReactDOM.findDOMNode(rowEl)).attr('aria-hidden'), 'true');
+  });
 
-  describe('NotificationCenterPanel', function () {
-    var container;
-
-    beforeEach(function () {
-      container = document.createElement('div');
-      store.reset();
-    });
-
-    afterEach(function () {
-      ReactDOM.unmountComponentAtNode(container);
-    });
-
-    it('shows all notifications by default', function () {
-      store.addNotification({type: 'success', msg: 'Success are okay'});
-      store.addNotification({type: 'success', msg: 'another success.'});
-      store.addNotification({type: 'info', msg: 'A single info message'});
-      store.addNotification({type: 'error', msg: 'Error #1'});
-      store.addNotification({type: 'error', msg: 'Error #2'});
-      store.addNotification({type: 'error', msg: 'Error #3'});
-
-      var panelEl = TestUtils.renderIntoDocument(
-        <Views.NotificationCenterPanel
-          filter="all"
-          notifications={store.getNotifications()}
-        />, container);
-
-      assert.equal($(ReactDOM.findDOMNode(panelEl)).find('.notification-list li[aria-hidden=false]').length, 6);
-    });
-
-    it('appropriate filters are applied - 1', function () {
-      store.addNotification({type: 'success', msg: 'Success are okay'});
-      store.addNotification({type: 'success', msg: 'another success.'});
-      store.addNotification({type: 'info', msg: 'A single info message'});
-      store.addNotification({type: 'error', msg: 'Error #1'});
-      store.addNotification({type: 'error', msg: 'Error #2'});
-      store.addNotification({type: 'error', msg: 'Error #3'});
-
-      var panelEl = TestUtils.renderIntoDocument(
-        <Views.NotificationCenterPanel
-          filter="success"
-          notifications={store.getNotifications()}
-        />, container);
-
-      // there are 2 success messages
-      assert.equal($(ReactDOM.findDOMNode(panelEl)).find('.notification-list li[aria-hidden=false]').length, 2);
-    });
-
-    it('appropriate filters are applied - 2', function () {
-      store.addNotification({type: 'success', msg: 'Success are okay'});
-      store.addNotification({type: 'success', msg: 'another success.'});
-      store.addNotification({type: 'info', msg: 'A single info message'});
-      store.addNotification({type: 'error', msg: 'Error #1'});
-      store.addNotification({type: 'error', msg: 'Error #2'});
-      store.addNotification({type: 'error', msg: 'Error #3'});
-
-      var panelEl = TestUtils.renderIntoDocument(
-        <Views.NotificationCenterPanel
-          filter="error"
-          notifications={store.getNotifications()}
-        />, container);
-
-      // 3 errors
-      assert.equal($(ReactDOM.findDOMNode(panelEl)).find('.notification-list li[aria-hidden=false]').length, 3);
-    });
+  it('shows notification when filter exact match', function () {
+    var rowEl = TestUtils.renderIntoDocument(
+      <Views.NotificationPanelRow filter="info" item={notifications.info}/>,
+      container
+    );
+    assert.equal($(ReactDOM.findDOMNode(rowEl)).attr('aria-hidden'), 'false');
+  });
+});
+
+
+describe('NotificationCenterPanel', function () {
+  var container;
+
+  beforeEach(function () {
+    container = document.createElement('div');
+    store.reset();
+  });
+
+  afterEach(function () {
+    ReactDOM.unmountComponentAtNode(container);
+  });
+
+  it('shows all notifications by default', function () {
+    store.addNotification({type: 'success', msg: 'Success are okay'});
+    store.addNotification({type: 'success', msg: 'another success.'});
+    store.addNotification({type: 'info', msg: 'A single info message'});
+    store.addNotification({type: 'error', msg: 'Error #1'});
+    store.addNotification({type: 'error', msg: 'Error #2'});
+    store.addNotification({type: 'error', msg: 'Error #3'});
+
+    var panelEl = TestUtils.renderIntoDocument(
+      <Views.NotificationCenterPanel
+        filter="all"
+        notifications={store.getNotifications()}
+      />, container);
+
+    assert.equal($(ReactDOM.findDOMNode(panelEl)).find('.notification-list li[aria-hidden=false]').length, 6);
+  });
+
+  it('appropriate filters are applied - 1', function () {
+    store.addNotification({type: 'success', msg: 'Success are okay'});
+    store.addNotification({type: 'success', msg: 'another success.'});
+    store.addNotification({type: 'info', msg: 'A single info message'});
+    store.addNotification({type: 'error', msg: 'Error #1'});
+    store.addNotification({type: 'error', msg: 'Error #2'});
+    store.addNotification({type: 'error', msg: 'Error #3'});
+
+    var panelEl = TestUtils.renderIntoDocument(
+      <Views.NotificationCenterPanel
+        filter="success"
+        notifications={store.getNotifications()}
+      />, container);
+
+    // there are 2 success messages
+    assert.equal($(ReactDOM.findDOMNode(panelEl)).find('.notification-list li[aria-hidden=false]').length, 2);
+  });
 
+  it('appropriate filters are applied - 2', function () {
+    store.addNotification({type: 'success', msg: 'Success are okay'});
+    store.addNotification({type: 'success', msg: 'another success.'});
+    store.addNotification({type: 'info', msg: 'A single info message'});
+    store.addNotification({type: 'error', msg: 'Error #1'});
+    store.addNotification({type: 'error', msg: 'Error #2'});
+    store.addNotification({type: 'error', msg: 'Error #3'});
+
+    var panelEl = TestUtils.renderIntoDocument(
+      <Views.NotificationCenterPanel
+        filter="error"
+        notifications={store.getNotifications()}
+      />, container);
+
+    // 3 errors
+    assert.equal($(ReactDOM.findDOMNode(panelEl)).find('.notification-list li[aria-hidden=false]').length, 3);
   });
 
 });

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/0ca35da7/app/addons/fauxton/notifications/tests/storesSpec.js
----------------------------------------------------------------------
diff --git a/app/addons/fauxton/notifications/tests/storesSpec.js b/app/addons/fauxton/notifications/tests/storesSpec.js
index d72dd8d..57d4afc 100644
--- a/app/addons/fauxton/notifications/tests/storesSpec.js
+++ b/app/addons/fauxton/notifications/tests/storesSpec.js
@@ -10,92 +10,88 @@
 // License for the specific language governing permissions and limitations under
 // the License.
 
-define([
-  '../../../../app',
-  '../../../../core/api',
-  '../../../../../test/mocha/testUtils',
-  '../stores'
-], function (app, FauxtonAPI, utils, Stores) {
+import app from "../../../../app";
+import FauxtonAPI from "../../../../core/api";
+import utils from "../../../../../test/mocha/testUtils";
+import Stores from "../stores";
 
-  var assert = utils.assert;
-  var store = Stores.notificationStore;
+var assert = utils.assert;
+var store = Stores.notificationStore;
 
-  describe('Notification Store', function () {
+describe('Notification Store', function () {
 
-    beforeEach(function () {
-      store.reset();
-    });
-
-    it("sets reasonable defaults", function () {
-      assert.equal(store.getNotifications().length, 0);
-      assert.equal(store.isNotificationCenterVisible(), false);
-      assert.equal(store.getNotificationFilter(), 'all');
-    });
+  beforeEach(function () {
+    store.reset();
+  });
 
-    it("confirm only known notification types get added", function () {
-      assert.equal(store.getNotifications().length, 0);
-      store.addNotification({ type: 'success', msg: 'Success are okay' });
+  it("sets reasonable defaults", function () {
+    assert.equal(store.getNotifications().length, 0);
+    assert.equal(store.isNotificationCenterVisible(), false);
+    assert.equal(store.getNotificationFilter(), 'all');
+  });
 
-      assert.equal(store.getNotifications().length, 1);
-      store.addNotification({ type: 'info', msg: 'Infos are also okay' });
+  it("confirm only known notification types get added", function () {
+    assert.equal(store.getNotifications().length, 0);
+    store.addNotification({ type: 'success', msg: 'Success are okay' });
 
-      assert.equal(store.getNotifications().length, 2);
-      store.addNotification({ type: 'error', msg: 'Errors? Bring em on' });
+    assert.equal(store.getNotifications().length, 1);
+    store.addNotification({ type: 'info', msg: 'Infos are also okay' });
 
-      assert.equal(store.getNotifications().length, 3);
-      store.addNotification({ type: 'rhubarb', msg: 'But rhubarb is NOT a valid notification type' });
+    assert.equal(store.getNotifications().length, 2);
+    store.addNotification({ type: 'error', msg: 'Errors? Bring em on' });
 
-      // confirm it wasn't added
-      assert.equal(store.getNotifications().length, 3);
-    });
+    assert.equal(store.getNotifications().length, 3);
+    store.addNotification({ type: 'rhubarb', msg: 'But rhubarb is NOT a valid notification type' });
 
-    it("clearNotification clears a specific notification", function () {
-      store.addNotification({ type: 'success', msg: 'one' });
-      store.addNotification({ type: 'success', msg: 'two' });
-      store.addNotification({ type: 'success', msg: 'three' });
-      store.addNotification({ type: 'success', msg: 'four' });
+    // confirm it wasn't added
+    assert.equal(store.getNotifications().length, 3);
+  });
 
-      var notifications = store.getNotifications();
-      assert.equal(notifications.length, 4);
+  it("clearNotification clears a specific notification", function () {
+    store.addNotification({ type: 'success', msg: 'one' });
+    store.addNotification({ type: 'success', msg: 'two' });
+    store.addNotification({ type: 'success', msg: 'three' });
+    store.addNotification({ type: 'success', msg: 'four' });
 
-      // find the notification ID of the "three" message
-      var notification = _.findWhere(notifications, { msg: 'three' });
-      store.clearNotification(notification.notificationId);
+    var notifications = store.getNotifications();
+    assert.equal(notifications.length, 4);
 
-      // confirm it was removed
-      var updatedNotifications = store.getNotifications();
-      assert.equal(updatedNotifications.length, 3);
-      assert.equal(_.findWhere(updatedNotifications, { msg: 'three' }), undefined);
-    });
+    // find the notification ID of the "three" message
+    var notification = _.findWhere(notifications, { msg: 'three' });
+    store.clearNotification(notification.notificationId);
 
-    it("setNotificationFilter only sets for known notification types", function () {
-      store.setNotificationFilter('all');
-      assert.equal(store.getNotificationFilter(), 'all');
+    // confirm it was removed
+    var updatedNotifications = store.getNotifications();
+    assert.equal(updatedNotifications.length, 3);
+    assert.equal(_.findWhere(updatedNotifications, { msg: 'three' }), undefined);
+  });
 
-      store.setNotificationFilter('success');
-      assert.equal(store.getNotificationFilter(), 'success');
+  it("setNotificationFilter only sets for known notification types", function () {
+    store.setNotificationFilter('all');
+    assert.equal(store.getNotificationFilter(), 'all');
 
-      store.setNotificationFilter('error');
-      assert.equal(store.getNotificationFilter(), 'error');
+    store.setNotificationFilter('success');
+    assert.equal(store.getNotificationFilter(), 'success');
 
-      store.setNotificationFilter('info');
-      assert.equal(store.getNotificationFilter(), 'info');
+    store.setNotificationFilter('error');
+    assert.equal(store.getNotificationFilter(), 'error');
 
-      store.setNotificationFilter('broccoli');
-      assert.equal(store.getNotificationFilter(), 'info'); // this check it's still set to the previously set value
-    });
+    store.setNotificationFilter('info');
+    assert.equal(store.getNotificationFilter(), 'info');
 
-    it("clear all notifications", function () {
-      store.addNotification({ type: 'success', msg: 'one' });
-      store.addNotification({ type: 'success', msg: 'two' });
-      store.addNotification({ type: 'success', msg: 'three' });
-      store.addNotification({ type: 'success', msg: 'four' });
-      assert.equal(store.getNotifications().length, 4);
+    store.setNotificationFilter('broccoli');
+    assert.equal(store.getNotificationFilter(), 'info'); // this check it's still set to the previously set value
+  });
 
-      store.clearNotifications();
-      assert.equal(store.getNotifications().length, 0);
-    });
+  it("clear all notifications", function () {
+    store.addNotification({ type: 'success', msg: 'one' });
+    store.addNotification({ type: 'success', msg: 'two' });
+    store.addNotification({ type: 'success', msg: 'three' });
+    store.addNotification({ type: 'success', msg: 'four' });
+    assert.equal(store.getNotifications().length, 4);
 
+    store.clearNotifications();
+    assert.equal(store.getNotifications().length, 0);
   });
 
 });

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/0ca35da7/app/addons/fauxton/tests/baseSpec.js
----------------------------------------------------------------------
diff --git a/app/addons/fauxton/tests/baseSpec.js b/app/addons/fauxton/tests/baseSpec.js
index 3e4638f..da124b2 100644
--- a/app/addons/fauxton/tests/baseSpec.js
+++ b/app/addons/fauxton/tests/baseSpec.js
@@ -9,80 +9,76 @@
 // WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
 // License for the specific language governing permissions and limitations under
 // the License.
-define([
-  '../../../../test/mocha/testUtils',
-  '../../../core/api',
-  '../base',
-  'backbone',
-  'sinon'
-], function (testUtils, FauxtonAPI, Base, Backbone, sinon) {
-  var assert = testUtils.assert;
+import testUtils from "../../../../test/mocha/testUtils";
+import FauxtonAPI from "../../../core/api";
+import Base from "../base";
+import Backbone from "backbone";
+import sinon from "sinon";
+var assert = testUtils.assert;
 
 
-  describe('Fauxton RouteObject:beforeEstablish', function () {
-    var TestRouteObject, testRouteObject, mockLayout, _layout, setViewCalled;
+describe('Fauxton RouteObject:beforeEstablish', function () {
+  var TestRouteObject, testRouteObject, mockLayout, _layout, setViewCalled;
 
-    before(function () {
-      Base.initialize();
-      _layout = FauxtonAPI.masterLayout;
-      setViewCalled = false;
-    });
-
-    beforeEach(function () {
-      TestRouteObject = FauxtonAPI.RouteObject.extend({
-        crumbs: ['mycrumbs'],
-        hideNotificationCenter: true
-      });
-
-      testRouteObject = new TestRouteObject();
-      var apiBar = {};
-      apiBar.hide = sinon.spy();
+  before(function () {
+    Base.initialize();
+    _layout = FauxtonAPI.masterLayout;
+    setViewCalled = false;
+  });
 
-      // Need to find a better way of doing this
-      mockLayout = {
-        setTemplate: function () {
-          var promise = $.Deferred();
-          promise.resolve();
-          return promise;
-        },
-        clearBreadcrumbs: sinon.spy(),
-        setView: function () {
-          return {
-            render: function () {
-              setViewCalled = true;
-            }
-          };
-        },
-        renderView: function () {
-          var d = $.Deferred();
-          d.resolve();
-          return d.promise();
-        },
-        removeView: sinon.spy(),
-        hooks: [],
-        setBreadcrumbs: sinon.spy(),
-        apiBar: apiBar,
-        layout: {
-          setView: function () {}
-        }
-      };
+  beforeEach(function () {
+    TestRouteObject = FauxtonAPI.RouteObject.extend({
+      crumbs: ['mycrumbs'],
+      hideNotificationCenter: true
     });
 
-    after(function () {
-      FauxtonAPI.masterLayout = _layout;
-    });
+    testRouteObject = new TestRouteObject();
+    var apiBar = {};
+    apiBar.hide = sinon.spy();
 
-    it('Should clear breadcrumbs', function () {
-      FauxtonAPI.masterLayout = mockLayout;
-      testRouteObject.renderWith('the-route', mockLayout, 'args');
-      assert.ok(mockLayout.removeView.calledWith('#breadcrumbs'), 'Clear Breadcrumbs called');
-    });
+    // Need to find a better way of doing this
+    mockLayout = {
+      setTemplate: function () {
+        var promise = $.Deferred();
+        promise.resolve();
+        return promise;
+      },
+      clearBreadcrumbs: sinon.spy(),
+      setView: function () {
+        return {
+          render: function () {
+            setViewCalled = true;
+          }
+        };
+      },
+      renderView: function () {
+        var d = $.Deferred();
+        d.resolve();
+        return d.promise();
+      },
+      removeView: sinon.spy(),
+      hooks: [],
+      setBreadcrumbs: sinon.spy(),
+      apiBar: apiBar,
+      layout: {
+        setView: function () {}
+      }
+    };
+  });
 
-    it('Should set breadcrumbs when breadcrumbs exist', function () {
-      FauxtonAPI.masterLayout = mockLayout;
-      testRouteObject.renderWith('the-route', mockLayout, 'args');
-      assert.ok(setViewCalled, 'Set Breadcrumbs was called');
-    });
+  after(function () {
+    FauxtonAPI.masterLayout = _layout;
   });
 
+  it('Should clear breadcrumbs', function () {
+    FauxtonAPI.masterLayout = mockLayout;
+    testRouteObject.renderWith('the-route', mockLayout, 'args');
+    assert.ok(mockLayout.removeView.calledWith('#breadcrumbs'), 'Clear Breadcrumbs called');
+  });
+
+  it('Should set breadcrumbs when breadcrumbs exist', function () {
+    FauxtonAPI.masterLayout = mockLayout;
+    testRouteObject.renderWith('the-route', mockLayout, 'args');
+    assert.ok(setViewCalled, 'Set Breadcrumbs was called');
+  });
 });

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/0ca35da7/app/addons/fauxton/tests/breadcrumbsSpec.js
----------------------------------------------------------------------
diff --git a/app/addons/fauxton/tests/breadcrumbsSpec.js b/app/addons/fauxton/tests/breadcrumbsSpec.js
index 5cbe96a..3becca9 100644
--- a/app/addons/fauxton/tests/breadcrumbsSpec.js
+++ b/app/addons/fauxton/tests/breadcrumbsSpec.js
@@ -9,83 +9,78 @@
 // WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
 // License for the specific language governing permissions and limitations under
 // the License.
-define([
-  '../../../core/api',
-  '../base',
-  '../../../../test/mocha/testUtils',
-  'sinon'
-], function (FauxtonAPI, Fauxton, testUtils, sinon) {
-  var assert = testUtils.assert;
-
-  describe('Breadcrumbs', function () {
-
-    describe('can be overriden in routeObject', function () {
-      var routeObj;
-
-      beforeEach(function () {
-        var RouteObj = FauxtonAPI.RouteObject.extend({
-          overrideBreadcrumbs: true,
-          crumbs: ["crumb"]
-        });
-        routeObj = new RouteObj({});
-      });
+import FauxtonAPI from "../../../core/api";
+import Fauxton from "../base";
+import testUtils from "../../../../test/mocha/testUtils";
+import sinon from "sinon";
+var assert = testUtils.assert;
 
-      it('should not remove old breadcrumbs', function () {
-        var removeViewSpy = sinon.spy(FauxtonAPI.masterLayout, 'removeView');
+describe('Breadcrumbs', function () {
 
-        routeObj.triggerBroadcast('beforeEstablish');
-        assert.notOk(removeViewSpy.called);
-        FauxtonAPI.masterLayout.removeView.restore();
-      });
-    });
+  describe('can be overriden in routeObject', function () {
+    var routeObj;
 
-    //Breadcrumbs are create and managed in Fauxton/base.js
-    //If the route object has a crumbs function a breadcrumbs view is created
-    //and rendered on the page in #breadcrumbs
-    describe('Auto creation of breadcrumbs', function () {
-      var routeObj;
-
-      beforeEach(function () {
-        var RouteObj = FauxtonAPI.RouteObject.extend({
-          crumbs: ["crumb1", "crumb2"]
-        });
-        routeObj = new RouteObj({});
+    beforeEach(function () {
+      var RouteObj = FauxtonAPI.RouteObject.extend({
+        overrideBreadcrumbs: true,
+        crumbs: ["crumb"]
       });
+      routeObj = new RouteObj({});
+    });
 
-      afterEach(function () {
-        if (FauxtonAPI.masterLayout.removeView.restore) {
-          FauxtonAPI.masterLayout.removeView.restore();
-        }
+    it('should not remove old breadcrumbs', function () {
+      var removeViewSpy = sinon.spy(FauxtonAPI.masterLayout, 'removeView');
 
-        if (FauxtonAPI.masterLayout.setView.restore) {
-          FauxtonAPI.masterLayout.setView.restore();
-        }
-      });
+      routeObj.triggerBroadcast('beforeEstablish');
+      assert.notOk(removeViewSpy.called);
+      FauxtonAPI.masterLayout.removeView.restore();
+    });
+  });
 
-      it('should remove old breadcrumbs', function () {
-        var removeViewSpy = sinon.spy(FauxtonAPI.masterLayout, 'removeView');
+  //Breadcrumbs are create and managed in Fauxton/base.js
+  //If the route object has a crumbs function a breadcrumbs view is created
+  //and rendered on the page in #breadcrumbs
+  describe('Auto creation of breadcrumbs', function () {
+    var routeObj;
 
-        routeObj.triggerBroadcast('beforeEstablish');
-        assert.ok(removeViewSpy.called);
+    beforeEach(function () {
+      var RouteObj = FauxtonAPI.RouteObject.extend({
+        crumbs: ["crumb1", "crumb2"]
       });
+      routeObj = new RouteObj({});
+    });
 
-      it('should create new breadcrumbs', function () {
-        var setViewSpy = sinon.spy(FauxtonAPI.masterLayout, 'setView');
+    afterEach(function () {
+      if (FauxtonAPI.masterLayout.removeView.restore) {
+        FauxtonAPI.masterLayout.removeView.restore();
+      }
 
-        routeObj.triggerBroadcast('beforeEstablish');
-        assert.equal(setViewSpy.getCall(0).args[0], '#breadcrumbs');
-      });
+      if (FauxtonAPI.masterLayout.setView.restore) {
+        FauxtonAPI.masterLayout.setView.restore();
+      }
+    });
 
-      it('should not create new breadcrumbs when no crumbs are on routeObject', function () {
-        var removeViewSpy = sinon.spy(FauxtonAPI.masterLayout, 'setView');
-        routeObj.crumbs = [];
-        routeObj.triggerBroadcast('beforeEstablish');
+    it('should remove old breadcrumbs', function () {
+      var removeViewSpy = sinon.spy(FauxtonAPI.masterLayout, 'removeView');
 
-        assert.notOk(removeViewSpy.called);
-      });
+      routeObj.triggerBroadcast('beforeEstablish');
+      assert.ok(removeViewSpy.called);
+    });
+
+    it('should create new breadcrumbs', function () {
+      var setViewSpy = sinon.spy(FauxtonAPI.masterLayout, 'setView');
 
+      routeObj.triggerBroadcast('beforeEstablish');
+      assert.equal(setViewSpy.getCall(0).args[0], '#breadcrumbs');
     });
-  });
 
+    it('should not create new breadcrumbs when no crumbs are on routeObject', function () {
+      var removeViewSpy = sinon.spy(FauxtonAPI.masterLayout, 'setView');
+      routeObj.crumbs = [];
+      routeObj.triggerBroadcast('beforeEstablish');
+
+      assert.notOk(removeViewSpy.called);
+    });
 
+  });
 });

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/0ca35da7/app/addons/fauxton/tests/breadcrumbsViewSpec.js
----------------------------------------------------------------------
diff --git a/app/addons/fauxton/tests/breadcrumbsViewSpec.js b/app/addons/fauxton/tests/breadcrumbsViewSpec.js
index ef3157f..43089c1 100644
--- a/app/addons/fauxton/tests/breadcrumbsViewSpec.js
+++ b/app/addons/fauxton/tests/breadcrumbsViewSpec.js
@@ -10,94 +10,91 @@
 // License for the specific language governing permissions and limitations under
 // the License.
 
-define([
-  '../../../app',
-  '../components',
-  '../../../../test/mocha/testUtils',
-], function (app, Components, testUtils) {
-  var assert = testUtils.assert,
-    ViewSandbox = testUtils.ViewSandbox;
-
-  describe('Breadcrumbs', function () {
-
-    describe('3 Breadcrumbs', function () {
-      var breadcrumbs, viewSandbox;
-
-      // async setup with done-callback
-      beforeEach(function (done) {
-
-        // initialize a Breadcrumb-View with fake data
-        breadcrumbs = new Components.Breadcrumbs({
-          crumbs: [
-            { link: "/root", name: "root" },
-            { link: "/first", name: "first" },
-            { link: "/second", name: "second" }
-          ]
-        });
-
-        // render in a view-sandbox, which attaches it to the DOM
-        // for us, so we can test it
-        viewSandbox = new ViewSandbox();
-        viewSandbox.renderView(breadcrumbs, done);
+import app from "../../../app";
+import Components from "../components";
+import testUtils from "../../../../test/mocha/testUtils";
+var assert = testUtils.assert,
+  ViewSandbox = testUtils.ViewSandbox;
+
+describe('Breadcrumbs', function () {
+
+  describe('3 Breadcrumbs', function () {
+    var breadcrumbs, viewSandbox;
+
+    // async setup with done-callback
+    beforeEach(function (done) {
+
+      // initialize a Breadcrumb-View with fake data
+      breadcrumbs = new Components.Breadcrumbs({
+        crumbs: [
+          { link: "/root", name: "root" },
+          { link: "/first", name: "first" },
+          { link: "/second", name: "second" }
+        ]
       });
 
-      afterEach(function () {
-        // sync cleanup (done callback not provided)!
-        viewSandbox.remove();
-      });
+      // render in a view-sandbox, which attaches it to the DOM
+      // for us, so we can test it
+      viewSandbox = new ViewSandbox();
+      viewSandbox.renderView(breadcrumbs, done);
+    });
 
-      // sync test
-      it('should have 2 dividers between 3 breadcrumbs', function () {
-        assert.equal(2, breadcrumbs.$('.divider').length);
-      });
+    afterEach(function () {
+      // sync cleanup (done callback not provided)!
+      viewSandbox.remove();
     });
 
+    // sync test
+    it('should have 2 dividers between 3 breadcrumbs', function () {
+      assert.equal(2, breadcrumbs.$('.divider').length);
+    });
+  });
 
-    describe('2 Breadcrumbs, one empty', function () {
-      var breadcrumbs, viewSandbox;
 
-      beforeEach(function (done) {
-        breadcrumbs = new Components.Breadcrumbs({
-          crumbs: [
-            {link: "/root", name: "" },
-            {link: "/root", name: "crumb 2" }
-          ]
-        });
-        viewSandbox = new ViewSandbox();
-        viewSandbox.renderView(breadcrumbs, done);
-      });
+  describe('2 Breadcrumbs, one empty', function () {
+    var breadcrumbs, viewSandbox;
 
-      afterEach(function () {
-        viewSandbox.remove();
+    beforeEach(function (done) {
+      breadcrumbs = new Components.Breadcrumbs({
+        crumbs: [
+          {link: "/root", name: "" },
+          {link: "/root", name: "crumb 2" }
+        ]
       });
+      viewSandbox = new ViewSandbox();
+      viewSandbox.renderView(breadcrumbs, done);
+    });
 
-      it('should have 0 dividers for 2 breadcrumb when one is empty', function () {
-        assert.equal(0, breadcrumbs.$('.divider').length);
-      });
+    afterEach(function () {
+      viewSandbox.remove();
     });
 
+    it('should have 0 dividers for 2 breadcrumb when one is empty', function () {
+      assert.equal(0, breadcrumbs.$('.divider').length);
+    });
+  });
 
-    describe('1 Breadcrumb', function () {
-      var breadcrumbs, viewSandbox;
 
-      beforeEach(function (done) {
-        breadcrumbs = new Components.Breadcrumbs({
-          crumbs: [
-            {link: "/root", name: "root"}
-          ]
-        });
-        viewSandbox = new ViewSandbox();
-        viewSandbox.renderView(breadcrumbs, done);
-      });
+  describe('1 Breadcrumb', function () {
+    var breadcrumbs, viewSandbox;
 
-      afterEach(function () {
-        viewSandbox.remove();
+    beforeEach(function (done) {
+      breadcrumbs = new Components.Breadcrumbs({
+        crumbs: [
+          {link: "/root", name: "root"}
+        ]
       });
+      viewSandbox = new ViewSandbox();
+      viewSandbox.renderView(breadcrumbs, done);
+    });
 
-      it('should have 0 dividers for 1 breadcrumb', function () {
-        assert.equal(0, breadcrumbs.$('.divider').length);
-      });
+    afterEach(function () {
+      viewSandbox.remove();
     });
 
+    it('should have 0 dividers for 1 breadcrumb', function () {
+      assert.equal(0, breadcrumbs.$('.divider').length);
+    });
   });
+
 });

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/0ca35da7/app/addons/fauxton/tests/componentsSpec.js
----------------------------------------------------------------------
diff --git a/app/addons/fauxton/tests/componentsSpec.js b/app/addons/fauxton/tests/componentsSpec.js
index 329d862..572af56 100644
--- a/app/addons/fauxton/tests/componentsSpec.js
+++ b/app/addons/fauxton/tests/componentsSpec.js
@@ -9,31 +9,27 @@
 // WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
 // License for the specific language governing permissions and limitations under
 // the License.
-define([
-  '../../../../test/mocha/testUtils',
-  '../../../core/api',
-  '../components'
-], function (testUtils, FauxtonAPI, Components) {
-  var assert = testUtils.assert;
+import testUtils from "../../../../test/mocha/testUtils";
+import FauxtonAPI from "../../../core/api";
+import Components from "../components";
+var assert = testUtils.assert;
 
-  describe('DbSearchTypeahead', function () {
+describe('DbSearchTypeahead', function () {
 
-    // simple test to confirm that the query part of the URL and the \u9999 search end char
-    // are URL encoded
-    it('should URI encode parts of URL', function () {
-      var dbLimit = 30;
-      var typeahead = new Components.DbSearchTypeahead({
-        dbLimit: dbLimit
-      });
-      var url = typeahead.getURL('querywith[]chars', dbLimit);
+  // simple test to confirm that the query part of the URL and the \u9999 search end char
+  // are URL encoded
+  it('should URI encode parts of URL', function () {
+    var dbLimit = 30;
+    var typeahead = new Components.DbSearchTypeahead({
+      dbLimit: dbLimit
+    });
+    var url = typeahead.getURL('querywith[]chars', dbLimit);
 
-      // confirm the [] chars have been encoded
-      assert.isTrue(/%5B%5D/.test(url));
+    // confirm the [] chars have been encoded
+    assert.isTrue(/%5B%5D/.test(url));
 
-      // confirm the \u9999 char has been encoded
-      assert.isFalse(/\u9999/.test(url));
-      assert.isTrue(/%E9%A6%99/.test(url));
-    });
+    // confirm the \u9999 char has been encoded
+    assert.isFalse(/\u9999/.test(url));
+    assert.isTrue(/%E9%A6%99/.test(url));
   });
-
 });


Mime
View raw message