Skip to content

Commit

Permalink
[fixed] server side rendering for Modal component
Browse files Browse the repository at this point in the history
Using document reference in the render method will throw an error
on React.renderToString call on the server side.
See react-bootstrap#717.

The proper solution is to remove document.querySelector check. Obviously
we cant detect this feature on the server side, besides it leads to
differencies btw server and client side rendering output, so React will warn
about it, ex:

1. `render` on the server side will apply classes: `modal fade`
2. `render` on the client side will apply clasess: `modal fade in`

Also karma test environment is not suitable for testing server side rendering,
so mocha test run againt nodejs was added.
  • Loading branch information
maxmalov committed May 22, 2015
1 parent 39f8285 commit 50d058a
Show file tree
Hide file tree
Showing 3 changed files with 21 additions and 5 deletions.
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@
"scripts": {
"build": "babel-node tools/build-cli.js",
"test-watch": "karma start",
"test": "npm run lint && npm run build && karma start --single-run",
"test": "npm run lint && npm run build && karma start --single-run && _mocha --compilers js:babel-core/register './test/server/*Spec.js'",
"lint": "eslint ./",
"docs-build": "babel-node tools/build-cli.js --docs-only",
"docs": "docs/dev-run",
Expand Down
7 changes: 3 additions & 4 deletions src/Modal.js
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@ const Modal = React.createClass({
let classes = {
modal: true,
fade: this.props.animation,
'in': !this.props.animation || !document.querySelectorAll
'in': !this.props.animation
};

let modal = (
Expand Down Expand Up @@ -72,11 +72,10 @@ const Modal = React.createClass({
renderBackdrop(modal) {
let classes = {
'modal-backdrop': true,
'fade': this.props.animation
fade: this.props.animation,
'in': !this.props.animation
};

classes.in = !this.props.animation || !document.querySelectorAll;

let onClick = this.props.backdrop === true ?
this.handleBackdropClick : null;

Expand Down
17 changes: 17 additions & 0 deletions test/server/ModalSpec.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
import React from 'react';
import {assert} from 'chai';
import Modal from '../../src/Modal.js';

describe('Modal', () => {
it('Should be rendered on the server side', function () {
let noOp = () => {};

assert.doesNotThrow(function renderOnServerSide() {
return React.renderToString(
<Modal onRequestHide={noOp}>
<strong>Message</strong>
</Modal>
);
});
});
});

0 comments on commit 50d058a

Please sign in to comment.