removing react 14 warnings
Project: http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/repo Commit: http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/commit/e6450a0d Tree: http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/tree/e6450a0d Diff: http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/diff/e6450a0d Branch: refs/heads/master Commit: e6450a0d0c9710d79e96bc924c447b8cb12f01b8 Parents: cab6fc2 Author: Ben Keen <[email protected]> Authored: Tue Jan 19 10:33:45 2016 -0800 Committer: Ben Keen <[email protected]> Committed: Mon Feb 1 08:39:35 2016 -0800 ---------------------------------------------------------------------- app/addons/activetasks/components.react.jsx | 34 ++++++------ .../tests/activetasks.componentsSpec.react.jsx | 13 ++--- app/addons/auth/components.react.jsx | 13 ++--- .../auth/test/auth.componentsSpec.react.jsx | 31 +++++------ app/addons/cluster/tests/clusterSpec.react.jsx | 10 ++-- .../compaction/tests/componentsSpec.react.jsx | 15 +++--- .../components/react-components.react.jsx | 25 +++++---- .../tests/apiBarControllerSpec.react.jsx | 31 +++++------ .../components/tests/beautifySpec.react.jsx | 14 ++--- .../tests/codeEditorPanelSpec.react.jsx | 13 ++--- .../components/tests/codeEditorSpec.react.jsx | 7 +-- .../tests/confirmButtonSpec.react.jsx | 12 ++--- app/addons/components/tests/docSpec.react.jsx | 32 ++++++------ .../tests/headerTogglebuttonSpec.react.jsx | 10 ++-- .../tests/paddedBorderedBoxSpec.react.jsx | 10 ++-- .../tests/stringEditModalSpec.react.jsx | 55 +++----------------- .../components/tests/styledSelectSpec.react.jsx | 10 ++-- .../components/tests/zenModeSpec.react.jsx | 17 +++--- app/addons/cors/tests/componentsSpec.react.jsx | 55 ++++++++++---------- app/addons/databases/components.react.jsx | 27 +++++----- .../databases/tests/componentsSpec.react.jsx | 31 +++++------ .../documents/changes/components.react.jsx | 19 ++++--- .../tests/changes.componentsSpec.react.jsx | 53 ++++++++++--------- .../documents/doc-editor/components.react.jsx | 5 +- .../tests/doc-editor.componentsSpec.react.jsx | 55 +++++++++----------- app/addons/documents/helpers.js | 6 ++- .../tests/viewIndex.componentsSpec.react.jsx | 23 ++++---- .../index-results.components.react.jsx | 2 +- .../index-results.componentsSpec.react.jsx | 40 +++++++------- .../mango/tests/mango.componentsSpec.react.jsx | 25 +++++---- .../tests/pagination.componentSpec.react.jsx | 14 ++--- .../queryoptions/queryoptions.react.jsx | 11 ++-- .../tests/queryoptions.componentsSpec.react.jsx | 21 ++++---- app/addons/documents/sidebar/sidebar.react.jsx | 10 ++-- .../tests/sidebar.componentsSpec.react.jsx | 11 ++-- app/addons/documents/tests/helpersSpec.js | 31 +++++++++++ app/addons/fauxton/components.react.jsx | 11 ++-- .../fauxton/navigation/components.react.jsx | 5 +- .../navigation/tests/componentsSpec.react.jsx | 13 ++--- .../notifications/notifications.react.jsx | 11 ++-- .../tests/componentsSpec.react.jsx | 43 +++++++-------- .../fauxton/tests/componentsSpec.react.jsx | 25 ++++----- .../permissions/tests/componentsSpec.react.jsx | 25 ++++----- .../setup/tests/setupComponentsSpec.react.jsx | 21 ++++---- .../tests/componentsSpec.react.jsx | 21 ++++---- app/config.js | 1 + app/core/routeObject.js | 7 +-- app/core/tests/routeObjectSpec.js | 11 ++-- 48 files changed, 504 insertions(+), 481 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/e6450a0d/app/addons/activetasks/components.react.jsx ---------------------------------------------------------------------- diff --git a/app/addons/activetasks/components.react.jsx b/app/addons/activetasks/components.react.jsx index 7e65399..b8d294c 100644 --- a/app/addons/activetasks/components.react.jsx +++ b/app/addons/activetasks/components.react.jsx @@ -14,12 +14,13 @@ define([ 'app', 'api', 'react', + 'react-dom', 'addons/activetasks/stores', 'addons/activetasks/resources', 'addons/activetasks/actions', 'addons/components/react-components.react', 'addons/fauxton/components.react' -], function (app, FauxtonAPI, React, Stores, Resources, Actions, Components, ComponentsReact) { +], function (app, FauxtonAPI, React, ReactDOM, Stores, Resources, Actions, Components, ComponentsReact) { var activeTasksStore = Stores.activeTasksStore; var ReactCSSTransitionGroup = React.addons.CSSTransitionGroup; @@ -263,21 +264,20 @@ define([ var th_class = 'header-field ' + this.props.headerName; return ( - <input - type="radio" - name="header-field" - id={this.props.headerName} - value={this.props.headerName} - className="header-field radio" - onChange={this.onTableHeaderClick}> - <td className={th_class + " tableheader"} value={this.props.headerName}> - <label - className="header-field label-text active-tasks-header noselect" - htmlFor={this.props.headerName}> - {this.props.displayName} {arrow} - </label> - </td> - </input> + <td className={th_class + " tableheader"} value={this.props.headerName}> + <input + type="radio" + name="header-field" + id={this.props.headerName} + value={this.props.headerName} + className="header-field radio" + onChange={this.onTableHeaderClick} /> + <label + className="header-field label-text active-tasks-header noselect" + htmlFor={this.props.headerName}> + {this.props.displayName} {arrow} + </label> + </td> ); } }); @@ -396,7 +396,7 @@ define([ e.preventDefault(); this.refs.view_source_sequence_btn.toggle(function (shown) { if (shown) { - React.findDOMNode(this.refs.view_source_sequence_btn).focus(); + ReactDOM.findDOMNode(this.refs.view_source_sequence_btn).focus(); } }.bind(this)); }, http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/e6450a0d/app/addons/activetasks/tests/activetasks.componentsSpec.react.jsx ---------------------------------------------------------------------- diff --git a/app/addons/activetasks/tests/activetasks.componentsSpec.react.jsx b/app/addons/activetasks/tests/activetasks.componentsSpec.react.jsx index 6db8f66..6ad4413 100644 --- a/app/addons/activetasks/tests/activetasks.componentsSpec.react.jsx +++ b/app/addons/activetasks/tests/activetasks.componentsSpec.react.jsx @@ -16,9 +16,10 @@ define([ 'addons/activetasks/stores', 'addons/activetasks/tests/fakeActiveTaskResponse', 'react', + 'react-dom', 'addons/activetasks/actions', 'testUtils' -], function (FauxtonAPI, ActiveTasks, Components, Stores, fakedResponse, React, Actions, utils) { +], function (FauxtonAPI, ActiveTasks, Components, Stores, fakedResponse, React, ReactDOM, Actions, utils) { var assert = utils.assert; var restore = utils.restore; var TestUtils = React.addons.TestUtils; @@ -39,7 +40,7 @@ define([ }); afterEach(function () { - React.unmountComponentAtNode(pollingWidgetDiv); + ReactDOM.unmountComponentAtNode(pollingWidgetDiv); restore(Actions.changePollingInterval); }); @@ -67,7 +68,7 @@ define([ }); afterEach(function () { - React.unmountComponentAtNode(tableDiv); + ReactDOM.unmountComponentAtNode(tableDiv); restore(window.confirm); }); @@ -88,7 +89,7 @@ define([ it('should trigger change to radio buttons', function () { _.each(radioIDs, function (radioID) { spy = sinon.spy(Actions, 'switchTab'); - TestUtils.Simulate.change($(table.getDOMNode()).find('#' + radioID)[0]); + TestUtils.Simulate.change($(ReactDOM.findDOMNode(table)).find('#' + radioID)[0]); assert.ok(spy.calledOnce); spy.restore(); }); @@ -96,7 +97,7 @@ define([ it('should trigger change to search term', function () { spy = sinon.spy(Actions, 'setSearchTerm'); - TestUtils.Simulate.change($(table.getDOMNode()).find('.searchbox')[0], {target: {value: 'searching'}}); + TestUtils.Simulate.change($(ReactDOM.findDOMNode(table)).find('.searchbox')[0], {target: {value: 'searching'}}); assert.ok(spy.calledOnce); }); }); @@ -118,7 +119,7 @@ define([ it('should trigger change to which header to sort by', function () { _.each(headerNames, function (header) { spy = sinon.spy(Actions, 'sortByColumnHeader'); - TestUtils.Simulate.change($(table.getDOMNode()).find('#' + header)[0]); + TestUtils.Simulate.change($(ReactDOM.findDOMNode(table)).find('#' + header)[0]); assert.ok(spy.calledOnce); spy.restore(); }); http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/e6450a0d/app/addons/auth/components.react.jsx ---------------------------------------------------------------------- diff --git a/app/addons/auth/components.react.jsx b/app/addons/auth/components.react.jsx index d4d1abb..448c7c0 100644 --- a/app/addons/auth/components.react.jsx +++ b/app/addons/auth/components.react.jsx @@ -14,9 +14,10 @@ define([ 'app', 'api', 'react', + 'react-dom', 'addons/auth/stores', 'addons/auth/actions' -], function (app, FauxtonAPI, React, AuthStores, AuthActions) { +], function (app, FauxtonAPI, React, ReactDOM, AuthStores, AuthActions) { var changePasswordStore = AuthStores.changePasswordStore; var createAdminStore = AuthStores.createAdminStore; @@ -64,8 +65,8 @@ define([ if (this.state.username !== '' || this.state.password !== '') { return false; } - var username = (this.props.testBlankUsername) ? this.props.testBlankUsername : React.findDOMNode(this.refs.username).value; - var password = (this.props.testBlankPassword) ? this.props.testBlankPassword : React.findDOMNode(this.refs.password).value; + var username = (this.props.testBlankUsername) ? this.props.testBlankUsername : ReactDOM.findDOMNode(this.refs.username).value; + var password = (this.props.testBlankPassword) ? this.props.testBlankPassword : ReactDOM.findDOMNode(this.refs.password).value; this.setState({ username: username, password: password }); // doesn't set immediately, hence separate login() call this.login(username, password); @@ -77,7 +78,7 @@ define([ }, componentDidMount: function () { - React.findDOMNode(this.refs.username).focus(); + ReactDOM.findDOMNode(this.refs.username).focus(); }, render: function () { @@ -128,7 +129,7 @@ define([ }, componentDidMount: function () { - React.findDOMNode(this.refs.password).focus(); + ReactDOM.findDOMNode(this.refs.password).focus(); changePasswordStore.on('change', this.onChange, this); }, @@ -203,7 +204,7 @@ define([ }, componentDidMount: function () { - React.findDOMNode(this.refs.username).focus(); + ReactDOM.findDOMNode(this.refs.username).focus(); createAdminStore.on('change', this.onChange, this); }, http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/e6450a0d/app/addons/auth/test/auth.componentsSpec.react.jsx ---------------------------------------------------------------------- diff --git a/app/addons/auth/test/auth.componentsSpec.react.jsx b/app/addons/auth/test/auth.componentsSpec.react.jsx index 5113147..f8315bb 100644 --- a/app/addons/auth/test/auth.componentsSpec.react.jsx +++ b/app/addons/auth/test/auth.componentsSpec.react.jsx @@ -12,11 +12,12 @@ define([ 'api', 'react', + 'react-dom', 'testUtils', 'addons/auth/components.react', 'addons/auth/stores', 'addons/auth/actions' -], function (FauxtonAPI, React, utils, Components, Stores, Actions) { +], function (FauxtonAPI, React, ReactDOM, utils, Components, Stores, Actions) { var assert = utils.assert; var TestUtils = React.addons.TestUtils; @@ -34,14 +35,14 @@ define([ }); afterEach(function () { - React.unmountComponentAtNode(container); + ReactDOM.unmountComponentAtNode(container); createAdminSidebarStore.reset(); Actions.login.restore(); }); it('should trigger login event when form submitted', function () { loginForm = TestUtils.renderIntoDocument(<Components.LoginForm />, container); - TestUtils.Simulate.submit($(loginForm.getDOMNode()).find('#login')[0]); + TestUtils.Simulate.submit($(ReactDOM.findDOMNode(loginForm)).find('#login')[0]); assert.ok(stub.calledOnce); }); @@ -55,7 +56,7 @@ define([ testBlankPassword={password} />, container); - TestUtils.Simulate.submit($(loginForm.getDOMNode()).find('#login')[0]); + TestUtils.Simulate.submit($(ReactDOM.findDOMNode(loginForm)).find('#login')[0]); assert.ok(stub.calledOnce); // confirm Actions.login() received the values that weren't in the DOM @@ -75,24 +76,24 @@ define([ }); afterEach(function () { - React.unmountComponentAtNode(container); + ReactDOM.unmountComponentAtNode(container); }); it('should call action to update password on field change', function () { var spy = sinon.spy(Actions, 'updateChangePasswordField'); - TestUtils.Simulate.change($(changePasswordForm.getDOMNode()).find('#password')[0], { target: { value: 'bobsyouruncle' }}); + TestUtils.Simulate.change($(ReactDOM.findDOMNode(changePasswordForm)).find('#password')[0], { target: { value: 'bobsyouruncle' }}); assert.ok(spy.calledOnce); }); it('should call action to update password confirm on field change', function () { var spy = sinon.spy(Actions, 'updateChangePasswordConfirmField'); - TestUtils.Simulate.change($(changePasswordForm.getDOMNode()).find('#password-confirm')[0], { target: { value: 'hotdiggity' }}); + TestUtils.Simulate.change($(ReactDOM.findDOMNode(changePasswordForm)).find('#password-confirm')[0], { target: { value: 'hotdiggity' }}); assert.ok(spy.calledOnce); }); it('should call action to submit form', function () { var stub = sinon.stub(Actions, 'changePassword', function () {}); - TestUtils.Simulate.submit($(changePasswordForm.getDOMNode()).find('#change-password')[0]); + TestUtils.Simulate.submit($(ReactDOM.findDOMNode(changePasswordForm)).find('#change-password')[0]); assert.ok(stub.calledOnce); }); }); @@ -106,18 +107,18 @@ define([ }); afterEach(function () { - React.unmountComponentAtNode(container); + ReactDOM.unmountComponentAtNode(container); }); it('should call action to update username on field change', function () { var spy = sinon.spy(Actions, 'updateCreateAdminUsername'); - TestUtils.Simulate.change($(createAdminForm.getDOMNode()).find('#username')[0], { target: { value: 'catsmeow' }}); + TestUtils.Simulate.change($(ReactDOM.findDOMNode(createAdminForm)).find('#username')[0], { target: { value: 'catsmeow' }}); assert.ok(spy.calledOnce); }); it('should call action to update password confirm on field change', function () { var spy = sinon.spy(Actions, 'updateCreateAdminPassword'); - TestUtils.Simulate.change($(createAdminForm.getDOMNode()).find('#password')[0], { target: { value: 'topnotch' }}); + TestUtils.Simulate.change($(ReactDOM.findDOMNode(createAdminForm)).find('#password')[0], { target: { value: 'topnotch' }}); assert.ok(spy.calledOnce); }); }); @@ -132,16 +133,16 @@ define([ }); afterEach(function () { - React.unmountComponentAtNode(container); + ReactDOM.unmountComponentAtNode(container); }); it('confirm the default selected nav item is the change pwd page', function () { - assert.equal($(createAdminSidebar.getDOMNode()).find('.active').find('a').attr('href'), '#changePassword'); + assert.equal($(ReactDOM.findDOMNode(createAdminSidebar)).find('.active').find('a').attr('href'), '#changePassword'); }); it('confirm clicking a sidebar nav item selects it in the DOM', function () { - TestUtils.Simulate.click($(createAdminSidebar.getDOMNode()).find('li[data-page="addAdmin"]').find('a')[0]); - assert.equal($(createAdminSidebar.getDOMNode()).find('.active').find('a').attr('href'), '#addAdmin'); + TestUtils.Simulate.click($(ReactDOM.findDOMNode(createAdminSidebar)).find('li[data-page="addAdmin"]').find('a')[0]); + assert.equal($(ReactDOM.findDOMNode(createAdminSidebar)).find('.active').find('a').attr('href'), '#addAdmin'); }); }); http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/e6450a0d/app/addons/cluster/tests/clusterSpec.react.jsx ---------------------------------------------------------------------- diff --git a/app/addons/cluster/tests/clusterSpec.react.jsx b/app/addons/cluster/tests/clusterSpec.react.jsx index 9a6c3b5..08e3625 100644 --- a/app/addons/cluster/tests/clusterSpec.react.jsx +++ b/app/addons/cluster/tests/clusterSpec.react.jsx @@ -14,10 +14,10 @@ define([ 'addons/cluster/cluster.react', 'addons/cluster/cluster.actions', 'addons/cluster/cluster.stores', - 'testUtils', - 'react' -], function (FauxtonAPI, ClusterComponent, ClusterActions, ClusterStores, utils, React) { + 'react', + 'react-dom' +], function (FauxtonAPI, ClusterComponent, ClusterActions, ClusterStores, utils, React, ReactDOM) { var assert = utils.assert; var TestUtils = React.addons.TestUtils; @@ -47,11 +47,11 @@ define([ afterEach(function () { ClusterStores.nodesStore.reset(); - React.unmountComponentAtNode(container); + ReactDOM.unmountComponentAtNode(container); }); it('renders the amount of nodes', function () { - assert.ok(/6 nodes/.test($(controller.getDOMNode()).text()), 'finds 6 nodes'); + assert.ok(/6 nodes/.test($(ReactDOM.findDOMNode(controller)).text()), 'finds 6 nodes'); }); }); }); http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/e6450a0d/app/addons/compaction/tests/componentsSpec.react.jsx ---------------------------------------------------------------------- diff --git a/app/addons/compaction/tests/componentsSpec.react.jsx b/app/addons/compaction/tests/componentsSpec.react.jsx index 5c6a18a..08fb02e 100644 --- a/app/addons/compaction/tests/componentsSpec.react.jsx +++ b/app/addons/compaction/tests/componentsSpec.react.jsx @@ -14,8 +14,9 @@ define([ 'addons/compaction/components.react', 'addons/compaction/actions', 'testUtils', - "react" -], function (FauxtonAPI, Views, Actions, utils, React) { + 'react', + 'react-dom' +], function (FauxtonAPI, Views, Actions, utils, React, ReactDOM) { FauxtonAPI.router = new FauxtonAPI.Router([]); var assert = utils.assert; @@ -37,7 +38,7 @@ define([ }); afterEach(function () { - React.unmountComponentAtNode(container); + ReactDOM.unmountComponentAtNode(container); }); it('triggers compact database action', function () { @@ -69,11 +70,11 @@ define([ }); afterEach(function () { - React.unmountComponentAtNode(container); + ReactDOM.unmountComponentAtNode(container); }); it('calls cleanupView on button click', function () { - var el = $(cleanupViewEl.getDOMNode()).find('button')[0]; + var el = $(ReactDOM.findDOMNode(cleanupViewEl)).find('button')[0]; TestUtils.Simulate.click(el, {}); assert.ok(spy.calledOnce); @@ -95,11 +96,11 @@ define([ }); afterEach(function () { - React.unmountComponentAtNode(container); + ReactDOM.unmountComponentAtNode(container); }); it('calls compact database on button click', function () { - var el = $(compactViewEl.getDOMNode()).find('button')[0]; + var el = $(ReactDOM.findDOMNode(compactViewEl)).find('button')[0]; TestUtils.Simulate.click(el, {}); assert.ok(spy.calledOnce); http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/e6450a0d/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 a471637..606d50b 100644 --- a/app/addons/components/react-components.react.jsx +++ b/app/addons/components/react-components.react.jsx @@ -14,14 +14,16 @@ define([ 'app', 'api', 'react', + 'react-dom', 'addons/components/stores', 'addons/fauxton/components.react', + 'addons/documents/helpers', 'ace/ace', 'plugins/beautify', 'libs/react-bootstrap' ], -function (app, FauxtonAPI, React, Stores, FauxtonComponents, ace, beautifyHelper, ReactBootstrap) { +function (app, FauxtonAPI, React, ReactDOM, Stores, FauxtonComponents, Helpers, ace, beautifyHelper, ReactBootstrap) { var ReactCSSTransitionGroup = React.addons.CSSTransitionGroup; var componentStore = Stores.componentStore; @@ -450,7 +452,7 @@ function (app, FauxtonAPI, React, Stores, FauxtonComponents, ace, beautifyHelper }, setupAce: function (props, shouldUpdateCode) { - this.editor = ace.edit(React.findDOMNode(this.refs.ace)); + this.editor = ace.edit(ReactDOM.findDOMNode(this.refs.ace)); // suppresses an Ace editor error this.editor.$blockScrolling = Infinity; @@ -770,14 +772,14 @@ function (app, FauxtonAPI, React, Stores, FauxtonComponents, ace, beautifyHelper } var val = ''; if (!prevProps.visible && this.props.visible) { - val = JSON.parse('"' + this.props.value + '"'); // this ensures newlines are converted + val = Helpers.parseJSON(this.props.value); } this.initEditor(val); }, initEditor: function (val) { - this.editor = ace.edit(React.findDOMNode(this.refs.stringEditor)); + this.editor = ace.edit(ReactDOM.findDOMNode(this.refs.stringEditor)); this.editor.$blockScrolling = Infinity; // suppresses an Ace editor error this.editor.setShowPrintMargin(false); this.editor.setOption('highlightActiveLine', true); @@ -857,8 +859,8 @@ function (app, FauxtonAPI, React, Stores, FauxtonComponents, ace, beautifyHelper }, componentDidMount: function () { - $(React.findDOMNode(this.refs.exit)).tooltip({ placement: 'left' }); - $(React.findDOMNode(this.refs.theme)).tooltip({ placement: 'left' }); + $(ReactDOM.findDOMNode(this.refs.exit)).tooltip({ placement: 'left' }); + $(ReactDOM.findDOMNode(this.refs.theme)).tooltip({ placement: 'left' }); }, exitZenMode: function () { @@ -1194,7 +1196,8 @@ function (app, FauxtonAPI, React, Stores, FauxtonComponents, ace, beautifyHelper render: function () { return ( - <ReactCSSTransitionGroup transitionName="tray" transitionAppear={true} component="div"> + <ReactCSSTransitionGroup transitionName="tray" transitionAppear={true} component="div" transitionAppearTimeout={500} + transitionEnterTimeout={500} transitionLeaveTimeout={300}> {this.getChildren()} </ReactCSSTransitionGroup> ); @@ -1246,7 +1249,7 @@ function (app, FauxtonAPI, React, Stores, FauxtonComponents, ace, beautifyHelper renderChildren: function () { return React.Children.map(this.props.children, function (child, key) { - return React.addons.cloneWithProps(child, { + return React.cloneElement(child, { trayVisible: this.state.trayVisible, selected: this.state.trayVisible, toggleCallback: this.toggleTray, @@ -1265,7 +1268,7 @@ function (app, FauxtonAPI, React, Stores, FauxtonComponents, ace, beautifyHelper closeIfOpen: function (e) { if (!this.state.trayVisible) { return; } - var trayEl = $(React.findDOMNode(this)); + var trayEl = $(ReactDOM.findDOMNode(this)); if (!trayEl.is(e.target) && trayEl.has(e.target).length === 0) { this.toggleTray(); @@ -1385,11 +1388,11 @@ function (app, FauxtonAPI, React, Stores, FauxtonComponents, ace, beautifyHelper ApiBarController: ApiBarController, renderMenuDropDown: function (el, opts) { - React.render(<MenuDropDown icon="fonticon-cog" links={opts.links} />, el); + ReactDOM.render(<MenuDropDown icon="fonticon-cog" links={opts.links} />, el); }, removeMenuDropDown: function (el) { - React.unmountComponentAtNode(el); + ReactDOM.unmountComponentAtNode(el); }, }; http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/e6450a0d/app/addons/components/tests/apiBarControllerSpec.react.jsx ---------------------------------------------------------------------- diff --git a/app/addons/components/tests/apiBarControllerSpec.react.jsx b/app/addons/components/tests/apiBarControllerSpec.react.jsx index 3f516d8..4ca4b5d 100644 --- a/app/addons/components/tests/apiBarControllerSpec.react.jsx +++ b/app/addons/components/tests/apiBarControllerSpec.react.jsx @@ -15,8 +15,9 @@ define([ 'addons/components/stores', 'addons/components/react-components.react', 'testUtils', - 'react' -], function (FauxtonAPI, Actions, Stores, ReactComponents, utils, React) { + 'react', + 'react-dom' +], function (FauxtonAPI, Actions, Stores, ReactComponents, utils, React, ReactDOM) { var assert = utils.assert; var TestUtils = React.addons.TestUtils; @@ -32,7 +33,7 @@ define([ }); afterEach(function () { - React.unmountComponentAtNode(container); + ReactDOM.unmountComponentAtNode(container); componentStore.reset(); }); @@ -83,16 +84,16 @@ define([ var el = TestUtils.renderIntoDocument(<ApiBarController />, container); Actions.updateAPIBar({ visible: true, endpoint: 'http://link.com', docURL: 'http://doc.com' }); - TestUtils.Simulate.click($(el.getDOMNode()).find('.control-toggle-api-url')[0]); - assert.equal($(el.getDOMNode()).find('.help-link').length, 1); + TestUtils.Simulate.click($(ReactDOM.findDOMNode(el)).find('.control-toggle-api-url')[0]); + assert.equal($(ReactDOM.findDOMNode(el)).find('.help-link').length, 1); }); it('Confirm doc link icon doesn\'t appear with no docURL', function () { var el = TestUtils.renderIntoDocument(<ApiBarController />, container); Actions.updateAPIBar({ visible: true, endpoint: 'http://link.com', docURL: null }); - TestUtils.Simulate.click($(el.getDOMNode()).find('.control-toggle-api-url')[0]); - assert.equal($(el.getDOMNode()).find('.help-link').length, 0); + TestUtils.Simulate.click($(ReactDOM.findDOMNode(el)).find('.control-toggle-api-url')[0]); + assert.equal($(ReactDOM.findDOMNode(el)).find('.help-link').length, 0); }); it('Confirm endpoint appears in markup', function () { @@ -100,8 +101,8 @@ define([ var link = 'http://booyah.ca'; Actions.updateAPIBar({ visible: true, endpoint: link, docURL: null }); - TestUtils.Simulate.click($(el.getDOMNode()).find('.control-toggle-api-url')[0]); - assert.equal($(el.getDOMNode()).find('.text-field-to-copy').val(), link); + TestUtils.Simulate.click($(ReactDOM.findDOMNode(el)).find('.control-toggle-api-url')[0]); + assert.equal($(ReactDOM.findDOMNode(el)).find('.text-field-to-copy').val(), link); }); it('Confirm endpoint is updated in markup', function () { @@ -109,12 +110,12 @@ define([ var link = 'http://booyah.ca'; Actions.updateAPIBar({ visible: true, endpoint: link, docURL: null }); - TestUtils.Simulate.click($(el.getDOMNode()).find('.control-toggle-api-url')[0]); - assert.equal($(el.getDOMNode()).find('.text-field-to-copy').val(), link); + TestUtils.Simulate.click($(ReactDOM.findDOMNode(el)).find('.control-toggle-api-url')[0]); + assert.equal($(ReactDOM.findDOMNode(el)).find('.text-field-to-copy').val(), link); var newLink = 'http://chickensarenoisy.com'; Actions.updateAPIBar({ endpoint: newLink }); - assert.equal($(el.getDOMNode()).find('.text-field-to-copy').val(), newLink); + assert.equal($(ReactDOM.findDOMNode(el)).find('.text-field-to-copy').val(), newLink); }); it('Confirm doc URL is updated in markup after a change', function () { @@ -122,12 +123,12 @@ define([ var docLink = 'http://mydoc.org'; Actions.updateAPIBar({ visible: true, endpoint: 'http://whatever.com', docURL: docLink }); - TestUtils.Simulate.click($(el.getDOMNode()).find('.control-toggle-api-url')[0]); - assert.equal($(el.getDOMNode()).find('.help-link').attr('href'), docLink); + TestUtils.Simulate.click($(ReactDOM.findDOMNode(el)).find('.control-toggle-api-url')[0]); + assert.equal($(ReactDOM.findDOMNode(el)).find('.help-link').attr('href'), docLink); var newDocLink = 'http://newawesomedoclink.xxx'; Actions.updateAPIBar({ docURL: newDocLink }); - assert.equal($(el.getDOMNode()).find('.help-link').attr('href'), newDocLink); + assert.equal($(ReactDOM.findDOMNode(el)).find('.help-link').attr('href'), newDocLink); }); }); http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/e6450a0d/app/addons/components/tests/beautifySpec.react.jsx ---------------------------------------------------------------------- diff --git a/app/addons/components/tests/beautifySpec.react.jsx b/app/addons/components/tests/beautifySpec.react.jsx index 92260cb..17d106d 100644 --- a/app/addons/components/tests/beautifySpec.react.jsx +++ b/app/addons/components/tests/beautifySpec.react.jsx @@ -12,10 +12,10 @@ define([ 'api', 'addons/components/react-components.react', - 'testUtils', - 'react' -], function (FauxtonAPI, ReactComponents, utils, React) { + 'react', + 'react-dom' +], function (FauxtonAPI, ReactComponents, utils, React, ReactDOM) { var assert = utils.assert; var TestUtils = React.addons.TestUtils; @@ -28,7 +28,7 @@ define([ }); afterEach(function () { - React.unmountComponentAtNode(container); + ReactDOM.unmountComponentAtNode(container); }); it('should be empty for multi-lined code', function () { @@ -37,13 +37,13 @@ define([ <ReactComponents.Beautify code={correctCode}/>, container ); - assert.ok(_.isNull(beautifyEl.getDOMNode())); + assert.ok(_.isNull(ReactDOM.findDOMNode(beautifyEl))); }); it('should have button to beautify for single line code', function () { var badCode = 'function () { console.log("hello"); }'; beautifyEl = TestUtils.renderIntoDocument(<ReactComponents.Beautify code={badCode}/>, container); - assert.ok($(beautifyEl.getDOMNode()).hasClass('beautify')); + assert.ok($(ReactDOM.findDOMNode(beautifyEl)).hasClass('beautify')); }); it('on click beautifies code', function () { @@ -61,7 +61,7 @@ define([ noOfLines={1}/>, container ); - TestUtils.Simulate.click(beautifyEl.getDOMNode()); + TestUtils.Simulate.click(ReactDOM.findDOMNode(beautifyEl)); assert.equal(fixedCode, correctCode); }); http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/e6450a0d/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 a2a1dcd..98252b5 100644 --- a/app/addons/components/tests/codeEditorPanelSpec.react.jsx +++ b/app/addons/components/tests/codeEditorPanelSpec.react.jsx @@ -13,8 +13,9 @@ define([ 'api', 'addons/components/react-components.react', 'testUtils', - 'react' -], function (FauxtonAPI, ReactComponents, utils, React) { + 'react', + 'react-dom' +], function (FauxtonAPI, ReactComponents, utils, React, ReactDOM) { var assert = utils.assert; var TestUtils = React.addons.TestUtils; @@ -30,7 +31,7 @@ define([ <ReactComponents.CodeEditorPanel defaultCode={code} />, container ); - assert.equal($(codeEditorEl.getDOMNode()).find('.icon-question-sign').length, 0); + assert.equal($(ReactDOM.findDOMNode(codeEditorEl)).find('.icon-question-sign').length, 0); }); it('hidden by default', function () { var container = document.createElement('div'); @@ -38,7 +39,7 @@ define([ <ReactComponents.CodeEditorPanel defaultCode={code} docLink="http://link.com"; />, container ); - assert.equal($(codeEditorEl.getDOMNode()).find('.icon-question-sign').length, 1); + assert.equal($(ReactDOM.findDOMNode(codeEditorEl)).find('.icon-question-sign').length, 1); }); }); @@ -49,7 +50,7 @@ define([ <ReactComponents.CodeEditorPanel defaultCode={code} />, container ); - assert.equal($(codeEditorEl.getDOMNode()).find('.zen-editor-icon').length, 1); + assert.equal($(ReactDOM.findDOMNode(codeEditorEl)).find('.zen-editor-icon').length, 1); }); it('omits zen mode if explicitly turned off', function () { @@ -58,7 +59,7 @@ define([ <ReactComponents.CodeEditor defaultCode={code} allowZenMode={false} />, container ); - assert.equal($(codeEditorEl.getDOMNode()).find('.zen-editor-icon').length, 0); + assert.equal($(ReactDOM.findDOMNode(codeEditorEl)).find('.zen-editor-icon').length, 0); }); }); http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/e6450a0d/app/addons/components/tests/codeEditorSpec.react.jsx ---------------------------------------------------------------------- diff --git a/app/addons/components/tests/codeEditorSpec.react.jsx b/app/addons/components/tests/codeEditorSpec.react.jsx index ee3dbd5..3ba5ce7 100644 --- a/app/addons/components/tests/codeEditorSpec.react.jsx +++ b/app/addons/components/tests/codeEditorSpec.react.jsx @@ -13,8 +13,9 @@ define([ 'api', 'addons/components/react-components.react', 'testUtils', - 'react' -], function (FauxtonAPI, ReactComponents, utils, React) { + 'react', + 'react-dom' +], function (FauxtonAPI, ReactComponents, utils, React, ReactDOM) { var assert = utils.assert; var TestUtils = React.addons.TestUtils; @@ -39,7 +40,7 @@ define([ }); afterEach(function () { - React.unmountComponentAtNode(container); + ReactDOM.unmountComponentAtNode(container); }); describe('Tracking edits', function () { http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/e6450a0d/app/addons/components/tests/confirmButtonSpec.react.jsx ---------------------------------------------------------------------- diff --git a/app/addons/components/tests/confirmButtonSpec.react.jsx b/app/addons/components/tests/confirmButtonSpec.react.jsx index d4d428a..d650c59 100644 --- a/app/addons/components/tests/confirmButtonSpec.react.jsx +++ b/app/addons/components/tests/confirmButtonSpec.react.jsx @@ -12,10 +12,10 @@ define([ 'api', 'addons/components/react-components.react', - 'testUtils', - 'react' -], function (FauxtonAPI, ReactComponents, utils, React) { + 'react', + 'react-dom' +], function (FauxtonAPI, ReactComponents, utils, React, ReactDOM) { var assert = utils.assert; var TestUtils = React.addons.TestUtils; @@ -27,7 +27,7 @@ define([ }); afterEach(function () { - React.unmountComponentAtNode(container); + ReactDOM.unmountComponentAtNode(container); }); it('should render text properties', function () { @@ -35,7 +35,7 @@ define([ <ReactComponents.ConfirmButton text="Click here to render Rocko Artischocko" />, container ); - assert.equal($(button.getDOMNode()).text(), 'Click here to render Rocko Artischocko'); + assert.equal($(ReactDOM.findDOMNode(button)).text(), 'Click here to render Rocko Artischocko'); }); it('should use onClick handler if provided', function () { @@ -46,7 +46,7 @@ define([ container ); - React.addons.TestUtils.Simulate.click(button.getDOMNode()); + React.addons.TestUtils.Simulate.click(ReactDOM.findDOMNode(button)); assert.ok(spy.calledOnce); }); }); http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/e6450a0d/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 a931019..a013cb0 100644 --- a/app/addons/components/tests/docSpec.react.jsx +++ b/app/addons/components/tests/docSpec.react.jsx @@ -12,10 +12,10 @@ define([ 'api', 'addons/components/react-components.react', - 'testUtils', - 'react' -], function (FauxtonAPI, ReactComponents, utils, React) { + 'react', + 'react-dom' +], function (FauxtonAPI, ReactComponents, utils, React, ReactDOM) { var assert = utils.assert; var TestUtils = React.addons.TestUtils; @@ -28,7 +28,7 @@ define([ }); afterEach(function () { - React.unmountComponentAtNode(container); + ReactDOM.unmountComponentAtNode(container); }); it('hosts child elements', function () { @@ -38,7 +38,7 @@ define([ </ReactComponents.Document>, container ); - assert.ok($(el.getDOMNode()).find('.foo-children').length); + assert.ok($(ReactDOM.findDOMNode(el)).find('.foo-children').length); }); it('does not require child elements', function () { @@ -46,7 +46,7 @@ define([ <ReactComponents.Document />, container ); - assert.notOk($(el.getDOMNode()).find('.doc-edit-symbol').length); + assert.notOk($(ReactDOM.findDOMNode(el)).find('.doc-edit-symbol').length); }); it('you can check it', function () { @@ -54,7 +54,7 @@ define([ <ReactComponents.Document isDeletable={true} checked={true} docIdentifier="foo" />, container ); - assert.equal($(el.getDOMNode()).find('input[type="checkbox"]').attr('checked'), 'checked'); + assert.equal($(ReactDOM.findDOMNode(el)).find('input[type="checkbox"]').attr('checked'), 'checked'); }); it('you can uncheck it', function () { @@ -62,7 +62,7 @@ define([ <ReactComponents.Document isDeletable={true} docIdentifier="foo" />, container ); - assert.equal($(el.getDOMNode()).find('input[type="checkbox"]').attr('checked'), undefined); + assert.equal($(ReactDOM.findDOMNode(el)).find('input[type="checkbox"]').attr('checked'), undefined); }); it('it calls an onchange callback', function () { @@ -72,7 +72,7 @@ define([ <ReactComponents.Document doc={{id: "foo"}} isDeletable={true} docChecked={spy} docIdentifier="foo" />, container ); - var testEl = $(el.getDOMNode()).find('input[type="checkbox"]')[0]; + var testEl = $(ReactDOM.findDOMNode(el)).find('input[type="checkbox"]')[0]; React.addons.TestUtils.Simulate.change(testEl, {target: {value: 'Hello, world'}}); assert.ok(spy.calledOnce); }); @@ -84,7 +84,7 @@ define([ <ReactComponents.Document isDeletable={true} onDoubleClick={spy} docIdentifier="foo" />, container ); - React.addons.TestUtils.Simulate.doubleClick(el.getDOMNode()); + React.addons.TestUtils.Simulate.doubleClick(ReactDOM.findDOMNode(el)); assert.ok(spy.calledOnce); }); @@ -95,8 +95,8 @@ define([ <ReactComponents.Document isDeletable={false} onDoubleClick={spy} docIdentifier="foo" />, container ); - assert.notOk($(el.getDOMNode()).find('input[type="checkbox"]').length); - assert.ok($(el.getDOMNode()).find('.checkbox-dummy').length); + assert.notOk($(ReactDOM.findDOMNode(el)).find('input[type="checkbox"]').length); + assert.ok($(ReactDOM.findDOMNode(el)).find('.checkbox-dummy').length); }); it('contains a doc-data element when there\'s doc content', function () { @@ -104,7 +104,7 @@ define([ <ReactComponents.Document isDeletable={true} checked={true} docIdentifier="foo" docContent='{ "content": true }' />, container ); - assert.equal(1, $(el.getDOMNode()).find('.doc-data').length); + assert.equal(1, $(ReactDOM.findDOMNode(el)).find('.doc-data').length); }); it('doesn\'t contain a doc-data element when there\'s no doc content', function () { @@ -112,7 +112,7 @@ define([ <ReactComponents.Document isDeletable={true} checked={true} docIdentifier="foo" docContent='' />, container ); - assert.equal(0, $(el.getDOMNode()).find('.doc-data').length); + assert.equal(0, $(ReactDOM.findDOMNode(el)).find('.doc-data').length); }); it('allows empty headers', function () { @@ -120,7 +120,7 @@ define([ <ReactComponents.Document header={null} isDeletable={true} checked={true} docIdentifier="foo" docContent='' />, container ); - assert.equal('', $(el.getDOMNode()).find('.header-doc-id').text()); + assert.equal('', $(ReactDOM.findDOMNode(el)).find('.header-doc-id').text()); }); it('allows supports headers with "', function () { @@ -128,7 +128,7 @@ define([ <ReactComponents.Document header="foo" isDeletable={true} checked={true} docIdentifier="foo" docContent='' />, container ); - assert.equal('"foo"', $(el.getDOMNode()).find('.header-doc-id').text()); + assert.equal('"foo"', $(ReactDOM.findDOMNode(el)).find('.header-doc-id').text()); }); }); http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/e6450a0d/app/addons/components/tests/headerTogglebuttonSpec.react.jsx ---------------------------------------------------------------------- diff --git a/app/addons/components/tests/headerTogglebuttonSpec.react.jsx b/app/addons/components/tests/headerTogglebuttonSpec.react.jsx index 14523f3..6ce0776 100644 --- a/app/addons/components/tests/headerTogglebuttonSpec.react.jsx +++ b/app/addons/components/tests/headerTogglebuttonSpec.react.jsx @@ -12,10 +12,10 @@ define([ 'api', 'addons/components/react-components.react', - 'testUtils', - 'react' -], function (FauxtonAPI, ReactComponents, utils, React) { + 'react', + 'react-dom' +], function (FauxtonAPI, ReactComponents, utils, React, ReactDOM) { var assert = utils.assert; var TestUtils = React.addons.TestUtils; @@ -30,11 +30,11 @@ define([ }); afterEach(function () { - React.unmountComponentAtNode(container); + ReactDOM.unmountComponentAtNode(container); }); it('should call the passed callback', function () { - TestUtils.Simulate.click(toggleEl.getDOMNode()); + TestUtils.Simulate.click(ReactDOM.findDOMNode(toggleEl)); assert.ok(toggleCallback.calledOnce); }); }); http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/e6450a0d/app/addons/components/tests/paddedBorderedBoxSpec.react.jsx ---------------------------------------------------------------------- diff --git a/app/addons/components/tests/paddedBorderedBoxSpec.react.jsx b/app/addons/components/tests/paddedBorderedBoxSpec.react.jsx index b262bc3..a0e2866 100644 --- a/app/addons/components/tests/paddedBorderedBoxSpec.react.jsx +++ b/app/addons/components/tests/paddedBorderedBoxSpec.react.jsx @@ -12,10 +12,10 @@ define([ 'api', 'addons/components/react-components.react', - 'testUtils', - 'react' -], function (FauxtonAPI, ReactComponents, utils, React) { + 'react', + 'react-dom' +], function (FauxtonAPI, ReactComponents, utils, React, ReactDOM) { var assert = utils.assert; var TestUtils = React.addons.TestUtils; @@ -28,7 +28,7 @@ define([ }); afterEach(function () { - React.unmountComponentAtNode(container); + ReactDOM.unmountComponentAtNode(container); }); it('hosts child elements', function () { @@ -38,7 +38,7 @@ define([ </ReactComponents.PaddedBorderedBox>, container ); - assert.ok($(el.getDOMNode()).find('.foo-children').length); + assert.ok($(ReactDOM.findDOMNode(el)).find('.foo-children').length); }); }); }); http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/e6450a0d/app/addons/components/tests/stringEditModalSpec.react.jsx ---------------------------------------------------------------------- diff --git a/app/addons/components/tests/stringEditModalSpec.react.jsx b/app/addons/components/tests/stringEditModalSpec.react.jsx index bc1fd71..188581c 100644 --- a/app/addons/components/tests/stringEditModalSpec.react.jsx +++ b/app/addons/components/tests/stringEditModalSpec.react.jsx @@ -14,8 +14,9 @@ define([ 'addons/components/react-components.react', 'libs/react-bootstrap', 'testUtils', - 'react' -], function (FauxtonAPI, ReactComponents, ReactBootstrap, utils, React) { + 'react', + 'react-dom' +], function (FauxtonAPI, ReactComponents, ReactBootstrap, utils, React, ReactDOM) { var assert = utils.assert; var TestUtils = React.addons.TestUtils; @@ -31,34 +32,7 @@ define([ }); afterEach(function () { - React.unmountComponentAtNode(container); - }); - - describe('event methods called', function () { - it('onClose called by top (x)', function () { - var spy = sinon.spy(); - el = TestUtils.renderIntoDocument( - <ReactComponents.StringEditModal visible={true} onClose={spy} onSave={stub} />, - container - ); - var modal = TestUtils.findRenderedComponentWithType(el, Modal); - var modalEl = React.findDOMNode(modal.refs.modal); - - TestUtils.Simulate.click($(modalEl).find('.close')[0]); - assert.ok(spy.calledOnce); - }); - - it('onClose called by cancel button', function () { - var spy = sinon.spy(); - el = TestUtils.renderIntoDocument( - <ReactComponents.StringEditModal visible={true} onClose={spy} onSave={stub} />, - container - ); - var modal = TestUtils.findRenderedComponentWithType(el, Modal); - var modalEl = React.findDOMNode(modal.refs.modal); - TestUtils.Simulate.click($(modalEl).find('.cancel-button')[0]); - assert.ok(spy.calledOnce); - }); + ReactDOM.unmountComponentAtNode(container); }); describe('onSave', function () { @@ -69,28 +43,11 @@ define([ <ReactComponents.StringEditModal visible={true} onClose={stub} onSave={spy} value={string} />, container ); - var modal = TestUtils.findRenderedComponentWithType(el, Modal); - var modalEl = React.findDOMNode(modal.refs.modal); - - TestUtils.Simulate.click($(modalEl).find('#string-edit-save-btn')[0]); + TestUtils.Simulate.click($('body').find('#string-edit-save-btn')[0]); assert.ok(spy.calledOnce); assert.ok(spy.calledWith(string)); }); - - it('replaces "\\n" with actual newlines', function () { - var spy = sinon.spy(); - var string = 'I am a string\\nwith\\nlinebreaks\\nin\\nit'; - el = TestUtils.renderIntoDocument( - <ReactComponents.StringEditModal visible={true} onSave={spy} value={string} />, - container - ); - - var modal = TestUtils.findRenderedComponentWithType(el, Modal); - var modalEl = React.findDOMNode(modal.refs.modal); - - TestUtils.Simulate.click($(modalEl).find('#string-edit-save-btn')[0]); - assert.ok(spy.calledOnce); - }); }); }); + }); http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/e6450a0d/app/addons/components/tests/styledSelectSpec.react.jsx ---------------------------------------------------------------------- diff --git a/app/addons/components/tests/styledSelectSpec.react.jsx b/app/addons/components/tests/styledSelectSpec.react.jsx index 7a3328a..94e0028 100644 --- a/app/addons/components/tests/styledSelectSpec.react.jsx +++ b/app/addons/components/tests/styledSelectSpec.react.jsx @@ -12,10 +12,10 @@ define([ 'api', 'addons/components/react-components.react', - 'testUtils', - 'react' -], function (FauxtonAPI, ReactComponents, utils, React) { + 'react', + 'react-dom' +], function (FauxtonAPI, ReactComponents, utils, React, ReactDOM) { var assert = utils.assert; var TestUtils = React.addons.TestUtils; @@ -44,11 +44,11 @@ define([ }); afterEach(function () { - React.unmountComponentAtNode(container); + ReactDOM.unmountComponentAtNode(container); }); it('calls the callback on select', function () { - TestUtils.Simulate.change($(selectorEl.getDOMNode()).find('#new-ddoc')[0], { + TestUtils.Simulate.change($(ReactDOM.findDOMNode(selectorEl)).find('#new-ddoc')[0], { target: { value: 'new' } http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/e6450a0d/app/addons/components/tests/zenModeSpec.react.jsx ---------------------------------------------------------------------- diff --git a/app/addons/components/tests/zenModeSpec.react.jsx b/app/addons/components/tests/zenModeSpec.react.jsx index ec742d4..7895454 100644 --- a/app/addons/components/tests/zenModeSpec.react.jsx +++ b/app/addons/components/tests/zenModeSpec.react.jsx @@ -13,8 +13,9 @@ define([ 'api', 'addons/components/react-components.react', 'testUtils', - 'react' -], function (FauxtonAPI, ReactComponents, utils, React) { + 'react', + 'react-dom' +], function (FauxtonAPI, ReactComponents, utils, React, ReactDOM) { var assert = utils.assert; var TestUtils = React.addons.TestUtils; @@ -33,26 +34,26 @@ define([ }); afterEach(function () { - React.unmountComponentAtNode(container); + ReactDOM.unmountComponentAtNode(container); window.localStorage.removeItem('zenTheme'); }); describe('Toggle theme', function () { it('defaults to dark theme', function () { - assert.ok($(el.getDOMNode()).hasClass('zen-theme-dark')); + assert.ok($(ReactDOM.findDOMNode(el)).hasClass('zen-theme-dark')); }); it('switch to light theme on click', function () { - TestUtils.Simulate.click($(el.getDOMNode()).find('.js-toggle-theme')[0]); - assert.ok($(el.getDOMNode()).hasClass('zen-theme-light')); + TestUtils.Simulate.click($(ReactDOM.findDOMNode(el)).find('.js-toggle-theme')[0]); + assert.ok($(ReactDOM.findDOMNode(el)).hasClass('zen-theme-light')); // reset - TestUtils.Simulate.click($(el.getDOMNode()).find('.js-toggle-theme')[0]); + TestUtils.Simulate.click($(ReactDOM.findDOMNode(el)).find('.js-toggle-theme')[0]); }); }); describe('Closing zen mode', function () { it('method called', function () { - TestUtils.Simulate.click($(el.getDOMNode()).find('.js-exit-zen-mode')[0]); + TestUtils.Simulate.click($(ReactDOM.findDOMNode(el)).find('.js-exit-zen-mode')[0]); assert.ok(spy.calledOnce); }); }); http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/e6450a0d/app/addons/cors/tests/componentsSpec.react.jsx ---------------------------------------------------------------------- diff --git a/app/addons/cors/tests/componentsSpec.react.jsx b/app/addons/cors/tests/componentsSpec.react.jsx index 7bd5762..dd76ff3 100644 --- a/app/addons/cors/tests/componentsSpec.react.jsx +++ b/app/addons/cors/tests/componentsSpec.react.jsx @@ -16,8 +16,9 @@ define([ 'addons/cors/resources', 'addons/cors/stores', 'testUtils', - "react" -], function (FauxtonAPI, Views, Actions, Resources, Stores, utils, React) { + "react", + 'react-dom' +], function (FauxtonAPI, Views, Actions, Resources, Stores, utils, React, ReactDOM) { FauxtonAPI.router = new FauxtonAPI.Router([]); var assert = utils.assert; @@ -45,7 +46,7 @@ define([ utils.restore(Actions.toggleLoadingBarsToEnabled); utils.restore(corsEl.save); - React.unmountComponentAtNode(container); + ReactDOM.unmountComponentAtNode(container); window.confirm.restore && window.confirm.restore(); }); @@ -92,13 +93,13 @@ define([ it('shows loading bars', function () { Actions.toggleLoadingBarsToEnabled(true); - assert.equal($(corsEl.getDOMNode()).find('.loading-lines').length, 1); + assert.equal($(ReactDOM.findDOMNode(corsEl)).find('.loading-lines').length, 1); }); it('hides loading bars', function () { Actions.toggleLoadingBarsToEnabled(false); - assert.equal($(corsEl.getDOMNode()).find('.loading-lines').length, 0); + assert.equal($(ReactDOM.findDOMNode(corsEl)).find('.loading-lines').length, 0); }); }); @@ -115,26 +116,26 @@ define([ afterEach(function () { utils.restore(Resources.validateCORSDomain); utils.restore(FauxtonAPI.addNotification); - React.unmountComponentAtNode(container); + ReactDOM.unmountComponentAtNode(container); }); it('calls validates each domain', function () { var spy = sinon.spy(Resources, 'validateCORSDomain'); - TestUtils.Simulate.change($(inputEl.getDOMNode()).find('input')[0], {target: {value: newOrigin}}); - TestUtils.Simulate.click($(inputEl.getDOMNode()).find('.btn')[0]); + TestUtils.Simulate.change($(ReactDOM.findDOMNode(inputEl)).find('input')[0], {target: {value: newOrigin}}); + TestUtils.Simulate.click($(ReactDOM.findDOMNode(inputEl)).find('.btn')[0]); assert.ok(spy.calledWith(newOrigin)); }); it('calls addOrigin on add click with valid domain', function () { - TestUtils.Simulate.change($(inputEl.getDOMNode()).find('input')[0], {target: {value: newOrigin}}); - TestUtils.Simulate.click($(inputEl.getDOMNode()).find('.btn')[0]); + TestUtils.Simulate.change($(ReactDOM.findDOMNode(inputEl)).find('input')[0], {target: {value: newOrigin}}); + TestUtils.Simulate.click($(ReactDOM.findDOMNode(inputEl)).find('.btn')[0]); assert.ok(addOrigin.calledWith(newOrigin)); }); it('shows notification if origin is not valid', function () { var spy = sinon.spy(FauxtonAPI, 'addNotification'); - TestUtils.Simulate.change($(inputEl.getDOMNode()).find('input')[0], {target: {value: 'badOrigin'}}); - TestUtils.Simulate.click($(inputEl.getDOMNode()).find('.btn')[0]); + TestUtils.Simulate.change($(ReactDOM.findDOMNode(inputEl)).find('input')[0], {target: {value: 'badOrigin'}}); + TestUtils.Simulate.click($(ReactDOM.findDOMNode(inputEl)).find('.btn')[0]); assert.ok(spy.calledOnce); }); }); @@ -149,11 +150,11 @@ define([ }); afterEach(function () { - React.unmountComponentAtNode(container); + ReactDOM.unmountComponentAtNode(container); }); it('calls change Origin on all origins selected', function () { - TestUtils.Simulate.change($(originEl.getDOMNode()).find('input[value="all"]')[0]); + TestUtils.Simulate.change($(ReactDOM.findDOMNode(originEl)).find('input[value="all"]')[0]); assert.ok(changeOrigin.calledWith(true)); }); @@ -165,7 +166,7 @@ define([ //1. render radio buttons with 'all origins' originEl = TestUtils.renderIntoDocument(<Views.Origins corsEnabled={true} isAllOrigins={true} originChange={changeOrigin}/>, container); //2. switch back to 'select origins' - TestUtils.Simulate.change($(originEl.getDOMNode()).find('input[value="selected"]')[0]); + TestUtils.Simulate.change($(ReactDOM.findDOMNode(originEl)).find('input[value="selected"]')[0]); assert.ok(changeOrigin.calledWith(false)); }); }); @@ -185,14 +186,14 @@ define([ afterEach(function () { window.confirm.restore && window.confirm.restore(); Actions.deleteOrigin.restore && Actions.deleteOrigin.restore(); - React.unmountComponentAtNode(container); + ReactDOM.unmountComponentAtNode(container); }); it('should confirm on delete', function () { var stub = sinon.stub(window, 'confirm'); stub.returns(true); - TestUtils.Simulate.click($(originTableEl.getDOMNode()).find('.fonticon-trash')[0]); + TestUtils.Simulate.click($(ReactDOM.findDOMNode(originTableEl)).find('.fonticon-trash')[0]); assert.ok(stub.calledOnce); }); @@ -210,43 +211,43 @@ define([ it('should deleteOrigin on confirm true', function () { var stub = sinon.stub(window, 'confirm'); stub.returns(true); - TestUtils.Simulate.click($(originTableEl.getDOMNode()).find('.fonticon-trash')[0]); + TestUtils.Simulate.click($(ReactDOM.findDOMNode(originTableEl)).find('.fonticon-trash')[0]); assert.ok(deleteOrigin.calledWith(origin)); }); it('should not deleteOrigin on confirm false', function () { var stub = sinon.stub(window, 'confirm'); stub.returns(false); - TestUtils.Simulate.click($(originTableEl.getDOMNode()).find('.fonticon-trash')[0]); + TestUtils.Simulate.click($(ReactDOM.findDOMNode(originTableEl)).find('.fonticon-trash')[0]); assert.notOk(deleteOrigin.calledOnce); }); it('should change origin to input on edit click', function () { - TestUtils.Simulate.click($(originTableEl.getDOMNode()).find('.fonticon-pencil')[0]); - assert.ok($(originTableEl.getDOMNode()).find('input').length === 1); + TestUtils.Simulate.click($(ReactDOM.findDOMNode(originTableEl)).find('.fonticon-pencil')[0]); + assert.ok($(ReactDOM.findDOMNode(originTableEl)).find('input').length === 1); }); it('should update origin on update clicked', function () { var updatedOrigin = 'https://updated-origin.com'; - TestUtils.Simulate.click($(originTableEl.getDOMNode()).find('.fonticon-pencil')[0]); - TestUtils.Simulate.change($(originTableEl.getDOMNode()).find('input')[0], { + TestUtils.Simulate.click($(ReactDOM.findDOMNode(originTableEl)).find('.fonticon-pencil')[0]); + TestUtils.Simulate.change($(ReactDOM.findDOMNode(originTableEl)).find('input')[0], { target: { value: updatedOrigin } }); - TestUtils.Simulate.click($(originTableEl.getDOMNode()).find('.btn')[0]); + TestUtils.Simulate.click($(ReactDOM.findDOMNode(originTableEl)).find('.btn')[0]); assert.ok(updateOrigin.calledWith(updatedOrigin)); }); it('should not update origin on update clicked with bad origin', function () { var updatedOrigin = 'updated-origin'; - TestUtils.Simulate.click($(originTableEl.getDOMNode()).find('.fonticon-pencil')[0]); - TestUtils.Simulate.change($(originTableEl.getDOMNode()).find('input')[0], { + TestUtils.Simulate.click($(ReactDOM.findDOMNode(originTableEl)).find('.fonticon-pencil')[0]); + TestUtils.Simulate.change($(ReactDOM.findDOMNode(originTableEl)).find('input')[0], { target: { value: updatedOrigin } }); - TestUtils.Simulate.click($(originTableEl.getDOMNode()).find('.btn')[0]); + TestUtils.Simulate.click($(ReactDOM.findDOMNode(originTableEl)).find('.btn')[0]); assert.notOk(updateOrigin.calledOnce); }); http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/e6450a0d/app/addons/databases/components.react.jsx ---------------------------------------------------------------------- diff --git a/app/addons/databases/components.react.jsx b/app/addons/databases/components.react.jsx index 98e85be..05e4b45 100644 --- a/app/addons/databases/components.react.jsx +++ b/app/addons/databases/components.react.jsx @@ -14,13 +14,14 @@ define([ 'app', 'api', 'react', + 'react-dom', 'addons/components/react-components.react', 'addons/fauxton/components.react', 'addons/databases/stores', 'addons/databases/resources', 'addons/databases/actions', 'helpers' -], function (app, FauxtonAPI, React, Components, ComponentsReact, Stores, Resources, Actions, Helpers) { +], function (app, FauxtonAPI, React, ReactDOM, Components, ComponentsReact, Stores, Resources, Actions, Helpers) { var ToggleHeaderButton = Components.ToggleHeaderButton; var databasesStore = Stores.databasesStore; @@ -89,12 +90,14 @@ define([ <div className="view"> <table className="databases table table-striped"> <thead> - <th>Name</th> - <th>Size</th> - <th># of Docs</th> - <th>Update Seq</th> - {this.getExtensionColumns()} - <th>Actions</th> + <tr> + <th>Name</th> + <th>Size</th> + <th># of Docs</th> + <th>Update Seq</th> + {this.getExtensionColumns()} + <th>Actions</th> + </tr> </thead> <tbody> {rows} @@ -170,7 +173,7 @@ define([ var GraveyardInfo = React.createClass({ componentDidMount: function () { - $(React.findDOMNode(this.refs.myself)).tooltip(); + $(ReactDOM.findDOMNode(this.refs.myself)).tooltip(); }, render: function () { @@ -204,7 +207,7 @@ define([ this.refs.newDbTray.toggle(function (shown) { if (shown) { - React.findDOMNode(this.refs.newDbName).focus(); + ReactDOM.findDOMNode(this.refs.newDbName).focus(); } }.bind(this)); }, @@ -222,7 +225,7 @@ define([ }, onAddDatabase: function () { - var databaseName = React.findDOMNode(this.refs.newDbName).value; + var databaseName = ReactDOM.findDOMNode(this.refs.newDbName).value; Actions.createNewDatabase(databaseName); }, @@ -265,7 +268,7 @@ define([ }, componentDidUpdate: function () { - $(React.findDOMNode(this.refs.searchDbName)).typeahead({ + $(ReactDOM.findDOMNode(this.refs.searchDbName)).typeahead({ source: this.state.databaseNames, updater: function (item) { this.jumpToDb(item); @@ -282,7 +285,7 @@ define([ }, jumpToDb: function (databaseName) { - databaseName = databaseName || React.findDOMNode(this.refs.searchDbName).value; + databaseName = databaseName || ReactDOM.findDOMNode(this.refs.searchDbName).value; Actions.jumpToDatabase(databaseName); }, http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/e6450a0d/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 2669b46..f57c5c2 100644 --- a/app/addons/databases/tests/componentsSpec.react.jsx +++ b/app/addons/databases/tests/componentsSpec.react.jsx @@ -16,8 +16,9 @@ define([ 'addons/databases/actiontypes', 'addons/databases/stores', 'testUtils', - "react" -], function (FauxtonAPI, Views, Actions, ActionTypes, Stores, utils, React) { + "react", + 'react-dom' +], function (FauxtonAPI, Views, Actions, ActionTypes, Stores, utils, React, ReactDOM) { var assert = utils.assert; var TestUtils = React.addons.TestUtils; @@ -85,12 +86,12 @@ define([ ]; }; container = document.createElement('div'); - dbEl = React.render(React.createElement(Views.DatabasesController, {}), container); + dbEl = ReactDOM.render(React.createElement(Views.DatabasesController, {}), container); }); afterEach(function () { Stores.databasesStore.getCollection = oldGetCollection; - React.unmountComponentAtNode(container); + ReactDOM.unmountComponentAtNode(container); }); it('renders base data of DBs', function () { @@ -118,12 +119,12 @@ define([ passedDbName = dbName; }; container = document.createElement('div'); - addEl = React.render(React.createElement(Views.AddDatabaseWidget, {}), container); + addEl = ReactDOM.render(React.createElement(Views.AddDatabaseWidget, {}), container); }); afterEach(function () { Actions.createNewDatabase = oldCreateNewDatabase; - React.unmountComponentAtNode(container); + ReactDOM.unmountComponentAtNode(container); }); it("Creates a database with given name", function () { @@ -160,14 +161,14 @@ define([ return ["db1", "db2"]; }; container = document.createElement('div'); - jumpEl = React.render(React.createElement(Views.JumpToDatabaseWidget, {}), container); + jumpEl = ReactDOM.render(React.createElement(Views.JumpToDatabaseWidget, {}), container); }); afterEach(function () { $ = old$; Actions.jumpToDatabase = oldJumpToDatabase; Stores.databasesStore.getDatabaseNames = oldGetDatabaseNames; - React.unmountComponentAtNode(container); + ReactDOM.unmountComponentAtNode(container); }); it("Jumps to a database with given name", function () { @@ -217,14 +218,14 @@ define([ it('uses custom URL prefix on the navigation if passed through props', function () { var container = document.createElement('div'); var pagination = TestUtils.renderIntoDocument(<Views.DatabasePagination linkPath="_custom_path" />, container); - var links = $(pagination.getDOMNode()).find('a'); + var links = $(ReactDOM.findDOMNode(pagination)).find('a'); assert.equal(links.length, 3, 'pagination contains links'); links.each(function () { assert.include(this.href, '_custom_path', 'link contains custom path'); }); - React.unmountComponentAtNode(container); + ReactDOM.unmountComponentAtNode(container); }); }); @@ -236,7 +237,7 @@ define([ }); afterEach(function () { - React.unmountComponentAtNode(container); + ReactDOM.unmountComponentAtNode(container); }); it('adds multiple extra columns if extended', function () { @@ -255,7 +256,7 @@ define([ FauxtonAPI.registerExtension('DatabaseTable:head', ColHeader3); var table = TestUtils.renderIntoDocument(<Views.DatabaseTable loading={false} body={[]} />, container); - var cols = $(table.getDOMNode()).find('th'); + var cols = $(ReactDOM.findDOMNode(table)).find('th'); // (default # of rows is 5) assert.equal(cols.length, 8, 'extra columns show up'); @@ -280,7 +281,7 @@ define([ }; var databaseRow = TestUtils.renderIntoDocument(<Views.DatabaseTable body={[row]} />, container); - var links = $(databaseRow.getDOMNode()).find('td'); + var links = $(ReactDOM.findDOMNode(databaseRow)).find('td'); // (default # of rows is 5) assert.equal(links.length, 6, 'extra column shows up'); @@ -301,7 +302,7 @@ define([ }; var databaseRow = TestUtils.renderIntoDocument(<Views.DatabaseTable body={[row]} />, container); - assert.equal($(databaseRow.getDOMNode()).find('.database-load-fail').length, 1); + assert.equal($(ReactDOM.findDOMNode(databaseRow)).find('.database-load-fail').length, 1); }); it('shows no error if row marked as loaded', function () { @@ -316,7 +317,7 @@ define([ var databaseRow = TestUtils.renderIntoDocument(<Views.DatabaseTable body={[row]} />, container); - assert.equal($(databaseRow.getDOMNode()).find('.database-load-fail').length, 0); + assert.equal($(ReactDOM.findDOMNode(databaseRow)).find('.database-load-fail').length, 0); }); }); http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/e6450a0d/app/addons/documents/changes/components.react.jsx ---------------------------------------------------------------------- diff --git a/app/addons/documents/changes/components.react.jsx b/app/addons/documents/changes/components.react.jsx index 9d8ed98..9ba2b57 100644 --- a/app/addons/documents/changes/components.react.jsx +++ b/app/addons/documents/changes/components.react.jsx @@ -14,13 +14,14 @@ define([ 'app', 'api', 'react', + 'react-dom', 'addons/documents/changes/actions', 'addons/documents/changes/stores', 'addons/fauxton/components.react', 'addons/components/react-components.react', 'plugins/prettify' -], function (app, FauxtonAPI, React, Actions, Stores, Components, ReactComponents) { +], function (app, FauxtonAPI, React, ReactDOM, Actions, Stores, Components, ReactComponents) { var changesStore = Stores.changesStore; var ReactCSSTransitionGroup = React.addons.CSSTransitionGroup; @@ -64,7 +65,8 @@ define([ return ( <div className="changes-header-section"> <ChangesHeaderTab onToggle={this.toggleFilterSection} /> - <ReactCSSTransitionGroup transitionName="toggle-changes-filter" component="div" className="changes-tab-content"> + <ReactCSSTransitionGroup transitionName="toggle-changes-filter" component="div" className="changes-tab-content" + transitionEnterTimeout={500} transitionLeaveTimeout={300}> {tabContent} </ReactCSSTransitionGroup> </div> @@ -211,7 +213,7 @@ define([ }, focusFilterField: function () { - React.findDOMNode(this.refs.addItem).focus(); + ReactDOM.findDOMNode(this.refs.addItem).focus(); }, onChangeFilter: function (e) { @@ -248,7 +250,7 @@ define([ var FilterTooltip = React.createClass({ componentDidMount: function () { if (this.props.tooltip) { - $(React.findDOMNode(this.refs.tooltip)).tooltip(); + $(ReactDOM.findDOMNode(this.refs.tooltip)).tooltip(); } }, @@ -383,7 +385,8 @@ define([ </div> </div> - <ReactCSSTransitionGroup transitionName="toggle-changes-code" component="div" className="changesCodeSectionWrapper"> + <ReactCSSTransitionGroup transitionName="toggle-changes-code" component="div" className="changesCodeSectionWrapper" + transitionEnterTimeout={500} transitionLeaveTimeout={300}> {this.getChangesCode()} </ReactCSSTransitionGroup> @@ -416,13 +419,13 @@ define([ return { renderHeader: function (el) { - React.render(<ChangesHeaderController />, el); + ReactDOM.render(<ChangesHeaderController />, el); }, renderChanges: function (el) { - React.render(<ChangesController />, el); + ReactDOM.render(<ChangesController />, el); }, remove: function (el) { - React.unmountComponentAtNode(el); + ReactDOM.unmountComponentAtNode(el); }, ChangesHeaderController: ChangesHeaderController, http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/e6450a0d/app/addons/documents/changes/tests/changes.componentsSpec.react.jsx ---------------------------------------------------------------------- diff --git a/app/addons/documents/changes/tests/changes.componentsSpec.react.jsx b/app/addons/documents/changes/tests/changes.componentsSpec.react.jsx index 7a3e444..c5f5e62 100644 --- a/app/addons/documents/changes/tests/changes.componentsSpec.react.jsx +++ b/app/addons/documents/changes/tests/changes.componentsSpec.react.jsx @@ -14,11 +14,12 @@ define([ 'app', 'api', 'react', + 'react-dom', 'addons/documents/changes/components.react', 'addons/documents/changes/stores', 'addons/documents/changes/actions', 'testUtils' -], function (app, FauxtonAPI, React, Changes, Stores, Actions, utils) { +], function (app, FauxtonAPI, React, ReactDOM, Changes, Stores, Actions, utils) { FauxtonAPI.router = new FauxtonAPI.Router([]); var assert = utils.assert; @@ -47,12 +48,12 @@ define([ afterEach(function () { spy.restore(); Stores.changesStore.reset(); - React.unmountComponentAtNode(container); + ReactDOM.unmountComponentAtNode(container); }); // similar as previous, except it confirms that the action gets fired, not the custom toggle func it('calls toggleTabVisibility action on selecting a tab', function () { - TestUtils.Simulate.click($(tab.getDOMNode()).find('a')[0]); + TestUtils.Simulate.click($(ReactDOM.findDOMNode(tab)).find('a')[0]); assert.ok(spy.calledOnce); }); }); @@ -69,11 +70,11 @@ define([ afterEach(function () { Stores.changesStore.reset(); - React.unmountComponentAtNode(container); + ReactDOM.unmountComponentAtNode(container); }); it('should call toggle function on clicking tab', function () { - TestUtils.Simulate.click($(tab.getDOMNode()).find('a')[0]); + TestUtils.Simulate.click($(ReactDOM.findDOMNode(tab)).find('a')[0]); assert.ok(toggleTabVisibility.calledOnce); }); }); @@ -89,11 +90,11 @@ define([ afterEach(function () { Stores.changesStore.reset(); - React.unmountComponentAtNode(container); + ReactDOM.unmountComponentAtNode(container); }); it('should add filter markup', function () { - var $el = $(changesFilterEl.getDOMNode()), + var $el = $(ReactDOM.findDOMNode(changesFilterEl)), submitBtn = $el.find('[type="submit"]')[0], addItemField = $el.find('.js-changes-filter-field')[0]; @@ -109,7 +110,7 @@ define([ }); it('should call addFilter action on click', function () { - var $el = $(changesFilterEl.getDOMNode()), + var $el = $(ReactDOM.findDOMNode(changesFilterEl)), submitBtn = $el.find('[type="submit"]')[0], addItemField = $el.find('.js-changes-filter-field')[0]; @@ -123,7 +124,7 @@ define([ }); it('should remove filter markup', function () { - var $el = $(changesFilterEl.getDOMNode()), + var $el = $(ReactDOM.findDOMNode(changesFilterEl)), submitBtn = $el.find('[type="submit"]')[0], addItemField = $el.find('.js-changes-filter-field')[0]; @@ -143,7 +144,7 @@ define([ }); it('should call removeFilter action on click', function () { - var $el = $(changesFilterEl.getDOMNode()), + var $el = $(ReactDOM.findDOMNode(changesFilterEl)), submitBtn = $el.find('[type="submit"]')[0], addItemField = $el.find('.js-changes-filter-field')[0]; @@ -158,7 +159,7 @@ define([ }); it('should not add empty filters', function () { - var $el = $(changesFilterEl.getDOMNode()), + var $el = $(ReactDOM.findDOMNode(changesFilterEl)), submitBtn = $el.find('[type="submit"]')[0], addItemField = $el.find('.js-changes-filter-field')[0]; @@ -170,11 +171,11 @@ define([ }); it('should not add tooltips by default', function () { - assert.equal(0, $(changesFilterEl.getDOMNode()).find('.js-remove-filter').length); + assert.equal(0, $(ReactDOM.findDOMNode(changesFilterEl)).find('.js-remove-filter').length); }); it('should not add the same filter twice', function () { - var $el = $(changesFilterEl.getDOMNode()), + var $el = $(ReactDOM.findDOMNode(changesFilterEl)), submitBtn = $el.find('[type="submit"]')[0], addItemField = $el.find('.js-changes-filter-field')[0]; @@ -213,16 +214,16 @@ define([ container2 = document.createElement('div'); Actions.initChanges({ databaseName: 'testDatabase' }); headerEl = TestUtils.renderIntoDocument(<Changes.ChangesHeaderController />, container); - $headerEl = $(headerEl.getDOMNode()); + $headerEl = $(ReactDOM.findDOMNode(headerEl)); changesEl = TestUtils.renderIntoDocument(<Changes.ChangesController />, container2); - $changesEl = $(changesEl.getDOMNode()); + $changesEl = $(ReactDOM.findDOMNode(changesEl)); Actions.updateChanges(changesResponse); }); afterEach(function () { Stores.changesStore.reset(); - React.unmountComponentAtNode(container); - React.unmountComponentAtNode(container2); + ReactDOM.unmountComponentAtNode(container); + ReactDOM.unmountComponentAtNode(container2); }); @@ -320,16 +321,16 @@ define([ afterEach(function () { Stores.changesStore.reset(); - React.unmountComponentAtNode(container); + ReactDOM.unmountComponentAtNode(container); }); it('should truncate the number of results with very large # of changes', function () { // check there's no more than maxChanges results - assert.equal(maxChanges, $(changesEl.getDOMNode()).find('.change-box').length); + assert.equal(maxChanges, $(ReactDOM.findDOMNode(changesEl)).find('.change-box').length); }); it('should show a message if the results are truncated', function () { - assert.equal(1, $(changesEl.getDOMNode()).find('.changes-result-limit').length); + assert.equal(1, $(ReactDOM.findDOMNode(changesEl)).find('.changes-result-limit').length); }); }); @@ -349,7 +350,7 @@ define([ }); afterEach(function () { - React.unmountComponentAtNode(container); + ReactDOM.unmountComponentAtNode(container); }); @@ -357,23 +358,23 @@ define([ var changeRow = TestUtils.renderIntoDocument(<Changes.ChangeRow change={change} databaseName="testDatabase" />, container); // confirm it's hidden by default - assert.equal(0, $(changeRow.getDOMNode()).find('.prettyprint').length); + assert.equal(0, $(ReactDOM.findDOMNode(changeRow)).find('.prettyprint').length); // confirm clicking it shows the element - TestUtils.Simulate.click($(changeRow.getDOMNode()).find('button.btn')[0]); - assert.equal(1, $(changeRow.getDOMNode()).find('.prettyprint').length); + TestUtils.Simulate.click($(ReactDOM.findDOMNode(changeRow)).find('button.btn')[0]); + assert.equal(1, $(ReactDOM.findDOMNode(changeRow)).find('.prettyprint').length); }); it('deleted docs should not be clickable', function () { change.deleted = true; var changeRow = TestUtils.renderIntoDocument(<Changes.ChangeRow change={change} databaseName="testDatabase" />, container); - assert.equal(0, $(changeRow.getDOMNode()).find('a.js-doc-link').length); + assert.equal(0, $(ReactDOM.findDOMNode(changeRow)).find('a.js-doc-link').length); }); it('non-deleted docs should be clickable', function () { change.deleted = false; var changeRow = TestUtils.renderIntoDocument(<Changes.ChangeRow change={change} databaseName="testDatabase" />, container); - assert.equal(1, $(changeRow.getDOMNode()).find('a.js-doc-link').length); + assert.equal(1, $(ReactDOM.findDOMNode(changeRow)).find('a.js-doc-link').length); }); }); http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/e6450a0d/app/addons/documents/doc-editor/components.react.jsx ---------------------------------------------------------------------- diff --git a/app/addons/documents/doc-editor/components.react.jsx b/app/addons/documents/doc-editor/components.react.jsx index 6e1e051..56ed8d3 100644 --- a/app/addons/documents/doc-editor/components.react.jsx +++ b/app/addons/documents/doc-editor/components.react.jsx @@ -2,13 +2,14 @@ define([ 'api', 'app', 'react', + 'react-dom', 'addons/documents/doc-editor/actions', 'addons/documents/doc-editor/stores', 'addons/fauxton/components.react', 'addons/components/react-components.react', 'libs/react-bootstrap', 'helpers' -], function (FauxtonAPI, app, React, Actions, Stores, FauxtonComponents, GeneralComponents, ReactBootstrap, Helpers) { +], function (FauxtonAPI, app, React, ReactDOM, Actions, Stores, FauxtonComponents, GeneralComponents, ReactBootstrap, Helpers) { var store = Stores.docEditorStore; var Modal = ReactBootstrap.Modal; @@ -290,7 +291,7 @@ define([ Actions.uploadAttachment({ doc: this.props.doc, rev: this.props.doc.get('_rev'), - files: $(React.findDOMNode(this.refs.attachments))[0].files + files: $(ReactDOM.findDOMNode(this.refs.attachments))[0].files }); }, http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/e6450a0d/app/addons/documents/doc-editor/tests/doc-editor.componentsSpec.react.jsx ---------------------------------------------------------------------- diff --git a/app/addons/documents/doc-editor/tests/doc-editor.componentsSpec.react.jsx b/app/addons/documents/doc-editor/tests/doc-editor.componentsSpec.react.jsx index cdbc192..124d101 100644 --- a/app/addons/documents/doc-editor/tests/doc-editor.componentsSpec.react.jsx +++ b/app/addons/documents/doc-editor/tests/doc-editor.componentsSpec.react.jsx @@ -14,6 +14,7 @@ define([ 'app', 'api', 'react', + 'react-dom', 'addons/documents/resources', 'addons/documents/doc-editor/components.react', 'addons/documents/doc-editor/stores', @@ -22,12 +23,10 @@ define([ 'addons/databases/base', 'testUtils', 'libs/react-bootstrap' -], function (app, FauxtonAPI, React, Documents, Components, Stores, Actions, ActionTypes, Databases, utils, +], function (app, FauxtonAPI, React, ReactDOM, Documents, Components, Stores, Actions, ActionTypes, Databases, utils, ReactBoostrap) { FauxtonAPI.router = new FauxtonAPI.Router([]); - var Modal = ReactBoostrap.Modal; - var assert = utils.assert; var TestUtils = React.addons.TestUtils; @@ -71,12 +70,12 @@ define([ }); afterEach(function () { - React.unmountComponentAtNode(container); + ReactDOM.unmountComponentAtNode(container); }); it('loading indicator appears on load', function () { var el = TestUtils.renderIntoDocument(<Components.DocEditorController />, container); - assert.equal($(el.getDOMNode()).find('.loading-lines').length, 1); + assert.equal($(ReactDOM.findDOMNode(el)).find('.loading-lines').length, 1); }); it('new docs do not show the button row', function () { @@ -90,10 +89,10 @@ define([ } }); - assert.equal($(el.getDOMNode()).find('.loading-lines').length, 0); - assert.equal($(el.getDOMNode()).find('.icon-circle-arrow-up').length, 0); - assert.equal($(el.getDOMNode()).find('.icon-repeat').length, 0); - assert.equal($(el.getDOMNode()).find('.icon-trash').length, 0); + assert.equal($(ReactDOM.findDOMNode(el)).find('.loading-lines').length, 0); + assert.equal($(ReactDOM.findDOMNode(el)).find('.icon-circle-arrow-up').length, 0); + assert.equal($(ReactDOM.findDOMNode(el)).find('.icon-repeat').length, 0); + assert.equal($(ReactDOM.findDOMNode(el)).find('.icon-trash').length, 0); }); it('view attachments button does not appear with no attachments', function () { @@ -106,7 +105,7 @@ define([ doc: doc } }); - assert.equal($(el.getDOMNode()).find('.view-attachments-section').length, 0); + assert.equal($(ReactDOM.findDOMNode(el)).find('.view-attachments-section').length, 0); }); it('view attachments button shows up when the doc has attachments', function () { @@ -119,7 +118,7 @@ define([ doc: doc } }); - assert.equal($(el.getDOMNode()).find('.view-attachments-section').length, 1); + assert.equal($(ReactDOM.findDOMNode(el)).find('.view-attachments-section').length, 1); }); it('view attachments dropdown contains right number of docs', function () { @@ -132,7 +131,7 @@ define([ doc: doc } }); - assert.equal($(el.getDOMNode()).find('.view-attachments-section .dropdown-menu li').length, 2); + assert.equal($(ReactDOM.findDOMNode(el)).find('.view-attachments-section .dropdown-menu li').length, 2); }); it('view attachments dropdown contains correct urls', function () { @@ -146,13 +145,12 @@ define([ } }); - var attachmentNode = $(el.getDOMNode()).find('.view-attachments-section .dropdown-menu li')[0]; + var attachmentNode = $(ReactDOM.findDOMNode(el)).find('.view-attachments-section .dropdown-menu li')[0]; var attachmentURLactual = $(attachmentNode).find('a').attr('href'); assert.equal(attachmentURLactual, "../../id/_design/test-doc/one.png"); }); - it('setting deleteDocModal=true in store shows modal', function () { var el = TestUtils.renderIntoDocument(<Components.DocEditorController database={database} />, container); var doc = new Documents.Doc(docWithAttachmentsJSON, { database: database }); @@ -163,14 +161,14 @@ define([ } }); - // this is unfortunate, but I can't find a better way to do it. Refs won't work for bootstrap modals because - // they add the modal to the page at the top level outside the component. There are 3 modals in the - // component: the upload modal, clone modal, delete doc modal. We locate it by index - var modals = TestUtils.scryRenderedComponentsWithType(el, Modal); + // uber-kludgy, but the delete doc modal is a generic dialog used multiple times, so this test first checks + // no modal is open, then confirms the open modal contains the delete dialog message + assert.equal($('body').find('.confirmation-modal').length, 0); - assert.equal(React.findDOMNode(modals[2].refs.modal), null); Actions.showDeleteDocModal(); - assert.notEqual(React.findDOMNode(modals[2].refs.modal), null); + + var modalContent = $('body').find('.confirmation-modal .modal-body p')[0]; + assert.ok(/Are you sure you want to delete this document\?/.test(modalContent.innerHTML)); }); it('setting uploadDocModal=true in store shows modal', function () { @@ -182,11 +180,10 @@ define([ doc: doc } }); - var modals = TestUtils.scryRenderedComponentsWithType(el, Modal); - assert.equal(React.findDOMNode(modals[1].refs.modal), null); + assert.equal($('body').find('.upload-file-modal').length, 0); Actions.showUploadModal(); - assert.notEqual(React.findDOMNode(modals[1].refs.modal), null); + assert.notEqual($('body').find('.upload-file-modal').length, 0); }); }); @@ -200,17 +197,17 @@ define([ }); afterEach(function () { - React.unmountComponentAtNode(container); + ReactDOM.unmountComponentAtNode(container); }); it('does not show up when loading', function () { var el = TestUtils.renderIntoDocument(<Components.AttachmentsPanelButton isLoading={true} doc={doc} />, container); - assert.equal($(el.getDOMNode()).find('.panel-button').length, 0); + assert.equal($(ReactDOM.findDOMNode(el)).find('.panel-button').length, 0); }); it('shows up after loading', function () { var el = TestUtils.renderIntoDocument(<Components.AttachmentsPanelButton isLoading={false} doc={doc} />, container); - assert.equal($(el.getDOMNode()).find('.panel-button').length, 1); + assert.equal($(ReactDOM.findDOMNode(el)).find('.panel-button').length, 1); }); }); @@ -231,12 +228,12 @@ define([ var container = document.createElement('div'); var el = TestUtils.renderIntoDocument(<Components.DocEditorController database={database} />, container); - assert.isTrue(/Oh\sno\sshe\sdi'n't!/.test(el.getDOMNode().outerHTML)); + assert.isTrue(/Oh\sno\sshe\sdi'n't!/.test(ReactDOM.findDOMNode(el).outerHTML)); // confirm the database name was also included - assert.equal($(el.getDOMNode()).find("#testDatabaseName").html(), database.id); + assert.equal($(ReactDOM.findDOMNode(el)).find("#testDatabaseName").html(), database.id); - React.unmountComponentAtNode(container); + ReactDOM.unmountComponentAtNode(container); }); }); http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/e6450a0d/app/addons/documents/helpers.js ---------------------------------------------------------------------- diff --git a/app/addons/documents/helpers.js b/app/addons/documents/helpers.js index 17d774c..81be185 100644 --- a/app/addons/documents/helpers.js +++ b/app/addons/documents/helpers.js @@ -16,7 +16,6 @@ define([ ], function (app, FauxtonAPI) { - function getPreviousPageForDoc (database, wasCloned) { var previousPage = database.url('index'), // default to the current database's all_docs page lastPages = FauxtonAPI.router.lastPages; @@ -81,12 +80,15 @@ define([ }; } + function parseJSON (str) { + return JSON.parse('"' + str + '"'); // this ensures newlines are converted + } return { getPreviousPageForDoc: getPreviousPageForDoc, getPreviousPage: getPreviousPage, getSeqNum: getSeqNum, getNewButtonLinks: getNewButtonLinks, - + parseJSON: parseJSON }; });
