Updates for reliability of CI

* Added file to make poltergeist retry
* more on the poltergeist trap Errno::EPIPE
* add travis to slack integration
* Change react-addons-css-transition-group
* Update npm version
* Update shrinkwrap
* set npm to 4.0.2
* add npm install
* Update node version 7.2.0
* travis runs poltergeist_errors_ok

.nvmrc

@@ -1 +1 @@
-6.0.0
+7.2.0

.travis.yml

@@ -3,6 +3,8 @@ language:
 rvm:
   - 2.3.1
 sudo: false
+notifications:
+  slack: shakacode:YvfXbuFMcFAHt6ZjABIs0KET
 addons:
   apt:
     sources:
@@ -22,16 +24,18 @@ before_install:
   - export PATH=$PWD/travis-phantomjs/phantomjs-2.1.1-linux-x86_64/bin:$PATH
 install:
   - bundle install
-  - nvm install 6.9.1
-  - nvm use 6.9.1
+  - chromedriver-update
+  - nvm install stable && nvm alias default stable
+  - npm install npm@latest -g
+  - npm --version
   - npm install
+  - npm run build:client && npm run build:server
   - rake db:setup
 # No need to run xvfb if running headless testing
-#before_script:
-#   - export DISPLAY=:99.0
-#   - sh -e /etc/init.d/xvfb start
+before_script:
+   - export DISPLAY=:99.0
+   - sh -e /etc/init.d/xvfb start
 
 script:
   - bundle exec rake db:schema:load
-  #  - DRIVER=selenium_firefox bundle exec rake
-  - bundle exec rake
+  - DRIVER=poltergeist_errors_ok bundle exec rake

README.md

@@ -114,6 +114,8 @@ See package.json and Gemfile for versions
 
 ## Javascript development without Rails: using the Webpack Dev Server
 
+We include a sample setup for developing your JavaScript files without Rails. However, this is no longer recommended as it's best to create your APIs in Rails, and take advantage of the hot reloading of your react components provided by this project.
+
 1. Run the node server with file `server-express.js` with command `npm run` or `cd client && node server-express.js`.
 2. Point your browser to [http://localhost:4000](http://localhost:4000)
 
@@ -141,6 +143,9 @@ Save a change to a JSX file and see it update immediately in the browser! Note,
   <%= env_javascript_include_tag(static: 'application_static', hot: 'application_non_webpack', options: { 'data-turbolinks-track' => true }) %>
   ```
 
+## Testing
+
++ Be sure to see [Integration Test Notes](./docs/integration-test-notes.md) for advice on running your integration tests.
 
 + **Testing Mode**: When running tests, it is useful to run `foreman start -f Procfile.spec` in order to have webpack automatically recompile the static bundles. Rspec is configured to automatically check whether or not this process is running. If it is not, it will automatically rebuild the webpack bundle to ensure you are not running tests on stale client code. This is achieved via the `ReactOnRails::TestHelper.configure_rspec_to_compile_assets(config)`
 line in the `rails_helper.rb` file. If you are using this project as an example and are not using RSpec, you may want to implement similar logic in your own project.

client/app/bundles/comments/components/CommentBox/CommentForm/CommentForm.jsx

@@ -12,7 +12,7 @@ import Button from 'react-bootstrap/lib/Button';
 import Nav from 'react-bootstrap/lib/Nav';
 import NavItem from 'react-bootstrap/lib/NavItem';
 import Alert from 'react-bootstrap/lib/Alert';
-import ReactCSSTransitionGroup from 'react/lib/ReactCSSTransitionGroup';
+import ReactCSSTransitionGroup from 'react-addons-css-transition-group';
 import _ from 'lodash';
 
 import BaseComponent from 'libs/components/BaseComponent';
@@ -180,7 +180,7 @@ export default class CommentForm extends BaseComponent {
     return (
       <div>
         <hr />
-        <form className="commentForm form" onSubmit={this.handleSubmit}>
+        <form className="commentForm form form-stacked" onSubmit={this.handleSubmit}>
           <FormGroup controlId="formBasicName">
             <ControlLabel>Name</ControlLabel>
             <FormControl
@@ -227,7 +227,7 @@ export default class CommentForm extends BaseComponent {
     return (
       <div>
         <hr />
-        <Form inline className="commentForm form-inline" onSubmit={this.handleSubmit}>
+        <Form inline className="commentForm" onSubmit={this.handleSubmit}>
           <FormGroup controlId="formInlineName" >
             <ControlLabel>
               Name
@@ -311,12 +311,16 @@ export default class CommentForm extends BaseComponent {
 
     const { cssTransitionGroupClassNames } = this.props;
 
+    // For animation with ReactCSSTransitionGroup
+    //   https://facebook.github.io/react/docs/animation.html
+    // The 500 must correspond to the 0.5s in:
+    //   client/app/bundles/comments/components/CommentBox/CommentBox.scss:6
     return (
       <div>
         <ReactCSSTransitionGroup
           transitionName={cssTransitionGroupClassNames}
-          transitionEnterTimeout={300}
-          transitionLeaveTimeout={300}
+          transitionEnterTimeout={500}
+          transitionLeaveTimeout={500}
         >
           {this.errorWarning()}
         </ReactCSSTransitionGroup>

client/app/bundles/comments/components/CommentBox/CommentList/CommentList.jsx

@@ -2,7 +2,7 @@ import Alert from 'react-bootstrap/lib/Alert';
 import BaseComponent from 'libs/components/BaseComponent';
 import Immutable from 'immutable';
 import React, { PropTypes } from 'react';
-import ReactCSSTransitionGroup from 'react/lib/ReactCSSTransitionGroup';
+import ReactCSSTransitionGroup from 'react-addons-css-transition-group';
 import _ from 'lodash';
 
 import Comment from './Comment/Comment';
@@ -47,6 +47,10 @@ export default class CommentList extends BaseComponent {
       />,
     );
 
+    // For animation with ReactCSSTransitionGroup
+    //   https://facebook.github.io/react/docs/animation.html
+    // The 500 must correspond to the 0.5s in:
+    //   client/app/bundles/comments/components/CommentBox/CommentBox.scss:6
     return (
       <div>
         <ReactCSSTransitionGroup