Merge branch 'master' into chore/update-appraisals

BookOfGreg · BookOfGreg · commit 9e2cc9daf8fb · 2019-03-30T21:13:36.000Z
diff --git a/README.md b/README.md
@@ -3,16 +3,16 @@
 [![Gem](https://img.shields.io/gem/v/react-rails.svg?style=flat-square)](http://rubygems.org/gems/react-rails)
 [![npm](https://img.shields.io/npm/v/react_ujs.svg?style=flat-square)](https://www.npmjs.com/package/react_ujs)
 [![Build Status](https://img.shields.io/travis/reactjs/react-rails/master.svg?style=flat-square)](https://travis-ci.org/reactjs/react-rails)
-[![Code Climate](https://img.shields.io/codeclimate/github/reactjs/react-rails.svg?style=flat-square)](https://codeclimate.com/github/reactjs/react-rails)
+[![Maintainers Wanted](https://img.shields.io/badge/Maintainers-Wanted-red.svg)
 
 
-React-Rails is a flexible tool to use [React](http://facebook.github.io/react/) with Rails. It:
+React-Rails is a flexible tool to use [React](http://facebook.github.io/react/) with Rails. The benefits:
 * Automatically renders React server-side and client-side
 * Supports Webpacker 3.x, 2.x, 1.1+
 * Supports Sprockets 4.x, 3.x, 2.x
 * Lets you use [JSX](http://facebook.github.io/react/docs/jsx-in-depth.html), [ES6](http://es6-features.org/), [TypeScript](https://www.typescriptlang.org/), [CoffeeScript](http://coffeescript.org/)
 
-Example app code available here: https://github.com/BookOfGreg/react-rails-example-app
+A source code example utilizing React-Rails: https://github.com/BookOfGreg/react-rails-example-app
 
 <!-- START doctoc generated TOC please keep comment here to allow auto update -->
 <!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
@@ -46,30 +46,30 @@ Example app code available here: https://github.com/BookOfGreg/react-rails-examp
 <!-- END doctoc generated TOC please keep comment here to allow auto update -->
 
 
-The React-Rails Wiki has lots of additional information about React-Rails including many "how-to" articles and answers to the most frequently asked questions. Please browse the Wiki after finishing this README:
-
+After reading this README file, additional information about React-Rails can be found in the Wiki page:
 https://github.com/reactjs/React-Rails/wiki
+The Wiki page features a significant amount of additional information about React-Rails which includes instructional articles and answers to the most frequently asked questions.
 
 
 ## Get started with Webpacker
 
-[or Get started with Sprockets](#use-with-asset-pipeline)
+[Alternatively, get started with Sprockets](#use-with-asset-pipeline)
 
-[Webpacker](https://github.com/rails/webpacker) integrates modern JS tooling with Rails.
+[Webpacker](https://github.com/rails/webpacker) provides modern JS tooling for Rails. Here are the listed steps for integrating Webpacker and Rails-React with Rails:
 
-1) Create a new Rails app:
+##### 1) Create a new Rails app:
 ```
 $ rails new my-app
 $ cd my-app
 ```
 
-2) Add `webpacker` and `react-rails` to your gemfile 
+##### 2) Add `webpacker` and `react-rails` to your gemfile:
 ```
 gem 'webpacker'
 gem 'react-rails'
 ```
 
-3) Now run the installers:
+##### 3) Now run the installers:
 ```
 $ bundle install
 $ rails webpacker:install       # OR (on rails version < 5.0) rake webpacker:install
@@ -82,37 +82,39 @@ This gives you:
 - [`ReactRailsUJS`](#ujs) setup in `app/javascript/packs/application.js`
 - `app/javascript/packs/server_rendering.js` for [server-side rendering](#server-side-rendering)
 
-4) Link the JavaScript pack in Rails view using `javascript_pack_tag` [helper](https://github.com/rails/webpacker#usage), for example:
+##### 4) Link the JavaScript pack in Rails view using `javascript_pack_tag` [helper](https://github.com/rails/webpacker#usage):
 ```
 <!-- application.html.erb in Head tag below turbolinks -->
 <%= javascript_pack_tag 'application' %>
 ```
 
-5) Generate your first component:
+##### 5) Generate your first component:
 ```
 $ rails g react:component HelloWorld greeting:string
 ```
 
-6) You can also generate your component in a subdirectory:
+##### 6) You can also generate your component in a subdirectory:
 ```
 $ rails g react:component my_subdirectory/HelloWorld greeting:string
 ```
 Note: Your component is added to `app/javascript/components/` by default.
 
 
-7) [Render it in a Rails view](#view-helper):
+##### 7) [Render it in a Rails view](#view-helper):
 
 ```
 <!-- erb: paste this in view -->
 <%= react_component("HelloWorld", { greeting: "Hello from react-rails." }) %>
 ```
 
-8) Lets Start the app:
+##### 8) Lets Start the app:
 ```
 $ rails s
 ```
 output: greeting: Hello from react-rails", inspect webpage in your browser too see change in tag props.
 
+### Component name
+
 The component name tells `react-rails` where to load the component. For example:
 
 `react_component` call | component `require`
@@ -157,9 +159,44 @@ $ yarn add @types/react @types/react-dom
 
 Doing this will allow React-Rails to support the .tsx extension.
 
+### Test component
+
+You can use `assert_react_component` to test component render:
+
+app/views/welcome/index.html.erb
+
+```erb
+<%= react_component("HelloWorld", { greeting: "Hello from react-rails.", info: { name: "react-rails" } }, { class: "hello-world" }) %>
+```
+
+```rb
+class WelcomeControllerTest < ActionDispatch::IntegrationTest
+  test 'assert_react_component' do
+    get "/welcome"
+    assert_equal 200, response.status
+
+    # assert rendered react component and check the props
+    assert_react_component "HelloWorld" do |props|
+      assert_equal "Hello from react-rails.", props[:greeting]
+      assert_equal "react-rails", props[:info][:name]
+      assert_select "[class=?]", "hello-world"
+    end
+
+    # or just assert component rendered
+    assert_react_component "HelloWorld"
+  end
+end
+```
+
 ## Use with Asset Pipeline
 
-`react-rails` provides a pre-bundled React.js & a UJS driver to the Rails asset pipeline. Get started by installing:
+`react-rails` provides a pre-bundled React.js & a UJS driver to the Rails asset pipeline. Get started by adding the `react-rails` gem:
+
+```
+gem 'react-rails'
+```
+
+And then install the react generator:
 
 ```
 $ rails g react:install
diff --git a/lib/generators/react/install_generator.rb b/lib/generators/react/install_generator.rb
@@ -25,7 +25,7 @@ def create_directory
         end
         empty_directory File.join(components_dir, 'components')
         unless options[:skip_git]
-          create_file File.join(components_dir, 'components/.gitkeep')
+          create_file File.join(components_dir, 'components/.keep')
         end
       end
 
@@ -96,9 +96,9 @@ def setup_react_sprockets
 
       WEBPACKER_SETUP_UJS = <<-JS
 // Support component names relative to this directory:
-var componentRequireContext = require.context("components", true)
-var ReactRailsUJS = require("react_ujs")
-ReactRailsUJS.useContext(componentRequireContext)
+var componentRequireContext = require.context("components", true);
+var ReactRailsUJS = require("react_ujs");
+ReactRailsUJS.useContext(componentRequireContext);
 JS
 
       def setup_react_webpacker
diff --git a/lib/generators/templates/server_rendering_pack.js b/lib/generators/templates/server_rendering_pack.js
@@ -1,5 +1,5 @@
 // By default, this pack is loaded for server-side rendering.
 // It must expose react_ujs as `ReactRailsUJS` and prepare a require context.
-var componentRequireContext = require.context("components", true)
-var ReactRailsUJS = require("react_ujs")
-ReactRailsUJS.useContext(componentRequireContext)
+var componentRequireContext = require.context("components", true);
+var ReactRailsUJS = require("react_ujs");
+ReactRailsUJS.useContext(componentRequireContext);
diff --git a/lib/react-rails.rb b/lib/react-rails.rb
@@ -2,3 +2,9 @@
 require 'react/jsx'
 require 'react/rails'
 require 'react/server_rendering'
+
+module React
+  module Rails
+    autoload :TestHelper, 'react/rails/test_helper'
+  end
+end
diff --git a/lib/react/rails/railtie.rb b/lib/react/rails/railtie.rb
@@ -58,6 +58,7 @@ class Railtie < ::Rails::Railtie
 
         ActiveSupport.on_load(:action_view) do
           include ::React::Rails::ViewHelper
+          ActionDispatch::IntegrationTest.send(:include, React::Rails::TestHelper)
         end
       end
 
diff --git a/lib/react/rails/test_helper.rb b/lib/react/rails/test_helper.rb
@@ -0,0 +1,26 @@
+module React
+  module Rails
+    module TestHelper
+      extend ActiveSupport::Concern
+
+      # assert react_component render
+      #
+      # assert_react_component("HelloWorld") do |props|
+      #   assert_equal "Hello world", props[:message]
+      # end
+      def assert_react_component(name)
+        assert_select "div[data-react-class]" do |dom|
+          assert_select "[data-react-class=?]", name
+
+          if block_given?
+            props = JSON.parse(dom.attr("data-react-props"))
+            props.deep_transform_keys! { |key| key.to_s.underscore }
+            props.deep_symbolize_keys!
+
+            yield(props)
+          end
+        end
+      end
+    end
+  end
+end
diff --git a/test/dummy_sprockets/app/views/pages/show.html.erb b/test/dummy_sprockets/app/views/pages/show.html.erb
@@ -4,7 +4,7 @@
 </ul>
 
 <div id='component-parent'>
-  <%= react_component 'GreetingMessage', { name: @name }, { id: 'component', prerender: @prerender } %>
+  <%= react_component 'GreetingMessage', { name: @name, last_name: "Last #{@name}", info: { name: @name } }, { id: 'component', class: "greeting-message", prerender: @prerender } %>
   <ul>
     <%= react_component 'Todo', { todo: 'Another Component' }, { id: 'todo', prerender: @prerender } %>
   </ul>
diff --git a/test/dummy_webpacker1/app/javascript/packs/server_rendering.js b/test/dummy_webpacker1/app/javascript/packs/server_rendering.js
@@ -1,5 +1,5 @@
 // By default, this pack is loaded for server-side rendering.
 // It must expose react_ujs as `ReactRailsUJS` and prepare a require context.
-var componentRequireContext = require.context("components", true)
-var ReactRailsUJS = require("../../../../../react_ujs/index")
-ReactRailsUJS.useContext(componentRequireContext)
+var componentRequireContext = require.context("components", true);
+var ReactRailsUJS = require("../../../../../react_ujs/index");
+ReactRailsUJS.useContext(componentRequireContext);
diff --git a/test/dummy_webpacker2/app/javascript/packs/server_rendering.js b/test/dummy_webpacker2/app/javascript/packs/server_rendering.js
@@ -1,5 +1,5 @@
 // By default, this pack is loaded for server-side rendering.
 // It must expose react_ujs as `ReactRailsUJS` and prepare a require context.
-var componentRequireContext = require.context("components", true)
-var ReactRailsUJS = require("react_ujs")
-ReactRailsUJS.useContext(componentRequireContext)
+var componentRequireContext = require.context("components", true);
+var ReactRailsUJS = require("react_ujs");
+ReactRailsUJS.useContext(componentRequireContext);
diff --git a/test/dummy_webpacker3/app/javascript/packs/server_rendering.js b/test/dummy_webpacker3/app/javascript/packs/server_rendering.js
@@ -1,5 +1,5 @@
 // By default, this pack is loaded for server-side rendering.
 // It must expose react_ujs as `ReactRailsUJS` and prepare a require context.
-var componentRequireContext = require.context("components", true)
-var ReactRailsUJS = require("react_ujs")
-ReactRailsUJS.useContext(componentRequireContext)
+var componentRequireContext = require.context("components", true);
+var ReactRailsUJS = require("react_ujs");
+ReactRailsUJS.useContext(componentRequireContext);
diff --git a/test/generators/install_generator_webpacker_test.rb b/test/generators/install_generator_webpacker_test.rb
@@ -8,9 +8,9 @@ class InstallGeneratorWebpackerTest < Rails::Generators::TestCase
     setup :prepare_destination
 
     EXPECTED_SETUP = %|// Support component names relative to this directory:
-var componentRequireContext = require.context("components", true)
-var ReactRailsUJS = require("react_ujs")
-ReactRailsUJS.useContext(componentRequireContext)
+var componentRequireContext = require.context("components", true);
+var ReactRailsUJS = require("react_ujs");
+ReactRailsUJS.useContext(componentRequireContext);
 |
 
     DEFAULT_SERVER_RENDERING_PACK_PATH = 'app/javascript/packs/server_rendering.js'
@@ -32,9 +32,9 @@ def copy_directory(dir)
     test 'creates server_rendering.js with default requires' do
       run_generator
       assert_file DEFAULT_SERVER_RENDERING_PACK_PATH do |contents|
-        assert_includes contents, "var componentRequireContext = require.context(\"components\", true)\n"
-        assert_includes contents, "var ReactRailsUJS = require(\"react_ujs\")\n"
-        assert_includes contents, "ReactRailsUJS.useContext(componentRequireContext)\n"
+        assert_includes contents, "var componentRequireContext = require.context(\"components\", true);\n"
+        assert_includes contents, "var ReactRailsUJS = require(\"react_ujs\");\n"
+        assert_includes contents, "ReactRailsUJS.useContext(componentRequireContext);\n"
       end
     end
 
diff --git a/test/react/rails/test_helper_test.rb b/test/react/rails/test_helper_test.rb
@@ -0,0 +1,17 @@
+require 'test_helper'
+
+class TestHelperTest < ActionDispatch::IntegrationTest
+  test 'assert_react_component' do
+    get "/pages/1"
+    assert_equal 200, response.status
+    assert_react_component "GreetingMessage"
+    assert_react_component "GreetingMessage" do |props|
+      assert_equal "Bob", props[:name]
+      assert_equal "Last Bob", props[:last_name]
+      assert_equal "Bob", props[:info][:name]
+
+      assert_select "[id=?]", "component"
+      assert_select "[class=?]", "greeting-message"
+    end
+  end
+end
