RubyGems - hyper-react - Versions diffs - 0.99.6 → 1.0.0.lap21 - Mend

hyper-react 0.99.6 → 1.0.0.lap21

Files changed (187) hide show

checksums.yaml +5 -5
data/.codeclimate.yml +27 -0
data/.gitignore +30 -37
data/.rubocop.yml +1159 -0
data/.travis.yml +32 -0
data/Appraisals +31 -0
data/CHANGELOG.md +143 -0
data/DOCS.md +1515 -0
data/Gemfile +2 -5
data/LICENSE +19 -0
data/README.md +5 -33
data/Rakefile +25 -6
data/UPGRADING.md +24 -0
data/component-name-lookup.md +145 -0
data/dciy.toml +3 -0
data/dciy_prepare.sh +8 -0
data/dciy_run.sh +10 -0
data/hyper-react.gemspec +24 -18
data/lib/generators/reactive_ruby/test_app/templates/assets/javascripts/components.rb +3 -0
data/lib/generators/reactive_ruby/test_app/templates/assets/javascripts/server_rendering.js +5 -0
data/lib/generators/reactive_ruby/test_app/templates/assets/javascripts/test_application.rb +2 -0
data/lib/generators/reactive_ruby/test_app/templates/boot.rb.erb +6 -0
data/lib/generators/reactive_ruby/test_app/templates/script/rails +5 -0
data/lib/generators/reactive_ruby/test_app/templates/test_application.rb.erb +13 -0
data/lib/generators/reactive_ruby/test_app/templates/views/components/hello_world.rb +11 -0
data/lib/generators/reactive_ruby/test_app/templates/views/components/todo.rb +14 -0
data/lib/generators/reactive_ruby/test_app/templates/views/layouts/test_layout.html.erb +0 -0
data/lib/generators/reactive_ruby/test_app/test_app_generator.rb +117 -0
data/lib/hyper-react.rb +66 -4
data/lib/rails-helpers/top_level_rails_component.rb +75 -0
data/lib/react/api.rb +203 -0
data/lib/react/callbacks.rb +41 -0
data/lib/react/children.rb +30 -0
data/lib/react/component.rb +177 -0
data/lib/react/component/api.rb +69 -0
data/lib/react/component/base.rb +13 -0
data/lib/react/component/class_methods.rb +181 -0
data/lib/react/component/dsl_instance_methods.rb +23 -0
data/lib/react/component/params.rb +6 -0
data/lib/react/component/props_wrapper.rb +78 -0
data/lib/react/component/should_component_update.rb +99 -0
data/lib/react/component/tags.rb +108 -0
data/lib/react/config.rb +5 -0
data/lib/react/config/client.rb.erb +19 -0
data/lib/react/config/server.rb +23 -0
data/lib/react/element.rb +150 -0
data/lib/react/event.rb +76 -0
data/lib/react/ext/hash.rb +9 -0
data/lib/react/ext/opal-jquery/element.rb +26 -0
data/lib/react/ext/string.rb +8 -0
data/lib/react/hash.rb +13 -0
data/lib/react/native_library.rb +87 -0
data/lib/react/object.rb +15 -0
data/lib/react/react-source-browser.rb +3 -0
data/lib/react/react-source-server.rb +3 -0
data/lib/react/react-source.rb +16 -0
data/lib/react/ref_callback.rb +31 -0
data/lib/react/rendering_context.rb +146 -0
data/lib/react/server.rb +19 -0
data/lib/react/state_wrapper.rb +23 -0
data/lib/react/test.rb +16 -0
data/lib/react/test/dsl.rb +17 -0
data/lib/react/test/matchers/render_html_matcher.rb +56 -0
data/lib/react/test/rspec.rb +15 -0
data/lib/react/test/session.rb +37 -0
data/lib/react/test/utils.rb +71 -0
data/lib/react/top_level.rb +110 -0
data/lib/react/top_level_render.rb +28 -0
data/lib/react/validator.rb +136 -0
data/lib/reactive-ruby/component_loader.rb +43 -0
data/lib/reactive-ruby/isomorphic_helpers.rb +235 -0
data/lib/reactive-ruby/rails.rb +8 -0
data/lib/reactive-ruby/rails/component_mount.rb +48 -0
data/lib/reactive-ruby/rails/controller_helper.rb +14 -0
data/lib/reactive-ruby/rails/railtie.rb +20 -0
data/lib/reactive-ruby/serializers.rb +15 -0
data/lib/reactive-ruby/server_rendering/contextual_renderer.rb +41 -0
data/lib/reactive-ruby/server_rendering/hyper_asset_container.rb +46 -0
data/lib/reactive-ruby/version.rb +3 -0
data/lib/reactrb/auto-import.rb +27 -0
data/logo1.png +0 -0
data/logo2.png +0 -0
data/logo3.png +0 -0
data/path_release_steps.md +9 -0
data/spec/controller_helper_spec.rb +35 -0
data/spec/index.html.erb +11 -0
data/spec/react/callbacks_spec.rb +142 -0
data/spec/react/children_spec.rb +132 -0
data/spec/react/component/base_spec.rb +36 -0
data/spec/react/component_spec.rb +1073 -0
data/spec/react/dsl_spec.rb +323 -0
data/spec/react/element_spec.rb +132 -0
data/spec/react/event_spec.rb +39 -0
data/spec/react/native_library_spec.rb +387 -0
data/spec/react/observable_spec.rb +31 -0
data/spec/react/opal_jquery_extensions_spec.rb +68 -0
data/spec/react/param_declaration_spec.rb +253 -0
data/spec/react/react_spec.rb +278 -0
data/spec/react/refs_callback_spec.rb +65 -0
data/spec/react/server_spec.rb +25 -0
data/spec/react/state_spec.rb +52 -0
data/spec/react/test/dsl_spec.rb +43 -0
data/spec/react/test/matchers/render_html_matcher_spec.rb +83 -0
data/spec/react/test/rspec_spec.rb +62 -0
data/spec/react/test/session_spec.rb +88 -0
data/spec/react/test/utils_spec.rb +28 -0
data/spec/react/top_level_component_spec.rb +103 -0
data/spec/react/tutorial/tutorial_spec.rb +42 -0
data/spec/react/validator_spec.rb +134 -0
data/spec/reactive-ruby/component_loader_spec.rb +74 -0
data/spec/reactive-ruby/isomorphic_helpers_spec.rb +157 -0
data/spec/reactive-ruby/rails/asset_pipeline_spec.rb +17 -0
data/spec/reactive-ruby/rails/component_mount_spec.rb +64 -0
data/spec/reactive-ruby/server_rendering/contextual_renderer_spec.rb +39 -0
data/spec/spec_helper.rb +55 -0
data/spec/test_app/README.md +24 -0
data/spec/test_app/Rakefile +6 -0
data/spec/test_app/app/assets/config/manifest.js +3 -0
data/spec/test_app/app/assets/images/.keep +0 -0
data/spec/test_app/app/assets/javascripts/application.rb +7 -0
data/spec/test_app/app/assets/javascripts/cable.js +13 -0
data/spec/test_app/app/assets/javascripts/channels/.keep +0 -0
data/spec/test_app/app/assets/javascripts/server_rendering.js +5 -0
data/spec/test_app/app/assets/stylesheets/application.css +15 -0
data/spec/test_app/app/channels/application_cable/channel.rb +4 -0
data/spec/test_app/app/channels/application_cable/connection.rb +4 -0
data/spec/test_app/app/controllers/application_controller.rb +3 -0
data/spec/test_app/app/controllers/concerns/.keep +0 -0
data/spec/test_app/app/helpers/application_helper.rb +2 -0
data/spec/test_app/app/jobs/application_job.rb +2 -0
data/spec/test_app/app/mailers/application_mailer.rb +4 -0
data/spec/test_app/app/models/application_record.rb +3 -0
data/spec/test_app/app/models/concerns/.keep +0 -0
data/spec/test_app/app/views/components.rb +11 -0
data/spec/test_app/app/views/components/hello_world.rb +11 -0
data/spec/test_app/app/views/components/todo.rb +14 -0
data/spec/test_app/app/views/layouts/application.html.erb +14 -0
data/spec/test_app/app/views/layouts/explicit_layout.html.erb +0 -0
data/spec/test_app/app/views/layouts/mailer.html.erb +13 -0
data/spec/test_app/app/views/layouts/mailer.text.erb +1 -0
data/spec/test_app/app/views/layouts/test_layout.html.erb +0 -0
data/spec/test_app/bin/bundle +3 -0
data/spec/test_app/bin/rails +4 -0
data/spec/test_app/bin/rake +4 -0
data/spec/test_app/bin/setup +38 -0
data/spec/test_app/bin/update +29 -0
data/spec/test_app/bin/yarn +11 -0
data/spec/test_app/config.ru +5 -0
data/spec/test_app/config/application.rb +45 -0
data/spec/test_app/config/boot.rb +6 -0
data/spec/test_app/config/cable.yml +10 -0
data/spec/test_app/config/database.yml +25 -0
data/spec/test_app/config/environment.rb +5 -0
data/spec/test_app/config/environments/development.rb +54 -0
data/spec/test_app/config/environments/production.rb +91 -0
data/spec/test_app/config/environments/test.rb +42 -0
data/spec/test_app/config/initializers/application_controller_renderer.rb +8 -0
data/spec/test_app/config/initializers/assets.rb +14 -0
data/spec/test_app/config/initializers/backtrace_silencers.rb +7 -0
data/spec/test_app/config/initializers/cookies_serializer.rb +5 -0
data/spec/test_app/config/initializers/filter_parameter_logging.rb +4 -0
data/spec/test_app/config/initializers/inflections.rb +16 -0
data/spec/test_app/config/initializers/mime_types.rb +4 -0
data/spec/test_app/config/initializers/wrap_parameters.rb +14 -0
data/spec/test_app/config/locales/en.yml +33 -0
data/spec/test_app/config/puma.rb +56 -0
data/spec/test_app/config/routes.rb +3 -0
data/spec/test_app/config/secrets.yml +32 -0
data/spec/test_app/config/spring.rb +6 -0
data/spec/test_app/db/development.sqlite3 +0 -0
data/spec/test_app/db/schema.rb +15 -0
data/spec/test_app/db/seeds.rb +7 -0
data/spec/test_app/db/test.sqlite3 +0 -0
data/spec/test_app/lib/assets/.keep +0 -0
data/spec/test_app/log/.keep +0 -0
data/spec/test_app/package.json +5 -0
data/spec/test_app/public/404.html +67 -0
data/spec/test_app/public/422.html +67 -0
data/spec/test_app/public/500.html +66 -0
data/spec/test_app/public/apple-touch-icon-precomposed.png +0 -0
data/spec/test_app/public/apple-touch-icon.png +0 -0
data/spec/test_app/public/favicon.ico +0 -0
data/spec/vendor/es5-shim.min.js +7 -0
data/spec/vendor/jquery-2.2.4.min.js +4 -0
metadata +401 -61
data/CODE_OF_CONDUCT.md +0 -49
data/lib/react/version.rb +0 -3

@@ -0,0 +1,3 @@
+module React
+  VERSION = '1.0.0.lap21'
+end

data/lib/reactrb/auto-import.rb ADDED

@@ -0,0 +1,27 @@
+# rubocop:disable Style/FileName
+# require 'reactrb/auto-import' to automatically
+# import JS libraries and components when they are detected
+if RUBY_ENGINE == 'opal'
+  # modifies const and method_missing so that they will attempt
+  # to auto import native libraries and components using React::NativeLibrary
+  class Object
+    class << self
+      alias _reactrb_original_const_missing const_missing
+      alias _reactrb_original_method_missing method_missing
+      def const_missing(const_name)
+        # Opal uses const_missing to initially define things,
+        # so we always call the original, and respond to the exception
+        _reactrb_original_const_missing(const_name)
+      rescue StandardError => e
+        React::NativeLibrary.import_const_from_native(Object, const_name, true) || raise(e)
+      end
+      def method_missing(method, *args, &block)
+        component_class = React::NativeLibrary.import_const_from_native(self, method, false)
+        _reactrb_original_method_missing(method, *args, &block) unless component_class
+        React::RenderingContext.render(component_class, *args, &block)
+      end
+    end
+  end
+end

data/logo1.png ADDED

Binary file

data/logo2.png ADDED

Binary file

data/logo3.png ADDED

Binary file

data/path_release_steps.md ADDED

@@ -0,0 +1,9 @@
+For example assuming you are releasing fix to 0.8.18
+1. Checkout 0-8-stable
+2. Update tests, fix the bug and commit the changes.
+3. Build & Release to RubyGems (Remember the version in version.rb should already be 0.8.19)
+4. Create a tag 'v0.8.19' pointing to that commit.
+5. Bump the version in 0-8-stable to 0.8.20 so it will be ready for the next patch level release.
+6. Commit the version bump, and do a `git push --tags` so the new tag goes up

data/spec/controller_helper_spec.rb ADDED

@@ -0,0 +1,35 @@
+require 'spec_helper'
+require 'rails-controller-testing'
+Rails::Controller::Testing.install
+class TestController < ActionController::Base; end
+RSpec.describe TestController, type: :controller do
+  render_views
+  describe '#render_component' do
+    controller do
+      layout "test_layout"
+      def index
+        render_component
+      end
+      def new
+        render_component "Index", {}, layout: :explicit_layout
+      end
+    end
+    it 'renders with the default layout' do
+      get :index
+      expect(response).to render_template(layout: :test_layout)
+    end
+    it "renders with a specified layout" do
+      get :new
+      expect(response).to render_template(layout: :explicit_layout)
+    end
+  end
+end

data/spec/index.html.erb ADDED

@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="UTF-8" />
+</head>
+<body>
+  <%= javascript_include_tag 'vendor/es5-shim.min' %>
+  <%= javascript_include_tag 'vendor/jquery-2.2.4.min' %>
+  <%= javascript_include_tag @server.main %>
+</body>
+</html>

data/spec/react/callbacks_spec.rb ADDED

@@ -0,0 +1,142 @@
+require 'spec_helper'
+describe 'React::Callbacks', js: true do
+  it 'defines callback' do
+    on_client do
+      class Foo
+        include React::Callbacks
+        define_callback :before_dinner
+        before_dinner :wash_hands
+        def wash_hands;end
+      end
+    end
+    expect_evaluate_ruby do
+      instance = Foo.new
+      [ instance.respond_to?(:wash_hands), instance.run_callback(:before_dinner) ]
+    end.to eq([true, ["wash_hands"]])
+  end
+  it 'defines multiple callbacks' do
+    on_client do
+      class Foo
+        include React::Callbacks
+        define_callback :before_dinner
+        before_dinner :wash_hands, :turn_off_laptop
+        def wash_hands;end
+        def turn_off_laptop;end
+      end
+    end
+    expect_evaluate_ruby do
+      instance = Foo.new
+      [ instance.respond_to?(:wash_hands),
+        instance.respond_to?(:turn_off_laptop),
+        instance.run_callback(:before_dinner) ]
+    end.to eq([true, true, ["wash_hands", "turn_off_laptop" ]])
+  end
+  context 'using Hyperloop::Context.reset!' do
+    #after(:all) do
+    #  Hyperloop::Context.instance_variable_set(:@context, nil)
+    #end
+    it 'clears callbacks on Hyperloop::Context.reset!' do
+      on_client do
+        Hyperloop::Context.reset!
+        class Foo
+          include React::Callbacks
+          define_callback :before_dinner
+          before_dinner :wash_hands, :turn_off_laptop
+          def wash_hands;end
+          def turn_off_laptop;end
+        end
+      end
+      expect_evaluate_ruby do
+        instance = Foo.new
+        Hyperloop::Context.reset!
+        Foo.class_eval do
+          before_dinner :wash_hands
+        end
+        instance.run_callback(:before_dinner)
+      end.to eq(["wash_hands"])
+    end
+  end
+  it 'defines block callback' do
+    on_client do
+      class Foo
+        include React::Callbacks
+        attr_accessor :a
+        attr_accessor :b
+        define_callback :before_dinner
+        before_dinner do
+          self.a = 10
+        end
+        before_dinner do
+          self.b = 20
+        end
+      end
+    end
+    expect_evaluate_ruby do
+      foo = Foo.new
+      foo.run_callback(:before_dinner)
+      [ foo.a, foo.b ]
+    end.to eq([10, 20])
+  end
+  it 'defines multiple callback group' do
+    on_client do
+      class Foo
+        include React::Callbacks
+        define_callback :before_dinner
+        define_callback :after_dinner
+        attr_accessor :a
+        before_dinner do
+          self.a = 10
+        end
+      end
+    end
+    expect_evaluate_ruby do
+      foo = Foo.new
+      foo.run_callback(:before_dinner)
+      foo.run_callback(:after_dinner)
+      foo.a
+    end.to eq(10)
+  end
+  it 'receives args as callback' do
+    on_client do
+      class Foo
+        include React::Callbacks
+        define_callback :before_dinner
+        define_callback :after_dinner
+        attr_accessor :lorem
+        before_dinner do |a, b|
+          self.lorem  = "#{a}-#{b}"
+        end
+        after_dinner :eat_ice_cream
+        def eat_ice_cream(a,b,c);  end
+      end
+    end
+    expect_evaluate_ruby do
+      foo = Foo.new
+      foo.run_callback(:before_dinner, 1, 2)
+      res1 = foo.run_callback(:after_dinner, 4, 5, 6)
+      [res1, foo.lorem]
+    end.to eq([["eat_ice_cream"], '1-2'])
+  end
+end

data/spec/react/children_spec.rb ADDED

@@ -0,0 +1,132 @@
+require 'spec_helper'
+describe 'React::Children', js: true do
+  describe 'with multiple child elements' do
+    before :each do
+      on_client do
+        class InitTest
+          def self.get_children
+            component = Class.new do
+              include React::Component
+              def render
+                div { 'lorem' }
+              end
+            end
+            childs = [ React.create_element('a'), React.create_element('li') ]
+            element = React.create_element(component) { childs }
+            el_children = element.to_n.JS[:props].JS[:children]
+            children = React::Children.new(el_children)
+            dom_el = JS.call(:eval, "document.body.appendChild(document.createElement('div'))")
+            React.render(element, dom_el)
+            children
+          end
+        end
+      end
+    end
+    it 'is enumerable' do
+      expect_evaluate_ruby do
+        InitTest.get_children.map { |elem| elem.element_type }
+      end.to eq(['a', 'li'])
+    end
+    it 'returns an Enumerator when not providing a block' do
+      expect_evaluate_ruby do
+        nodes = InitTest.get_children.each
+        [nodes.class.name, nodes.size]
+      end.to eq(["Enumerator", 2])
+    end
+    describe '#each' do
+      it 'returns an array of elements' do
+        expect_evaluate_ruby do
+          nodes = InitTest.get_children.each { |elem| elem.element_type }
+          [nodes.class.name, nodes.map(&:class)]
+        end.to eq(["Array", ["React::Element", "React::Element"]])
+      end
+    end
+    describe '#length' do
+      it 'returns the number of child elements' do
+        expect_evaluate_ruby do
+          InitTest.get_children.length
+        end.to eq(2)
+      end
+    end
+  end
+  describe 'with single child element' do
+    before :each do
+      on_client do
+        class InitTest
+          def self.get_children
+            component = Class.new do
+              include React::Component
+              def render
+                div { 'lorem' }
+              end
+            end
+            childs = [ React.create_element('a') ]
+            element = React.create_element(component) { childs }
+            el_children = element.to_n.JS[:props].JS[:children]
+            children = React::Children.new(el_children)
+            dom_el = JS.call(:eval, "document.body.appendChild(document.createElement('div'))")
+            React.render(element, dom_el)
+            children
+          end
+        end
+      end
+    end
+    it 'is enumerable containing single element' do
+      expect_evaluate_ruby do
+        InitTest.get_children.map { |elem| elem.element_type }
+      end.to eq(["a"])
+    end
+    describe '#length' do
+      it 'returns the number of child elements' do
+        expect_evaluate_ruby do
+          InitTest.get_children.length
+        end.to eq(1)
+      end
+    end
+  end
+  describe 'with no child element' do
+    before :each do
+      on_client do
+        class InitTest
+          def self.get_children
+            component = Class.new do
+              include React::Component
+              def render
+                div { 'lorem' }
+              end
+            end
+            element = React.create_element(component)
+            el_children = element.to_n.JS[:props].JS[:children]
+            children = React::Children.new(el_children)
+            dom_el = JS.call(:eval, "document.body.appendChild(document.createElement('div'))")
+            React.render(element, dom_el)
+            children
+          end
+        end
+      end
+    end
+    it 'is enumerable containing no elements' do
+      expect_evaluate_ruby do
+        InitTest.get_children.map { |elem| elem.element_type }
+      end.to eq([])
+    end
+    describe '#length' do
+      it 'returns the number of child elements' do
+        expect_evaluate_ruby do
+          InitTest.get_children.length
+        end.to eq(0)
+      end
+    end
+  end
+end

data/spec/react/component/base_spec.rb ADDED

@@ -0,0 +1,36 @@
+require 'spec_helper'
+describe 'React::Component::Base', js: true do
+  before :each do
+    on_client do
+      class Foo < React::Component::Base
+        before_mount do
+          @instance_data = ["working"]
+        end
+        def render
+          @instance_data.first
+        end
+      end
+    end
+  end
+  it 'can create a simple component class' do
+    mount 'Foo'
+    expect(page.body[-50..-19]).to match(/<span>working<\/span>/)
+  end
+  it 'can create a simple component class that can be inherited to create another component class' do
+    mount 'Bar' do
+      class Bar < Foo
+        before_mount do
+          @instance_data << "well"
+        end
+        def render
+          @instance_data.join(" ")
+        end
+      end
+    end
+    expect(page.body[-50..-19]).to match(/<span>working well<\/span>/)
+  end
+end

data/spec/react/component_spec.rb ADDED

@@ -0,0 +1,1073 @@
+require 'spec_helper'
+describe 'React::Component', js: true do
+  it 'defines component spec methods' do
+    on_client do
+      class Foo
+        include React::Component
+        def initialize(native = nil)
+        end
+        def render
+          React.create_element('div')
+        end
+      end
+    end
+    # class methods
+    expect_evaluate_ruby("Foo.respond_to?(:initial_state)").to be_truthy
+    expect_evaluate_ruby("Foo.respond_to?(:default_props)").to be_truthy
+    expect_evaluate_ruby("Foo.respond_to?(:prop_types)").to be_truthy
+    # instance_methods
+    expect_evaluate_ruby("Foo.new.respond_to?(:component_will_mount)").to be_truthy
+    expect_evaluate_ruby("Foo.new.respond_to?(:component_did_mount)").to be_truthy
+    expect_evaluate_ruby("Foo.new.respond_to?(:component_will_receive_props)").to be_truthy
+    expect_evaluate_ruby("Foo.new.respond_to?(:should_component_update?)").to be_truthy
+    expect_evaluate_ruby("Foo.new.respond_to?(:component_will_update)").to be_truthy
+    expect_evaluate_ruby("Foo.new.respond_to?(:component_did_update)").to be_truthy
+    expect_evaluate_ruby("Foo.new.respond_to?(:component_will_unmount)").to be_truthy
+  end
+  describe 'Life Cycle' do
+    before(:each) do
+      on_client do
+        class Foo
+          include React::Component
+          def self.call_history
+            @call_history ||= []
+          end
+          def render
+            React.create_element('div') { 'lorem' }
+          end
+        end
+      end
+    end
+    it 'invokes `before_mount` registered methods when `componentWillMount()`' do
+      mount 'Foo' do
+        Foo.class_eval do
+          before_mount :bar, :bar2
+          def bar; self.class.call_history << "bar"; end
+          def bar2; self.class.call_history << "bar2"; end
+        end
+      end
+      expect_evaluate_ruby("Foo.call_history").to eq(["bar", "bar2"])
+    end
+    it 'invokes `after_mount` registered methods when `componentDidMount()`' do
+      mount 'Foo' do
+        Foo.class_eval do
+          after_mount :bar3, :bar4
+          def bar3; self.class.call_history << "bar3"; end
+          def bar4; self.class.call_history << "bar4"; end
+        end
+      end
+      expect_evaluate_ruby("Foo.call_history").to eq(["bar3", "bar4"])
+    end
+    it 'allows multiple class declared life cycle hooker' do
+      evaluate_ruby do
+        Foo.class_eval do
+          before_mount :bar
+          def bar; self.class.call_history << "bar"; end
+        end
+        class FooBar
+          include React::Component
+          after_mount :bar2
+          def self.call_history
+            @call_history ||= []
+          end
+          def bar2; self.class.call_history << "bar2"; end
+          def render
+            React.create_element('div') { 'lorem' }
+          end
+        end
+        instance = React::Test::Utils.render_component_into_document(Foo)
+        instance = React::Test::Utils.render_component_into_document(FooBar)
+      end
+      expect_evaluate_ruby("Foo.call_history").to eq(["bar"])
+      expect_evaluate_ruby("FooBar.call_history").to eq(["bar2"])
+    end
+    it 'allows block for life cycle callback' do
+      expect_evaluate_ruby do
+        Foo.class_eval do
+          before_mount do
+            set_state({ foo: "bar" })
+          end
+        end
+        instance = React::Test::Utils.render_component_into_document(Foo)
+        instance.state[:foo]
+      end.to eq('bar')
+    end
+    it 'invokes :after_error when componentDidCatch' do
+      client_option raise_on_js_errors: :off
+      mount 'Foo' do
+        class ErrorFoo
+          include Hyperloop::Component::Mixin
+          param :just
+          def render
+            raise 'ErrorFoo Error'
+          end
+        end
+        Foo.class_eval do
+          def self.get_error
+            @@error
+          end
+          def self.get_info
+            @@info
+          end
+          def render
+            DIV { ErrorFoo(just: :a_param) }
+          end
+          after_error do |error, info|
+            @@error = error.message
+            @@info = info[:componentStack]
+          end
+        end
+      end
+      expect_evaluate_ruby('Foo.get_error').to eq('ErrorFoo Error')
+      expect_evaluate_ruby('Foo.get_info').to eq("\n    in ErrorFoo\n    in div\n    in Foo\n    in React::TopLevelRailsComponent")
+    end
+  end
+  describe 'New style setter & getter' do
+    before(:each) do
+      on_client do
+        class Foo
+          include React::Component
+          def render
+            div { state.foo }
+          end
+        end
+      end
+    end
+    it 'implicitly will create a state variable when first written' do
+      mount 'Foo' do
+        Foo.class_eval do
+          before_mount do
+            state.foo! 'bar'
+          end
+        end
+      end
+      # this was a 'have_xpath' check, but these are totally unreliable in capybara with webdrivers
+      # leading to false positives and negatives
+      # this simple check for string inclusion makes this checks reliable
+      expect(page.body[-35..-19]).to include("<div>bar</div>")
+    end
+    it 'allows kernal method names like "format" to be used as state variable names' do
+      mount 'Foo' do
+        Foo.class_eval do
+          before_mount do
+            state.format! 'yes'
+            state.foo! state.format
+          end
+        end
+      end
+      expect(page.body[-35..-19]).to include("<div>yes</div>")
+    end
+    it 'returns an observer with the bang method and no arguments' do
+      mount 'Foo' do
+        Foo.class_eval do
+          before_mount do
+            state.foo!(state.baz!.class.name)
+          end
+        end
+      end
+      expect(page.body[-50..-19]).to include("<div>React::Observable</div>")
+    end
+    it 'returns the current value of a state when written' do
+      mount 'Foo' do
+        Foo.class_eval do
+          before_mount do
+            state.baz! 'bar'
+            state.foo!(state.baz!('pow'))
+          end
+        end
+      end
+      expect(page.body[-35..-19]).to include("<div>bar</div>")
+    end
+    it 'can access an explicitly defined state`' do
+      mount 'Foo' do
+        Foo.class_eval do
+          define_state foo: :bar
+        end
+      end
+      expect(page.body[-35..-19]).to include("<div>bar</div>")
+    end
+  end
+  describe 'State setter & getter' do
+    before(:each) do
+      on_client do
+        class Foo
+          include React::Component
+          def render
+            React.create_element('div') { 'lorem' }
+          end
+        end
+      end
+    end
+    it 'defines setter using `define_state`' do
+      expect_evaluate_ruby do
+        Foo.class_eval do
+          define_state :foo
+          before_mount :set_up
+          def set_up
+            mutate.foo 'bar'
+          end
+        end
+        instance = React::Test::Utils.render_component_into_document(Foo)
+        instance.state.foo
+      end.to eq('bar')
+    end
+    it 'defines init state by passing a block to `define_state`' do
+      expect_evaluate_ruby do
+        element_to_render = React.create_element(Foo)
+        Foo.class_eval do
+          define_state(:foo) { 10 }
+        end
+        dom_el = JS.call(:eval, "document.body.appendChild(document.createElement('div'))")
+        instance = React.render(element_to_render, dom_el)
+        instance.state.foo
+      end.to eq(10)
+    end
+    it 'defines getter using `define_state`' do
+      expect_evaluate_ruby do
+        Foo.class_eval do
+          define_state(:foo) { 10 }
+          before_mount :bump
+          def bump
+            mutate.foo(state.foo + 20)
+          end
+        end
+        instance = React::Test::Utils.render_component_into_document(Foo)
+        instance.state.foo
+      end.to eq(30)
+    end
+    it 'defines multiple state accessors by passing array to `define_state`' do
+      expect_evaluate_ruby do
+        Foo.class_eval do
+          define_state :foo, :foo2
+          before_mount :set_up
+          def set_up
+            mutate.foo 10
+            mutate.foo2 20
+          end
+        end
+        instance = React::Test::Utils.render_component_into_document(Foo)
+        [ instance.state.foo, instance.state.foo2 ]
+      end.to eq([10, 20])
+    end
+    it 'invokes `define_state` multiple times to define states' do
+      expect_evaluate_ruby do
+        Foo.class_eval do
+          define_state(:foo) { 30 }
+          define_state(:foo2) { 40 }
+        end
+        instance = React::Test::Utils.render_component_into_document(Foo)
+        [ instance.state.foo, instance.state.foo2 ]
+      end.to eq([30, 40])
+    end
+    it 'can initialize multiple state variables with a block' do
+      expect_evaluate_ruby do
+        Foo.class_eval do
+          define_state(:foo, :foo2) { 30 }
+        end
+        instance = React::Test::Utils.render_component_into_document(Foo)
+        [ instance.state.foo, instance.state.foo2 ]
+      end.to eq([30, 30])
+    end
+    it 'can mix multiple state variables with initializers and a block' do
+      expect_evaluate_ruby do
+        Foo.class_eval do
+          define_state(:x, :y, foo: 1, bar: 2) {3}
+        end
+        instance = React::Test::Utils.render_component_into_document(Foo)
+        [ instance.state.x, instance.state.y, instance.state.foo, instance.state.bar ]
+      end.to eq([3, 3, 1, 2])
+    end
+    it 'gets state in render method' do
+      mount 'Foo' do
+        Foo.class_eval do
+          define_state(:foo) { 10 }
+          def render
+            React.create_element('div') { state.foo }
+          end
+        end
+      end
+      expect(page.body[-35..-19]).to include("<div>10</div>")
+    end
+    it 'supports original `setState` as `set_state` method' do
+      expect_evaluate_ruby do
+        Foo.class_eval do
+          before_mount do
+            self.set_state(foo: 'bar')
+          end
+        end
+        instance = React::Test::Utils.render_component_into_document(Foo)
+        instance.state[:foo]
+      end.to eq('bar')
+    end
+    it '`set_state!` method works and doesnt replace other state' do
+      # this test changed because the function replaceState is gone in react
+      expect_evaluate_ruby do
+        Foo.class_eval do
+          before_mount do
+            set_state(foo: 'bar')
+            set_state!(bar: 'lorem')
+          end
+        end
+        instance = React::Test::Utils.render_component_into_document(Foo)
+        [ instance.state[:foo], instance.state[:bar] ]
+      end.to eq(['bar', 'lorem'])
+    end
+    it 'supports original `state` method' do
+      mount 'Foo' do
+        Foo.class_eval do
+          before_mount do
+            self.set_state(foo: 'bar')
+          end
+          def render
+            div { self.state[:foo] }
+          end
+        end
+      end
+      expect(page.body[-35..-19]).to include("<div>bar</div>")
+    end
+    it 'transforms state getter to Ruby object' do
+      mount 'Foo' do
+        Foo.class_eval do
+          define_state :foo
+          before_mount do
+            mutate.foo [{a: "Hello"}]
+          end
+          def render
+            div { state.foo[0][:a] }
+          end
+        end
+      end
+      expect(page.body[-40..-19]).to include("<div>Hello</div>")
+    end
+    it 'sets initial state with default value in constructor in @native object state property' do
+      mount 'StateFoo' do
+        class StateFoo
+          include Hyperloop::Component::Mixin
+          state bar: 25
+          def initialize(native)
+            super(native)
+            @@initial_state = @native.JS[:state].JS[:bar]
+          end
+          def self.initial_state
+            @@initial_state ||= 0
+          end
+          def render
+            React.create_element('div') { 'lorem' }
+          end
+        end
+      end
+      expect_evaluate_ruby('StateFoo.initial_state').to eq(25)
+    end
+    it 'doesnt cause extra render when setting initial state' do
+      mount 'StateFoo' do
+        class StateFoo
+          include Hyperloop::Component::Mixin
+          state bar: 25
+          def self.render_count
+            @@render_count ||= 0
+          end
+          def self.incr_render_count
+            @@render_count ||= 0
+            @@render_count += 1
+          end
+          def render
+            StateFoo.incr_render_count
+            React.create_element('div') { 'lorem' }
+          end
+        end
+      end
+      expect_evaluate_ruby('StateFoo.render_count').to eq(1)
+    end
+    it 'doesnt cause extra render when setting state in :before_mount' do
+      mount 'StateFoo' do
+        class StateFoo
+          include Hyperloop::Component::Mixin
+          def self.render_count
+            @@render_count ||= 0
+          end
+          def self.incr_render_count
+            @@render_count ||= 0
+            @@render_count += 1
+          end
+          before_mount do
+            mutate.bar 50
+          end
+          def render
+            StateFoo.incr_render_count
+            React.create_element('div') { 'lorem' }
+          end
+        end
+      end
+      expect_evaluate_ruby('StateFoo.render_count').to eq(1)
+    end
+    it 'doesnt cause extra render when setting state in :before_receive_props' do
+      mount 'Foo' do
+        class StateFoo
+          include Hyperloop::Component::Mixin
+          param :drinks
+          def self.render_count
+            @@render_count ||= 0
+          end
+          def self.incr_render_count
+            @@render_count ||= 0
+            @@render_count += 1
+          end
+          before_receive_props do |new_params|
+            mutate.bar 50
+          end
+          def render
+            StateFoo.incr_render_count
+            React.create_element('div') { 'lorem' }
+          end
+        end
+        Foo.class_eval do
+          define_state :foo
+          before_mount do
+            state.foo 25
+          end
+          def render
+            div { StateFoo(drinks: state.foo) }
+          end
+          after_mount do
+            mutate.foo 50
+          end
+        end
+      end
+      expect_evaluate_ruby('StateFoo.render_count').to eq(2)
+    end
+  end
+  describe 'Props' do
+    describe 'this.props could be accessed through `params` method' do
+      before do
+        on_client do
+          class Foo
+            include React::Component
+          end
+        end
+      end
+      it 'reads from parent passed properties through `params`' do
+        mount 'Foo', prop: 'foobar' do
+          Foo.class_eval do
+            param :prop
+            def render
+              React.create_element('div') { params[:prop] }
+            end
+          end
+        end
+        expect(page.body[-40..-19]).to include("<div>foobar</div>")
+      end
+      it 'accesses nested params as orignal Ruby object' do
+        mount 'Foo', prop: [{foo: 10}] do
+          Foo.class_eval do
+            param :prop
+            def render
+              React.create_element('div') { params[:prop][0][:foo] }
+            end
+          end
+        end
+        expect(page.body[-35..-19]).to include("<div>10</div>")
+      end
+    end
+    describe 'Props Updating', v13_only: true do
+      before do
+        on_client do
+          class Foo
+            include React::Component
+          end
+        end
+      end
+      it '`setProps` as method `set_props` is no longer supported' do
+        expect_evaluate_ruby do
+          Foo.class_eval do
+            param :foo
+            def render
+              React.create_element('div') { params[:foo] }
+            end
+          end
+          instance = React::Test::Utils.render_component_into_document(Foo, foo: 10)
+          begin
+            instance.set_props(foo: 20)
+          rescue
+            'got risen'
+          end
+        end.to eq('got risen')
+      end
+      it 'original `replaceProps` as method `set_props!` is no longer supported' do
+        expect_evaluate_ruby do
+          Foo.class_eval do
+            param :foo
+            def render
+              React.create_element('div') { params[:foo] ? 'exist' : 'null' }
+            end
+          end
+          instance = React::Test::Utils.render_component_into_document(Foo, foo: 10)
+          begin
+            instance.set_props!(bar: 20)
+          rescue
+            'got risen'
+          end
+        end.to eq('got risen')
+      end
+    end
+    describe 'Prop validation' do
+      before do
+        on_client do
+          class Foo
+            include Hyperloop::Component::Mixin
+          end
+        end
+      end
+      it 'specifies validation rules using `params` class method' do
+        expect_evaluate_ruby do
+          Foo.class_eval do
+            params do
+              requires :foo, type: String
+              optional :bar
+            end
+          end
+          Foo.prop_types
+        end.to have_key('_componentValidator')
+      end
+      it 'logs error in warning if validation failed' do
+        evaluate_ruby do
+          class Lorem; end
+          Foo.class_eval do
+            params do
+              requires :foo
+              requires :lorem, type: Lorem
+              optional :bar, type: String
+            end
+            def render; div; end
+          end
+          React::Test::Utils.render_component_into_document(Foo, bar: 10, lorem: Lorem.new)
+        end
+        expect(page.driver.browser.manage.logs.get(:browser).map { |m| m.message.gsub(/\\n/, "\n") }.to_a.join("\n"))
+          .to match(/Warning: Failed prop( type|Type): In component `Foo`\nRequired prop `foo` was not specified\nProvided prop `bar` could not be converted to String/)
+      end
+      it 'should not log anything if validation pass' do
+        evaluate_ruby do
+          class Lorem; end
+          Foo.class_eval do
+            params do
+              requires :foo
+              requires :lorem, type: Lorem
+              optional :bar, type: String
+            end
+            def render; div; end
+          end
+          React::Test::Utils.render_component_into_document(Foo, foo: 10, bar: '10', lorem: Lorem.new)
+        end
+        expect(page.driver.browser.manage.logs.get(:browser).map { |m| m.message.gsub(/\\n/, "\n") }.to_a.join("\n")).to_not match(/prop/)
+      end
+    end
+    describe 'Default props' do
+      it 'sets default props using validation helper' do
+        on_client do
+          class Foo
+            include React::Component
+            params do
+              optional :foo, default: 'foo'
+              optional :bar, default: 'bar'
+            end
+            def render
+              div { params[:foo] + '-' + params[:bar]}
+            end
+          end
+        end
+        mount 'Foo'
+        expect(page.body[-40..-19]).to include("<div>foo-bar</div>")
+        mount 'Foo', foo: 'lorem'
+        expect(page.body[-40..-19]).to include("<div>lorem-bar</div>")
+      end
+    end
+  end
+  describe 'Anonymous Component' do
+    it "will not generate spurious warning messages" do
+      evaluate_ruby do
+        foo = Class.new(React::Component::Base)
+        foo.class_eval do
+          def render; "hello" end
+        end
+        React::Test::Utils.render_component_into_document(foo)
+      end
+      expect(page.driver.browser.manage.logs.get(:browser)
+        .reject { |entry| entry.to_s.include?("Deprecated feature") }
+        .map { |m| m.message.gsub(/\\n/, "\n") }.to_a.join("\n").size)
+        .to eq(0)
+    end
+  end
+  describe 'Render Error Handling' do
+    it "will generate a message if render returns something other than an Element or a String" do
+      mount 'Foo' do
+        class Foo < React::Component::Base
+          def render; Hash.new; end
+        end
+      end
+      expect(page.driver.browser.manage.logs.get(:browser).map { |m| m.message.gsub(/\\n/, "\n") }.to_a.join("\n"))
+          .to match(/Instead the Hash \{\} was returned/)
+    end
+    it "will generate a message if render returns a Component class" do
+      mount 'Foo' do
+        class Foo < React::Component::Base
+          def render; Foo; end
+        end
+      end
+      expect(page.driver.browser.manage.logs.get(:browser).map { |m| m.message.gsub(/\\n/, "\n") }.to_a.join("\n"))
+        .to match(/Did you mean Foo()/)
+    end
+    it "will generate a message if more than 1 element is generated" do
+      mount 'Foo' do
+        class Foo < React::Component::Base
+          def render; "hello".span; "goodby".span; end
+        end
+      end
+      expect(page.driver.browser.manage.logs.get(:browser).map { |m| m.message.gsub(/\\n/, "\n") }.to_a.join("\n"))
+        .to match(/Instead 2 elements were generated/)
+    end
+    it "will generate a message if the element generated is not the element returned" do
+      mount 'Foo' do
+        class Foo < React::Component::Base
+          def render; "hello".span; "goodby".span.delete; end
+        end
+      end
+      expect(page.driver.browser.manage.logs.get(:browser).map { |m| m.message.gsub(/\\n/, "\n") }.to_a.join("\n"))
+        .to match(/A different element was returned than was generated within the DSL/)
+    end
+  end
+  describe 'Event handling' do
+    before do
+      on_client do
+        class Foo
+          include React::Component
+        end
+      end
+    end
+    it 'works in render method' do
+      expect_evaluate_ruby do
+        Foo.class_eval do
+          define_state(:clicked) { false }
+          def render
+            React.create_element('div').on(:click) do
+              mutate.clicked true
+            end
+          end
+        end
+        instance = React::Test::Utils.render_component_into_document(Foo)
+        React::Test::Utils.simulate_click(instance)
+        instance.state.clicked
+      end.to eq(true)
+    end
+    it 'invokes handler on `this.props` using emit' do
+      on_client do
+        Foo.class_eval do
+          param :on_foo_fubmit, type: Proc
+          after_mount :setup
+          def setup
+            self.emit(:foo_submit, 'bar')
+          end
+          def render
+            React.create_element('div')
+          end
+        end
+      end
+      evaluate_ruby do
+        element = React.create_element(Foo).on(:foo_submit) { 'bar' }
+        React::Test::Utils.render_into_document(element)
+      end
+      expect(page.driver.browser.manage.logs.get(:browser).map { |m| m.message.gsub(/\\n/, "\n") }.to_a.join("\n"))
+        .to_not match(/Exception raised/)
+    end
+    it 'invokes handler with multiple params using emit' do
+      on_client do
+        Foo.class_eval do
+          param :on_foo_invoked, type: Proc
+          after_mount :setup
+          def setup
+            self.emit(:foo_invoked, [1,2,3], 'bar')
+          end
+          def render
+            React.create_element('div')
+          end
+        end
+      end
+      evaluate_ruby do
+        element = React.create_element(Foo).on(:foo_invoked) { return [1,2,3], 'bar' }
+        React::Test::Utils.render_into_document(element)
+      end
+      expect(page.driver.browser.manage.logs.get(:browser).map { |m| m.message.gsub(/\\n/, "\n") }.to_a.join("\n"))
+        .to_not match(/Exception raised/)
+    end
+  end
+  describe '#render' do
+    it 'supports element building helpers' do
+      on_client do
+        class Foo
+          include React::Component
+          param :foo
+          def render
+            div do
+              span { params[:foo] }
+            end
+          end
+        end
+        class Bar
+          include React::Component
+          def render
+            div do
+              React::RenderingContext.render(Foo, foo: 'astring')
+            end
+          end
+        end
+      end
+      evaluate_ruby do
+        React::Test::Utils.render_component_into_document(Bar)
+      end
+      expect(page.body[-80..-19]).to include("<div><div><span>astring</span></div></div>")
+    end
+    it 'builds single node in top-level render without providing a block' do
+      mount 'Foo' do
+        class Foo
+          include React::Component
+          def render
+            div
+          end
+        end
+      end
+      expect(page.body).to include('<div data-react-class="React.TopLevelRailsComponent" data-react-props="{&quot;render_params&quot;:{},&quot;component_name&quot;:&quot;Foo&quot;,&quot;controller&quot;:&quot;ReactTest&quot;}"><div></div></div>')
+    end
+    it 'redefines `p` to make method missing work' do
+      mount 'Foo' do
+        class Foo
+          include React::Component
+          def render
+            div {
+              p(class_name: 'foo')
+              p
+              div { 'lorem ipsum' }
+              p(id: '10')
+            }
+          end
+        end
+      end
+      expect(page.body).to include('<div><p class="foo"></p><p></p><div>lorem ipsum</div><p id="10"></p></div>')
+    end
+    it 'only overrides `p` in render context' do
+      mount 'Foo' do
+        class Foo
+          include React::Component
+          def self.result
+            @@result ||= 'ooopsy'
+          end
+          def self.result_two
+            @@result_two ||= 'ooopsy'
+          end
+          before_mount do
+            @@result = p 'first'
+          end
+          after_mount do
+            @@result_two = p 'second'
+          end
+          def render
+            p do
+              'third'
+            end
+          end
+        end
+      end
+      expect_evaluate_ruby('Kernel.p "first"').to eq('first')
+      expect_evaluate_ruby('p "second"').to eq('second')
+      expect_evaluate_ruby('Foo.result').to eq('first')
+      expect_evaluate_ruby('Foo.result_two').to eq('second')
+      expect(page.body[-40..-10]).to include("<p>third</p>")
+      expect(page.body[-40..-10]).not_to include("<p>first</p>")
+    end
+  end
+  describe 'new react 15/16 custom isMounted implementation' do
+    it 'returns true if after mounted' do
+      expect_evaluate_ruby do
+        class Foo
+          include React::Component
+          def render
+            React.create_element('div')
+          end
+        end
+        component = React::Test::Utils.render_component_into_document(Foo)
+        component.mounted?
+      end.to eq(true)
+    end
+  end
+  describe '.params_changed?' do
+    before(:each) do
+      on_client do
+        class Foo < React::Component::Base
+          def needs_update?(next_params, next_state)
+            next_params.changed?
+          end
+        end
+      end
+    end
+    it "returns false if new and old params are the same" do
+      expect_evaluate_ruby do
+        @foo = Foo.new(nil)
+        @foo.instance_eval { @native.JS[:props] = JS.call(:eval, 'function bla(){return {value1: 1, value2: 2};}bla();') }
+        @foo.should_component_update?({ value2: 2, value1: 1 }, {})
+      end.to be_falsy
+    end
+    it "returns true if new and old params are have different values" do
+      expect_evaluate_ruby do
+        @foo = Foo.new(nil)
+        @foo.instance_eval { @native.JS[:props] = JS.call(:eval, 'function bla(){return {value1: 1, value2: 2};}bla();') }
+        @foo.should_component_update?({value2: 2, value1: 2}, {})
+      end.to be_truthy
+    end
+    it "returns true if new and old params are have different keys" do
+      expect_evaluate_ruby do
+        @foo = Foo.new(nil)
+        @foo.instance_eval { @native.JS[:props] = JS.call(:eval, 'function bla(){return {value1: 1, value2: 2};}bla();') }
+        @foo.should_component_update?({value2: 2, value1: 1, value3: 3}, {})
+      end.to be_truthy
+    end
+  end
+  describe '#should_component_update?' do
+    before(:each) do
+      on_client do
+        class Foo < React::Component::Base
+          def needs_update?(next_params, next_state)
+            next_state.changed?
+          end
+        end
+        EMPTIES = [`{}`, `undefined`, `null`, `false`]
+      end
+    end
+    it "returns false if both new and old states are empty" do
+      expect_evaluate_ruby do
+        @foo = Foo.new(nil)
+        return_values = []
+        EMPTIES.each do |empty1|
+          EMPTIES.each do |empty2|
+            @foo.instance_eval { @native.JS[:state] = JS.call(:eval, "function bla(){return #{empty1};}bla();") }
+            return_values << @foo.should_component_update?({}, Hash.new(empty2))
+          end
+        end
+        return_values
+      end.to all( be_falsy )
+    end
+    it "returns true if old state is empty, but new state is not" do
+      expect_evaluate_ruby do
+        @foo = Foo.new(nil)
+        return_values = []
+        EMPTIES.each do |empty|
+          @foo.instance_eval { @native.JS[:state] = JS.call(:eval, "function bla(){return #{empty};}bla();") }
+          return_values << @foo.should_component_update?({}, {foo: 12})
+        end
+        return_values
+      end.to all( be_truthy )
+    end
+    it "returns true if new state is empty, but old state is not" do
+      expect_evaluate_ruby do
+        @foo = Foo.new(nil)
+        return_values = []
+        EMPTIES.each do |empty|
+          @foo.instance_eval { @native.JS[:state] = JS.call(:eval, "function bla(){return {foo: 12};}bla();") }
+          return_values << @foo.should_component_update?({}, Hash.new(empty))
+        end
+        return_values
+      end.to all( be_truthy )
+    end
+    it "returns true if new state and old state have different time stamps" do
+      expect_evaluate_ruby do
+        @foo = Foo.new(nil)
+        return_values = []
+        EMPTIES.each do |empty|
+          @foo.instance_eval { @native.JS[:state] = JS.call(:eval, "function bla(){return {'***_state_updated_at-***': 12};}bla();") }
+          return_values << @foo.should_component_update?({}, {'***_state_updated_at-***' => 13})
+        end
+        return_values
+      end.to all ( be_truthy )
+    end
+    it "returns false if new state and old state have the same time stamps" do
+      expect_evaluate_ruby do
+        @foo = Foo.new(nil)
+        return_values = []
+        EMPTIES.each do |empty|
+          @foo.instance_eval { @native.JS[:state] = JS.call(:eval, "function bla(){return {'***_state_updated_at-***': 12};}bla();") }
+          return_values << @foo.should_component_update?({}, {'***_state_updated_at-***' => 12})
+        end
+        return_values
+      end.to all( be_falsy )
+    end
+    it "returns true if new state without timestamp is different from old state" do
+      expect_evaluate_ruby do
+        @foo = Foo.new(nil)
+        return_values = []
+        EMPTIES.each do |empty|
+          @foo.instance_eval { @native.JS[:state] = JS.call(:eval, "function bla(){return {'my_state': 12};}bla();") }
+          return_values << @foo.should_component_update?({}, {'my-state' => 13})
+        end
+        return_values
+      end.to all ( be_truthy )
+    end
+    it "returns false if new state without timestamp is the same as old state" do
+      expect_evaluate_ruby do
+        @foo = Foo.new(nil)
+        return_values = []
+        EMPTIES.each do |empty|
+          @foo.instance_eval { @native.JS[:state] = JS.call(:eval, "function bla(){return {'my_state': 12};}bla();") }
+          return_values << @foo.should_component_update?({}, {'my_state' => 12})
+        end
+        return_values
+      end.to all( be_falsy )
+    end
+  end
+  describe '#children' do
+    before(:each) do
+      on_client do
+        class Foo
+          include React::Component
+          def render
+            React.create_element('div') { 'lorem' }
+          end
+        end
+      end
+    end
+    it 'returns React::Children collection with child elements' do
+      evaluate_ruby do
+        ele = React.create_element(Foo) {
+          [React.create_element('a'), React.create_element('li')]
+        }
+        instance = React::Test::Utils.render_into_document(ele)
+        CHILDREN = instance.children
+      end
+      expect_evaluate_ruby("CHILDREN.class.name").to eq('React::Children')
+      expect_evaluate_ruby("CHILDREN.count").to eq(2)
+      expect_evaluate_ruby("CHILDREN.map(&:element_type)").to eq(['a', 'li'])
+    end
+    it 'returns an empty Enumerator if there are no children' do
+      evaluate_ruby do
+        ele = React.create_element(Foo)
+        instance = React::Test::Utils.render_into_document(ele)
+        NODES = instance.children.each
+      end
+      expect_evaluate_ruby("NODES.size").to eq(0)
+      expect_evaluate_ruby("NODES.count").to eq(0)
+    end
+  end
+end