Merge 9c0604b into c7c22db

FormidableLabs · May 20, 2016 · c384d6b · c384d6b
2 parents c7c22db + 9c0604b
commit c384d6b
Show file tree

Hide file tree

Showing 12 changed files with 55 additions and 40 deletions.
diff --git a/client/app.jsx b/client/app.jsx
@@ -3,6 +3,7 @@
  */
 /*globals document:false, location:false */
 import React from "react";
+import ReactDOM from "react-dom";
 import { Provider } from "react-redux";
 
 import createStore from "./store/create-store";
@@ -21,9 +22,9 @@ let store = createStore();
 // Render helpers -- may defer based on client-side actions.
 let deferRender = false;
 const render = () => {
-  React.render(
+  ReactDOM.render(
     <Provider store={store}>
-      {() => <Page />}
+      <Page />
     </Provider>, rootEl
   );
 };

diff --git a/client/components/convert.jsx b/client/components/convert.jsx
@@ -7,18 +7,17 @@ import Button from "react-bootstrap/lib/Button";
 import { fetchConversions } from "../actions/";
 
 class Convert extends React.Component {
-  onClick() {
+  onClick(e) {
+    e.preventDefault();
     const store = this.props;
     store.dispatch(fetchConversions(store.types, store.value));
   }
 
   render() {
     return (
-      <span className="input-group-btn">
-        <Button className="e2e-convert" onClick={this.onClick.bind(this)}>
-          Convert
-        </Button>
-      </span>
+      <Button className="e2e-convert" onClick={this.onClick.bind(this)}>
+        Convert
+      </Button>
     );
   }
 }

diff --git a/client/components/input.jsx b/client/components/input.jsx
@@ -3,7 +3,7 @@
  */
 import React from "react";
 import { connect } from "react-redux";
-import Input from "react-bootstrap/lib/Input";
+import FormControl from "react-bootstrap/lib/FormControl";
 import { setConversionValue, fetchConversions } from "../actions/";
 
 class UserInput extends React.Component {
@@ -13,14 +13,15 @@ class UserInput extends React.Component {
 
   onKeyDown(ev) {
     if (ev.which === 13 /* Enter key */) {
+      ev.preventDefault();
       const store = this.props;
       store.dispatch(fetchConversions(store.types, store.value));
     }
   }
 
   render() {
     return (
-      <Input
+      <FormControl
         className="form-control e2e-input"
         onChange={this.onChange.bind(this)}
         onKeyDown={this.onKeyDown.bind(this)}

diff --git a/client/components/output-panel.jsx b/client/components/output-panel.jsx
@@ -10,7 +10,7 @@ export default class OutputPanel extends React.Component {
       <Panel
         className="output-panel e2e-output-panel"
         header=<h3>{this.props.title}</h3>
-        >
+      >
         {this.props.content}
       </Panel>
     );

diff --git a/client/components/types.jsx b/client/components/types.jsx
@@ -8,6 +8,7 @@ import MenuItem from "react-bootstrap/lib/MenuItem";
 import { setConversionTypes } from "../actions/";
 
 import Title from "./types-title";
+
 import types from "../utils/types";
 
 const noop = () => {};
@@ -27,13 +28,12 @@ class Types extends React.Component {
 
     return (
       <DropdownButton
-        className="input-group-btn e2e-convert-label"
+        className="e2e-convert-label"
         // BUG: Dropdowns don't close by default. Here's a patch.
         // See: https://github.com/react-bootstrap/react-bootstrap/pull/195
         onSelect={noop}
-        pullRight
-        title=<Title title={types.getTitle(this.props.types)} />
-        >
+        title={<Title title={types.getTitle(this.props.types)} />}
+      >
         {items}
         <MenuItem divider />
         <MenuItem className="e2e-convert-type-all"

diff --git a/client/containers/page.jsx b/client/containers/page.jsx
@@ -3,11 +3,14 @@
  */
 import React from "react";
 import Jumbotron from "react-bootstrap/lib/Jumbotron";
+import Form from "react-bootstrap/lib/Form";
+import FormGroup from "react-bootstrap/lib/FormGroup";
 
 import Convert from "../components/convert";
 import Input from "../components/input";
 import Types from "../components/types";
 import Output from "../components/output";
+import InputGroup from "react-bootstrap/lib/InputGroup";
 
 import "bootstrap/dist/css/bootstrap.css";
 import "bootstrap/dist/css/bootstrap-theme.css";
@@ -21,11 +24,19 @@ class Page extends React.Component {
           <h1>The Converter!</h1>
           <p>Camel, snake and dasherize to awesomeness!</p>
         </Jumbotron>
-        <div className="input-group">
-          <Convert />
-          <Input />
-          <Types />
-        </div>
+        <Form>
+          <FormGroup>
+            <InputGroup>
+              <InputGroup.Button>
+                <Convert />
+              </InputGroup.Button>
+                <Input />
+              <InputGroup.Button>
+                <Types />
+              </InputGroup.Button>
+            </InputGroup>
+          </FormGroup>
+        </Form>
         <Output />
       </div>
     );

diff --git a/package.json b/package.json
@@ -83,8 +83,9 @@
     "extract-text-webpack-plugin": "^0.8.2",
     "file-loader": "^0.8.4",
     "isomorphic-fetch": "^2.1.1",
-    "react": "^0.13.3",
-    "react-bootstrap": "^0.24.2",
+    "react": "^15.0.1",
+    "react-bootstrap": "^0.29.4",
+    "react-dom": "^15.0.2",
     "react-redux": "^3.0.1",
     "redux": "^3.0.2",
     "redux-logger": "^2.0.1",
@@ -125,11 +126,12 @@
     "mocha": "^2.2.5",
     "nodemon": "^1.4.0",
     "phantomjs": "^1.9.18",
+    "react-addons-test-utils": "^15.0.2",
     "react-hot-loader": "^1.2.8",
     "recluster": "^0.4.0",
     "rowdy": "^0.3.2",
     "saucelabs": "^0.1.1",
-    "selenium-standalone": "^4.5.3",
+    "selenium-standalone": "^5.1.0",
     "sinon": "^1.16.1",
     "sinon-chai": "^2.8.0",
     "supertest": "^1.0.1",

diff --git a/server/index.js b/server/index.js
@@ -53,6 +53,7 @@ app.get("/api/dash", function (req, res) {
 // ----------------------------------------------------------------------------
 // Client-side imports
 var React = require("react");
+var ReactDOM = require("react-dom/server");
 var Provider = require("react-redux").Provider;
 var Page = require("../client/containers/page");
 var createStore = require("../client/store/create-store");
@@ -62,7 +63,7 @@ var Index = React.createFactory(require("../templates/index"));
 // Have to manually hack in the doctype because not contained with single
 // element for full page.
 var renderIndex = function (component) {
-  return "<!DOCTYPE html>" + React.renderToStaticMarkup(component);
+  return "<!DOCTYPE html>" + ReactDOM.renderToStaticMarkup(component);
 };
 
 app.indexRoute = function (root) {
@@ -116,9 +117,10 @@ app.indexRoute = function (root) {
     var content;
     if (renderSs) {
       content = res.locals.bootstrapComponent ||
-        React.renderToString(React.createElement(Provider, { store: createStore() }, function () {
-          return React.createElement(Page);
-        }));
+        ReactDOM.renderToString(React.createElement(
+          Provider, { store: createStore() }, function () {
+            return React.createElement(Page);
+          }));
     }
 
     // Response.

diff --git a/server/middleware.js b/server/middleware.js
@@ -20,6 +20,7 @@
 var url = require("url");
 
 var React = require("react");
+var ReactDOM = require("react-dom/server");
 var Provider = require("react-redux").Provider;
 
 var createStore = require("../client/store/create-store");
@@ -84,7 +85,7 @@ module.exports.flux = {
           // with a simple callback of `function (flux)` that the upstream
           // component can use however it wants / ignore.
           res.locals.bootstrapComponent =
-            React.renderToString(React.createElement(
+            ReactDOM.renderToString(React.createElement(
               Provider, { store: store }, function () {
                 return React.createElement(Component);
               }));

diff --git a/templates/index.jsx b/templates/index.jsx
@@ -26,14 +26,13 @@ export default class Index extends React.Component {
           <meta name="apple-mobile-web-app-capable" content="yes" />
 
           {/* Polyfills before CSS */}
-          <meta name="ie-shiv-polyfill" dangerouslySetInnerHTML={{__html:
+          <span dangerouslySetInnerHTML={{__html:
             strip(`<!--[if lt IE 9]>
               <script src="${CLOUDFLARE}/html5shiv/3.7.2/html5shiv-printshiv.js"></script>
             <![endif]-->`)
           }} />
 
           <link rel="stylesheet" href={this.props.bundles.css} />
-
           <title>Converter</title>
         </head>
         <body>

diff --git a/test/client/spec/components/types-title.spec.jsx b/test/client/spec/components/types-title.spec.jsx
@@ -1,12 +1,12 @@
 /**
  * Client tests
  */
-import React from "react/addons";
+import React from "react";
 import Title from "client/components/types-title";
 
-// Use `TestUtils` to inject into DOM, simulate events, etc.
+// Use `ReactTestUtils` to inject into DOM, simulate events, etc.
 // See: https://facebook.github.io/react/docs/test-utils.html
-const TestUtils = React.addons.TestUtils;
+const ReactTestUtils = require("react-addons-test-utils");
 
 describe("components/types-title", function () {
 
@@ -15,25 +15,24 @@ describe("components/types-title", function () {
     // browser DOM node.
     //
     // https://facebook.github.io/react/docs/test-utils.html#renderintodocument
-    const rendered = TestUtils.renderIntoDocument(<Title title="Deep Title" />);
+    const rendered = ReactTestUtils.renderIntoDocument(<Title title="Deep Title" />);
 
     // This is a real DOM node to assert on.
     //
     // HACKY: The outer `span` is first, then three children.
     //        Real tests should use specific selectors.
-    const renderedComponents = TestUtils
+    const renderedComponents = ReactTestUtils
       .scryRenderedDOMComponentsWithTag(rendered, "span");
-    const node = React.findDOMNode(renderedComponents[2]);
 
-    expect(node).to.have.property("innerHTML", "Deep Title");
+    expect(renderedComponents[2]).to.have.property("innerHTML", "Deep Title");
   });
 
   it("sets a title with shallow render", function () {
     // This is a "shallow" render that renders only the current component
     // without using the actual DOM.
     //
     // https://facebook.github.io/react/docs/test-utils.html#shallow-rendering
-    const renderer = TestUtils.createRenderer();
+    const renderer = ReactTestUtils.createRenderer();
     renderer.render(<Title title="Shallow Title" />);
     const output = renderer.getRenderOutput();
 

diff --git a/test/func/spec/application.spec.js b/test/func/spec/application.spec.js
@@ -232,10 +232,10 @@ describe("func/application", function () {
         //
         // **Note**: Firefox requires `.e2e-convert-label button` instead of
         // `.e2e-convert-label` alone which works on Chrome.
-        .click(".e2e-convert-label button")
+        .click(".e2e-convert-label")
 
         // Click the "all the things" option.
-        .click(".e2e-convert-type-all")
+        .click(".e2e-convert-type-all a")
 
         // Type a complex string.
         .setValue(".e2e-input", " all_the things!")