Skip to content

Commit

Permalink
Modify spec Readme.md example to use ReactDOM.render to replace React…
Browse files Browse the repository at this point in the history
….render
  • Loading branch information
roth1002 committed Oct 16, 2015
1 parent 496bb0b commit 7e12d8a
Show file tree
Hide file tree
Showing 6 changed files with 38 additions and 33 deletions.
3 changes: 2 additions & 1 deletion README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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');
Expand Down Expand Up @@ -120,7 +121,7 @@ var App = React.createClass({
}
});

React.render(<App/>, appElement);
ReactDOM.render(<App/>, appElement);
```

# Demos
Expand Down
3 changes: 2 additions & 1 deletion examples/basic/app.js
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
var React = require('react');
var ReactDOM = require('react-dom');
var Modal = require('../../lib/index');

var appElement = document.getElementById('example');
Expand Down Expand Up @@ -58,4 +59,4 @@ var App = React.createClass({
}
});

React.render(<App/>, appElement);
ReactDOM.render(<App/>, appElement);
3 changes: 2 additions & 1 deletion examples/bootstrap/app.js
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
var React = require('react');
var ReactDOM = require('react-dom');
var Modal = require('../../lib/index');

var appElement = document.getElementById('example');
Expand Down Expand Up @@ -64,4 +65,4 @@ var App = React.createClass({
}
});

React.render(<App/>, appElement);
ReactDOM.render(<App/>, appElement);
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,7 @@
"lodash.assign": "^3.2.0"
},
"peerDependencies": {
"react": ">=0.13.3 || ^0.14.0-beta3"
"react": "^0.14.0"
},
"tags": [
"react",
Expand Down
52 changes: 27 additions & 25 deletions specs/Modal.spec.js
Original file line number Diff line number Diff line change
@@ -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 () {

Expand All @@ -13,35 +15,35 @@ 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();
});

it('uses the global appElement', 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() {
Expand All @@ -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});
Expand All @@ -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,
Expand Down
8 changes: 4 additions & 4 deletions specs/helper.js
Original file line number Diff line number Diff line change
@@ -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;
Expand All @@ -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;
};

0 comments on commit 7e12d8a

Please sign in to comment.