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

hyper-react 0.99.6 → 1.0.0.lap21

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

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

data/lib/reactive-ruby/version.rb ADDED

@@ -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