Updated eslint-config-shakacode to 13.2.0

.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/Comment/Comment.spec.jsx

@@ -11,7 +11,7 @@ const {
 describe('Comment', () => {
   it('renders an author and comment with proper css classes', () => {
     const component = renderIntoDocument(
-      <Comment author="Frank" text="Hi!" />
+      <Comment author="Frank" text="Hi!" />,
     );
 
     // TODO: Setup testing of CSS Modules classNames
@@ -25,7 +25,7 @@ describe('Comment', () => {
 
   it('shows the author', () => {
     const component = renderIntoDocument(
-      <Comment author="Frank" text="Hi!" />
+      <Comment author="Frank" text="Hi!" />,
     );
 
     const author = findRenderedDOMComponentWithClass(component, 'js-comment-author');
@@ -34,7 +34,7 @@ describe('Comment', () => {
 
   it('shows the comment text in markdown', () => {
     const component = renderIntoDocument(
-      <Comment author="Frank" text="Hi!" />
+      <Comment author="Frank" text="Hi!" />,
     );
 
     const comment = findRenderedDOMComponentWithClass(component, 'js-comment-text');

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';
@@ -44,9 +44,13 @@ export default class CommentList extends BaseComponent {
         key={$$comment.get('id') || index}
         author={$$comment.get('author')}
         text={$$comment.get('text')}
-      />
+      />,
     );
 
+    // 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

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

@@ -36,7 +36,7 @@ describe('CommentList', () => {
       <CommentList
         $$comments={comments}
         cssTransitionGroupClassNames={cssTransitionGroupClassNames}
-      />
+      />,
     );
     const list = scryRenderedComponentsWithType(component, Comment);
     expect(list.length).to.equal(2);
@@ -49,7 +49,7 @@ describe('CommentList', () => {
       <CommentList
         $$comments={comments} error="zomg"
         cssTransitionGroupClassNames={cssTransitionGroupClassNames}
-      />
+      />,
     );
 
     const alert = findRenderedDOMComponentWithTag(component, 'strong');

client/app/bundles/comments/reducers/commentsReducer.js

@@ -37,7 +37,7 @@ export default function commentsReducer($$state = $$initialState, action = null)
         state
           .updateIn(
             ['$$comments'],
-            $$comments => $$comments.unshift(Immutable.fromJS(comment))
+            $$comments => $$comments.unshift(Immutable.fromJS(comment)),
           )
           .merge({
             submitCommentError: null,

client/app/bundles/comments/startup/ClientRouterApp.jsx

@@ -13,7 +13,7 @@ export default (_props, _railsContext) => {
   // Create an enhanced history that syncs navigation events with the store
   const history = syncHistoryWithStore(
     browserHistory,
-    store
+    store,
   );
 
   return (

client/app/bundles/comments/startup/ClientRouterAppExpress.jsx

@@ -18,7 +18,7 @@ const RouterAppExpress = (_props, _railsContext) => {
   // Create an enhanced history that syncs navigation events with the store
   const history = syncHistoryWithStore(
     browserHistory,
-    store
+    store,
   );
 
   return (

client/app/bundles/comments/startup/serverRegistration.jsx

@@ -14,7 +14,7 @@ ReactOnRails.register(
     RouterApp,
     NavigationBarApp,
     SimpleCommentScreen,
-  }
+  },
 );
 
 ReactOnRails.registerStore({

client/app/bundles/comments/store/commentsStore.js

@@ -15,7 +15,7 @@ export default (props, railsContext) => {
 
   const reducer = combineReducers(reducers);
   const composedStore = compose(
-    applyMiddleware(thunkMiddleware, loggerMiddleware)
+    applyMiddleware(thunkMiddleware, loggerMiddleware),
   );
 
   return composedStore(createStore)(reducer, initialState);

client/app/bundles/comments/store/routerCommentsStore.js

@@ -24,7 +24,7 @@ export default (props, railsContext) => {
 
   // Sync dispatched route actions to the history
   const finalCreateStore = compose(
-    applyMiddleware(thunkMiddleware, loggerMiddleware)
+    applyMiddleware(thunkMiddleware, loggerMiddleware),
   )(createStore);
 
   return finalCreateStore(reducer, initialState);

client/app/libs/middlewares/loggerMiddleware.js

@@ -15,7 +15,6 @@ export default function logger({ getState }) {
       readableState[storeItem] = (
         state[storeItem].toJS ? state[storeItem].toJS() : state[storeItem]
       );
-      return;
     });
 
     console.log('state after dispatch', readableState);