From 7e12d8a433c95c2f573869d453d5413dfd4593c9 Mon Sep 17 00:00:00 2001 From: RothGo Date: Fri, 16 Oct 2015 17:12:17 +0800 Subject: [PATCH] Modify spec Readme.md example to use ReactDOM.render to replace React.render --- README.md | 3 ++- examples/basic/app.js | 3 ++- examples/bootstrap/app.js | 3 ++- package.json | 2 +- specs/Modal.spec.js | 52 ++++++++++++++++++++------------------- specs/helper.js | 8 +++--- 6 files changed, 38 insertions(+), 33 deletions(-) diff --git a/README.md b/README.md index 3fad0cfa..4e83731a 100644 --- a/README.md +++ b/README.md @@ -54,6 +54,7 @@ Inside an app: ```js var React = require('react'); +var ReactDOM = require('react-dom'); var Modal = require('react-modal'); var appElement = document.getElementById('your-app-element'); @@ -120,7 +121,7 @@ var App = React.createClass({ } }); -React.render(, appElement); +ReactDOM.render(, appElement); ``` # Demos diff --git a/examples/basic/app.js b/examples/basic/app.js index 9381eafa..58294ae8 100644 --- a/examples/basic/app.js +++ b/examples/basic/app.js @@ -1,4 +1,5 @@ var React = require('react'); +var ReactDOM = require('react-dom'); var Modal = require('../../lib/index'); var appElement = document.getElementById('example'); @@ -58,4 +59,4 @@ var App = React.createClass({ } }); -React.render(, appElement); +ReactDOM.render(, appElement); diff --git a/examples/bootstrap/app.js b/examples/bootstrap/app.js index 75dff72b..064dbfc0 100644 --- a/examples/bootstrap/app.js +++ b/examples/bootstrap/app.js @@ -1,4 +1,5 @@ var React = require('react'); +var ReactDOM = require('react-dom'); var Modal = require('../../lib/index'); var appElement = document.getElementById('example'); @@ -64,4 +65,4 @@ var App = React.createClass({ } }); -React.render(, appElement); +ReactDOM.render(, appElement); diff --git a/package.json b/package.json index 74128dbb..fc47e28f 100644 --- a/package.json +++ b/package.json @@ -48,7 +48,7 @@ "lodash.assign": "^3.2.0" }, "peerDependencies": { - "react": ">=0.13.3 || ^0.14.0-beta3" + "react": "^0.14.0" }, "tags": [ "react", diff --git a/specs/Modal.spec.js b/specs/Modal.spec.js index eeece65e..c3c4d074 100644 --- a/specs/Modal.spec.js +++ b/specs/Modal.spec.js @@ -1,9 +1,11 @@ require('./helper'); -var React = require('react/addons'); +var TestUtils = require('react-addons-test-utils'); +var React = require('react'); +var ReactDOM = require('react-dom'); var Modal = require('../lib/components/Modal'); -var Simulate = React.addons.TestUtils.Simulate; +var Simulate = TestUtils.Simulate; var ariaAppHider = require('../lib/helpers/ariaAppHider'); -var button = React.DOM.button; +var button = ReactDOM.button; describe('Modal', function () { @@ -13,13 +15,13 @@ describe('Modal', function () { it('can be open initially', function() { var component = renderModal({isOpen: true}, 'hello'); - equal(component.portal.refs.content.getDOMNode().innerHTML.trim(), 'hello'); + equal(component.portal.refs.content.innerHTML.trim(), 'hello'); unmountModal(); }); it('can be closed initially', function() { var component = renderModal({}, 'hello'); - equal(component.portal.getDOMNode().innerHTML.trim(), ''); + equal(ReactDOM.findDOMNode(component.portal).innerHTML.trim(), ''); unmountModal(); }); @@ -27,21 +29,21 @@ describe('Modal', function () { var app = document.createElement('div'); var node = document.createElement('div'); Modal.setAppElement(app); - React.render(React.createElement(Modal, {isOpen: true}), node); + ReactDOM.render(React.createElement(Modal, {isOpen: true}), node); equal(app.getAttribute('aria-hidden'), 'true'); ariaAppHider.resetForTesting(); - React.unmountComponentAtNode(node); + ReactDOM.unmountComponentAtNode(node); }); it('accepts appElement as a prop', function() { var el = document.createElement('div'); var node = document.createElement('div'); - React.render(React.createElement(Modal, { + ReactDOM.render(React.createElement(Modal, { isOpen: true, appElement: el }), node); equal(el.getAttribute('aria-hidden'), 'true'); - React.unmountComponentAtNode(node); + ReactDOM.unmountComponentAtNode(node); }); it('renders into the body, not in context', function() { @@ -51,82 +53,82 @@ describe('Modal', function () { return React.DOM.div({}, React.createElement(Modal, {isOpen: true, ariaHideApp: false}, 'hello')); } }); - React.render(React.createElement(App), node); + ReactDOM.render(React.createElement(App), node); var modalParent = document.body.querySelector('.ReactModalPortal').parentNode; equal(modalParent, document.body); - React.unmountComponentAtNode(node); + ReactDOM.unmountComponentAtNode(node); }); it('renders children', function() { var child = 'I am a child of Modal, and he has sent me here...'; var component = renderModal({isOpen: true}, child); - equal(component.portal.refs.content.getDOMNode().innerHTML, child); + equal(component.portal.refs.content.innerHTML, child); unmountModal(); }); it('has default props', function() { var node = document.createElement('div'); Modal.setAppElement(document.createElement('div')); - var component = React.render(React.createElement(Modal), node); + var component = ReactDOM.render(React.createElement(Modal), node); var props = component.props; equal(props.isOpen, false); equal(props.ariaHideApp, true); equal(props.closeTimeoutMS, 0); - React.unmountComponentAtNode(node); + ReactDOM.unmountComponentAtNode(node); ariaAppHider.resetForTesting(); }); it('removes the portal node', function() { var component = renderModal({isOpen: true}, 'hello'); - equal(component.portal.refs.content.getDOMNode().innerHTML.trim(), 'hello'); + equal(component.portal.refs.content.innerHTML.trim(), 'hello'); unmountModal(); ok(!document.querySelector('.ReactModalPortal')); }); it('focuses the modal content', function() { renderModal({isOpen: true}, null, function () { - strictEqual(document.activeElement, this.portal.refs.content.getDOMNode()); + strictEqual(document.activeElement, this.portal.refs.content); unmountModal(); }); }); it('supports custom className', function() { var modal = renderModal({isOpen: true, className: 'myClass'}); - equal(modal.portal.refs.content.getDOMNode().className.indexOf('myClass') !== -1, true); + equal(modal.portal.refs.content.className.contains('myClass'), true); unmountModal(); }); it('supports overlayClassName', function () { var modal = renderModal({isOpen: true, overlayClassName: 'myOverlayClass'}); - equal(modal.portal.refs.overlay.getDOMNode().className.indexOf('myOverlayClass') !== -1, true); + equal(modal.portal.refs.overlay.className.contains('myOverlayClass'), true); unmountModal(); }); it('supports adding style to the modal contents', function () { var modal = renderModal({isOpen: true, style: {content: {width: '20px'}}}); - equal(modal.portal.refs.content.getDOMNode().style.width, '20px'); + equal(modal.portal.refs.content.style.width, '20px'); }); it('supports overridding style on the modal contents', function() { var modal = renderModal({isOpen: true, style: {content: {position: 'static'}}}); - equal(modal.portal.refs.content.getDOMNode().style.position, 'static'); + equal(modal.portal.refs.content.style.position, 'static'); }); it('supports adding style on the modal overlay', function() { var modal = renderModal({isOpen: true, style: {overlay: {width: '75px'}}}); - equal(modal.portal.refs.overlay.getDOMNode().style.width, '75px'); + equal(modal.portal.refs.overlay.style.width, '75px'); }); it('supports overridding style on the modal overlay', function() { var modal = renderModal({isOpen: true, style: {overlay: {position: 'static'}}}); - equal(modal.portal.refs.overlay.getDOMNode().style.position, 'static'); + equal(modal.portal.refs.overlay.style.position, 'static'); }); it('adds class to body when open', function() { var modal = renderModal({isOpen: false}); equal(document.body.className.indexOf('ReactModal__Body--open') !== -1, false); - modal.setProps({ isOpen: true}); + modal = renderModal({isOpen: true}); equal(document.body.className.indexOf('ReactModal__Body--open') !== -1, true); modal = renderModal({isOpen: false}); @@ -146,13 +148,13 @@ describe('Modal', function () { //it('adds --before-close for animations', function() { //var node = document.createElement('div'); - //var component = React.render(React.createElement(Modal, { + //var component = ReactDOM.render(React.createElement(Modal, { //isOpen: true, //ariaHideApp: false, //closeTimeoutMS: 50, //}), node); - //component = React.render(React.createElement(Modal, { + //component = ReactDOM.render(React.createElement(Modal, { //isOpen: false, //ariaHideApp: false, //closeTimeoutMS: 50, diff --git a/specs/helper.js b/specs/helper.js index 2d23397c..62e88bc4 100644 --- a/specs/helper.js +++ b/specs/helper.js @@ -1,8 +1,8 @@ assert = require('assert'); -React = require('react/addons'); +var React = require('react'); +var ReactDOM = require('react-dom'); var Modal = React.createFactory(require('../lib/components/Modal')); -ReactTestUtils = React.addons.TestUtils; ok = assert.ok; equal = assert.equal; strictEqual = assert.strictEqual; @@ -14,11 +14,11 @@ renderModal = function(props, children, callback) { props.ariaHideApp = false; _currentDiv = document.createElement('div'); document.body.appendChild(_currentDiv); - return React.render(Modal(props, children), _currentDiv, callback); + return ReactDOM.render(Modal(props, children), _currentDiv, callback); }; unmountModal = function() { - React.unmountComponentAtNode(_currentDiv); + ReactDOM.unmountComponentAtNode(_currentDiv); document.body.removeChild(_currentDiv); _currentDiv = null; };