reactrb 0.8.8 → 0.9.0

data/spec/react/component/base_spec.rb

@@ -1,7 +1,7 @@
 require 'spec_helper'
 
 if opal?
-describe React::Component::Base do
+RSpec.describe React::Component::Base, type: :component do
   after(:each) do
     React::API.clear_component_class_cache
   end
@@ -25,12 +25,8 @@ describe React::Component::Base do
         @instance_data.join(" ")
       end
     end
-    expect(rendered_component(Foo)).to eq("<span>working</span>")
-    expect(rendered_component(Bar)).to eq("<span>working well</span>")
-  end
-
-  def rendered_component(component)
-    React.render_to_static_markup(React.create_element(component))
+    expect(Foo).to render("<span>working</span>")
+    expect(Bar).to render("<span>working well</span>")
   end
 end
 end

data/spec/react/component_spec.rb

@@ -1,7 +1,7 @@
 require 'spec_helper'
 
 if opal?
-describe React::Component do
+describe React::Component, type: :component do
   after(:each) do
     React::API.clear_component_class_cache
   end
@@ -120,7 +120,7 @@ describe React::Component do
         end
       end
 
-      expect(React.render_to_static_markup(React.create_element(Foo))).to eq('<div>bar</div>')
+      expect(Foo).to render('<div>bar</div>')
     end
 
     it 'allows kernal method names like "format" to be used as state variable names' do
@@ -131,7 +131,7 @@ describe React::Component do
         end
       end
 
-      expect(React.render_to_static_markup(React.create_element(Foo))).to eq('<div>yes</div>')
+      expect(Foo).to render('<div>yes</div>')
     end
 
     it 'returns an observer with the bang method and no arguments' do
@@ -141,7 +141,7 @@ describe React::Component do
         end
       end
 
-      expect(React.render_to_static_markup(React.create_element(Foo))).to eq('<div>React::Observable</div>')
+      expect(Foo).to render('<div>React::Observable</div>')
     end
 
     it 'returns the current value of a state when written' do
@@ -152,7 +152,7 @@ describe React::Component do
         end
       end
 
-      expect(React.render_to_static_markup(React.create_element(Foo))).to eq('<div>bar</div>')
+      expect(Foo).to render('<div>bar</div>')
     end
 
     it 'can access an explicitly defined state`' do
@@ -160,7 +160,7 @@ describe React::Component do
         define_state foo: :bar
       end
 
-      expect(React.render_to_static_markup(React.create_element(Foo))).to eq('<div>bar</div>')
+      expect(Foo).to render('<div>bar</div>')
     end
 
   end
@@ -304,7 +304,7 @@ describe React::Component do
         end
       end
 
-      expect(React.render_to_static_markup(React.create_element(Foo))).to eq('<div>bar</div>')
+      expect(Foo).to render('<div>bar</div>')
     end
 
     it 'transforms state getter to Ruby object' do
@@ -320,7 +320,7 @@ describe React::Component do
         end
       end
 
-      expect(React.render_to_static_markup(React.create_element(Foo))).to eq('<div>Hello</div>')
+      expect(Foo).to render('<div>Hello</div>')
     end
   end
 
@@ -356,39 +356,38 @@ describe React::Component do
       end
     end
 
-    # deprecated as of React 14
-    # describe 'Props Updating' 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 '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
@@ -429,7 +428,7 @@ describe React::Component do
         }
         renderToDocument(Foo, bar: 10, lorem: Lorem.new)
         `window.console.warn = org_warn_console; window.console.error = org_error_console;`
-        expect(`log`).to eq(["Warning: Failed propType: In component `Foo`\nRequired prop `foo` was not specified\nProvided prop `bar` could not be converted to String"])
+        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
@@ -471,8 +470,8 @@ describe React::Component do
           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>')
+        expect(Foo).to render('<div>lorem-bar</div>').with_params(foo: 'lorem')
+        expect(Foo).to render('<div>foo-bar</div>')
       end
     end
   end
@@ -645,6 +644,22 @@ describe React::Component do
 
       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
@@ -670,7 +685,7 @@ describe React::Component do
         end
       end
 
-      expect(React.render_to_static_markup(React.create_element(Bar))).to eq('<div><div><span>astring</span></div></div>')
+      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
@@ -683,10 +698,49 @@ describe React::Component do
         end
       end
 
-      element = React.create_element(Foo)
-      expect(React.render_to_static_markup(element)).to eq('<div></div>')
+      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
@@ -705,6 +759,79 @@ describe React::Component do
     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
@@ -720,30 +847,24 @@ describe React::Component do
       end
     end
 
-    it 'returns an Enumerable' do
+    it 'returns React::Children collection with child elements' do
       ele = React.create_element(Foo) {
         [React.create_element('a'), React.create_element('li')]
       }
       renderElementToDocument(ele)
-      nodes = Foo.the_children.map { |ele| ele.element_type }
-      expect(nodes).to eq(['a', 'li'])
-    end
 
-    it 'returns an Enumerator when not providing a block' do
-      ele = React.create_element(Foo) {
-        [React.create_element('a'), React.create_element('li')]
-      }
-      renderElementToDocument(ele)
-      nodes = Foo.the_children.each
-      expect(nodes).to be_a(Enumerator)
-      expect(nodes.size).to eq(2)
+      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(nil)
+      expect(nodes.size).to eq(0)
       expect(nodes.count).to eq(0)
     end
   end

data/spec/react/dsl_spec.rb

@@ -1,12 +1,6 @@
 require 'spec_helper'
 
 if opal?
-
-  module TestMod123
-    class Bar < React::Component::Base
-    end
-  end
-
 describe 'the React DSL' do
 
   context "render macro" do
@@ -50,26 +44,39 @@ describe 'the React DSL' do
     end
   end
 
-  it "can use the upcase version of builtin tags" do
+  it "will turn the last string in a block into a element" do
     stub_const 'Foo', Class.new
     Foo.class_eval do
       include React::Component
       def render
-        DIV { "hello" }
+        div { "hello" }
       end
     end
 
     expect(React.render_to_static_markup(React.create_element(Foo))).to eq('<div>hello</div>')
   end
 
+  it "will pass converted props through event handlers" do
+    stub_const 'Foo', Class.new
+    Foo.class_eval do
+      include React::Component
+      def render
+        INPUT(data: {foo: 12}).on(:change) {}
+      end
+    end
+
+    expect(React.render_to_static_markup(React.create_element(Foo))).to match(/<input data-foo="12"(\/)?>/)
+  end
+
   it "will turn the last string in a block into a element" do
     stub_const 'Foo', Class.new
     Foo.class_eval do
       include React::Component
       def render
-        div { "hello" }
+        DIV { "hello" }
       end
     end
+
     expect(React.render_to_static_markup(React.create_element(Foo))).to eq('<div>hello</div>')
   end
 
@@ -184,21 +191,22 @@ describe 'the React DSL' do
   end
 
   it "can add class names by the haml .class notation" do
-    # stub_const 'Mod::Barz', Class.new(React::Component::Base)
-    TestMod123::Bar.class_eval do
+    stub_const 'Mod::Bar', Class.new
+    Mod::Bar.class_eval do
+      include React::Component
       collect_other_params_as :attributes
       def render
-        "a man walks into a bar".span(attributes)
+        "a man walks into a bar".span(params.attributes)
       end
     end
     stub_const 'Foo', Class.new(React::Component::Base)
     Foo.class_eval do
       def render
-        TestMod123::Bar().the_class
+        Mod::Bar().the_class.other_class
       end
     end
 
-    expect(React.render_to_static_markup(React.create_element(Foo))).to eq('<span class="the-class">a man walks into a bar</span>')
+    expect(React.render_to_static_markup(React.create_element(Foo))).to eq('<span class="other-class the-class">a man walks into a bar</span>')
   end
 
   it "can use the 'class' keyword for classes" do
@@ -218,11 +226,11 @@ describe 'the React DSL' do
     Foo.class_eval do
       include React::Component
       def render
-        span { "hello".span.as_node.class.name }.as_node.render
+        span(data: {size: 12}) { "hello".span.as_node.class.name }.as_node.render
       end
     end
 
-    expect(React.render_to_static_markup(React.create_element(Foo))).to eq('<span>React::Element</span>')
+    expect(React.render_to_static_markup(React.create_element(Foo))).to eq('<span data-size="12">React::Element</span>')
   end
 
   it "can use the dangerously_set_inner_HTML param" do
@@ -267,11 +275,10 @@ describe 'the React DSL' do
     stub_const 'X2', Class.new
     X2.class_eval do
       include React::Component
-      param :ele
       def render
         div do
-          ele.render
-          ele.render
+          params[:ele].render
+          params[:ele].render
         end
       end
     end