RubyGems - hyper-react - Versions diffs - 0.10.0 - Mend

hyper-react 0.10.0

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 (116) hide show

checksums.yaml +7 -0
data/.codeclimate.yml +27 -0
data/.gitignore +36 -0
data/.rubocop.yml +1159 -0
data/.travis.yml +29 -0
data/Appraisals +20 -0
data/CHANGELOG.md +93 -0
data/Gemfile +6 -0
data/LICENSE +19 -0
data/README.md +121 -0
data/Rakefile +33 -0
data/UPGRADING.md +24 -0
data/component-name-lookup.md +145 -0
data/config.ru +25 -0
data/gemfiles/opal_0.8_react_13.gemfile +13 -0
data/gemfiles/opal_0.8_react_14.gemfile +13 -0
data/gemfiles/opal_0.8_react_15.gemfile +13 -0
data/gemfiles/opal_0.9_react_13.gemfile +13 -0
data/gemfiles/opal_0.9_react_14.gemfile +13 -0
data/gemfiles/opal_0.9_react_15.gemfile +13 -0
data/hyper-react.gemspec +43 -0
data/lib/generators/reactive_ruby/test_app/templates/assets/javascripts/components.rb +4 -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 +109 -0
data/lib/hyper-react.rb +52 -0
data/lib/rails-helpers/top_level_rails_component.rb +54 -0
data/lib/react-sources/react-server.js +2 -0
data/lib/react/api.rb +162 -0
data/lib/react/callbacks.rb +42 -0
data/lib/react/children.rb +30 -0
data/lib/react/component.rb +139 -0
data/lib/react/component/api.rb +50 -0
data/lib/react/component/base.rb +9 -0
data/lib/react/component/class_methods.rb +214 -0
data/lib/react/component/dsl_instance_methods.rb +27 -0
data/lib/react/component/params.rb +6 -0
data/lib/react/component/props_wrapper.rb +83 -0
data/lib/react/component/should_component_update.rb +98 -0
data/lib/react/component/tags.rb +144 -0
data/lib/react/element.rb +168 -0
data/lib/react/event.rb +76 -0
data/lib/react/ext/hash.rb +9 -0
data/lib/react/ext/string.rb +8 -0
data/lib/react/hash.rb +13 -0
data/lib/react/native_library.rb +92 -0
data/lib/react/object.rb +15 -0
data/lib/react/observable.rb +29 -0
data/lib/react/react-source.rb +9 -0
data/lib/react/rendering_context.rb +142 -0
data/lib/react/state.rb +190 -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 +49 -0
data/lib/react/test/rspec.rb +15 -0
data/lib/react/test/session.rb +46 -0
data/lib/react/top_level.rb +132 -0
data/lib/react/validator.rb +136 -0
data/lib/reactive-ruby/component_loader.rb +49 -0
data/lib/reactive-ruby/isomorphic_helpers.rb +197 -0
data/lib/reactive-ruby/rails.rb +7 -0
data/lib/reactive-ruby/rails/component_mount.rb +46 -0
data/lib/reactive-ruby/rails/controller_helper.rb +15 -0
data/lib/reactive-ruby/rails/railtie.rb +14 -0
data/lib/reactive-ruby/serializers.rb +15 -0
data/lib/reactive-ruby/server_rendering/contextual_renderer.rb +42 -0
data/lib/reactive-ruby/version.rb +3 -0
data/lib/reactrb/auto-import.rb +32 -0
data/lib/reactrb/deep-compare.rb +24 -0
data/lib/reactrb/new-event-name-convention.rb +11 -0
data/lib/sources/react-latest.js +21169 -0
data/lib/sources/react-v13.js +21645 -0
data/lib/sources/react-v14.js +20821 -0
data/lib/sources/react-v15.js +21170 -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 +34 -0
data/spec/index.html.erb +10 -0
data/spec/react/callbacks_spec.rb +106 -0
data/spec/react/children_spec.rb +76 -0
data/spec/react/component/base_spec.rb +32 -0
data/spec/react/component_spec.rb +872 -0
data/spec/react/dsl_spec.rb +296 -0
data/spec/react/element_spec.rb +136 -0
data/spec/react/event_spec.rb +24 -0
data/spec/react/native_library_spec.rb +344 -0
data/spec/react/observable_spec.rb +7 -0
data/spec/react/opal_jquery_extensions_spec.rb +66 -0
data/spec/react/param_declaration_spec.rb +258 -0
data/spec/react/react_spec.rb +209 -0
data/spec/react/state_spec.rb +55 -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 +100 -0
data/spec/react/test/utils_spec.rb +45 -0
data/spec/react/top_level_component_spec.rb +96 -0
data/spec/react/tutorial/tutorial_spec.rb +36 -0
data/spec/react/validator_spec.rb +124 -0
data/spec/reactive-ruby/component_loader_spec.rb +71 -0
data/spec/reactive-ruby/isomorphic_helpers_spec.rb +155 -0
data/spec/reactive-ruby/rails/asset_pipeline_spec.rb +10 -0
data/spec/reactive-ruby/rails/component_mount_spec.rb +66 -0
data/spec/reactive-ruby/server_rendering/contextual_renderer_spec.rb +35 -0
data/spec/spec_helper.rb +115 -0
data/spec/support/react/spec_helpers.rb +64 -0
data/spec/vendor/es5-shim.min.js +6 -0
data/spec/vendor/jquery-2.2.4.min.js +4 -0
metadata +387 -0

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,34 @@
+require 'spec_helper'
+if ruby?
+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, no_prerender: true
+      expect(response).to render_template(layout: :test_layout)
+    end
+    it "renders with a specified layout" do
+      get :new, no_prerender: true
+      expect(response).to render_template(layout: :explicit_layout)
+    end
+  end
+end
+end

data/spec/index.html.erb ADDED

@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html>
+<head>
+</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,106 @@
+require 'spec_helper'
+if opal?
+describe React::Callbacks do
+  it 'defines callback' do
+    stub_const 'Foo', Class.new
+    Foo.class_eval do
+      include React::Callbacks
+      define_callback :before_dinner
+      before_dinner :wash_hand
+      def wash_hand
+      end
+    end
+    expect_any_instance_of(Foo).to receive(:wash_hand)
+    Foo.new.run_callback(:before_dinner)
+  end
+  it 'defines multiple callbacks' do
+    stub_const 'Foo', Class.new
+    Foo.class_eval do
+      include React::Callbacks
+      define_callback :before_dinner
+      before_dinner :wash_hand, :turn_of_laptop
+      def wash_hand;end
+      def turn_of_laptop;end
+    end
+    expect_any_instance_of(Foo).to receive(:wash_hand)
+    expect_any_instance_of(Foo).to receive(:turn_of_laptop)
+    Foo.new.run_callback(:before_dinner)
+  end
+  it 'defines block callback' do
+    stub_const 'Foo', Class.new
+    Foo.class_eval do
+      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
+    foo = Foo.new
+    foo.run_callback(:before_dinner)
+    expect(foo.a).to eq(10)
+    expect(foo.b).to eq(20)
+  end
+  it 'defines multiple callback group' do
+    stub_const 'Foo', Class.new
+    Foo.class_eval do
+      include React::Callbacks
+      define_callback :before_dinner
+      define_callback :after_dinner
+      attr_accessor :a
+      before_dinner do
+        self.a = 10
+      end
+    end
+    foo = Foo.new
+    foo.run_callback(:before_dinner)
+    foo.run_callback(:after_dinner)
+    expect(foo.a).to eq(10)
+  end
+  it 'receives args as callback' do
+    stub_const 'Foo', Class.new
+    Foo.class_eval do
+      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
+    expect_any_instance_of(Foo).to receive(:eat_ice_cream).with(4,5,6)
+    foo = Foo.new
+    foo.run_callback(:before_dinner, 1, 2)
+    foo.run_callback(:after_dinner, 4, 5, 6)
+    expect(foo.lorem).to eq('1-2')
+  end
+end
+end

data/spec/react/children_spec.rb ADDED

@@ -0,0 +1,76 @@
+require 'spec_helper'
+if opal?
+describe React::Children do
+  let(:component) {
+    Class.new do
+      include React::Component
+      def render
+        div { 'lorem' }
+      end
+    end
+  }
+  let(:childs) { [React.create_element('a'), React.create_element('li')] }
+  let(:element) { React.create_element(component) { childs } }
+  let(:children) { described_class.new(`#{element.to_n}.props.children`) }
+  before(:each) do
+    renderElementToDocument(element)
+  end
+  it 'is enumerable' do
+    nodes = children.map { |elem| elem.element_type }
+    expect(nodes).to eq(['a', 'li'])
+  end
+  it 'returns an Enumerator when not providing a block' do
+    nodes = children.each
+    expect(nodes).to be_a(Enumerator)
+    expect(nodes.size).to eq(2)
+  end
+  describe '#each' do
+    it 'returns an array of elements' do
+      nodes = children.each { |elem| elem.element_type }
+      expect(nodes).to be_a(Array)
+      expect(nodes.map(&:class)).to eq(childs.map(&:class))
+    end
+  end
+  describe '#length' do
+    it 'returns the number of child elements' do
+      expect(children.length).to eq(2)
+    end
+  end
+  describe 'with single child element' do
+    let(:childs) { [React.create_element('a')] }
+    it 'is enumerable containing single element' do
+      nodes = children.map { |elem| elem.element_type }
+      expect(nodes).to eq(['a'])
+    end
+    describe '#length' do
+      it 'returns the number of child elements' do
+        expect(children.length).to eq(1)
+      end
+    end
+  end
+  describe 'with no child element' do
+    let(:element) { React.create_element(component) }
+    it 'is enumerable containing no elements' do
+      nodes = children.map { |elem| elem.element_type }
+      expect(nodes).to eq([])
+    end
+    describe '#length' do
+      it 'returns the number of child elements' do
+        expect(children.length).to eq(0)
+      end
+    end
+  end
+end
+end

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

@@ -0,0 +1,32 @@
+require 'spec_helper'
+if opal?
+RSpec.describe React::Component::Base, type: :component do
+  after(:each) do
+    React::API.clear_component_class_cache
+  end
+  it 'can be inherited to create a component class' do
+    stub_const 'Foo', Class.new(React::Component::Base)
+    Foo.class_eval do
+      before_mount do
+        @instance_data = ["working"]
+      end
+      def render
+        @instance_data.first
+      end
+    end
+    stub_const 'Bar', Class.new(Foo)
+    Bar.class_eval do
+      before_mount do
+        @instance_data << "well"
+      end
+      def render
+        @instance_data.join(" ")
+      end
+    end
+    expect(Foo).to render("<span>working</span>")
+    expect(Bar).to render("<span>working well</span>")
+  end
+end
+end

data/spec/react/component_spec.rb ADDED

@@ -0,0 +1,872 @@
+require 'spec_helper'
+if opal?
+describe React::Component, type: :component do
+  after(:each) do
+    React::API.clear_component_class_cache
+  end
+  it 'defines component spec methods' do
+    stub_const 'Foo', Class.new
+    Foo.class_eval do
+      include React::Component
+      def render
+        React.create_element('div')
+      end
+    end
+    # Class Methods
+    expect(Foo).to respond_to('initial_state')
+    expect(Foo).to respond_to('default_props')
+    expect(Foo).to respond_to('prop_types')
+    # Instance method
+    expect(Foo.new).to respond_to('component_will_mount')
+    expect(Foo.new).to respond_to('component_did_mount')
+    expect(Foo.new).to respond_to('component_will_receive_props')
+    expect(Foo.new).to respond_to('should_component_update?')
+    expect(Foo.new).to respond_to('component_will_update')
+    expect(Foo.new).to respond_to('component_did_update')
+    expect(Foo.new).to respond_to('component_will_unmount')
+  end
+  describe 'Life Cycle' do
+    before(:each) do
+      stub_const 'Foo', Class.new
+      Foo.class_eval do
+        include React::Component
+        def render
+          React.create_element('div') { 'lorem' }
+        end
+      end
+    end
+    it 'invokes `before_mount` registered methods when `componentWillMount()`' do
+      Foo.class_eval do
+        before_mount :bar, :bar2
+        def bar; end
+        def bar2; end
+      end
+      expect_any_instance_of(Foo).to receive(:bar)
+      expect_any_instance_of(Foo).to receive(:bar2)
+      renderToDocument(Foo)
+    end
+    it 'invokes `after_mount` registered methods when `componentDidMount()`' do
+      Foo.class_eval do
+        after_mount :bar3, :bar4
+        def bar3; end
+        def bar4; end
+      end
+      expect_any_instance_of(Foo).to receive(:bar3)
+      expect_any_instance_of(Foo).to receive(:bar4)
+      renderToDocument(Foo)
+    end
+    it 'allows multiple class declared life cycle hooker' do
+      stub_const 'FooBar', Class.new
+      Foo.class_eval do
+        before_mount :bar
+        def bar; end
+      end
+      FooBar.class_eval do
+        include React::Component
+        after_mount :bar2
+        def bar2; end
+        def render
+          React.create_element('div') { 'lorem' }
+        end
+      end
+      expect_any_instance_of(Foo).to receive(:bar)
+      renderToDocument(Foo)
+    end
+    it 'allows block for life cycle callback' do
+      Foo.class_eval do
+        export_state(:foo)
+        before_mount do
+          foo! 'bar'
+        end
+      end
+      element = renderToDocument(Foo)
+      expect(Foo.foo).to be('bar')
+    end
+  end
+  describe 'New style setter & getter' do
+    before(:each) do
+      stub_const 'Foo', Class.new
+      Foo.class_eval do
+        include React::Component
+        def render
+          div { state.foo }
+        end
+      end
+    end
+    it 'implicitly will create a state variable when first written' do
+      Foo.class_eval do
+        before_mount do
+          state.foo! 'bar'
+        end
+      end
+      expect(Foo).to render('<div>bar</div>')
+    end
+    it 'allows kernal method names like "format" to be used as state variable names' do
+      Foo.class_eval do
+        before_mount do
+          state.format! 'yes'
+          state.foo! state.format
+        end
+      end
+      expect(Foo).to render('<div>yes</div>')
+    end
+    it 'returns an observer with the bang method and no arguments' do
+      Foo.class_eval do
+        before_mount do
+          state.foo!(state.baz!.class.name)
+        end
+      end
+      expect(Foo).to render('<div>React::Observable</div>')
+    end
+    it 'returns the current value of a state when written' do
+      Foo.class_eval do
+        before_mount do
+          state.baz! 'bar'
+          state.foo!(state.baz!('pow'))
+        end
+      end
+      expect(Foo).to render('<div>bar</div>')
+    end
+    it 'can access an explicitly defined state`' do
+      Foo.class_eval do
+        define_state foo: :bar
+      end
+      expect(Foo).to render('<div>bar</div>')
+    end
+  end
+  describe 'State setter & getter' do
+    before(:each) do
+      stub_const 'Foo', Class.new
+      Foo.class_eval do
+        include React::Component
+        def render
+          React.create_element('div') { 'lorem' }
+        end
+      end
+    end
+    it 'defines setter using `define_state`' do
+      Foo.class_eval do
+        define_state :foo
+        before_mount :set_up
+        def set_up
+          self.foo = 'bar'
+        end
+      end
+      element = renderToDocument(Foo)
+      expect(element.state.foo).to be('bar')
+    end
+    it 'defines init state by passing a block to `define_state`' do
+      Foo.class_eval do
+        define_state(:foo) { 10 }
+      end
+      element = renderToDocument(Foo)
+      expect(element.state.foo).to be(10)
+    end
+    it 'defines getter using `define_state`' do
+      Foo.class_eval do
+        define_state(:foo) { 10 }
+        before_mount :bump
+        def bump
+          self.foo = self.foo + 20
+        end
+      end
+      element = renderToDocument(Foo)
+      expect(element.state.foo).to be(30)
+    end
+    it 'defines multiple state accessors by passing array to `define_state`' do
+      Foo.class_eval do
+        define_state :foo, :foo2
+        before_mount :set_up
+        def set_up
+          self.foo = 10
+          self.foo2 = 20
+        end
+      end
+      element = renderToDocument(Foo)
+      expect(element.state.foo).to be(10)
+      expect(element.state.foo2).to be(20)
+    end
+    it 'invokes `define_state` multiple times to define states' do
+      Foo.class_eval do
+        define_state(:foo) { 30 }
+        define_state(:foo2) { 40 }
+      end
+      element = renderToDocument(Foo)
+      expect(element.state.foo).to be(30)
+      expect(element.state.foo2).to be(40)
+    end
+    it 'can initialize multiple state variables with a block' do
+      Foo.class_eval do
+        define_state(:foo, :foo2) { 30 }
+      end
+      element = renderToDocument(Foo)
+      expect(element.state.foo).to be(30)
+      expect(element.state.foo2).to be(30)
+    end
+    it 'can mix multiple state variables with initializers and a block' do
+      Foo.class_eval do
+        define_state(:x, :y, foo: 1, bar: 2) {3}
+      end
+      element = renderToDocument(Foo)
+      expect(element.state.x).to be(3)
+      expect(element.state.y).to be(3)
+      expect(element.state.foo).to be(1)
+      expect(element.state.bar).to be(2)
+    end
+    it 'gets state in render method' do
+      Foo.class_eval do
+        define_state(:foo) { 10 }
+        def render
+          React.create_element('div') { self.foo }
+        end
+      end
+      element = renderToDocument(Foo)
+      expect(Element[element].text).to eq('10')
+    end
+    it 'supports original `setState` as `set_state` method' do
+      Foo.class_eval do
+        before_mount do
+          self.set_state(foo: 'bar')
+        end
+      end
+      element = renderToDocument(Foo)
+      expect(element.state.foo).to be('bar')
+    end
+    it 'supports original `replaceState` as `set_state!` method' do
+      Foo.class_eval do
+        before_mount do
+          self.set_state(foo: 'bar')
+          self.set_state!(bar: 'lorem')
+        end
+      end
+      element = renderToDocument(Foo)
+      expect(element.state.foo).to be_nil
+      expect(element.state.bar).to eq('lorem')
+    end
+    it 'supports original `state` method' do
+      Foo.class_eval do
+        before_mount do
+          self.set_state(foo: 'bar')
+        end
+        def render
+          div { self.state[:foo] }
+        end
+      end
+      expect(Foo).to render('<div>bar</div>')
+    end
+    it 'transforms state getter to Ruby object' do
+      Foo.class_eval do
+        define_state :foo
+        before_mount do
+          self.foo = [{a: "Hello"}]
+        end
+        def render
+          div { self.foo[0][:a] }
+        end
+      end
+      expect(Foo).to render('<div>Hello</div>')
+    end
+  end
+  describe 'Props' do
+    describe 'this.props could be accessed through `params` method' do
+      before do
+        stub_const 'Foo', Class.new
+        Foo.class_eval do
+          include React::Component
+        end
+      end
+      it 'reads from parent passed properties through `params`' do
+        Foo.class_eval do
+          def render
+            React.create_element('div') { params[:prop] }
+          end
+        end
+        element = renderToDocument(Foo, prop: 'foobar')
+        expect(Element[element].text).to eq('foobar')
+      end
+      it 'accesses nested params as orignal Ruby object' do
+        Foo.class_eval do
+          def render
+            React.create_element('div') { params[:prop][0][:foo] }
+          end
+        end
+        element = renderToDocument(Foo, prop: [{foo: 10}])
+        expect(Element[element].text).to eq('10')
+      end
+    end
+    describe 'Props Updating', v13_only: true do
+      before do
+        stub_const 'Foo', Class.new
+        Foo.class_eval do
+          include React::Component
+        end
+      end
+      it 'supports original `setProps` as method `set_props`' do
+        Foo.class_eval do
+          def render
+            React.create_element('div') { params[:foo] }
+          end
+        end
+        element = renderToDocument(Foo, {foo: 10})
+        element.set_props(foo: 20)
+        expect(`#{element.dom_node}.innerHTML`).to eq('20')
+      end
+      it 'supports original `replaceProps` as method `set_props!`' do
+        Foo.class_eval do
+          def render
+            React.create_element('div') { params[:foo] ? 'exist' : 'null' }
+          end
+        end
+        element = renderToDocument(Foo, {foo: 10})
+        element.set_props!(bar: 20)
+        expect(element.getDOMNode.innerHTML).to eq('null')
+      end
+    end
+    describe 'Prop validation' do
+      before do
+        stub_const 'Foo', Class.new
+        Foo.class_eval do
+          include React::Component
+        end
+      end
+      it 'specifies validation rules using `params` class method' do
+        Foo.class_eval do
+          params do
+            requires :foo, type: String
+            optional :bar
+          end
+        end
+        expect(Foo.prop_types).to have_key(:_componentValidator)
+      end
+      it 'logs error in warning if validation failed' do
+        stub_const 'Lorem', Class.new
+        Foo.class_eval do
+          params do
+            requires :foo
+            requires :lorem, type: Lorem
+            optional :bar, type: String
+          end
+          def render; div; end
+        end
+        %x{
+          var log = [];
+          var org_warn_console =  window.console.warn;
+          var org_error_console = window.console.error;
+          window.console.warn = window.console.error = function(str){log.push(str)}
+        }
+        renderToDocument(Foo, bar: 10, lorem: Lorem.new)
+        `window.console.warn = org_warn_console; window.console.error = org_error_console;`
+        expect(`log[0]`).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
+        stub_const 'Lorem', Class.new
+        Foo.class_eval do
+          params do
+            requires :foo
+            requires :lorem, type: Lorem
+            optional :bar, type: String
+          end
+          def render; div; end
+        end
+        %x{
+          var log = [];
+          var org_warn_console = window.console.warn;
+          var org_error_console = window.console.error
+          window.console.warn = window.console.error = function(str){log.push(str)}
+        }
+        renderToDocument(Foo, foo: 10, bar: '10', lorem: Lorem.new)
+        `window.console.warn = org_warn_console; window.console.error = org_error_console;`
+        expect(`log`).to eq([])
+      end
+    end
+    describe 'Default props' do
+      it 'sets default props using validation helper' do
+        stub_const 'Foo', Class.new
+        Foo.class_eval do
+          include React::Component
+          params do
+            optional :foo, default: 'foo'
+            optional :bar, default: 'bar'
+          end
+          def render
+            div { params[:foo] + '-' + params[:bar]}
+          end
+        end
+        expect(Foo).to render('<div>lorem-bar</div>').with_params(foo: 'lorem')
+        expect(Foo).to render('<div>foo-bar</div>')
+      end
+    end
+  end
+  describe 'Anonymous Component' do
+    it "will not generate spurious warning messages" do
+      foo = Class.new(React::Component::Base)
+      foo.class_eval do
+        def render; "hello" end
+      end
+      %x{
+        var log = [];
+        var org_warn_console = window.console.warn;
+        var org_error_console = window.console.error
+        window.console.warn = window.console.error = function(str){log.push(str)}
+      }
+      renderToDocument(foo)
+      `window.console.warn = org_warn_console; window.console.error = org_error_console;`
+      expect(`log`).to eq([])
+    end
+  end
+  describe 'Render Error Handling' do
+    before(:each) do
+      %x{
+        window.test_log = [];
+        window.org_warn_console = window.console.warn;
+        window.org_error_console = window.console.error
+        window.console.warn = window.console.error = function(str){window.test_log.push(str)}
+      }
+    end
+    it "will generate a message if render returns something other than an Element or a String" do
+      foo = Class.new(React::Component::Base)
+      foo.class_eval do
+        def render; Hash.new; end
+      end
+      renderToDocument(foo)
+      `window.console.warn = window.org_warn_console; window.console.error = window.org_error_console;`
+      expect(`test_log`.first).to match /Instead the Hash \{\} was returned/
+    end
+    it "will generate a message if render returns a Component class" do
+      stub_const 'Foo', Class.new(React::Component::Base)
+      foo = Class.new(React::Component::Base)
+      foo.class_eval do
+        def render; Foo; end
+      end
+      renderToDocument(foo)
+      `window.console.warn = window.org_warn_console; window.console.error = window.org_error_console;`
+      expect(`test_log`.first).to match /Did you mean Foo()/
+    end
+    it "will generate a message if more than 1 element is generated" do
+      foo = Class.new(React::Component::Base)
+      foo.class_eval do
+        def render; "hello".span; "goodby".span; end
+      end
+      renderToDocument(foo)
+      `window.console.warn = window.org_warn_console; window.console.error = window.org_error_console;`
+      expect(`test_log`.first).to match /Instead 2 elements were generated/
+    end
+    it "will generate a message if the element generated is not the element returned" do
+      foo = Class.new(React::Component::Base)
+      foo.class_eval do
+        def render; "hello".span; "goodby".span.delete; end
+      end
+      renderToDocument(foo)
+      `window.console.warn = window.org_warn_console; window.console.error = window.org_error_console;`
+      expect(`test_log`.first).to match /A different element was returned than was generated within the DSL/
+    end
+  end
+  describe 'Event handling' do
+    before do
+      stub_const 'Foo', Class.new
+      Foo.class_eval do
+        include React::Component
+      end
+    end
+    it 'works in render method' do
+      Foo.class_eval do
+        define_state(:clicked) { false }
+        def render
+          React.create_element('div').on(:click) do
+            self.clicked = true
+          end
+        end
+      end
+      element = React.create_element(Foo)
+      instance = renderElementToDocument(element)
+      simulateEvent(:click, instance)
+      expect(instance.state.clicked).to eq(true)
+    end
+    it 'invokes handler on `this.props` using emit' do
+      Foo.class_eval do
+        after_mount :setup
+        def setup
+          self.emit(:foo_submit, 'bar')
+        end
+        def render
+          React.create_element('div')
+        end
+      end
+      expect { |b|
+        element = React.create_element(Foo).on(:foo_submit, &b)
+        renderElementToDocument(element)
+      }.to yield_with_args('bar')
+    end
+    it 'invokes handler with multiple params using emit' do
+      Foo.class_eval do
+        after_mount :setup
+        def setup
+          self.emit(:foo_invoked, [1,2,3], 'bar')
+        end
+        def render
+          React.create_element('div')
+        end
+      end
+      expect { |b|
+        element = React.create_element(Foo).on(:foo_invoked, &b)
+        renderElementToDocument(element)
+      }.to yield_with_args([1,2,3], 'bar')
+    end
+  end
+  describe '#refs' do
+    before do
+      stub_const 'Foo', Class.new
+      Foo.class_eval do
+        include React::Component
+      end
+    end
+    it 'correctly assigns refs' do
+      Foo.class_eval do
+        def render
+          React.create_element('input', type: :text, ref: :field)
+        end
+      end
+      element = renderToDocument(Foo)
+      expect(element.refs.field).not_to be_nil
+    end
+    it 'accesses refs through `refs` method' do
+      Foo.class_eval do
+        def render
+          React.create_element('input', type: :text, ref: :field).on(:click) do
+            refs[:field].value = 'some_stuff'
+          end
+        end
+      end
+      element = renderToDocument(Foo)
+      simulateEvent(:click, element)
+      expect(element.refs.field.value).to eq('some_stuff')
+    end
+    it "allows access the actual DOM node" do
+      Foo.class_eval do
+        after_mount do
+          dom = refs[:my_div].dom_node
+          `dom.innerHTML = 'Modified'`
+        end
+        def render
+          React.create_element('div', ref: :my_div) { "Original Content" }
+        end
+      end
+      instance = renderToDocument(Foo)
+      expect(`#{instance.dom_node}.innerHTML`).to eq('Modified')
+    end
+  end
+  describe '#render' do
+    it 'supports element building helpers' do
+      stub_const 'Foo', Class.new
+      Foo.class_eval do
+        include React::Component
+        def render
+          div do
+            span { params[:foo] }
+          end
+        end
+      end
+      stub_const 'Bar', Class.new
+      Bar.class_eval do
+        include React::Component
+        def render
+          div do
+            present Foo, foo: 'astring'
+          end
+        end
+      end
+      expect(Bar).to render('<div><div><span>astring</span></div></div>')
+    end
+    it 'builds single node in top-level render without providing a block' do
+      stub_const 'Foo', Class.new
+      Foo.class_eval do
+        include React::Component
+        def render
+          div
+        end
+      end
+      expect(Foo).to render('<div></div>')
+    end
+    it 'redefines `p` to make method missing work' do
+      stub_const 'Foo', Class.new
+      Foo.class_eval do
+        include React::Component
+        def render
+          p(class_name: 'foo') do
+            p
+            div { 'lorem ipsum' }
+            p(id: '10')
+          end
+        end
+      end
+      markup = '<p class="foo"><p></p><div>lorem ipsum</div><p id="10"></p></p>'
+      expect(Foo).to render(markup)
+    end
+    it 'only overrides `p` in render context' do
+      stub_const 'Foo', Class.new
+      Foo.class_eval do
+        include React::Component
+        before_mount do
+          p 'first'
+        end
+        after_mount do
+          p 'second'
+        end
+        def render
+          div
+        end
+      end
+      expect(Kernel).to receive(:p).with('first')
+      expect(Kernel).to receive(:p).with('second')
+      renderToDocument(Foo)
+    end
+  end
+  describe 'isMounted()' do
+    it 'returns true if after mounted' do
+      stub_const 'Foo', Class.new
+      Foo.class_eval do
+        include React::Component
+        def render
+          React.create_element('div')
+        end
+      end
+      component = renderToDocument(Foo)
+      expect(component.mounted?).to eq(true)
+    end
+  end
+  describe '.params_changed?' do
+    before(:each) do
+      stub_const 'Foo', Class.new(React::Component::Base)
+      Foo.define_method :needs_update? do |next_params, next_state|
+        next_params.changed?
+      end
+      @foo = Foo.new
+    end
+    it "returns false if new and old params are the same" do
+      @foo.instance_variable_set("@native", `{props: {value1: 1, value2: 2}}`)
+      expect(@foo.should_component_update?(`{value2: 2, value1: 1}`, `null`)).to be_falsy
+    end
+    it "returns true if new and old params are have different values" do
+      @foo.instance_variable_set("@native", `{props: {value1: 1, value2: 2}}`)
+      expect(@foo.should_component_update?(`{value2: 2, value1: 2}`, `null`)).to be_truthy
+    end
+    it "returns true if new and old params are have different keys" do
+      @foo.instance_variable_set("@native", `{props: {value1: 1, value2: 2}}`)
+      expect(@foo.should_component_update?(`{value2: 2, value1: 1, value3: 3}`, `null`)).to be_truthy
+    end
+  end
+  describe '#state_changed?' do
+    empties = [`{}`, `undefined`, `null`, `false`]
+    before(:each) do
+      stub_const 'Foo', Class.new(React::Component::Base)
+      Foo.define_method :needs_update? do |next_params, next_state|
+        next_state.changed?
+      end
+      @foo = Foo.new
+    end
+    it "returns false if both new and old states are empty" do
+      empties.each do |empty1|
+        empties.each do |empty2|
+          @foo.instance_variable_set("@native", `{state: #{empty1}}`)
+          expect(@foo.should_component_update?(`{}`, empty2)).to be_falsy
+        end
+      end
+    end
+    it "returns true if old state is empty, but new state is not" do
+      empties.each do |empty|
+        @foo.instance_variable_set("@native", `{state: #{empty}}`)
+        expect(@foo.should_component_update?(`{}`, `{foo: 12}`)).to be_truthy
+      end
+    end
+    it "returns true if new state is empty, but old state is not" do
+      empties.each do |empty|
+        @foo.instance_variable_set("@native", `{state: {foo: 12}}`)
+        expect(@foo.should_component_update?(`{}`, empty)).to be_truthy
+      end
+    end
+    it "returns true if new state and old state have different time stamps" do
+      @foo.instance_variable_set("@native", `{state: {'***_state_updated_at-***': 12}}`)
+      expect(@foo.should_component_update?(`{}`, `{'***_state_updated_at-***': 13}`)).to be_truthy
+    end
+    it "returns false if new state and old state have the same time stamps" do
+      @foo.instance_variable_set("@native", `{state: {'***_state_updated_at-***': 12}}`)
+      expect(@foo.should_component_update?(`{}`, `{'***_state_updated_at-***': 12}`)).to be_falsy
+    end
+  end
+  describe '#children' do
+    before(:each) do
+      stub_const 'Foo', Class.new
+      Foo.class_eval do
+        include React::Component
+        export_state :the_children
+        before_mount do
+          the_children! children
+        end
+        def render
+          React.create_element('div') { 'lorem' }
+        end
+      end
+    end
+    it 'returns React::Children collection with child elements' do
+      ele = React.create_element(Foo) {
+        [React.create_element('a'), React.create_element('li')]
+      }
+      renderElementToDocument(ele)
+      children = Foo.the_children
+      expect(children).to be_a(React::Children)
+      expect(children.count).to eq(2)
+      expect(children.map(&:element_type)).to eq(['a', 'li'])
+    end
+    it 'returns an empty Enumerator if there are no children' do
+      ele = React.create_element(Foo)
+      renderElementToDocument(ele)
+      nodes = Foo.the_children.each
+      expect(nodes.size).to eq(0)
+      expect(nodes.count).to eq(0)
+    end
+  end
+end
+end