From 50d058a479c6f632eb06b7d08ba654c6816b520d Mon Sep 17 00:00:00 2001
From: Maxim Malov <m.malov.v@gmail.com>
Date: Fri, 22 May 2015 03:43:27 +0600
Subject: [PATCH] [fixed] server side rendering for Modal component

Using document reference in the render method will throw an error
on React.renderToString call on the server side.
See react-bootstrap/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.
---
 package.json             |  2 +-
 src/Modal.js             |  7 +++----
 test/server/ModalSpec.js | 17 +++++++++++++++++
 3 files changed, 21 insertions(+), 5 deletions(-)
 create mode 100644 test/server/ModalSpec.js

diff --git a/package.json b/package.json
index e447f855a0..8921997f15 100644
--- a/package.json
+++ b/package.json
@@ -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",
diff --git a/src/Modal.js b/src/Modal.js
index 5657bf4102..3989cb68f5 100644
--- a/src/Modal.js
+++ b/src/Modal.js
@@ -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 = (
@@ -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;
 
diff --git a/test/server/ModalSpec.js b/test/server/ModalSpec.js
new file mode 100644
index 0000000000..e78832c956
--- /dev/null
+++ b/test/server/ModalSpec.js
@@ -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>
+      );
+    });
+  });
+});