reactive-ruby 0.7.3

data/lib/reactive-ruby/serializers.rb

@@ -0,0 +1,15 @@
+[Bignum, FalseClass, Fixnum, Float, Integer, NilClass, String, Symbol, Time, TrueClass].each do |klass|
+  klass.send(:define_method, :react_serializer) do 
+    as_json
+  end
+end
+
+BigDecimal.send(:define_method, :react_serializer) { as_json } rescue nil
+
+Array.send(:define_method, :react_serializer) do 
+  self.collect { |e| e.react_serializer }.as_json
+end
+
+Hash.send(:define_method, :react_serializer) do
+  Hash[*self.collect { |key, value| [key, value.react_serializer] }.flatten(1)].as_json
+end

data/lib/reactive-ruby/state.rb

@@ -0,0 +1,90 @@
+module React
+  
+  class State
+    
+    class << self
+      
+      attr_reader :current_observer
+      
+      def initialize_states(object, initial_values) # initialize objects' name/value pairs
+        states[object].merge!(initial_values || {})
+      end
+
+      def get_state(object, name, current_observer = @current_observer) 
+        # get current value of name for object, remember that the current object depends on this state, current observer can be overriden with last param
+        new_observers[current_observer][object] << name if current_observer and !new_observers[current_observer][object].include? name
+        states[object][name]
+      end
+
+      def set_state(object, name, value)  # set object's name state to value, tell all observers it has changed.  Observers must implement update_react_js_state
+        states[object][name] = value
+        observers_by_name[object][name].dup.each do |observer|
+          observer.update_react_js_state(object, name, value)
+        end
+        value
+      end
+      
+      def will_be_observing?(object, name, current_observer)
+        current_observer and new_observers[current_observer][object].include?(name)
+      end
+      
+      def is_observing?(object, name, current_observer)
+        current_observer and observers_by_name[object][name].include?(current_observer)
+      end
+
+      def update_states_to_observe(current_observer = @current_observer)  # should be called after the last after_render callback, currently called after components render method
+        raise "update_states_to_observer called outside of watch block" unless current_observer
+        current_observers[current_observer].each do |object, names|
+          names.each do |name| 
+            observers_by_name[object][name].delete(current_observer)
+          end
+        end
+        observers = current_observers[current_observer] = new_observers[current_observer]
+        new_observers.delete(current_observer)
+        observers.each do |object, names|
+          names.each do |name|
+            observers_by_name[object][name] << current_observer
+          end
+        end
+      end
+      
+      def remove # call after component is unmounted
+        raise "remove called outside of watch block" unless @current_observer
+        current_observers[@current_observer].each do |object, names|
+          names.each do |name| 
+            observers_by_name[object][name].delete(@current_observer)
+          end
+        end
+        current_observers.delete(@current_observer)
+      end
+
+      def set_state_context_to(observer) # wrap all execution that may set or get states in a block so we know which observer is executing
+        saved_current_observer = @current_observer
+        @current_observer = observer
+        return_value = yield
+      ensure
+        @current_observer = saved_current_observer
+        return_value
+      end
+      
+      def states
+        @states ||= Hash.new { |h, k| h[k] = {} } 
+      end
+      
+      def new_observers
+        @new_observers ||= Hash.new { |h, k| h[k] = Hash.new { |h, k| h[k] = [] } }
+      end
+      
+      def current_observers
+        @current_observers ||= Hash.new { |h, k| h[k] = Hash.new { |h, k| h[k] = [] } }
+      end
+      
+      def observers_by_name
+        @observers_by_name ||= Hash.new { |h, k| h[k] = Hash.new { |h, k| h[k] = [] } }
+      end
+      
+    end
+    
+  end
+  
+end

data/lib/reactive-ruby/top_level.rb

@@ -0,0 +1,53 @@
+require "native"
+require 'active_support'
+require 'reactive-ruby/component'
+
+module React
+  HTML_TAGS = %w(a abbr address area article aside audio b base bdi bdo big blockquote body br
+                button canvas caption cite code col colgroup data datalist dd del details dfn
+                dialog div dl dt em embed fieldset figcaption figure footer form h1 h2 h3 h4 h5
+                h6 head header hr html i iframe img input ins kbd keygen label legend li link
+                main map mark menu menuitem meta meter nav noscript object ol optgroup option
+                output p param picture pre progress q rp rt ruby s samp script section select
+                small source span strong style sub summary sup table tbody td textarea tfoot th
+                thead time title tr track u ul var video wbr)
+  ATTRIBUTES = %w(accept acceptCharset accessKey action allowFullScreen allowTransparency alt
+                async autoComplete autoPlay cellPadding cellSpacing charSet checked classID
+                className cols colSpan content contentEditable contextMenu controls coords
+                crossOrigin data dateTime defer dir disabled download draggable encType form
+                formAction formEncType formMethod formNoValidate formTarget frameBorder height
+                hidden href hrefLang htmlFor httpEquiv icon id label lang list loop manifest
+                marginHeight marginWidth max maxLength media mediaGroup method min multiple
+                muted name noValidate open pattern placeholder poster preload radioGroup
+                readOnly rel required role rows rowSpan sandbox scope scrolling seamless
+                selected shape size sizes span spellCheck src srcDoc srcSet start step style
+                tabIndex target title type useMap value width wmode dangerouslySetInnerHTML)
+  
+  def self.create_element(type, properties = {}, &block)
+    React::API.create_element(type, properties, &block)
+  end
+
+  def self.render(element, container)
+    container = `container.$$class ? container[0] : container`
+    component = Native(`React.render(#{element.to_n}, container, function(){#{yield if block_given?}})`)
+    component.class.include(React::Component::API)
+    component
+  end
+
+  def self.is_valid_element(element)
+    element.kind_of?(React::Element) && `React.isValidElement(#{element.to_n})`
+  end
+
+  def self.render_to_string(element)
+    React::RenderingContext.build { `React.renderToString(#{element.to_n})` }
+  end
+
+  def self.render_to_static_markup(element)
+    React::RenderingContext.build { `React.renderToStaticMarkup(#{element.to_n})` }
+  end
+
+  def self.unmount_component_at_node(node)
+    `React.unmountComponentAtNode(node.$$class ? node[0] : node)`
+  end
+  
+end

data/lib/reactive-ruby/validator.rb

@@ -0,0 +1,83 @@
+module React
+  class Validator
+    
+    def self.build(&block)
+      self.new.build(&block)
+    end
+    
+    def build(&block)
+      instance_eval(&block)
+      self
+    end
+
+    def initialize
+      @rules = {}
+    end
+
+    def requires(prop_name, options = {})
+      rule = options
+      options[:required] = true
+      @rules[prop_name] = options
+    end
+
+    def optional(prop_name, options = {})
+      rule = options
+      options[:required] = false
+      @rules[prop_name] = options
+    end
+    
+    def type_check(errors, error_prefix, object, klass)
+      is_native = !object.respond_to?(:is_a?) rescue true
+      if is_native or !object.is_a? klass
+        unless klass.respond_to? :_react_param_conversion and klass._react_param_conversion object, :validate_only
+          errors << "#{error_prefix} could not be converted to #{klass}" unless klass._react_param_conversion object, :validate_only
+        end
+      end
+    end
+  
+    def validate(props)
+      errors = []
+      props.keys.each do |prop_name|
+        errors <<  "Provided prop `#{prop_name}` not specified in spec"  if @rules[prop_name] == nil
+      end
+
+      props = props.select {|key| @rules.keys.include?(key) }
+
+      # requires or not
+      (@rules.keys - props.keys).each do |prop_name|
+        errors << "Required prop `#{prop_name}` was not specified" if @rules[prop_name][:required]
+      end
+      # type checking
+      props.each do |prop_name, value|
+        if klass = @rules[prop_name][:type]
+          is_klass_array = klass.is_a?(Array) and klass.length > 0 rescue nil
+          if is_klass_array
+            value_is_array_like = value.respond_to?(:each_with_index) rescue nil
+            if value_is_array_like
+              value.each_with_index { |ele, i| type_check(errors, "Provided prop `#{prop_name}`[#{i}]", ele, klass[0]) }
+            else
+              errors << "Provided prop `#{prop_name}` was not an Array"
+            end
+          else
+            type_check(errors, "Provided prop `#{prop_name}`", value, klass)
+          end
+        end
+      end
+
+      # values
+      props.each do |prop_name, value|
+        if values = @rules[prop_name][:values]
+          errors << "Value `#{value}` for prop `#{prop_name}` is not an allowed value" unless values.include?(value)
+        end
+      end
+      
+      errors
+    end
+
+    def default_props
+      @rules
+      .select {|key, value| value.keys.include?("default") }
+      .inject({}) {|memo, (k,v)| memo[k] = v[:default]; memo}
+    end
+  end
+end

data/lib/reactive-ruby/version.rb

@@ -0,0 +1,3 @@
+module React
+  VERSION = "0.7.3"
+end

data/reactive-ruby.gemspec

@@ -0,0 +1,25 @@
+# -*- encoding: utf-8 -*-
+require File.expand_path('../lib/reactive-ruby/version', __FILE__)
+
+Gem::Specification.new do |s|
+  s.name         = 'reactive-ruby'
+  s.version      = React::VERSION
+  s.author       = 'David Chang'
+  s.email        = 'zeta11235813@gmail.com'
+  s.homepage     = 'https://github.com/zetachang/react.rb'
+  s.summary      = 'Opal Ruby wrapper of React.js library.'
+  s.license      = 'MIT'
+  s.description  = "Write reactive UI component with Ruby's elegancy and compiled to run in Javascript."
+
+  s.files          = `git ls-files`.split("\n")
+  s.executables    = `git ls-files -- bin/*`.split("\n").map { |f| File.basename(f) }
+  s.test_files     = `git ls-files -- {test,spec,features}/*`.split("\n")
+  s.require_paths  = ['lib', 'vendor']
+
+  s.add_runtime_dependency 'opal'#, '~> 0.7.0'
+  s.add_runtime_dependency 'opal-activesupport'
+  s.add_development_dependency 'react-source', '~> 0.12'
+  s.add_development_dependency 'opal-rspec'
+  s.add_development_dependency 'sinatra'
+  s.add_development_dependency 'opal-jquery'
+end

data/spec/callbacks_spec.rb

@@ -0,0 +1,107 @@
+require "spec_helper"
+require "react/callbacks"
+
+describe React::Callbacks do
+  it "should be able to define 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 "should be able to define 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 "should be able to define 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 "should be able to define 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 "should be able to receive 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

data/spec/component_spec.rb

@@ -0,0 +1,597 @@
+require "spec_helper"
+
+describe React::Component do
+  after(:each) do
+    React::API.clear_component_class_cache
+  end
+
+  it "should define 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 "should invoke `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 "should invoke `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 "should allow 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 "should allow block for life cycle callback" do
+      Foo.class_eval do
+        define_state(:foo)
+
+        before_mount do
+          self.foo = "bar"
+        end
+      end
+
+      element = renderToDocument(Foo)
+      expect(element.state.foo).to be("bar")
+    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 "should define 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 "should define 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 "should define 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 "should define multiple state accessor by passing symols 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 "should invoke `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 "should raise error if multiple states and block given at the same time" do
+      expect  {
+        Foo.class_eval do
+          define_state(:foo, :foo2) { 30 }
+        end
+      }.to raise_error
+    end
+
+    it "should get 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.getDOMNode.textContent).to eq("10")
+    end
+
+    it "should support 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 "should support 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 "should support originl `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(React.render_to_static_markup(React.create_element(Foo))).to eq("<div>bar</div>")
+    end
+
+    it "should transform state getter to Ruby object" do
+      Foo.class_eval do
+        define_state :foo
+
+        before_mount do
+          self.foo = [{a: 10}]
+        end
+
+        def render
+          div { self.foo[0][:a] }
+        end
+      end
+
+      expect(React.render_to_static_markup(React.create_element(Foo))).to eq("<div>10</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 "should read 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.getDOMNode.textContent).to eq("foobar")
+      end
+
+      it "should access 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.getDOMNode.textContent).to eq("10")
+      end
+    end
+
+    describe "Props Updating" do
+      before do
+        stub_const 'Foo', Class.new
+        Foo.class_eval do
+          include React::Component
+        end
+      end
+
+      it "should support 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 "should support 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.dom_node.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 "should specify 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 "should log 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_console = window.console;
+          window.console = {warn: function(str){log.push(str)}}
+        }
+        renderToDocument(Foo, bar: 10, lorem: Lorem.new)
+        `window.console = org_console;`
+        expect(`log`).to eq(["Warning: Failed propType: In component `Foo`\nRequired prop `foo` was not specified\nProvided prop `bar` was not the specified type `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_console = window.console;
+          window.console = {warn: function(str){log.push(str)}}
+        }
+        renderToDocument(Foo, foo: 10, bar: "10", lorem: Lorem.new)
+        `window.console = org_console;`
+        expect(`log`).to eq([])
+      end
+    end
+
+    describe "Default props" do
+      it "should set 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(React.render_to_static_markup(React.create_element(Foo, foo: "lorem"))).to eq("<div>lorem-bar</div>")
+        expect(React.render_to_static_markup(React.create_element(Foo))).to eq("<div>foo-bar</div>")
+      end
+    end
+  end
+
+  describe "Event handling" do
+    before do
+      stub_const 'Foo', Class.new
+      Foo.class_eval do
+        include React::Component
+      end
+    end
+
+    it "should work 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 "should invoke 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 "should invoke 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 "should correctly assign 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 "should access 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
+  end
+
+  describe "Render" do
+    it "should support 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(React.render_to_static_markup(React.create_element(Bar))).to eq("<div><div><span>astring</span></div></div>")
+    end
+
+    it "should build 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
+
+      element = React.create_element(Foo)
+      expect(React.render_to_static_markup(element)).to eq("<div></div>")
+    end
+
+    it "should redefine `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
+
+      element = React.create_element(Foo)
+      expect(React.render_to_static_markup(element)).to eq("<p class=\"foo\"><p></p><div>lorem ipsum</div><p id=\"10\"></p></p>")
+    end
+
+    it "should only override `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 "should return 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
+end