hyper-react 0.99.6 → 1.0.0.lap21

data/spec/react/opal_jquery_extensions_spec.rb

@@ -0,0 +1,68 @@
+require 'spec_helper'
+
+describe 'opal-jquery extensions', js: true do
+  describe 'Element' do
+    xit 'will reuse the wrapper componet class for the same Element' do
+      # TODO how come a def component_will_unmount will not be received
+      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
+      expect_evaluate_ruby do
+        class Foo < React::Component::Base
+          param :name
+          def render
+            "hello #{params.name}"
+          end
+        end
+        test_div = Element.new(:div)
+        test_div.render { Foo(name: 'fred') }
+        Element[test_div].find('span').html
+      end.to eq('hello fred')
+    end
+
+    it 'renders a top level component using render with a container and params ' do
+      expect_evaluate_ruby do
+        test_div = Element.new(:div)
+        test_div.render(:span, id: :render_test_span) { 'hello' }
+        Element[test_div].find('#render_test_span').html
+      end.to eq('hello')
+    end
+
+    it 'will find the DOM node given a react element' do
+      expect_evaluate_ruby do
+        class Foo < React::Component::Base
+          def render
+            div { 'hello' }
+          end
+        end
+        Element[React::Test::Utils.render_component_into_document(Foo)].html
+      end.to eq('hello')
+    end
+
+    it "accepts plain js object as selector" do
+      evaluate_ruby do
+        Element[JS.call(:eval, "(function () { return window; })();")]
+      end
+      expect(page.driver.browser.manage.logs.get(:browser).map { |m| m.message.gsub(/\\n/, "\n") }.to_a.join("\n"))
+          .not_to match(/Exception|Error/)
+    end
+  end
+end

data/spec/react/param_declaration_spec.rb

@@ -0,0 +1,253 @@
+require 'spec_helper'
+
+describe 'the param macro', js: true do
+  it 'defines collect_other_params_as method on params proxy' do
+    mount 'Foo', bar: 'biz' do
+      class Foo < React::Component::Base
+        collect_other_params_as :foo
+
+        def render
+          div { params.foo[:bar] }
+        end
+      end
+    end
+    expect(page.body[-35..-19]).to include("<div>biz</div>")
+  end
+
+  it "can create and access a required param" do
+    mount 'Foo', foo: :bar do
+      class Foo < React::Component::Base
+        param :foo
+
+        def render
+          div { params.foo }
+        end
+      end
+    end
+    expect(page.body[-35..-19]).to include("<div>bar</div>")
+  end
+
+  it "can create and access an optional params" do
+    mount 'Foo', foo1: :bar1, foo3: :bar3 do
+      class Foo < React::Component::Base
+
+        param foo1: :no_bar1
+        param foo2: :no_bar2
+        param :foo3, default: :no_bar3
+        param :foo4, default: :no_bar4
+
+        def render
+          div { "#{params.foo1}-#{params.foo2}-#{params.foo3}-#{params.foo4}" }
+        end
+      end
+    end
+    expect(page.body[-60..-19]).to include('<div>bar1-no_bar2-bar3-no_bar4</div>')
+  end
+
+  it 'can specify validation rules with the type option' do
+    expect_evaluate_ruby do
+      class Foo < React::Component::Base
+        param :foo, type: String
+      end
+      Foo.prop_types
+    end.to have_key('_componentValidator')
+  end
+
+  it "can type check params" do
+    mount 'Foo', foo1: 12, foo2: "string" do
+      class Foo < React::Component::Base
+
+        param :foo1, type: String
+        param :foo2, type: String
+
+        def render
+          div { "#{params.foo1}-#{params.foo2}" }
+        end
+      end
+    end
+    expect(page.body[-60..-19]).to include('<div>12-string</div>')
+    expect(page.driver.browser.manage.logs.get(:browser).map { |m| m.message.gsub(/\\n/, "\n") }.to_a.join("\n"))
+          .to match(/Warning: Failed prop( type|Type): In component `Foo`\nProvided prop `foo1` could not be converted to String/)
+  end
+
+  it 'logs error in warning if validation failed' do
+    evaluate_ruby do
+      class Lorem; end
+      class Foo2 < React::Component::Base
+        param :foo
+        param :lorem, type: Lorem
+        param :bar, default: nil, type: String
+        def render; div; end
+      end
+
+      React::Test::Utils.render_component_into_document(Foo2, bar: 10, lorem: Lorem.new)
+    end
+    expect(page.driver.browser.manage.logs.get(:browser).map { |m| m.message.gsub(/\\n/, "\n") }.to_a.join("\n"))
+      .to match(/Warning: Failed prop( type|Type): In component `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
+    evaluate_ruby do
+      class Lorem; end
+      class Foo < React::Component::Base
+        param :foo
+        param :lorem, type: Lorem
+        param :bar, default: nil, type: String
+
+        def render; div; end
+      end
+      React::Test::Utils.render_component_into_document(Foo, foo: 10, bar: '10', lorem: Lorem.new)
+    end
+    expect(page.driver.browser.manage.logs.get(:browser).reject { |m| m.message =~ /(D|d)eprecated/ }.map { |m| m.message.gsub(/\\n/, "\n") }.to_a.join("\n"))
+      .not_to match(/Warning|Error/)
+  end
+
+  describe 'advanced type handling' do
+    before(:each) do
+      on_client do
+        class Foo < React::Component::Base
+          def render; ""; end
+        end
+      end
+    end
+
+    it "can use the [] notation for arrays" do
+      mount 'Foo', foo: 10, bar: [10] do
+        Foo.class_eval do
+          param :foo, type: []
+          param :bar, type: []
+        end
+      end
+      expect(page.driver.browser.manage.logs.get(:browser).map { |m| m.message.gsub(/\\n/, "\n") }.to_a.join("\n"))
+        .to match(/Warning: Failed prop( type|Type): In component `Foo`\nProvided prop `foo` could not be converted to Array/)
+    end
+
+    it "can use the [xxx] notation for arrays of a specific type" do
+      mount 'Foo', foo: [10], bar: ["10"] do
+        Foo.class_eval do
+          param :foo, type: [String]
+          param :bar, type: [String]
+        end
+      end
+      expect(page.driver.browser.manage.logs.get(:browser).map { |m| m.message.gsub(/\\n/, "\n") }.to_a.join("\n"))
+        .to match(/Warning: Failed prop( type|Type): In component `Foo`\nProvided prop `foo`\[0\] could not be converted to String/)
+    end
+
+    it "can convert a json hash to a type" do
+      mount 'Foo', foo: "", bar: { bazwoggle: 1 }, baz: [{ bazwoggle: 2 }] do
+        class BazWoggle
+          def initialize(kind)
+            @kind = kind
+          end
+          attr_accessor :kind
+          def self._react_param_conversion(json, validate_only)
+            new(json[:bazwoggle]) if json[:bazwoggle]
+          end
+        end
+        Foo.class_eval do
+          param :foo, type: BazWoggle
+          param :bar, type: BazWoggle
+          param :baz, type: [BazWoggle]
+          def render
+            "#{params.bar.kind}, #{params.baz[0].kind}"
+          end
+        end
+      end
+      expect(page.body[-60..-19]).to include('<span>1, 2</span>')
+      expect(page.driver.browser.manage.logs.get(:browser).map { |m| m.message.gsub(/\\n/, "\n") }.to_a.join("\n"))
+        .to match(/Warning: Failed prop( type|Type): In component `Foo`\nProvided prop `foo` could not be converted to BazWoggle/)
+    end
+
+    describe "converts params only once" do
+      it "not on every access" do
+        mount 'Foo', foo: {bazwoggle: 1} do
+          class BazWoggle
+            def initialize(kind)
+              @kind = kind
+            end
+            attr_accessor :kind
+            def self._react_param_conversion(json, validate_only)
+              new(json[:bazwoggle]) if json[:bazwoggle]
+            end
+          end
+          Foo.class_eval do
+            param :foo, type: BazWoggle
+            def render
+              params.foo.kind = params.foo.kind+1
+              "#{params.foo.kind}"
+            end
+          end
+        end
+        expect(page.body[-60..-19]).to include('<span>2</span>')
+      end
+
+      it "even if contains an embedded native object"
+      # its not clear what this test was trying to accomplish...
+      #  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
+      evaluate_ruby do
+        Foo.class_eval do
+          param :foo, type: Proc
+          def render
+            params.foo
+          end
+        end
+        React::Test::Utils.render_component_into_document(Foo, foo: lambda { 'works!' })
+      end
+      expect(page.body[-60..-19]).to include('<span>works!</span>')
+    end
+
+    it "will create a 'bang' (i.e. update) method if the type is React::Observable" do
+      expect_evaluate_ruby do
+        Foo.class_eval do
+          param :foo, type: React::Observable
+          before_mount do
+            params.foo! "ha!"
+          end
+          def render
+            params.foo
+          end
+        end
+        current_state = ""
+        observer = React::Observable.new(current_state) { |new_state| current_state = new_state }
+        React::Test::Utils.render_component_into_document(Foo, foo: observer)
+        current_state
+      end.to eq("ha!")
+      expect(page.body[-60..-19]).to include('<span>ha!</span>')
+    end
+  end
+end

data/spec/react/react_spec.rb

@@ -0,0 +1,278 @@
+require "spec_helper"
+
+describe 'React', js: true do
+  describe "is_valid_element?" do
+    it "should return true if passed a valid element" do
+      
+      expect_evaluate_ruby do
+        element = React::Element.new(JS.call(:eval, "React.createElement('div')"))
+        React.is_valid_element?(element)
+      end.to eq(true)
+    end
+
+    it "should return false is passed a non React element" do
+      
+      expect_evaluate_ruby do
+        element = React::Element.new(JS.call(:eval, "{}"))
+        React.is_valid_element?(element)
+      end.to eq(false)
+    end
+  end
+
+  describe "create_element" do
+    it "should create a valid element with only tag" do
+      
+      expect_evaluate_ruby do
+        element = React.create_element('div')
+        React.is_valid_element?(element)
+      end.to eq(true)
+    end
+
+    context "with block" do
+      it "should create a valid element with text as only child when block yield String" do
+        
+        evaluate_ruby do
+          ELEMENT = React.create_element('div') { "lorem ipsum" }
+        end
+        expect_evaluate_ruby("React.is_valid_element?(ELEMENT)").to eq(true)
+        expect_evaluate_ruby("ELEMENT.props.children").to eq("lorem ipsum")
+      end
+
+      it "should create a valid element with children as array when block yield Array of element" do
+        
+        evaluate_ruby do
+          ELEMENT = React.create_element('div') do
+            [React.create_element('span'), React.create_element('span'), React.create_element('span')]
+          end
+        end
+        expect_evaluate_ruby("React.is_valid_element?(ELEMENT)").to eq(true)
+        expect_evaluate_ruby("ELEMENT.props.children.length").to eq(3)
+      end
+
+      it "should render element with children as array when block yield Array of element" do
+        
+        expect_evaluate_ruby do
+          element = React.create_element('div') do
+            [React.create_element('span'), React.create_element('span'), React.create_element('span')]
+          end
+          dom_node = React::Test::Utils.render_into_document(element)
+          dom_node.JS[:children].JS[:length]
+        end.to eq(3)
+      end
+    end
+
+    describe "custom element" do
+      before :each do
+        on_client do
+          class Foo < React::Component::Base
+            def initialize(native)
+              @native = native
+            end
+
+            def render
+              React.create_element("div") { "lorem" }
+            end
+
+            def props
+              Hash.new(@native.JS[:props])
+            end
+          end
+        end
+      end
+
+      it "should render element with only one children correctly" do
+        
+        evaluate_ruby do
+          element = React.create_element(Foo) { React.create_element('span') }
+          INSTANCE = React::Test::Utils.render_into_document(element)
+          true
+        end
+        expect_evaluate_ruby("INSTANCE.props[:children].is_a?(Array)").to be_falsy
+        expect_evaluate_ruby("INSTANCE.props[:children][:type]").to eq("span")
+      end
+
+      it "should render element with more than one children correctly" do
+        
+        evaluate_ruby do
+          element = React.create_element(Foo) { [React.create_element('span'), React.create_element('span')] }
+          INSTANCE = React::Test::Utils.render_into_document(element)
+          true
+        end
+        expect_evaluate_ruby("INSTANCE.props[:children].is_a?(Array)").to be_truthy
+        expect_evaluate_ruby("INSTANCE.props[:children].length").to eq(2)
+      end
+
+      it "should create a valid element provided class defined `render`" do
+        
+        expect_evaluate_ruby do
+          element = React.create_element(Foo)
+          React.is_valid_element?(element)
+        end.to eq(true)
+      end
+
+      it "should allow creating with properties" do
+        expect_evaluate_ruby do
+          Foo.class_eval do
+            param :foo
+          end
+          element = React.create_element(Foo, foo: "bar")
+          element.props.foo
+        end.to eq("bar")
+      end
+
+      it "should raise error if provided class doesn't defined `render`" do
+        
+        expect_evaluate_ruby do
+          begin
+            React.create_element(Array)
+          rescue
+            'failed'
+          end
+        end.to eq('failed')
+      end
+
+      it "should use the same instance for the same ReactComponent" do
+        
+        mount 'Foo' do
+          Foo.class_eval do
+            attr_accessor :a
+            
+            def initialize(n)
+              self.a = 10
+            end
+
+            def component_will_mount
+              self.a = 20
+            end
+
+            def render
+              React.create_element("div") { self.a.to_s }
+            end
+          end
+        end
+        expect(page.body[-60..-19]).to include("<div>20</div>")
+      end
+
+      it "should match the instance cycle to ReactComponent life cycle" do
+        expect_evaluate_ruby do
+          Foo.class_eval do
+            def initialize(native)
+              @@count ||= 0
+              @@count += 1
+            end
+            def render
+              React.create_element("div")
+            end
+            def self.count
+              @@count
+            end
+          end
+
+          React::Test::Utils.render_component_into_document(Foo)
+          React::Test::Utils.render_component_into_document(Foo)
+          Foo.count
+        end.to eq(2)
+      end
+    end
+
+    describe "create element with properties" do
+      it "should enforce snake-cased property name" do
+        
+        expect_evaluate_ruby do
+          element = React.create_element("div", class_name: "foo")
+          element.props.className
+        end.to eq("foo")
+      end
+
+      it "should allow custom property" do
+        
+        expect_evaluate_ruby do
+          element = React.create_element("div", foo: "bar")
+          element.props.foo
+        end.to eq("bar")
+      end
+
+      it "should not camel-case custom property" do
+        
+        expect_evaluate_ruby do
+          element = React.create_element("div", foo_bar: "foo")
+          element.props.foo_bar
+        end.to eq("foo")
+      end
+    end
+
+    describe "class_name helpers (React.addons.classSet)" do
+      it "should not alter behavior when passing a string" do
+        
+        expect_evaluate_ruby do
+          element = React.create_element("div", class_name: "foo bar")
+          element.props.className
+        end.to eq("foo bar")
+      end
+    end
+  end
+
+  describe "render" do
+    it "should render element to DOM" do # was async, don know how to handle
+      
+      evaluate_ruby do
+        DIV = JS.call(:eval, 'document.createElement("div")')
+        React.render(React.create_element('span') { "lorem" }, DIV)
+        '' # make to_json happy
+      end
+      expect_evaluate_ruby("DIV.JS[:children].JS[0].JS[:tagName]").to eq("SPAN")
+      expect_evaluate_ruby("DIV.JS[:textContent]").to eq("lorem")
+    end
+
+    it "should work without providing a block" do
+      expect_evaluate_ruby do
+        begin
+          React::Test::Utils.render_into_document(React.create_element('span') { "lorem" })
+          true
+        rescue
+          false
+        end
+      end.to be_truthy
+      expect(page.body[-80..-10]).to include('<div><span>lorem</span></div>')
+    end
+
+    it "returns the actual ruby instance" do
+      
+      expect_evaluate_ruby do
+        class Foo
+          def render
+            React.create_element("div") { "lorem" }
+          end
+        end
+
+        div = JS.call(:eval, 'document.createElement("div")')
+        instance = React.render(React.create_element(Foo), div)
+        instance.is_a?(Foo)
+      end.to be_truthy
+    end
+
+    it "returns the actual DOM node" do
+      
+      expect_evaluate_ruby do
+        div = JS.call(:eval, 'document.createElement("div")')
+        node = React.render(React.create_element('span') { "lorem" }, div)
+        node.JS['nodeType']
+      end.to eq(1)
+    end
+  end
+
+  describe "unmount_component_at_node" do
+    it "should unmount component at node" do
+      
+      # was run_async
+      # unmount was passed in a block run_async which passed in a block to React.render
+      # trying to emulate that failed, becasue during render, _getOpalInstance was not yet defined.
+      # it is defined only after render, when the component was mounted. So we call unmount after render
+      expect_evaluate_ruby do
+        div = JS.call(:eval, 'document.createElement("div")')
+        React.render(React.create_element('span') { "lorem" }, div )
+        React.unmount_component_at_node(div)
+      end.to eq(true)
+    end
+  end
+end