reactrb 0.8.8 → 0.9.0

data/spec/react/element_spec.rb

@@ -19,6 +19,20 @@ describe React::Element do
     end
   end
 
+  describe "Event Subscription" do
+    it "keeps the original params" do
+      stub_const 'Foo', Class.new
+      Foo.class_eval do
+        include React::Component
+        def render
+          INPUT(value: nil, type: 'text').on(:change) {}
+        end
+      end
+
+      expect(React.render_to_static_markup(React.create_element(Foo))).to match(/<input (type="text" value=""|value="" type="text")(\/)?>/)
+    end
+  end
+
   describe 'Component Event Subscription' do
 
     it 'will subscribe to a component event param' do
@@ -87,7 +101,8 @@ describe React::Element do
       }
       expect(React.render_to_static_markup(React.create_element(Foo).on(:event) {'works!'})).to eq('<span>works!</span>')
       `window.console.warn = org_warn_console; window.console.error = org_error_console;`
-      expect(`log`).to eq(["Warning: Failed propType: In component `Foo`\nProvided prop `on_event` not specified in spec", "Warning: Deprecated feature used in React::Component. In future releases React::Element#on('event') will no longer respond to the '_onEvent' emitter.\nRename your emitter param to 'on_event' or use .on('<_onEvent>')"])
+      expect(`log[0]`).to match(/Warning: Failed prop( type|Type): In component `Foo`\nProvided prop `on_event` not specified in spec/)
+      expect(`log[1]`).to eq("Warning: Deprecated feature used in React::Component. In future releases React::Element#on('event') will no longer respond to the '_onEvent' emitter.\nRename your emitter param to 'on_event' or use .on('<_onEvent>')")
     end
   end
 

data/spec/react/native_library_spec.rb

@@ -65,6 +65,26 @@ describe "React::NativeLibrary" do
       React.create_element(Foo::NativeComponent, name: "There"))).to eq('<div>Hello There</div>')
   end
 
+  it "will import a nested React.js library into the Ruby name space" do
+    %x{
+      window.NativeLibrary = {
+        NestedLibrary: {
+          NativeComponent: React.createClass({
+            displayName: "HelloMessage",
+            render: function render() {
+              return React.createElement("div", null, "Hello ", this.props.name);
+            }
+        })}
+      }
+    }
+    stub_const 'Foo', Class.new(React::NativeLibrary)
+    Foo.class_eval do
+      imports "NativeLibrary"
+    end
+    expect(React.render_to_static_markup(
+      React.create_element(Foo::NestedLibrary::NativeComponent, name: "There"))).to eq('<div>Hello There</div>')
+  end
+
   it "will rename an imported a React.js component" do
     %x{
       window.NativeLibrary = {

data/spec/react/opal_jquery_extensions_spec.rb

@@ -6,6 +6,27 @@ describe 'Element' do
     React::API.clear_component_class_cache
   end
 
+  it 'will reuse the wrapper componet class for the same Element' do
+    stub_const 'Foo', Class.new(React::Component::Base)
+    Foo.class_eval do
+      param :name
+      def render
+        "hello #{params.name}"
+      end
+
+      def component_will_unmount
+
+      end
+    end
+
+    expect_any_instance_of(Foo).to_not receive(:component_will_unmount)
+
+    test_div = Element.new(:div)
+    test_div.render { Foo(name: 'fred') }
+    test_div.render { Foo(name: 'freddy') }
+    expect(Element[test_div].find('span').html).to eq('hello freddy')
+  end
+
   it 'renders a top level component using render with a block' do
     stub_const 'Foo', Class.new(React::Component::Base)
     Foo.class_eval do
@@ -35,5 +56,11 @@ describe 'Element' do
 
     expect(Element[renderToDocument(Foo)].html).to eq('hello')
   end
+
+  it "accepts plain js object as selector" do
+    expect {
+      Element[`window`]
+    }.not_to raise_error
+  end
 end
 end

data/spec/react/param_declaration_spec.rb

@@ -1,7 +1,7 @@
 require 'spec_helper'
 
 if opal?
-describe 'the param macro' do
+describe 'the param macro', type: :component do
   it 'defines collect_other_params_as method on params proxy' do
     stub_const 'Foo', Class.new(React::Component::Base)
     Foo.class_eval do
@@ -12,36 +12,7 @@ describe 'the param macro' do
       end
     end
 
-    html = React.render_to_static_markup(React.create_element(Foo,  { bar: 'biz' }))
-    expect(html).to eq('<div>biz</div>')
-  end
-
-  it 'still defines deprecated collect_other_params_as method' do
-    stub_const 'Foo', Class.new(React::Component::Base)
-    Foo.class_eval do
-      collect_other_params_as :foo
-
-      def render
-        div { foo[:bar] }
-      end
-    end
-
-    html = React.render_to_static_markup(React.create_element(Foo,  { bar: 'biz' }))
-    expect(html).to eq('<div>biz</div>')
-  end
-
-  it 'still defines deprecated param accessor method' do
-    stub_const 'Foo', Class.new(React::Component::Base)
-    Foo.class_eval do
-      param :foo
-
-      def render
-        div { foo }
-      end
-    end
-
-    html = React.render_to_static_markup(React.create_element(Foo, {foo: :bar}))
-    expect(html).to eq('<div>bar</div>')
+    expect(Foo).to render('<div>biz</div>').with_params(bar: 'biz')
   end
 
   it "can create and access a required param" do
@@ -54,7 +25,7 @@ describe 'the param macro' do
       end
     end
 
-    expect(React.render_to_static_markup(React.create_element(Foo, {foo: :bar}))).to eq('<div>bar</div>')
+    expect(Foo).to render('<div>bar</div>').with_params(foo: :bar)
   end
 
   it "can create and access an optional params" do
@@ -71,7 +42,7 @@ describe 'the param macro' do
       end
     end
 
-    expect(React.render_to_static_markup(React.create_element(Foo, {foo1: :bar1, foo3: :bar3}))).to eq('<div>bar1-no_bar2-bar3-no_bar4</div>')
+    expect(Foo).to render('<div>bar1-no_bar2-bar3-no_bar4</div>').with_params(foo1: :bar1, foo3: :bar3)
   end
 
   it 'can specify validation rules with the type option' do
@@ -95,7 +66,7 @@ describe 'the param macro' do
       end
     end
 
-    expect(React.render_to_static_markup(React.create_element(Foo, {foo1: 12, foo2: "string"}))).to eq('<div>12-string</div>')
+    expect(Foo).to render('<div>12-string</div>').with_params(foo1: 12, foo2: "string")
   end
 
   it 'logs error in warning if validation failed' do
@@ -117,7 +88,7 @@ describe 'the param macro' do
     renderToDocument(Foo2, 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 `Foo2`\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 `Foo2`\nRequired prop `foo` was not specified\nProvided prop `bar` could not be converted to String/)
   end
 
   it 'should not log anything if validation passes' do
@@ -163,7 +134,7 @@ describe 'the param macro' do
         param :bar, type: []
       end
       renderToDocument(Foo, foo: 10, bar: [10])
-      expect(`window.dummy_log`).to eq(["Warning: Failed propType: In component `Foo`\nProvided prop `foo` could not be converted to Array"])
+      expect(`window.dummy_log[0]`).to match(/Warning: Failed prop( type|Type): In component `Foo`\nProvided prop `foo` could not be converted to Array/)
     end
 
     it "can use the [xxx] notation for arrays of a specific type" do
@@ -172,7 +143,7 @@ describe 'the param macro' do
         param :bar, type: [String]
       end
       renderToDocument(Foo, foo: [10], bar: ["10"])
-      expect(`window.dummy_log`).to eq(["Warning: Failed propType: In component `Foo`\nProvided prop `foo`[0] could not be converted to String"])
+      expect(`window.dummy_log[0]`).to match(/Warning: Failed prop( type|Type): In component `Foo`\nProvided prop `foo`\[0\] could not be converted to String/)
     end
 
     it "can convert a json hash to a type" do
@@ -194,13 +165,13 @@ describe 'the param macro' do
           "#{params.bar.kind}, #{params.baz[0].kind}"
         end
       end
-      expect(React.render_to_static_markup(React.create_element(
-        Foo, foo: "", bar: {bazwoggle: 1}, baz: [{bazwoggle: 2}]))).to eq('<span>1, 2</span>')
-      expect(`window.dummy_log`).to eq(["Warning: Failed propType: In component `Foo`\nProvided prop `foo` could not be converted to BazWoggle"])
+
+      params = { foo: "", bar: { bazwoggle: 1 }, baz: [{ bazwoggle: 2 }] }
+      expect(Foo).to render('<span>1, 2</span>').with_params(params)
+      expect(`window.dummy_log[0]`).to match(/Warning: Failed prop( type|Type): In component `Foo`\nProvided prop `foo` could not be converted to BazWoggle/)
     end
 
     describe "converts params only once" do
-
       it "not on every access" do
         stub_const "BazWoggle", Class.new
         BazWoggle.class_eval do
@@ -222,41 +193,39 @@ describe 'the param macro' do
         expect(React.render_to_static_markup(React.create_element(Foo, foo: {bazwoggle: 1}))).to eq('<span>2</span>')
       end
 
-    #   bug fixes in 0.9 render this test obsolete (hopefully)
-
-    #   it "even if contains an embedded native object" do
-    #     stub_const "Bar", Class.new(React::Component::Base)
-    #     stub_const "BazWoggle", Class.new
-    #     BazWoggle.class_eval do
-    #       def initialize(kind)
-    #         @kind = kind
-    #       end
-    #       attr_accessor :kind
-    #       def self._react_param_conversion(json, validate_only)
-    #         new(JSON.from_object(json[0])[:bazwoggle]) if JSON.from_object(json[0])[:bazwoggle]
-    #       end
-    #     end
-    #     Bar.class_eval do
-    #       param :foo, type: BazWoggle
-    #       def render
-    #         params.foo.kind.to_s
-    #       end
-    #     end
-    #     Foo.class_eval do
-    #       export_state :change_me
-    #       before_mount do
-    #         Foo.change_me! "initial"
-    #       end
-    #       def render
-    #         foo = [`{bazwoggle: #{Foo.change_me}}`]
-    #         Bar(foo: foo)
-    #       end
-    #     end
-    #     div = `document.createElement("div")`
-    #     React.render(React.create_element(Foo, {}), div)
-    #     Foo.change_me! "updated"
-    #     expect(`div.children[0].innerHTML`).to eq("updated")
-    #   end
+      it "even if contains an embedded native object" do
+        pending 'Fix after merging'
+        stub_const "Bar", Class.new(React::Component::Base)
+        stub_const "BazWoggle", Class.new
+        BazWoggle.class_eval do
+          def initialize(kind)
+            @kind = kind
+          end
+          attr_accessor :kind
+          def self._react_param_conversion(json, validate_only)
+            new(JSON.from_object(json[0])[:bazwoggle]) if JSON.from_object(json[0])[:bazwoggle]
+          end
+        end
+        Bar.class_eval do
+          param :foo, type: BazWoggle
+          def render
+            params.foo.kind.to_s
+          end
+        end
+        Foo.class_eval do
+          export_state :change_me
+          before_mount do
+            Foo.change_me! "initial"
+          end
+          def render
+            Bar(foo: Native([`{bazwoggle: #{Foo.change_me}}`]))
+          end
+        end
+        div = `document.createElement("div")`
+        React.render(React.create_element(Foo, {}), div)
+        Foo.change_me! "updated"
+        expect(`div.children[0].innerHTML`).to eq("updated")
+      end
     end
 
     it "will alias a Proc type param" do
@@ -266,7 +235,7 @@ describe 'the param macro' do
           params.foo
         end
       end
-      expect(React.render_to_static_markup(React.create_element(Foo, foo: lambda { 'works!' }))).to eq('<span>works!</span>')
+      expect(Foo).to render('<span>works!</span>').with_params(foo: lambda { 'works!' })
     end
 
     it "will create a 'bang' (i.e. update) method if the type is React::Observable" do
@@ -281,7 +250,7 @@ describe 'the param macro' do
       end
       current_state = ""
       observer = React::Observable.new(current_state) { |new_state| current_state = new_state }
-      expect(React.render_to_static_markup(React.create_element(Foo, foo: observer))).to eq('<span>ha!</span>')
+      expect(Foo).to render('<span>ha!</span>').with_params(foo: observer)
       expect(current_state).to eq("ha!")
     end
   end

data/spec/react/react_spec.rb

@@ -1,7 +1,7 @@
 require "spec_helper"
 
 if opal?
-describe React do
+RSpec.describe React, type: :component do
   after(:each) do
     React::API.clear_component_class_cache
   end
@@ -102,7 +102,7 @@ describe React do
           end
         end
 
-        expect(React.render_to_static_markup(React.create_element(Foo))).to eq("<div>20</div>")
+        expect(Foo).to render("<div>20</div>")
       end
 
       it "should match the instance cycle to ReactComponent life cycle" do
@@ -142,13 +142,11 @@ describe React do
     end
 
     describe "class_name helpers (React.addons.classSet)" do
-
-      # deprecated as of React 14
-      # it "should transform Hash provided to `class_name` props as string" do
-      #   classes = {foo: true, bar: false, lorem: true}
-      #   element = React.create_element("div", class_name: classes)
-      #   expect(element.props.className).to eq("foo lorem")
-      # end
+      it "should transform Hash provided to `class_name` props as string", v13_only: true do
+        classes = {foo: true, bar: false, lorem: true}
+        element = React.create_element("div", class_name: classes)
+        expect(element.props.className).to eq("foo lorem")
+      end
 
       it "should not alter behavior when passing a string" do
         element = React.create_element("div", class_name: "foo bar")

data/spec/react/state_spec.rb

@@ -22,5 +22,34 @@ describe 'React::State' do
   # React::State.set_state(object, attribute, value) +
   # React::State.get_state(object, attribute)
   it "can be accessed outside of react using get/set_state"
+
+  it 'ignores state updates during rendering' do
+    stub_const 'StateTest', Class.new(React::Component::Base)
+    StateTest.class_eval do
+      export_state :boom
+      before_mount do
+        # force boom to be on the observing list during the current rendering cycle
+        StateTest.boom! !StateTest.boom
+        # this is automatically called by after_mount / after_update, but we don't want
+        # to have to setup a complicated async test, so we just force it now.
+        # if we don't do this, then updating boom will have no effect on the first render
+        React::State.update_states_to_observe
+      end
+      def render
+        (StateTest.boom ? "Boom" : "No Boom").tap { StateTest.boom! !StateTest.boom }
+      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)}
+    }
+    markup = React.render_to_static_markup(React.create_element(StateTest))
+    `window.console.warn = org_warn_console; window.console.error = org_error_console;`
+    expect(markup).to eq('<span>Boom</span>')
+    expect(StateTest.boom).to be_falsy
+    expect(`log`).to eq([])
+  end
 end
 end

data/spec/react/test/dsl_spec.rb

@@ -0,0 +1,43 @@
+require 'spec_helper'
+
+if opal?
+  RSpec.describe React::Test::DSL do
+    describe 'the DSL' do
+      let(:session) { Class.new { include React::Test::DSL }.new }
+
+      before do
+        React::Test.reset_session!
+
+        stub_const 'Greeter', Class.new
+        Greeter.class_eval do
+          include React::Component
+
+          params do
+            optional :message
+            optional :from
+          end
+
+          def render
+            span { "Hello #{params.message}" }
+          end
+        end
+      end
+
+      it 'is possible to include it in another class' do
+        session.mount(Greeter)
+        expect(session.instance).to be_a(Greeter)
+      end
+
+      it "should provide a 'component' shortcut for more expressive tests" do
+        session.component.mount(Greeter)
+        expect(session.component.instance).to be_a(Greeter)
+      end
+
+      React::Test::Session::DSL_METHODS.each do |method|
+        it "responds to all DSL method: #{method}" do
+          expect(session).to respond_to(method)
+        end
+      end
+    end
+  end
+end

data/spec/react/test/matchers/render_html_matcher_spec.rb

@@ -0,0 +1,83 @@
+require 'spec_helper'
+
+if opal?
+describe React::Test::Matchers::RenderHTMLMatcher do
+  let(:component) {
+    Class.new do
+      include React::Component
+      params do
+        optional :string
+      end
+      def render
+        div do
+          span { params.string } if params.string
+          'lorem'
+        end
+      end
+    end
+  }
+  let(:expected) { '<div>lorem</div>' }
+  let(:matcher) { described_class.new(expected) }
+
+  describe '#matches?' do
+    it 'is truthy when rendered component html equals expected html' do
+      expect(matcher.matches?(component)).to be_truthy
+    end
+
+    it 'is falsey when rendered component html does not equal expected html' do
+      matcher = described_class.new('foo')
+      expect(matcher.matches?(component)).to be_falsey
+    end
+  end
+
+  describe '#with_params' do
+    let(:expected) { '<div><span>str</span>lorem</div>' }
+
+    it 'renders the component with the given params' do
+      matcher.with_params(string: 'str')
+      expect(matcher.matches?(component)).to be_truthy
+    end
+  end
+
+  describe '#failure_message' do
+    let(:expected) { '<div><span>str</span>lorem</div>' }
+
+    it 'includes the name of the component' do
+      stub_const 'Foo', component
+      matcher.matches?(Foo)
+      expect(matcher.failure_message).to match(/expected 'Foo'/)
+    end
+
+    it 'includes the params hash' do
+      matcher.with_params(string: 'bar')
+      matcher.matches?(component)
+      expect(matcher.failure_message).to match(/with params '{"string"=>"bar"}'/)
+    end
+
+    it 'includes the expected html value' do
+      matcher.matches?(component)
+      expect(matcher.failure_message).to match(/to render '#{expected}'/)
+    end
+
+    it 'includes the actual html value' do
+      actual = '<div>lorem<\/div>'
+      matcher.matches?(component)
+      expect(matcher.failure_message).to match(/, but '#{actual}' was rendered/)
+    end
+
+    it 'does not include "to not render"' do
+      matcher.matches?(component)
+      expect(matcher.failure_message).to_not match(/to not render/)
+    end
+  end
+
+  describe '#negative_failure_message' do
+    let(:expected) { '<div><span>str</span>lorem</div>' }
+
+    it 'includes "to not render"' do
+      matcher.matches?(component)
+      expect(matcher.negative_failure_message).to match(/to not render/)
+    end
+  end
+end
+end