diff --git a/README.md b/README.md index c952d585b..3cf4fc28a 100644 --- a/README.md +++ b/README.md @@ -159,6 +159,35 @@ $ 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: diff --git a/lib/react-rails.rb b/lib/react-rails.rb index 582309dcf..d140b0136 100644 --- 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 \ No newline at end of file diff --git a/lib/react/rails/railtie.rb b/lib/react/rails/railtie.rb index 8793824e8..6a4b2d5a1 100644 --- 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 new file mode 100644 index 000000000..4d06512f0 --- /dev/null +++ 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 \ No newline at end of file diff --git a/test/dummy_sprockets/app/views/pages/show.html.erb b/test/dummy_sprockets/app/views/pages/show.html.erb index 04644a308..4c46b12d2 100644 --- a/test/dummy_sprockets/app/views/pages/show.html.erb +++ b/test/dummy_sprockets/app/views/pages/show.html.erb @@ -4,7 +4,7 @@
- <%= 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 } %> diff --git a/test/react/rails/test_helper_test.rb b/test/react/rails/test_helper_test.rb new file mode 100644 index 000000000..fb3efe82f --- /dev/null +++ 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