hyper-react 0.10.0

data/spec/react/dsl_spec.rb

@@ -0,0 +1,296 @@
+require 'spec_helper'
+
+if opal?
+describe 'the React DSL' do
+
+  context "render macro" do
+
+    it "can define the render method with the render macro with a html tag container" do
+      stub_const 'Foo', Class.new
+      Foo.class_eval do
+        include React::Component
+        render(:div, class: :foo) do
+          "hello"
+        end
+      end
+
+      expect(React.render_to_static_markup(React.create_element(Foo))).to eq('<div class="foo">hello</div>')
+    end
+
+    it "can define the render method with the render macro without a container" do
+      stub_const 'Foo', Class.new
+      Foo.class_eval do
+        include React::Component
+        render do
+          "hello"
+        end
+      end
+
+      expect(React.render_to_static_markup(React.create_element(Foo))).to eq('<span>hello</span>')
+    end
+
+    it "can define the render method with the render macro with a application defined container" do
+      stub_const 'Bar', Class.new(React::Component::Base)
+      Bar.class_eval do
+        param :p1
+        render { "hello #{params.p1}" }
+      end
+      stub_const 'Foo', Class.new(React::Component::Base)
+      Foo.class_eval do
+        render Bar, p1: "fred"
+      end
+
+      expect(React.render_to_static_markup(React.create_element(Foo))).to eq('<span>hello fred</span>')
+    end
+  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" }
+      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" }
+      end
+    end
+
+    expect(React.render_to_static_markup(React.create_element(Foo))).to eq('<div>hello</div>')
+  end
+
+  it "has a .span short hand String method" do
+    stub_const 'Foo', Class.new
+    Foo.class_eval do
+      include React::Component
+      def render
+        div { "hello".span; "goodby".span }
+      end
+    end
+
+    expect(React.render_to_static_markup(React.create_element(Foo))).to eq('<div><span>hello</span><span>goodby</span></div>')
+  end
+
+  it "has a .br short hand String method" do
+    stub_const 'Foo', Class.new
+    Foo.class_eval do
+      include React::Component
+      def render
+        div { "hello".br }
+      end
+    end
+
+    expect(React.render_to_static_markup(React.create_element(Foo)).gsub("<br/>", "<br>")).to eq('<div><span>hello<br></span></div>')
+  end
+
+  it "has a .td short hand String method" do
+    stub_const 'Foo', Class.new
+    Foo.class_eval do
+      include React::Component
+      def render
+        table { tr { "hello".td } }
+      end
+    end
+
+    expect(React.render_to_static_markup(React.create_element(Foo))).to eq('<table><tr><td>hello</td></tr></table>')
+  end
+
+  it "has a .para short hand String method" do
+    stub_const 'Foo', Class.new
+    Foo.class_eval do
+      include React::Component
+      def render
+        div { "hello".para }
+      end
+    end
+
+    expect(React.render_to_static_markup(React.create_element(Foo))).to eq('<div><p>hello</p></div>')
+  end
+
+  it 'can do a method call on a class name that is not a direct sibling' do
+    stub_const 'Mod', Module.new
+    stub_const 'Mod::NestedMod', Module.new
+    stub_const 'Mod::Comp', Class.new(React::Component::Base)
+    Mod::Comp.class_eval do
+      render { 'Mod::Comp' }
+    end
+    stub_const 'Mod::NestedMod::NestedComp', Class.new(React::Component::Base)
+    Mod::NestedMod::NestedComp.class_eval do
+      render do
+        Comp()
+      end
+    end
+    expect(React.render_to_static_markup(React.create_element(Mod::NestedMod::NestedComp)))
+      .to eq('<span>Mod::Comp</span>')
+  end
+
+  it 'raises a meaningful error if a Constant Name is not actually a component' do
+    stub_const 'Mod', Module.new
+    stub_const 'Mod::NestedMod', Module.new
+    stub_const 'Mod::Comp', Class.new
+    stub_const 'Mod::NestedMod::NestedComp', Class.new(React::Component::Base)
+    Mod::NestedMod::NestedComp.class_eval do
+      backtrace :none
+      render do
+        Comp()
+      end
+    end
+    expect { React.render_to_static_markup(React.create_element(Mod::NestedMod::NestedComp)) }
+      .to raise_error('Comp does not appear to be a react component.')
+  end
+
+  it 'raises a method missing error' do
+    stub_const 'Foo', Class.new(React::Component::Base)
+    Foo.class_eval do
+      backtrace :none
+      render do
+        _undefined_method
+      end
+    end
+    expect { React.render_to_static_markup(React.create_element(Foo)) }
+      .to raise_error(NoMethodError)
+  end
+
+  it "will treat the component class name as a first class component name" do
+    stub_const 'Mod::Bar', Class.new
+    Mod::Bar.class_eval do
+      include React::Component
+      def render
+        "a man walks into a bar"
+      end
+    end
+    stub_const 'Foo', Class.new(React::Component::Base)
+    Foo.class_eval do
+      def render
+        Mod::Bar()
+      end
+    end
+
+    expect(React.render_to_static_markup(React.create_element(Foo))).to eq('<span>a man walks into a bar</span>')
+  end
+
+  it "can add class names by the haml .class notation" 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(params.attributes)
+      end
+    end
+    stub_const 'Foo', Class.new(React::Component::Base)
+    Foo.class_eval do
+      def render
+        Mod::Bar().the_class.other_class
+      end
+    end
+
+    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
+    stub_const 'Foo', Class.new
+    Foo.class_eval do
+      include React::Component
+      def render
+        span(class: "the-class") { "hello" }
+      end
+    end
+
+    expect(React.render_to_static_markup(React.create_element(Foo))).to eq('<span class="the-class">hello</span>')
+  end
+
+  it "can generate a unrendered node using the .as_node method" do          # div { "hello" }.as_node
+    stub_const 'Foo', Class.new #(React::Component::Base)
+    Foo.class_eval do
+      include React::Component
+      def 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 data-size="12">React::Element</span>')
+  end
+
+  it "can use the dangerously_set_inner_HTML param" do
+    stub_const 'Foo', Class.new
+    Foo.class_eval do
+      include React::Component
+      def render
+        div(dangerously_set_inner_HTML:  { __html: "Hello&nbsp;&nbsp;Goodby" })
+      end
+    end
+
+    expect(React.render_to_static_markup(React.create_element(Foo))).to eq('<div>Hello&nbsp;&nbsp;Goodby</div>')
+  end
+
+  it 'should convert a hash param to hyphenated html attributes if in React::HASH_ATTRIBUTES' do
+    stub_const 'Foo', Class.new
+    Foo.class_eval do
+      include React::Component
+      def render
+        div(data: { foo: :bar }, aria: { foo_bar: :foo })
+      end
+    end
+
+    expect(React.render_to_static_markup(React.create_element(Foo)))
+      .to eq('<div data-foo="bar" aria-foo-bar="foo"></div>')
+  end
+
+  it 'should not convert a hash param to hyphenated html attributes if not in React::HASH_ATTRIBUTES' do
+    stub_const 'Foo', Class.new
+    Foo.class_eval do
+      include React::Component
+      def render
+        div(title: { bar: :foo })
+      end
+    end
+
+    expect(React.render_to_static_markup(React.create_element(Foo)))
+      .to eq('<div title="{&quot;bar&quot;=&gt;&quot;foo&quot;}"></div>')
+  end
+
+  it "will remove all elements passed as params from the rendering buffer" do
+    stub_const 'X2', Class.new
+    X2.class_eval do
+      include React::Component
+      def render
+        div do
+          params[:ele].render
+          params[:ele].render
+        end
+      end
+    end
+    stub_const 'Test', Class.new
+    Test.class_eval do
+      include React::Component
+      def render
+        X2(ele: b { "hello" })
+      end
+    end
+
+    expect(React.render_to_static_markup(React.create_element(Test))).to eq('<div><b>hello</b><b>hello</b></div>')
+  end
+end
+end

data/spec/react/element_spec.rb

@@ -0,0 +1,136 @@
+require "spec_helper"
+
+if opal?
+# require 'reactrb/new-event-name-convention' # this require will get rid of any error messages but
+# the on method will no longer attach to the param prefixed with _on
+describe React::Element do
+  it 'bridges `type` of native React.Element attributes' do
+    element = React.create_element('div')
+    expect(element.element_type).to eq("div")
+  end
+
+  async 'is renderable' do
+    element = React.create_element('span')
+    div = `document.createElement("div")`
+    React.render(element, div) do
+      run_async {
+        expect(`div.children[0].tagName`).to eq("SPAN")
+      }
+    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
+      stub_const 'Foo', Class.new(React::Component::Base)
+      Foo.class_eval do
+        param :on_event, type: Proc, default: nil, allow_nil: true
+        def render
+          params.on_event
+        end
+      end
+      expect(React.render_to_static_markup(React.create_element(Foo).on(:event) {'works!'})).to eq('<span>works!</span>')
+    end
+
+    it 'will subscribe to multiple component event params' do
+      stub_const 'Foo', Class.new(React::Component::Base)
+      Foo.class_eval do
+        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
+      expect(React.render_to_static_markup(React.create_element(Foo).on(:event1, :event2) {'works!'})).to eq('<span>works!works!</span>')
+    end
+
+    it 'will subscribe to a native components event param' do
+      %x{
+        window.NativeComponent = React.createClass({
+          displayName: "HelloMessage",
+          render: function render() {
+            return React.createElement("span", null, this.props.onEvent());
+          }
+        })
+      }
+      stub_const 'Foo', Class.new(React::Component::Base)
+      Foo.class_eval do
+        imports "NativeComponent"
+      end
+      expect(React.render_to_static_markup(React.create_element(Foo).on(:event) {'works!'})).to eq('<span>works!</span>')
+    end
+
+    it 'will subscribe to a component event param with a non-default name' do
+      stub_const 'Foo', Class.new(React::Component::Base)
+      Foo.class_eval do
+        param :my_event, type: Proc, default: nil, allow_nil: true
+        def render
+          params.my_event
+        end
+      end
+      expect(React.render_to_static_markup(React.create_element(Foo).on("<my_event>") {'works!'})).to eq('<span>works!</span>')
+    end
+
+    it 'will subscribe to a component event param using the deprecated naming convention and generate a message' do
+      stub_const 'Foo', Class.new(React::Component::Base)
+      Foo.class_eval do
+        param :_onEvent, type: Proc, default: nil, allow_nil: true
+        def render
+          params._onEvent
+        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)}
+      }
+      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[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
+
+  describe 'Builtin Event subscription' do
+    it 'is subscribable through `on(:event_name)` method' do
+      expect { |b|
+        element = React.create_element("div").on(:click, &b)
+        instance = renderElementToDocument(element)
+        simulateEvent(:click, instance)
+      }.to yield_with_args(React::Event)
+
+      expect { |b|
+        element = React.create_element("div").on(:key_down, &b)
+        instance = renderElementToDocument(element)
+        simulateEvent(:keyDown, instance, {key: "Enter"})
+      }.to yield_control
+
+      expect { |b|
+        element = React.create_element("form").on(:submit, &b)
+        instance = renderElementToDocument(element)
+        simulateEvent(:submit, instance, {})
+      }.to yield_control
+    end
+
+    it 'returns self for `on` method' do
+      element = React.create_element("div")
+      expect(element.on(:click){}).to eq(element)
+    end
+  end
+end
+end

data/spec/react/event_spec.rb

@@ -0,0 +1,24 @@
+require "spec_helper"
+
+if opal?
+describe React::Event do
+  it "should bridge attributes of native SyntheticEvent (see http://facebook.github.io/react/docs/events.html#syntheticevent)" do
+    element = React.create_element('div').on(:click) do |event|
+      expect(event.bubbles).to eq(`#{event.to_n}.bubbles`)
+      expect(event.cancelable).to eq(`#{event.to_n}.cancelable`)
+      expect(event.current_target).to eq(`#{event.to_n}.currentTarget`)
+      expect(event.default_prevented).to eq(`#{event.to_n}.defaultPrevented`)
+      expect(event.event_phase).to eq(`#{event.to_n}.eventPhase`)
+      expect(event.is_trusted?).to eq(`#{event.to_n}.isTrusted`)
+      expect(event.native_event).to eq(`#{event.to_n}.nativeEvent`)
+      expect(event.target).to eq(`#{event.to_n}.target`)
+      expect(event.timestamp).to eq(`#{event.to_n}.timeStamp`)
+      expect(event.event_type).to eq(`#{event.to_n}.type`)
+      expect(event).to respond_to(:prevent_default)
+      expect(event).to respond_to(:stop_propagation)
+    end
+    instance = renderElementToDocument(element)
+    simulateEvent(:click, instance)
+  end
+end
+end