Update rpsec setup to support other drivers

Also experiment with disabling animations in phantomjs.

No matter what, I can't seem to get phantomjs or capybara-webkit to
pass.

Errors here:
https://gist.github.com/justin808/5830adb7634e77db8c23

Author: justin808

Diff for: .gitignore

@@ -31,3 +31,5 @@ vendor/ruby
 
 # Rubymine/IntelliJ
 .idea
+
+spec/examples.txt

Diff for: CHANGELOG.md

@@ -1,8 +1,13 @@
-v1.1 - Sunday, March 22, 2015
-------------------------------
-1. Changed /webpack directory to /client
+# Change Log
+All notable changes to this project will be documented in this file.
 
+See: [merged pull requests](https://github.com/shakacode/react-webpack-rails-tutorial/pulls?utf8=%E2%9C%93&q=is%3Apr+is%3Amerged).
+ 
+## [2.1.0] - 2016-03-06
+### Updated
+- Changed properties for comments to have a top level name property comments. 
 
-This is out of date.
+## 2.0.0 - 2016-03-05
+Baseline for Changelog
 
-See: [pull requests](https://github.com/shakacode/react-webpack-rails-tutorial/pulls?utf8=%E2%9C%93&q=is%3Apr)
+[2.1.0]: https://github.com/shakacode/react_on_rails/compare/2.1.0...2.0.0

Diff for: Gemfile

@@ -91,12 +91,14 @@ end
 
 group :test  do
   gem "coveralls", require: false
-  gem "rspec-rails"
-  gem "rspec-retry"
   gem "capybara"
   gem "capybara-screenshot"
-  gem "selenium-webdriver"
-  gem "chromedriver-helper"
+  gem "capybara-webkit"
+  gem "chromedriver-helper", require: ["selenium_chrome"].include?(ENV["DRIVER"])
   gem "database_cleaner"
   gem "launchy"
+  gem "poltergeist"# , require: ["poltergeist", "poltergeist_errors_ok"].include?(ENV["DRIVER"])
+  gem "rspec-rails"
+  gem "rspec-retry"
+  gem "selenium-webdriver", require: !["poltergeist", "poltergeist_errors_ok", "webkit"].include?(ENV["DRIVER"])
 end

Diff for: Gemfile.lock

@@ -71,11 +71,15 @@ GEM
     capybara-screenshot (1.0.11)
       capybara (>= 1.0, < 3)
       launchy
+    capybara-webkit (1.8.0)
+      capybara (>= 2.3.0, < 2.7.0)
+      json
     childprocess (0.5.9)
       ffi (~> 1.0, >= 1.0.11)
     chromedriver-helper (1.0.0)
       archive-zip (~> 0.7.0)
       nokogiri (~> 1.6)
+    cliver (0.3.2)
     coderay (1.1.1)
     coffee-rails (4.1.1)
       coffee-script (>= 2.2.0)
@@ -135,6 +139,11 @@ GEM
     parser (2.3.0.6)
       ast (~> 2.2)
     pg (0.18.4)
+    poltergeist (1.9.0)
+      capybara (~> 2.1)
+      cliver (~> 0.3.1)
+      multi_json (~> 1.0)
+      websocket-driver (>= 0.2.0)
     powerpack (0.1.1)
     pry (0.10.3)
       coderay (~> 1.1.0)
@@ -298,6 +307,9 @@ GEM
       debug_inspector
       railties (>= 4.2)
     websocket (1.2.2)
+    websocket-driver (0.6.3)
+      websocket-extensions (>= 0.1.0)
+    websocket-extensions (0.1.2)
     xpath (2.0.0)
       nokogiri (~> 1.3)
     yard (0.8.7.6)
@@ -312,6 +324,7 @@ DEPENDENCIES
   bundler-audit
   capybara
   capybara-screenshot
+  capybara-webkit
   chromedriver-helper
   coffee-rails
   coveralls
@@ -321,6 +334,7 @@ DEPENDENCIES
   jbuilder
   launchy
   pg
+  poltergeist
   pry
   pry-byebug
   pry-doc

Diff for: README.md

@@ -16,9 +16,9 @@ By Justin Gordon and the Shaka Code Team, [www.shakacode.com](http://www.shakaco
 - Feel free to open discussions at [forum.shakacode.com](http://forum.shakacode.com). We love to help!
 - We now have a [gitter chat room for this topic](https://gitter.im/shakacode/react-webpack-rails-tutorial) but we prefer our Slack Channel ([email us](mailto:[email protected]) for an invite).
 - Check out the [react_on_rails gem](https://github.com/shakacode/react_on_rails) for easy webpack integration.
-- If you came to here from the blog article, this example project has evolved. See [pull requests](https://github.com/shakacode/react-webpack-rails-tutorial/pulls?utf8=%E2%9C%93&q=is%3Apr).
+- If you came to here from the blog article, this example project has evolved. See [merged pull requests](https://github.com/shakacode/react-webpack-rails-tutorial/pulls?utf8=%E2%9C%93&q=is%3Apr+is%3Amerged) and the [CHANGELOG.md](./CHANGELOG.md).
 
-A Full tutorial article can be found at: [Fast Rich Client Rails Development With Webpack and the ES6 Transpiler](http://www.railsonmaui.com/blog/2014/10/03/integrating-webpack-and-the-es6-transpiler-into-an-existing-rails-project/). Note, this source code repository is way ahead of the tutorial. We plan to update the tutorial article as soon as we can catch our breath!
+An outdated full tutorial article behind of the motivation of this system can be found at: [Fast Rich Client Rails Development With Webpack and the ES6 Transpiler](http://www.railsonmaui.com/blog/2014/10/03/integrating-webpack-and-the-es6-transpiler-into-an-existing-rails-project/). Note, this source code repository is way ahead of the tutorial. 
 
 # NEWS
 We have not yet updated the `react_on_rails` gem generators for the following tasks. We're looking for help to migrate this, if you're interested in contributing to the project. *The tutorial* refers to this repo. The following changes have resulted in lots of differences for the webpack files and visual assets:
@@ -28,7 +28,6 @@ We have not yet updated the `react_on_rails` gem generators for the following ta
 
 If you did generate a fresh app from React On Rails and want to move to CSS Modules, then see [PR 175: Babel 6 / CSS Modules / Rails hot reloading](https://github.com/shakacode/react-webpack-rails-tutorial/pull/175). Note, while there are probably fixes after this PR was accepted, this has the majority of the changes.
 
-
 # Example Application
 This is a simple example application that illustrates the use of ReactJs to implement a commenting system. Front-end code leverages both ReactJs and Rails asset pipeline while the backend is 100% Rails. It shows off a little bit of the interactivity of a ReactJs application, allowing the commmenter to choose the form layout. `react-bootstrap` is used for the React components. A pure Rails UI generated from scaffolding is shown for comparison.
 
@@ -40,7 +39,7 @@ In no particular order:
 
 - Example of using the [react_on_rails gem](https://github.com/shakacode/react_on_rails) for easy react/webpack integration with Rails.
 - Example of React with [CSS Modules](http://glenmaddern.com/articles/css-modules) inside of Rails using Webpack as described in [Smarter CSS builds with Webpack](http://bensmithett.com/smarter-css-builds-with-webpack/).
-- Example of enabling hot reloading of both JS and CSS from your Rails app in development mode. Change your code. Save. Browser updates without a refresh!
+- Example of enabling hot reloading of both JS and CSS (modules) from your Rails app in development mode. Change your code. Save. Browser updates without a refresh!
 - Example of Rails 4.2 with ReactJs/Redux/React-Router with Webpack and ES7.
 - Enabling development of a JS client independently from Rails using the [Webpack Dev Server](https://webpack.github.io/docs/webpack-dev-server.html). You can see this by starting the app and visiting http://localhost:4000
 - Enabling the use of npm modules and [Babel](https://babeljs.io/) with a Rails application using [Webpack](https://webpack.github.io/).
@@ -74,15 +73,23 @@ See package.json and Gemfile for versions
 1. `bundle install`
 1. `npm install`
 1. `rake db:setup`
-1. `foreman start -f Procfile.dev`
-1. Open a browser tab to http://localhost:3000 for the Rails app example.
-1. Open a browser tab to http://localhost:4000 for the Hot Module Replacement Example.
+1. `foreman start -f Procfile.hot`
+  1. Open a browser tab to http://localhost:3000 for the Rails app example with HOT RELOADING
+  2. Try Hot Reloading steps below! 
+1.  `foreman start -f Procfile.express`
+  1. Open a browser tab to http://localhost:4000 for the Hot Module Replacement Example just using an express server (no Rails involved). This is good for fast prototyping of React components. However, this setup is not as useful now that we have hot reloading working for Rails!
+  2. Try Hot Reloading steps below! 
+1. `foreman start -f Procfile.static`
+  1. Open a browser tab to http://localhost:3000 for the Rails app example.
+  2. When you make changes, you have to refresh the browser page.
+
+## Hot Reloading Example (applies to both `Procfile.hot` and `Procfile.express`.
 1. With the browser open to any JSX file, such as [client/app/bundles/comments/components/CommentBox/CommentBox.jsx](client/app/bundles/comments/components/CommentBox/CommentBox.jsx) and you can change the JSX code, hit save, and you will see the sceen update without refreshing the window. This applies to port 3000 and port 4000.
 1. Try changing a `.scss` file, such as a color in [client/app/bundles/comments/components/CommentBox/CommentList/Comment/Comment.scss](client/app/bundles/comments/components/CommentBox/CommentList/Comment/Comment.scss). You can see port 3000 or 4000 update automatically.
 1. Be sure to take a look at the different Procfiles in this directory, as described below.
 
 # KEY COMMANDS
-1. Run all linters and tests: `rake ci`
+1. Run all linters and tests: `rake`
 1. See all npm commands: `npm run`
 1. Start all development processes: `foreman start -f Procfile.dev`
 1. Start all Rails only development processes: `foreman start -f Procfile.rails`
@@ -169,18 +176,7 @@ bundle exec foreman start -f <Procfile>
 In genereral, you want to avoid running more webpack watch processes than you need. The `Procfile.dev`, for example, runs both the express server (Webpack dev server) and the Rails hot assets reloading server.
 
 ## Contributors
-[The Shaka Code team!](http://www.shakacode.com/about/) and many others!
-
-Notable contributions include (please submit PR if I miss any!):
-
-* [Justin Gordon](https://github.com/justin808/): Started this, leads this
-* [Alex Fedoseev](https://github.com/alexfedoseev): Added integration of Rails hot loading and CSS modules, plus much more
-* [Martin Breining](https://github.com/mbreining): For adding flux at first
-* [Dylan Grafmyre](https://github.com/Dgrafmyre): For ci setup
-* [Rob Wise](https://github.com/robwise): Many doc improvements
-* [Josias Schneider](https://github.com/josiasd): Conversion to the new react_on_rails format
-
-See the full list of [Contributors](https://github.com/shakacode/react-webpack-rails-tutorial/graphs/contributors)
+[The Shaka Code team!](http://www.shakacode.com/about/), led by [Justin Gordon](https://github.com/justin808/), along with with many others. See [contributors.md](docs/contributors.md)
 
 # Open Code of Conduct
 This project adheres to the [Open Code of Conduct](http://todogroup.org/opencodeofconduct/#fetch/[email protected]). By participating, you are expected to uphold this code.

Diff for: config/database.yml

@@ -24,3 +24,24 @@ test:
 production:
   <<: *default
   database: db/production.sqlite3
+
+# Uncomment below for a setup with just postgres and change your Gemfile to reflect this
+# default: &default
+#   adapter: postgresql
+#   username:
+#   password:
+#
+# development:
+#   <<: *default
+#   database: tutorial_development
+#
+# # Warning: The database defined as "test" will be erased and
+# # re-generated from your development database when you run "rake".
+# # Do not set this db to the same as development or production.
+# test:
+#   <<: *default
+#   database: tutorial_test
+#
+#production:
+#  <<: *default
+#  database: tutorial_production

Diff for: config/initializers/react_on_rails.rb

@@ -17,4 +17,6 @@
   # Server rendering:
   config.server_renderer_pool_size  = 1   # increase if you're on JRuby
   config.server_renderer_timeout    = 20  # seconds
+
+  config.generated_assets_dirs = File.join(%w(app assets webpack))
 end

Diff for: docs/contributors.md

@@ -0,0 +1,14 @@
+# Contributors
+
+First, we love community contributions, as small as a one character doc fix! Please fork and submit a PR if you see something to improve of fix.
+
+## Notable contributions include (please submit PR if I miss any!):
+
+See the full list of [Contributors](https://github.com/shakacode/react-webpack-rails-tutorial/graphs/contributors)
+
+* [Justin Gordon](https://github.com/justin808/): Started this, leads this
+* [Alex Fedoseev](https://github.com/alexfedoseev): Added integration of Rails hot loading and CSS modules, plus much more
+* [Martin Breining](https://github.com/mbreining): For adding flux at first
+* [Dylan Grafmyre](https://github.com/Dgrafmyre): For ci setup
+* [Rob Wise](https://github.com/robwise): Many doc improvements
+* [Josias Schneider](https://github.com/josiasd): Conversion to the new react_on_rails format

Diff for: spec/rails_helper.rb

@@ -8,11 +8,6 @@
 require "capybara/rspec"
 require "capybara-screenshot/rspec"
 
-# This will insert a <base> tag with the asset host into the pages created by
-# save_and_open_page, meaning that relative links will be loaded from the
-# development server if it is running.
-Capybara.asset_host = "http://localhost:3000"
-
 # Add additional requires below this line. Rails is not loaded until this point!
 
 # Requires supporting ruby files with custom matchers and macros, etc, in
@@ -42,50 +37,60 @@
   # Next line will ensure that assets are built if webpack -w is not running
   ReactOnRails::TestHelper.configure_rspec_to_compile_assets(config)
 
-  # config taken directly from RSpec example in the DatabaseCleaner README
-  config.before(:suite) do
-    DatabaseCleaner.strategy = :transaction
-    DatabaseCleaner.clean_with :truncation
-  end
+  # Maybe selenium_firefox webdriver only works for Travis-CI builds.
+  # 2016-03-06: Phantomjs, all options fails on MacOs
+  # Same for webkit
+  default_driver = :selenium_chrome
 
-  config.around(:each) do |example|
-    DatabaseCleaner.cleaning do
-      example.run
-    end
-  end
+  supported_drivers = %i( poltergeist poltergeist_errors_ok
+                          poltergeist_no_animations webkit
+                          selenium_chrome selenium_firefox selenium)
+  driver = ENV["DRIVER"].try(:to_sym) || default_driver
 
-  config.after(:each) do
-    DatabaseCleaner.clean
+  unless supported_drivers.include?(driver)
+    raise "Unsupported driver: #{driver} (supported = #{supported_drivers})"
   end
 
-  # selenium_firefox webdriver only works for Travis-CI builds.
-  driver = ENV["DRIVER"].try(:to_sym)
-  if driver.nil? || driver == :selenium_chrome
+  case driver
+  when :poltergeist, :poltergeist_errors_ok, :poltergeist_no_animations
+    require "capybara/poltergeist"
+    opts = {
+      extensions: ["#{Rails.root}/spec/support/phantomjs-disable-animations.js"]
+    }
+
+    Capybara.register_driver :poltergeist_no_animations do |app|
+      Capybara::Poltergeist::Driver.new(app, opts)
+    end
+
+    Capybara.register_driver :poltergeist_errors_ok do |app|
+      Capybara::Poltergeist::Driver.new(app, opts.merge(js_errors: false))
+    end
+  when :selenium_chrome
     Capybara.register_driver :selenium_chrome do |app|
       Capybara::Selenium::Driver.new(app, browser: :chrome)
     end
-    Capybara.javascript_driver = :selenium_chrome
-
     Capybara::Screenshot.register_driver(:selenium_chrome) do |js_driver, path|
       js_driver.browser.save_screenshot(path)
     end
-  else
+  when :selenium_firefox, :selenium
     Capybara.register_driver :selenium_firefox do |app|
       Capybara::Selenium::Driver.new(app, browser: :firefox)
     end
-    Capybara.javascript_driver = :selenium_firefox
-
     Capybara::Screenshot.register_driver(:selenium_firefox) do |js_driver, path|
       js_driver.browser.save_screenshot(path)
     end
+    driver = :selenium_firefox
   end
 
-  Capybara.default_max_wait_time = 15
+  Capybara.javascript_driver = driver
+
+  # Capybara.default_max_wait_time = 15
   puts "Capybara using driver: #{Capybara.javascript_driver}"
 
   Capybara::Screenshot.prune_strategy = { keep: 10 }
+
   # Remove this line if you're not using ActiveRecord or ActiveRecord fixtures
-  config.fixture_path = "#{::Rails.root}/spec/fixtures"
+  # config.fixture_path = "#{::Rails.root}/spec/fixtures"
 
   # If you're not using ActiveRecord, or you'd prefer not to run each of your
   # examples within a transaction, remove the following line or assign false
@@ -106,4 +111,25 @@
   # The different available types are documented in the features, such as in
   # https://relishapp.com/rspec/rspec-rails/docs
   config.infer_spec_type_from_file_location!
+
+  # This will insert a <base> tag with the asset host into the pages created by
+  # save_and_open_page, meaning that relative links will be loaded from the
+  # development server if it is running.
+  Capybara.asset_host = "http://localhost:3000"
+
+  # config taken directly from RSpec example in the DatabaseCleaner README
+  config.before(:suite) do
+    DatabaseCleaner.strategy = :transaction
+    DatabaseCleaner.clean_with :truncation
+  end
+
+  config.around(:each) do |example|
+    DatabaseCleaner.cleaning do
+      example.run
+    end
+  end
+
+  config.after(:each) do
+    DatabaseCleaner.clean
+  end
 end

Diff for: spec/spec_helper.rb

@@ -20,6 +20,9 @@
 require "rspec/retry"
 
 RSpec.configure do |config|
+  config.example_status_persistence_file_path = "spec/examples.txt"
+  config.run_all_when_everything_filtered = true
+
   # rspec-expectations config goes here. You can use an alternate
   # assertion/expectation library such as wrong or the stdlib/minitest
   # assertions if you prefer.

Diff for: spec/support/phantomjs-disable-animations.js

@@ -0,0 +1,14 @@
+// https://gist.github.com/andyjbas/9962218
+// disable_animations.js
+var disableAnimationStyles = '-webkit-transition: none !important;' +
+                             '-moz-transition: none !important;' +
+                             '-ms-transition: none !important;' +
+                             '-o-transition: none !important;' +
+                             'transition: none !important;'
+
+window.onload = function() {
+  var animationStyles = document.createElement('style');
+  animationStyles.type = 'text/css';
+  animationStyles.innerHTML = '* {' + disableAnimationStyles + '}';
+  document.head.appendChild(animationStyles);
+};