You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@couchdb.apache.org by ro...@apache.org on 2016/04/14 18:06:05 UTC

[1/4] fauxton commit: updated refs/heads/master to b19065e

Repository: couchdb-fauxton
Updated Branches:
  refs/heads/master f21e7615a -> b19065e3d


Change dropdown to react-select

react-select is easier to extend and customize and it also
supports rendering the result-list after a click.

it also supports react 15 and is actively maintained.

PR: #700
PR-URL: https://github.com/apache/couchdb-fauxton/pull/700
Reviewed-By: garren smith <ga...@gmail.com>


Project: http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/repo
Commit: http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/commit/b19065e3
Tree: http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/tree/b19065e3
Diff: http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/diff/b19065e3

Branch: refs/heads/master
Commit: b19065e3dd188a7241508b051e89b53be778ad6b
Parents: 05c6139
Author: Robert Kowalski <ro...@apache.org>
Authored: Tue Apr 12 17:13:54 2016 +0200
Committer: Robert Kowalski <ro...@apache.org>
Committed: Thu Apr 14 18:05:51 2016 +0200

----------------------------------------------------------------------
 .../documents/assets/less/index-results.less    |  39 ++++++-
 .../index-results.components.react.jsx          | 101 +++++--------------
 .../index-results.componentsSpec.react.jsx      |  20 ----
 package.json                                    |   1 +
 webpack.config.dev.js                           |   1 +
 webpack.config.release.js                       |   1 +
 webpack.config.test.js                          |   1 +
 7 files changed, 67 insertions(+), 97 deletions(-)
----------------------------------------------------------------------


http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/b19065e3/app/addons/documents/assets/less/index-results.less
----------------------------------------------------------------------
diff --git a/app/addons/documents/assets/less/index-results.less b/app/addons/documents/assets/less/index-results.less
index c58a3c1..dc46c6d 100644
--- a/app/addons/documents/assets/less/index-results.less
+++ b/app/addons/documents/assets/less/index-results.less
@@ -68,7 +68,6 @@
     width: auto;
   }
 
-
   .tableview-data-cell-id {
     a {
       color: @linkColor;
@@ -137,6 +136,44 @@
   .table-container-autocomplete {
     position: relative;
     width: 128px;
+    height: 29px;
+  }
+
+  .table-container-autocomplete .table-select-wrapper {
+    width: inherit;
+    position: fixed;
+  }
+
+  .Select div.Select-control {
+    border-radius: initial;
+    border: none;
+  }
+
+  .Select .Select-menu-outer {
+    border-radius: inherit;
+    border: none;
+  }
+
+  .Select-option {
+    color: #fff;
+    background-color: #333333;
+  }
+
+  .Select-option {
+    color: #fff;
+    background-color: #333333;
+  }
+
+  .Select-option:hover {
+    background-color: #E33F3B;
+  }
+
+  .Select-option:last-child {
+    border-radius: initial;
+  }
+
+  .Select .is-focused:not(.is-open) > .Select-control {
+    box-shadow: transparent;
   }
 
 }

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/b19065e3/app/addons/documents/index-results/index-results.components.react.jsx
----------------------------------------------------------------------
diff --git a/app/addons/documents/index-results/index-results.components.react.jsx b/app/addons/documents/index-results/index-results.components.react.jsx
index 9a4c565..612eeb4 100644
--- a/app/addons/documents/index-results/index-results.components.react.jsx
+++ b/app/addons/documents/index-results/index-results.components.react.jsx
@@ -21,14 +21,18 @@ define([
   '../..//fauxton/components.react',
 
   'react-bootstrap',
-  'react-autocomplete',
+  'react-select',
   'react-addons-css-transition-group',
 
-  '../../../../assets/js/plugins/prettify'
+  '../../../../assets/js/plugins/prettify',
+  'react-select/dist/react-select.css'
 ],
 
 
-function (app, FauxtonAPI, React, Stores, Actions, Components, Documents, FauxtonComponents, ReactBootstrap, Autocomplete, ReactCSSTransitionGroup) {
+function (app, FauxtonAPI, React, Stores, Actions, Components, Documents, FauxtonComponents,
+  ReactBootstrap, ReactSelect, ReactCSSTransitionGroup) {
+
+
   var store = Stores.indexResultsStore;
   var BulkActionComponent = Components.BulkActionComponent;
   var Clipboard = FauxtonComponents.Clipboard;
@@ -184,83 +188,28 @@ function (app, FauxtonAPI, React, Stores, Actions, Components, Documents, Fauxto
     }
   });
 
-  var WrappedAutocomplete = React.createClass({
-
-    getInitialState: function () {
-      return {
-        showFilters: false
-      };
-    },
-
-    showFilters: function (state) {
-      this.setState({
-        showFilters: state
-      });
-    },
-
-    render: function () {
-
-      function matchItem (item, value) {
-        return (
-          item.indexOf(value) !== -1
-        );
-      }
-
-      function renderItems (items) {
-        return items.map(function (item) {
-          return item;
-        });
-      }
-
-      var menuStyle = {
-        borderRadius: '3px',
-        boxShadow: '0 2px 12px rgba(0, 0, 0, 0.1)',
-        background: 'rgba(255, 255, 255, 0.9)',
-        padding: '0',
-        fontSize: '90%',
-        position: 'fixed',
-        overflow: 'auto',
-        maxHeight: '50%'
-      };
-
-      return (
-        <div className="table-container-autocomplete">
-          <Autocomplete
-            shouldItemRender={matchItem}
-            initialValue={this.props.selectedField}
-            items={this.props.notSelectedFields}
-            menuStyle={menuStyle}
-            onSelect={function (item) {
+  const WrappedAutocomplete = ({selectedField, notSelectedFields, index}) => {
+    const options = notSelectedFields.map((el) => {
+      return {value: el, label: el};
+    });
+
+    return (
+      <div className="table-container-autocomplete">
+        <div className="table-select-wrapper">
+          <ReactSelect
+            value={selectedField}
+            options={options}
+            clearable={false}
+            onChange={(el) => {
               Actions.changeField({
-                newSelectedRow: item,
-                index: this.props.index
+                newSelectedRow: el.value,
+                index: index
               });
-
-              this.showFilters(false);
-            }.bind(this)}
-            onChange={function (e, text) {
-              if (!text) {
-                this.showFilters(true);
-                return;
-              }
-              this.showFilters(false);
-            }.bind(this)}
-            getItemValue={function (item) { return item; }}
-            renderItem={function (item, isHighlighted) {
-              var highlight = isHighlighted ? 'table-dropdown-item-highlight ' : '';
-              return (
-                <div
-                  className={highlight + 'table-dropdown-item'}
-                  key={item}>
-                  {item}
-                </div>
-              );
             }} />
-            {this.state.showFilters ? <i className="icon icon-filter"></i> : null}
         </div>
-      );
-    }
-  });
+      </div>
+    );
+  };
 
 
   var TableView = React.createClass({

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/b19065e3/app/addons/documents/index-results/tests/index-results.componentsSpec.react.jsx
----------------------------------------------------------------------
diff --git a/app/addons/documents/index-results/tests/index-results.componentsSpec.react.jsx b/app/addons/documents/index-results/tests/index-results.componentsSpec.react.jsx
index 3bcd04e..3092d62 100644
--- a/app/addons/documents/index-results/tests/index-results.componentsSpec.react.jsx
+++ b/app/addons/documents/index-results/tests/index-results.componentsSpec.react.jsx
@@ -292,26 +292,6 @@ define([
       });
 
     });
-    describe('wrapped autocomplete', function () {
-      it('renders a filter icon if no text given', function () {
-
-        var elements = ['min_weight', 'max_weight'];
-
-        instance = TestUtils.renderIntoDocument(
-          <Views.WrappedAutocomplete selectedField="ente" />,
-          container
-        );
-
-        var $el = $(ReactDOM.findDOMNode(instance));
-
-        assert.equal($el.find('.icon-filter').length, 0);
-
-        var node = $el.find('input')[0];
-        node.value = '';
-        TestUtils.Simulate.change(node);
-        assert.equal($el.find('.icon-filter').length, 1);
-      });
-    });
 
     describe('loading', function () {
       beforeEach(function () {

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/b19065e3/package.json
----------------------------------------------------------------------
diff --git a/package.json b/package.json
index 714d347..510c6eb 100644
--- a/package.json
+++ b/package.json
@@ -77,6 +77,7 @@
     "react-autocomplete": "^0.1.4",
     "react-bootstrap": "^0.28.5",
     "react-dom": "^15.0.1",
+    "react-select": "^1.0.0-beta12",
     "request": "^2.54.0",
     "semver": "^5.1.0",
     "send": "^0.13.1",

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/b19065e3/webpack.config.dev.js
----------------------------------------------------------------------
diff --git a/webpack.config.dev.js b/webpack.config.dev.js
index 23aa847..edb4833 100644
--- a/webpack.config.dev.js
+++ b/webpack.config.dev.js
@@ -44,6 +44,7 @@ module.exports = {
       test: /\.less$/,
       loader: 'style!css!less'
     },
+    { test: /\.css$/, loader: 'style!css' },
     {
       test: /\.woff(\?v=\d+\.\d+\.\d+)?$/,
       loader: 'url?limit=10000&mimetype=application/font-woff&name=dashboard.assets/fonts/[name].[ext]'

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/b19065e3/webpack.config.release.js
----------------------------------------------------------------------
diff --git a/webpack.config.release.js b/webpack.config.release.js
index 4bdedde..492e053 100644
--- a/webpack.config.release.js
+++ b/webpack.config.release.js
@@ -69,6 +69,7 @@ module.exports = {
       test: /\.less$/,
       loader: 'style!css!less'
     },
+    { test: /\.css$/, loader: 'style!css' },
     {
       test: /\.woff(\?v=\d+\.\d+\.\d+)?$/,
       loader: 'url?limit=10000&mimetype=application/font-woff&name=dashboard.assets/fonts/[name].[ext]'

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/b19065e3/webpack.config.test.js
----------------------------------------------------------------------
diff --git a/webpack.config.test.js b/webpack.config.test.js
index 1783f22..be053c6 100644
--- a/webpack.config.test.js
+++ b/webpack.config.test.js
@@ -48,6 +48,7 @@ module.exports = {
       test: /\.less$/,
       loader: 'style!css!less'
     },
+    { test: /\.css$/, loader: 'style!css' },
     {
       test: /\.woff(\?v=\d+\.\d+\.\d+)?$/,
       loader: 'url?limit=10000&mimetype=application/font-woff&name=dashboard.assets/fonts/[name].[ext]'


[2/4] fauxton commit: updated refs/heads/master to b19065e

Posted by ro...@apache.org.
enable ES 2015

PR: #700
PR-URL: https://github.com/apache/couchdb-fauxton/pull/700
Reviewed-By: garren smith <ga...@gmail.com>


Project: http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/repo
Commit: http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/commit/a11d1a64
Tree: http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/tree/a11d1a64
Diff: http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/diff/a11d1a64

Branch: refs/heads/master
Commit: a11d1a6458f3ed9f85da0f3ff6b74f60fe818c9e
Parents: 8217fb8
Author: Robert Kowalski <ro...@apache.org>
Authored: Tue Apr 12 15:09:00 2016 +0200
Committer: Robert Kowalski <ro...@apache.org>
Committed: Thu Apr 14 18:05:51 2016 +0200

----------------------------------------------------------------------
 .babelrc | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)
----------------------------------------------------------------------


http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/a11d1a64/.babelrc
----------------------------------------------------------------------
diff --git a/.babelrc b/.babelrc
index 2e9146f..e7bacab 100644
--- a/.babelrc
+++ b/.babelrc
@@ -1,5 +1,6 @@
 {
   "presets": [
-    "react"
+    "react",
+    "es2015"
   ]
 }


[3/4] fauxton commit: updated refs/heads/master to b19065e

Posted by ro...@apache.org.
update to react 15

PR: #700
PR-URL: https://github.com/apache/couchdb-fauxton/pull/700
Reviewed-By: garren smith <ga...@gmail.com>


Project: http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/repo
Commit: http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/commit/05c61394
Tree: http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/tree/05c61394
Diff: http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/diff/05c61394

Branch: refs/heads/master
Commit: 05c613949058e77da5a08f3f19f80cfa3c2a540b
Parents: a11d1a6
Author: Robert Kowalski <ro...@apache.org>
Authored: Tue Apr 12 15:09:32 2016 +0200
Committer: Robert Kowalski <ro...@apache.org>
Committed: Thu Apr 14 18:05:51 2016 +0200

----------------------------------------------------------------------
 package.json | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)
----------------------------------------------------------------------


http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/05c61394/package.json
----------------------------------------------------------------------
diff --git a/package.json b/package.json
index d9c60d1..714d347 100644
--- a/package.json
+++ b/package.json
@@ -71,11 +71,12 @@
     "nano": "~5.12.0",
     "optimist": "^0.6.1",
     "papaparse": "^4.1.2",
-    "react": "^0.14.7",
-    "react-addons-css-transition-group": "^0.14.7",
+    "react": "^15.0.1",
+    "react-addons-css-transition-group": "^15.0.1",
+    "react-addons-test-utils": "^15.0.1",
     "react-autocomplete": "^0.1.4",
-    "react-bootstrap": "^0.28.2",
-    "react-dom": "^0.14.7",
+    "react-bootstrap": "^0.28.5",
+    "react-dom": "^15.0.1",
     "request": "^2.54.0",
     "semver": "^5.1.0",
     "send": "^0.13.1",


[4/4] fauxton commit: updated refs/heads/master to b19065e

Posted by ro...@apache.org.
get ready for react 15

PR: #700
PR-URL: https://github.com/apache/couchdb-fauxton/pull/700
Reviewed-By: garren smith <ga...@gmail.com>


Project: http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/repo
Commit: http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/commit/8217fb80
Tree: http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/tree/8217fb80
Diff: http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/diff/8217fb80

Branch: refs/heads/master
Commit: 8217fb80cdc56a1c01b477bcc318bd9c9f75f4e9
Parents: f21e761
Author: Robert Kowalski <ro...@apache.org>
Authored: Tue Apr 12 14:22:42 2016 +0200
Committer: Robert Kowalski <ro...@apache.org>
Committed: Thu Apr 14 18:05:51 2016 +0200

----------------------------------------------------------------------
 .../components/react-components.react.jsx       | 13 ++++++++--
 .../components/tests/badgesSpec.react.jsx       |  9 +++----
 .../tests/codeEditorPanelSpec.react.jsx         |  2 +-
 .../tests/deleteDatabaseModalSpec.react.jsx     |  5 ++--
 app/addons/components/tests/docSpec.react.jsx   |  6 ++---
 .../databases/tests/componentsSpec.react.jsx    | 25 ++++++++++++--------
 .../tests/pagination.componentSpec.react.jsx    |  4 ++--
 .../fauxton/tests/componentsSpec.react.jsx      | 24 +++++++++----------
 8 files changed, 52 insertions(+), 36 deletions(-)
----------------------------------------------------------------------


http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/8217fb80/app/addons/components/react-components.react.jsx
----------------------------------------------------------------------
diff --git a/app/addons/components/react-components.react.jsx b/app/addons/components/react-components.react.jsx
index 1dadcd4..0ad9b85 100644
--- a/app/addons/components/react-components.react.jsx
+++ b/app/addons/components/react-components.react.jsx
@@ -1041,7 +1041,8 @@ define([
         <div className="checkbox inline">
           <input
             id={'checkbox-' + this.props.docIdentifier}
-            checked={this.props.checked ? 'checked="checked"' : null}
+            checked={this.props.checked}
+            data-checked={this.props.checked}
             type="checkbox"
             onChange={this.onChange}
             className="js-row-select" />
@@ -1287,7 +1288,15 @@ define([
 
     renderChildren: function () {
       return React.Children.map(this.props.children, function (child, key) {
-        return React.cloneElement(child, this.props);
+
+        const props = {};
+        Object.keys(this.props).filter((k) => {
+          return this.props.hasOwnProperty(k);
+        }).map((k) => {
+          return props[k] = this.props[k];
+        });
+
+        return React.cloneElement(child, props);
       }.bind(this));
     },
 

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/8217fb80/app/addons/components/tests/badgesSpec.react.jsx
----------------------------------------------------------------------
diff --git a/app/addons/components/tests/badgesSpec.react.jsx b/app/addons/components/tests/badgesSpec.react.jsx
index bd6c0e5..5504cc1 100644
--- a/app/addons/components/tests/badgesSpec.react.jsx
+++ b/app/addons/components/tests/badgesSpec.react.jsx
@@ -14,8 +14,9 @@ define([
   '../react-components.react',
   '../../../../test/mocha/testUtils',
   'react',
+  'react-dom',
   'react-addons-test-utils',
-], function (FauxtonAPI, ReactComponents, utils, React, TestUtils) {
+], function (FauxtonAPI, ReactComponents, utils, React, ReactDOM, TestUtils) {
 
   var assert = utils.assert;
 
@@ -26,7 +27,7 @@ define([
     });
 
     afterEach(function () {
-      React.unmountComponentAtNode(React.findDOMNode(instance).parentNode);
+      ReactDOM.unmountComponentAtNode(ReactDOM.findDOMNode(instance).parentNode);
     });
 
     it('renders a list of badges', function () {
@@ -35,7 +36,7 @@ define([
         container
       );
 
-      var $el = $(instance.getDOMNode());
+      var $el = $(ReactDOM.findDOMNode(instance));
 
       assert.equal($el.find('.component-badge').length, 2);
     });
@@ -46,7 +47,7 @@ define([
         container
       );
 
-      var $el = $(instance.getDOMNode());
+      var $el = $(ReactDOM.findDOMNode(instance));
 
       assert.equal($el.find('.component-badge').text(), 'foofoo×barfoo×');
     });

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/8217fb80/app/addons/components/tests/codeEditorPanelSpec.react.jsx
----------------------------------------------------------------------
diff --git a/app/addons/components/tests/codeEditorPanelSpec.react.jsx b/app/addons/components/tests/codeEditorPanelSpec.react.jsx
index 5ec0160..7d76162 100644
--- a/app/addons/components/tests/codeEditorPanelSpec.react.jsx
+++ b/app/addons/components/tests/codeEditorPanelSpec.react.jsx
@@ -77,7 +77,7 @@ define([
         // confirm there are no newlines in the code at this point
         assert.equal(codeEditorEl.getValue().match(/\n/g), null);
 
-        TestUtils.Simulate.click($(React.findDOMNode(codeEditorEl)).find('.beautify')[0]);
+        TestUtils.Simulate.click($(ReactDOM.findDOMNode(codeEditorEl)).find('.beautify')[0]);
 
         // now confirm newlines are found
         assert.equal(codeEditorEl.getValue().match(/\n/g).length, 2);

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/8217fb80/app/addons/components/tests/deleteDatabaseModalSpec.react.jsx
----------------------------------------------------------------------
diff --git a/app/addons/components/tests/deleteDatabaseModalSpec.react.jsx b/app/addons/components/tests/deleteDatabaseModalSpec.react.jsx
index 08bf806..609bb43 100644
--- a/app/addons/components/tests/deleteDatabaseModalSpec.react.jsx
+++ b/app/addons/components/tests/deleteDatabaseModalSpec.react.jsx
@@ -15,8 +15,9 @@ define([
   '../../../../test/mocha/testUtils',
   'react-bootstrap',
   'react',
+  'react-dom',
   'react-addons-test-utils',
-], function (FauxtonAPI, ReactComponents, utils, ReactBootstrap, React, TestUtils) {
+], function (FauxtonAPI, ReactComponents, utils, ReactBootstrap, React, ReactDOM, TestUtils) {
 
   var assert = utils.assert;
   var Modal = ReactBootstrap.Modal;
@@ -30,7 +31,7 @@ define([
     });
 
     afterEach(function () {
-      React.unmountComponentAtNode(container);
+      ReactDOM.unmountComponentAtNode(container);
     });
 
     it('submitting is disabled when initially rendered', function () {

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/8217fb80/app/addons/components/tests/docSpec.react.jsx
----------------------------------------------------------------------
diff --git a/app/addons/components/tests/docSpec.react.jsx b/app/addons/components/tests/docSpec.react.jsx
index 633972a..1eb52bd 100644
--- a/app/addons/components/tests/docSpec.react.jsx
+++ b/app/addons/components/tests/docSpec.react.jsx
@@ -35,7 +35,7 @@ define([
     });
 
     afterEach(function () {
-      ReactDOM.unmountComponentAtNode(container);
+      ReactDOM.unmountComponentAtNode(ReactDOM.findDOMNode(el).parentNode);
     });
 
     it('hosts child elements', function () {
@@ -61,7 +61,7 @@ define([
         <ReactComponents.Document isDeletable={true} checked={true} docIdentifier="foo" />,
         container
       );
-      assert.equal($(ReactDOM.findDOMNode(el)).find('input[type="checkbox"]').attr('checked'), 'checked');
+      assert.equal($(ReactDOM.findDOMNode(el)).find('[data-checked="true"]').length, 1);
     });
 
     it('you can uncheck it', function () {
@@ -69,7 +69,7 @@ define([
         <ReactComponents.Document isDeletable={true} docIdentifier="foo" />,
         container
       );
-      assert.equal($(ReactDOM.findDOMNode(el)).find('input[type="checkbox"]').attr('checked'), undefined);
+      assert.equal($(ReactDOM.findDOMNode(el)).find('[data-checked="true"]').length, 0);
     });
 
     it('it calls an onchange callback', function () {

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/8217fb80/app/addons/databases/tests/componentsSpec.react.jsx
----------------------------------------------------------------------
diff --git a/app/addons/databases/tests/componentsSpec.react.jsx b/app/addons/databases/tests/componentsSpec.react.jsx
index f4b9f69..a1a5442 100644
--- a/app/addons/databases/tests/componentsSpec.react.jsx
+++ b/app/addons/databases/tests/componentsSpec.react.jsx
@@ -96,14 +96,17 @@ define([
     });
 
     it('renders base data of DBs', function () {
-      assert.equal(1 + 2, dbEl.getDOMNode().getElementsByTagName('tr').length);
-      assert.equal("db1", dbEl.getDOMNode().getElementsByTagName('tr')[1].getElementsByTagName('td')[0].innerText.trim());
-      assert.equal("2.0 MB", dbEl.getDOMNode().getElementsByTagName('tr')[1].getElementsByTagName('td')[1].innerText.trim());
-      assert.equal("88", dbEl.getDOMNode().getElementsByTagName('tr')[1].getElementsByTagName('td')[2].innerText.trim());
-      assert.equal(0, dbEl.getDOMNode().getElementsByTagName('tr')[1].getElementsByTagName('td')[2].getElementsByTagName("i").length);
-      assert.equal(3, dbEl.getDOMNode().getElementsByTagName('tr')[1].getElementsByTagName('td')[4].getElementsByTagName("a").length);
-      assert.equal("db2", dbEl.getDOMNode().getElementsByTagName('tr')[2].getElementsByTagName('td')[0].innerText.trim());
-      assert.equal(1, dbEl.getDOMNode().getElementsByTagName('tr')[2].getElementsByTagName('td')[2].getElementsByTagName("i").length);
+
+      const el = ReactDOM.findDOMNode(dbEl);
+
+      assert.equal(1 + 2, el.getElementsByTagName('tr').length);
+      assert.equal("db1", el.getElementsByTagName('tr')[1].getElementsByTagName('td')[0].innerText.trim());
+      assert.equal("2.0 MB", el.getElementsByTagName('tr')[1].getElementsByTagName('td')[1].innerText.trim());
+      assert.equal("88", el.getElementsByTagName('tr')[1].getElementsByTagName('td')[2].innerText.trim());
+      assert.equal(0, el.getElementsByTagName('tr')[1].getElementsByTagName('td')[2].getElementsByTagName("i").length);
+      assert.equal(3, el.getElementsByTagName('tr')[1].getElementsByTagName('td')[4].getElementsByTagName("a").length);
+      assert.equal("db2", el.getElementsByTagName('tr')[2].getElementsByTagName('td')[0].innerText.trim());
+      assert.equal(1, el.getElementsByTagName('tr')[2].getElementsByTagName('td')[2].getElementsByTagName("i").length);
     });
 
   });
@@ -131,7 +134,8 @@ define([
     it("Creates a database with given name", function () {
       createCalled = false;
       passedDbName = null;
-      TestUtils.findRenderedDOMComponentWithTag(addEl, 'input').getDOMNode().value = "testdb";
+      const el = TestUtils.findRenderedDOMComponentWithTag(addEl, 'input');
+      ReactDOM.findDOMNode(el).value = "testdb";
       addEl.onAddDatabase();
       assert.equal(true, createCalled);
       assert.equal("testdb", passedDbName);
@@ -185,7 +189,8 @@ define([
     it("jumps to an existing DB from input", function () {
       jumpCalled = false;
       passedDbName = null;
-      TestUtils.findRenderedDOMComponentWithTag(jumpEl, 'input').getDOMNode().value = "db2";
+      const input = TestUtils.findRenderedDOMComponentWithTag(jumpEl, 'input');
+      input.value = "db2";
       jumpEl.jumpToDb();
       assert.equal(true, jumpCalled);
       assert.equal("db2", passedDbName);

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/8217fb80/app/addons/documents/pagination/tests/pagination.componentSpec.react.jsx
----------------------------------------------------------------------
diff --git a/app/addons/documents/pagination/tests/pagination.componentSpec.react.jsx b/app/addons/documents/pagination/tests/pagination.componentSpec.react.jsx
index 560daa7..4b2358b 100644
--- a/app/addons/documents/pagination/tests/pagination.componentSpec.react.jsx
+++ b/app/addons/documents/pagination/tests/pagination.componentSpec.react.jsx
@@ -65,7 +65,7 @@ define([
           container
         );
         var regexp = new RegExp(customLabel);
-        assert.ok(regexp.test(React.findDOMNode(selectorEl).outerHTML));
+        assert.ok(regexp.test(ReactDOM.findDOMNode(selectorEl).outerHTML));
       });
 
       it('applies custom options', function () {
@@ -76,7 +76,7 @@ define([
             perPage={10} />,
           container
         );
-        var options = $(React.findDOMNode(selectorEl)).find('option');
+        var options = $(ReactDOM.findDOMNode(selectorEl)).find('option');
         assert.equal(options.length, 3);
         assert.equal(options[0].innerHTML, "1");
         assert.equal(options[1].innerHTML, "2");

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/8217fb80/app/addons/fauxton/tests/componentsSpec.react.jsx
----------------------------------------------------------------------
diff --git a/app/addons/fauxton/tests/componentsSpec.react.jsx b/app/addons/fauxton/tests/componentsSpec.react.jsx
index a4c8554..74e0cf7 100644
--- a/app/addons/fauxton/tests/componentsSpec.react.jsx
+++ b/app/addons/fauxton/tests/componentsSpec.react.jsx
@@ -42,23 +42,23 @@ define([
     });
 
     it('renders trayid and custom classes', function () {
-      assert(trayEl.getDOMNode().getAttribute('class').indexOf('traytest') >= 0);
+      assert(ReactDOM.findDOMNode(trayEl).getAttribute('class').indexOf('traytest') >= 0);
     });
 
     it('is initially closed', function () {
-      assert.equal('none', trayEl.getDOMNode().style.display);
+      assert.equal('none', ReactDOM.findDOMNode(trayEl).style.display);
     });
 
     it('shows when requested', function () {
       trayEl.setVisible(true, function () {
-        assert.equal('block', trayEl.getDOMNode().style.display);
+        assert.equal('block', ReactDOM.findDOMNode(trayEl).style.display);
       });
     });
 
     it('hides when requested', function () {
       trayEl.show(function () {
         trayEl.setVisible(false, function () {
-          assert.equal('none', trayEl.getDOMNode().style.display);
+          assert.equal('none', ReactDOM.findDOMNode(trayEl).style.display);
         });
       });
     });
@@ -71,14 +71,14 @@ define([
 
     it('toggles open with callback', function () {
       trayEl.toggle(function () {
-        assert.equal('block', trayEl.getDOMNode().style.display);
+        assert.equal('block', ReactDOM.findDOMNode(trayEl).style.display);
       });
     });
 
     it('toggles close again with callback', function () {
       trayEl.show(function () {
         trayEl.toggle(function () {
-          assert.equal('none', trayEl.getDOMNode().style.display);
+          assert.equal('none', ReactDOM.findDOMNode(trayEl).style.display);
         });
       });
     });
@@ -140,7 +140,7 @@ define([
         container
       );
 
-      var lis = pageEl.getDOMNode().getElementsByTagName("li");
+      var lis = ReactDOM.findDOMNode(pageEl).getElementsByTagName("li");
       assert.equal(1 + 3 + 1, lis.length);
       assert(nvl(lis[0].getAttribute("class")).indexOf("disabled") < 0);
       assert(nvl(lis[1].getAttribute("class")).indexOf("active") < 0);
@@ -157,7 +157,7 @@ define([
         container
       );
 
-      var lis = pageEl.getDOMNode().getElementsByTagName("li");
+      var lis = ReactDOM.findDOMNode(pageEl).getElementsByTagName("li");
       assert.equal(1 + 6 + 1, lis.length);
     });
 
@@ -166,7 +166,7 @@ define([
         <Views.Pagination page={3} total={600} />,
         container
       );
-      var lis = pageEl.getDOMNode().getElementsByTagName("li");
+      var lis = ReactDOM.findDOMNode(pageEl).getElementsByTagName("li");
       assert.equal(1 + 10 + 1, lis.length);
       assert(nvl(lis[3].getAttribute("class")).indexOf("active") >= 0);
       assert.equal("3", lis[3].innerText);
@@ -180,7 +180,7 @@ define([
         container
       );
 
-      var lis = pageEl.getDOMNode().getElementsByTagName("li");
+      var lis = ReactDOM.findDOMNode(pageEl).getElementsByTagName("li");
       assert.equal(1 + 10 + 1, lis.length);
       assert(nvl(lis[6].getAttribute("class")).indexOf("active") >= 0);
       assert.equal("7", lis[3].innerText);
@@ -194,7 +194,7 @@ define([
         container
       );
 
-      var lis = pageEl.getDOMNode().getElementsByTagName("li");
+      var lis = ReactDOM.findDOMNode(pageEl).getElementsByTagName("li");
       assert.equal(1 + 10 + 1, lis.length);
       assert(nvl(lis[9].getAttribute("class")).indexOf("active") >= 0);
       assert.equal("23", lis[3].innerText);
@@ -208,7 +208,7 @@ define([
         <Views.Pagination page={1} total={1000} maxNavPages={maxNavPages} />,
         container
       );
-      var lis = pageEl.getDOMNode().getElementsByTagName("li");
+      var lis = ReactDOM.findDOMNode(pageEl).getElementsByTagName("li");
       assert.equal(1 + maxNavPages + 1, lis.length);
     });