hyper-react 0.99.6 → 1.0.0.lap21

data/spec/react/dsl_spec.rb

@@ -0,0 +1,323 @@
+require 'spec_helper'
+
+describe 'the React DSL', js: true do
+
+  context "render macro" do
+
+    it "can define the render method with the render macro with a html tag container" do
+      mount 'Foo' do
+        class Foo
+          include React::Component
+          render(:div, class: :foo) do
+            "hello"
+          end
+        end
+      end
+      expect(page.body[-60..-19]).to include('<div class="foo">hello</div>')
+    end
+
+    it "can define the render method with the render macro without a container" do
+      mount 'Foo' do
+        class Foo
+          include React::Component
+          render do
+            "hello"
+          end
+        end
+      end
+      expect(page.body[-60..-19]).to include('<span>hello</span>')
+    end
+
+    it "can define the render method with the render macro with a application defined container" do
+      on_client do
+        class Bar < React::Component::Base
+          param :p1
+          render { "hello #{params.p1}" }
+        end
+        class Foo < React::Component::Base
+          render Bar, p1: "fred"
+        end
+      end
+      mount 'Foo'
+      expect(page.body[-60..-19]).to include('<span>hello fred</span>')
+    end
+  end
+
+  it "will turn the last string in a block into a element" do
+    mount 'Foo' do
+      class Foo
+        include React::Component
+        def render
+          div { "hello" }
+        end
+      end
+    end
+    expect(page.body[-60..-19]).to include('<div>hello</div>')
+  end
+
+  it "in prerender will pass converted props through event handlers" do
+    client_option render_on: :both
+    mount 'Foo' do
+      class Foo
+        include React::Component
+        def render
+          INPUT(data: {foo: 12}).on(:change) {}
+        end
+      end
+    end
+    expect(page.body).to match(/<input data-foo="12" data-reactroot="" \/>/)
+  end
+
+  it "will turn the last string in a block into a element" do
+    mount 'Foo' do
+      class Foo
+        include React::Component
+        def render
+          DIV { "hello" }
+        end
+      end
+    end
+    expect(page.body[-60..-19]).to include('<div>hello</div>')
+  end
+
+  it "has a .span short hand String method" do
+    mount 'Foo' do
+      class Foo
+        include React::Component
+        def render
+          div { "hello".span; "goodby".span }
+        end
+      end
+    end
+    expect(page.body[-70..-19]).to include('<div><span>hello</span><span>goodby</span></div>')
+  end
+
+  it "in prerendering has a .br short hand String method" do
+    client_option render_on: :both
+    client_option raise_on_js_errors: :off
+    mount 'Foo' do
+      class Foo
+        include React::Component
+        def render
+          div { "hello".br }
+        end
+      end
+    end
+    expect(page.body[-80..-19]).to match(/(<div data-reactroot=""|<div)><span>hello<(br|br\/|br \/)><\/span><\/div>/)
+  end
+
+  it "has a .td short hand String method" do
+    mount 'Foo' do
+      class Foo
+        include React::Component
+        def render
+          table {
+            tbody {
+              tr { "hello".td }
+            }
+          }
+        end
+      end
+    end
+    expect(page.body[-90..-19]).to include('<table><tbody><tr><td>hello</td></tr></tbody></table>')
+  end
+
+  it "has a .para short hand String method" do
+    mount 'Foo' do
+      class Foo
+        include React::Component
+        def render
+          div { "hello".para }
+        end
+      end
+    end
+    expect(page.body[-60..-19]).to include('<div><p>hello</p></div>')
+  end
+
+  it 'can do a method call on a class name that is not a direct sibling' do
+    # this test is failing because Comp() is not serialized/compiled to a method call,
+    # but instead to a $scope.get("Comp"); which returns the Component Class Mod::Comp
+    # instead it sould serialize/compile to a $scope.$Comp();
+    # this is a bug in unparser, workaround is to pass a argument to comp
+    mount 'Mod::NestedMod::NestedComp' do
+      module Mod
+        class Comp
+          include React::Component
+          param :test
+          def render
+             "Mod::Comp"
+          end
+        end
+        module NestedMod
+          class NestedComp
+            include React::Component
+            def render
+              Comp(test: 'string')
+            end
+          end
+        end
+      end
+    end
+    expect(page.body[-60..-19]).to include('<span>Mod::Comp</span>')
+  end
+
+  it 'raises a meaningful error if a Constant Name is not actually a component' do
+    client_option raise_on_js_errors: :off
+    mount 'Mod::NestedMod::NestedComp' do
+      module Mod
+        module NestedMod
+          class NestedComp < React::Component::Base
+            backtrace :none
+            render do
+              Comp(test: 'string')
+            end
+          end
+        end
+        class Comp; end
+      end
+    end
+    expect(page.driver.browser.manage.logs.get(:browser).map { |m| m.message.gsub(/\\n/, "\n") }.to_a.join("\n"))
+          .to match(/Comp does not appear to be a react component./)
+  end
+
+  it 'raises a method missing error' do
+    client_option render_on: :both
+    client_option raise_on_js_errors: :off
+    expect_evaluate_ruby do
+      class Foo < React::Component::Base
+        backtrace :none
+        render do
+          _undefined_method
+        end
+      end
+      begin
+        React::Test::Utils.render_component_into_document(Foo)
+        'not raised'
+      rescue NoMethodError
+        'raised for sure!'
+      end
+    end.to eq('raised for sure!')
+      
+  end
+
+  it "will treat the component class name as a first class component name" do
+    mount 'Foo' do
+      module Mod
+        class Bar
+          include React::Component
+          def render
+            "a man walks into a bar"
+          end
+        end
+      end
+      class Foo < React::Component::Base
+        def render
+          Mod::Bar()
+        end
+      end
+    end
+    expect(page.body[-60..-19]).to include('<span>a man walks into a bar</span>')
+  end
+
+  it "can add class names by the haml .class notation" do
+    mount 'Foo' do
+      module Mod
+        class Bar
+          include React::Component
+          collect_other_params_as :attributes
+          def render
+            "a man walks into a bar".span(params.attributes)
+          end
+        end
+      end
+      class Foo < React::Component::Base
+        def render
+          Mod::Bar().the_class.other_class
+        end
+      end
+    end
+    expect(page.body[-90..-19]).to include('<span class="other-class the-class">a man walks into a bar</span>')
+  end
+
+  it "can use the 'class' keyword for classes" do
+    mount 'Foo' do
+      class Foo
+        include React::Component
+        def render
+          span(class: "the-class") { "hello" }
+        end
+      end
+    end
+    expect(page.body[-60..-19]).to include('<span class="the-class">hello</span>')
+  end
+
+  it "can generate a unrendered node using the .as_node method" do          # div { "hello" }.as_node
+    mount 'Foo' do
+      class Foo
+        include React::Component
+        def render
+          span(data: {size: 12}) { "hello".span.as_node.class.name }.as_node.render
+        end
+      end
+    end
+    expect(page.body[-80..-19]).to include('<span data-size="12">React::Element</span>')
+  end
+
+  it "can use the dangerously_set_inner_HTML param" do
+    mount 'Foo' do
+      class Foo
+        include React::Component
+        def render
+          div(dangerously_set_inner_HTML:  { __html: "Hello and Goodby" })
+        end
+      end
+    end
+    expect(page.body[-60..-19]).to include('<div>Hello and Goodby</div>')
+  end
+
+  it 'should convert a hash param to hyphenated html attributes if in React::HASH_ATTRIBUTES' do
+    mount 'Foo' do
+      class Foo
+        include React::Component
+        def render
+          div(data: { foo: :bar }, aria: { label: "title" })
+        end
+      end
+    end
+    expect(page.body[-70..-19]).to include('<div data-foo="bar" aria-label="title"></div>')
+  end
+
+  it 'should not convert a hash param to hyphenated html attributes if not in React::HASH_ATTRIBUTES' do
+    mount 'Foo' do
+      class Foo
+        include React::Component
+        def render
+          div(title: { bar: :foo })
+        end
+      end
+    end
+    expect(page.body[-80..-19]).to include('<div title="{&quot;bar&quot;=&gt;&quot;foo&quot;}"></div>')
+  end
+
+  it "will remove all elements passed as params from the rendering buffer" do
+    mount 'Foo' do
+      class X2
+        include React::Component
+        param :ele
+        def render
+          div do
+            params[:ele].render
+            params[:ele].render
+          end
+        end
+      end
+      class Foo
+        include React::Component
+        def render
+          X2(ele: b { "hello" })
+        end
+      end
+    end
+    expect(page.body[-60..-19]).to include('<div><b>hello</b><b>hello</b></div>')
+  end
+end

data/spec/react/element_spec.rb

@@ -0,0 +1,132 @@
+require "spec_helper"
+
+describe 'React::Element', js: true do
+  it 'bridges `type` of native React.Element attributes' do
+    expect_evaluate_ruby do
+      element = React.create_element('div')
+      element.element_type
+    end.to eq("div")
+  end
+
+  it 'is renderable' do
+    expect_evaluate_ruby do
+      element = React.create_element('span')
+      div = JS.call(:eval, 'document.createElement("div")')
+      React.render(element, div)
+      div.JS[:children].JS[0].JS[:tagName]
+    end.to eq("SPAN")
+  end
+
+  describe "Event Subscription" do
+    it "keeps the original params" do
+      client_option render_on: :both
+      mount 'Foo' do
+        class Foo
+          include React::Component
+          def render
+            INPUT(value: nil, type: 'text').on(:change) {}
+          end
+        end
+      end
+      expect(page.body[-80..-19]).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
+      evaluate_ruby do
+        class Foo < React::Component::Base
+          param :on_event, type: Proc, default: nil, allow_nil: true
+          def render
+            params.on_event
+          end
+        end
+        React::Test::Utils.render_into_document(React.create_element(Foo).on(:event) {'works!'})
+      end
+      expect(page.body[-50..-19]).to include('<span>works!</span>')
+    end
+
+    it 'will subscribe to multiple component event params' do
+      evaluate_ruby do
+        class Foo < React::Component::Base
+          param :on_event1, type: Proc, default: nil, allow_nil: true
+          param :on_event2, type: Proc, default: nil, allow_nil: true
+          def render
+            params.on_event1+params.on_event2
+          end
+        end
+        React::Test::Utils.render_into_document(React.create_element(Foo).on(:event1, :event2) {'works!'})
+      end
+      expect(page.body[-60..-19]).to include('<span>works!works!</span>')
+    end
+
+    it 'will subscribe to a native components event param' do
+      
+      evaluate_ruby do
+        "this makes sure everything is loaded"
+      end
+      page.execute_script('window.NativeComponent = class extends React.Component {
+        constructor(props) {
+          super(props);
+          this.displayName = "HelloMessage";
+        }
+        render() { return React.createElement("span", null, this.props.onEvent()); }
+      }')
+      evaluate_ruby do
+        class Foo < React::Component::Base
+          imports "NativeComponent"
+        end
+        React::Test::Utils.render_into_document(React.create_element(Foo).on(:event) {'works!'})
+        true
+      end
+      expect(page.body[-60..-19]).to include('<span>works!</span>')
+    end
+
+    it 'will subscribe to a component event param with a non-default name' do
+      
+      evaluate_ruby do
+        class Foo < React::Component::Base
+          param :my_event, type: Proc, default: nil, allow_nil: true
+          def render
+            params.my_event
+          end
+        end
+        React::Test::Utils.render_into_document(React.create_element(Foo).on("<my_event>") {'works!'})
+      end
+      expect(page.body[-60..-19]).to include('<span>works!</span>')
+    end
+  end
+
+  describe 'Builtin Event subscription' do
+    it 'is subscribable through `on(:event_name)` method' do
+      expect_evaluate_ruby do
+        element = React.create_element("div").on(:click) { |event| RESULT_C = 'clicked' if event.is_a? React::Event }
+        dom_node = React::Test::Utils.render_into_document(element)
+        React::Test::Utils.simulate_click(dom_node)
+        RESULT_C rescue 'not clicked'
+      end.to eq('clicked')
+
+      expect_evaluate_ruby do
+        element = React.create_element("div").on(:key_down) { |event| RESULT_P = 'pressed' if event.is_a? React::Event }
+        dom_node = React::Test::Utils.render_into_document(element)
+        React::Test::Utils.simulate_keydown(dom_node, "Enter")
+        RESULT_P rescue 'not pressed'
+      end.to eq('pressed')
+
+      expect_evaluate_ruby do
+        element = React.create_element("form").on(:submit) { |event| RESULT_S = 'submitted' if event.is_a? React::Event }
+        dom_node = React::Test::Utils.render_into_document(element)
+        React::Test::Utils.simulate_submit(dom_node)
+        RESULT_S rescue 'not submitted'
+      end.to eq('submitted')
+    end
+
+    it 'returns self for `on` method' do
+      expect_evaluate_ruby do
+        element = React.create_element("div")
+        element.on(:click){} == element
+      end.to be_truthy
+    end
+  end
+end