From 9b98494a48a305399a9ae895f894b555cdbd69fb Mon Sep 17 00:00:00 2001 From: Joseph Tibbertsma Date: Thu, 10 Nov 2016 15:51:58 -0800 Subject: [PATCH] Add an integration test for registerRenderer Added a new page /client_side_manual_render. This page renders the react component `ManualRenderApp`, which is registered on the client side using `registerRenderer`. The given renderer function just renders some simple html to the DOM. The integration test tests for the presence of the html rendered by the ManualRenderApp renderer. The test passing suggests that ReactOnRails properly delegates to the renderer function on client startup. --- spec/dummy/app/views/pages/_header.erb | 3 ++ .../pages/client_side_manual_render.html.erb | 52 +++++++++++++++++++ .../app/startup/ManualRenderAppRenderer.jsx | 13 +++++ .../client/app/startup/clientRegistration.jsx | 5 ++ spec/dummy/config/routes.rb | 1 + spec/dummy/spec/features/integration_spec.rb | 10 ++++ 6 files changed, 84 insertions(+) create mode 100644 spec/dummy/app/views/pages/client_side_manual_render.html.erb create mode 100644 spec/dummy/client/app/startup/ManualRenderAppRenderer.jsx diff --git a/spec/dummy/app/views/pages/_header.erb b/spec/dummy/app/views/pages/_header.erb index d9eaf8a9b..e9c1fcd5c 100644 --- a/spec/dummy/app/views/pages/_header.erb +++ b/spec/dummy/app/views/pages/_header.erb @@ -56,6 +56,9 @@
  • <%= link_to "One Page with Many Examples at Once", root_path %>
    • +
  • + <%= link_to "Manually Rendered Component", client_side_manual_render_path %> +
  • <%= link_to "React Router", react_router_path %>
    • diff --git a/spec/dummy/app/views/pages/client_side_manual_render.html.erb b/spec/dummy/app/views/pages/client_side_manual_render.html.erb new file mode 100644 index 000000000..57ef7c93c --- /dev/null +++ b/spec/dummy/app/views/pages/client_side_manual_render.html.erb @@ -0,0 +1,52 @@ +<%= render "header" %> + +<%= react_component("ManualRenderApp", props: {}, prerender: false) %> +
    + +

    Manual Rendering with registerRenderer

    + + +

    + One possible use case for this is + Code Splitting. +

    diff --git a/spec/dummy/client/app/startup/ManualRenderAppRenderer.jsx b/spec/dummy/client/app/startup/ManualRenderAppRenderer.jsx new file mode 100644 index 000000000..b79e94005 --- /dev/null +++ b/spec/dummy/client/app/startup/ManualRenderAppRenderer.jsx @@ -0,0 +1,13 @@ +import React from 'react'; +import ReactDOM from 'react-dom'; + +export default (props, railsContext, domNodeId) => { + const reactElement = ( +
    +

    Manual Render Example

    +

    If you can see this, registerRenderer works.

    +
    + ); + + ReactDOM.render(reactElement, document.getElementById(domNodeId)); +}; diff --git a/spec/dummy/client/app/startup/clientRegistration.jsx b/spec/dummy/client/app/startup/clientRegistration.jsx index 47e40e16c..02e027e6f 100644 --- a/spec/dummy/client/app/startup/clientRegistration.jsx +++ b/spec/dummy/client/app/startup/clientRegistration.jsx @@ -10,6 +10,7 @@ import ReduxSharedStoreApp from './ClientReduxSharedStoreApp'; import RouterApp from './ClientRouterApp'; import PureComponent from '../components/PureComponent'; import CssModulesImagesFontsExample from '../components/CssModulesImagesFontsExample'; +import ManualRenderApp from './ManualRenderAppRenderer' import SharedReduxStore from '../stores/SharedReduxStore'; @@ -29,6 +30,10 @@ ReactOnRails.register({ CssModulesImagesFontsExample, }); +ReactOnRails.registerRenderer({ + ManualRenderApp, +}); + ReactOnRails.registerStore({ SharedReduxStore, }); diff --git a/spec/dummy/config/routes.rb b/spec/dummy/config/routes.rb index 8589d4313..e53611669 100644 --- a/spec/dummy/config/routes.rb +++ b/spec/dummy/config/routes.rb @@ -20,6 +20,7 @@ get "server_side_redux_app" => "pages#server_side_redux_app" get "server_side_hello_world_with_options" => "pages#server_side_hello_world_with_options" get "server_side_redux_app_cached" => "pages#server_side_redux_app_cached" + get "client_side_manual_render" => "pages#client_side_manual_render" get "render_js" => "pages#render_js" get "react_router(/*all)" => "react_router#index", as: :react_router get "pure_component" => "pages#pure_component" diff --git a/spec/dummy/spec/features/integration_spec.rb b/spec/dummy/spec/features/integration_spec.rb index 1465b180d..da16a370f 100644 --- a/spec/dummy/spec/features/integration_spec.rb +++ b/spec/dummy/spec/features/integration_spec.rb @@ -143,6 +143,16 @@ def change_text_expect_dom_selector(dom_selector) end end +feature "Manual Rendering", :js do + subject { page } + background { visit "/client_side_manual_render" } + scenario "renderer function is called successfully" do + header_text = page.find(:css, "h1").text + expect(header_text).to eq("Manual Render Example") + expect(subject).to have_text "registerRenderer works" + end +end + shared_examples "React Component Shared Store" do |url| subject { page } background { visit url }