reactrb 0.7.42

data/spec/react/dsl_spec.rb

@@ -0,0 +1,161 @@
+require 'spec_helper'
+
+if opal?
+describe 'the React DSL' 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" }
+      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 "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(React::Component::Base)
+    Mod::Bar.class_eval do
+      collect_other_params_as :attributes
+      def render
+        "a man walks into a bar".span(attributes)
+      end
+    end
+    stub_const 'Foo', Class.new(React::Component::Base)
+    Foo.class_eval do
+      def render
+        Mod::Bar().the_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>')
+  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 { "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>')
+  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 "will remove all elements passed as params from the rendering buffer" do
+    stub_const 'X2', Class.new
+    X2.class_eval do
+      include React::Component
+      param :ele
+      def render
+        div do
+          ele.render
+          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,47 @@
+require "spec_helper"
+
+if opal?
+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 '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

data/spec/react/native_library_spec.rb

@@ -0,0 +1,10 @@
+require 'spec_helper'
+
+if opal?
+describe React::NativeLibrary do
+  it "will import a React.js library into the Ruby name space"              # class BS < NativeLibrary; imports 'ReactBootstrap'; end
+  it "exclude specific components from a library"                           # exclude "Modal" # can't access BS.Modal
+  it "rename specific components from a library"                            # rename "Modal" => "FooBar"  # BS.FooBar connects to ReactBootstrap.Modal
+  it "can importan multiple libraries into one class"                       
+end
+end

data/spec/react/observable_spec.rb

@@ -0,0 +1,7 @@
+require 'spec_helper'
+
+if opal?
+describe 'React::Observable' do
+  # tbd
+end
+end

data/spec/react/param_declaration_spec.rb

@@ -0,0 +1,286 @@
+require 'spec_helper'
+
+if opal?
+describe 'the param macro' do
+  it 'defines collect_other_params_as method on params proxy' do
+    stub_const 'Foo', Class.new(React::Component::Base)
+    Foo.class_eval do
+      collect_other_params_as :foo
+
+      def render
+        div { params.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 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>')
+  end
+
+  it "can create and access a required param" do
+    stub_const 'Foo', Class.new(React::Component::Base)
+    Foo.class_eval do
+      param :foo
+
+      def render
+        div { params.foo }
+      end
+    end
+
+    expect(React.render_to_static_markup(React.create_element(Foo, {foo: :bar}))).to eq('<div>bar</div>')
+  end
+
+  it "can create and access an optional params" do
+    stub_const 'Foo', Class.new(React::Component::Base)
+    Foo.class_eval do
+
+      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
+
+    expect(React.render_to_static_markup(React.create_element(Foo, {foo1: :bar1, foo3: :bar3}))).to eq('<div>bar1-no_bar2-bar3-no_bar4</div>')
+  end
+
+  it 'can specify validation rules with the type option' do
+    stub_const 'Foo', Class.new(React::Component::Base)
+    Foo.class_eval do
+      param :foo, type: String
+    end
+
+    expect(Foo.prop_types).to have_key(:_componentValidator)
+  end
+
+  it "can type check params" do
+    stub_const 'Foo', Class.new(React::Component::Base)
+    Foo.class_eval do
+
+      param :foo1, type: String
+      param :foo2, type: String
+
+      def render
+        div { "#{params.foo1}-#{params.foo2}" }
+      end
+    end
+
+    expect(React.render_to_static_markup(React.create_element(Foo, {foo1: 12, foo2: "string"}))).to eq('<div>12-string</div>')
+  end
+
+  it 'logs error in warning if validation failed' do
+    stub_const 'Lorem', Class.new
+    stub_const 'Foo2', Class.new(React::Component::Base)
+    Foo2.class_eval do
+      param :foo
+      param :lorem, type: Lorem
+      param :bar, default: nil, type: String
+      def render; div; 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)}
+    }
+    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"])
+  end
+
+  it 'should not log anything if validation passes' do
+    stub_const 'Lorem', Class.new
+    stub_const 'Foo', Class.new(React::Component::Base)
+    Foo.class_eval do
+      param :foo
+      param :lorem, type: Lorem
+      param :bar, default: nil, type: String
+
+      def render; div; 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)}
+    }
+    renderToDocument(Foo, foo: 10, bar: '10', lorem: Lorem.new)
+    `window.console.warn = org_warn_console; window.console.error = org_error_console;`
+    expect(`log`).to eq([])
+  end
+
+  describe 'advanced type handling' do
+    before(:each) do
+      %x{
+        window.dummy_log = [];
+        window.org_warn_console = window.console.warn;
+        window.org_error_console = window.console.warn
+        window.console.warn = window.console.error = function(str){window.dummy_log.push(str)}
+      }
+      stub_const 'Foo', Class.new(React::Component::Base)
+      Foo.class_eval { def render; ""; end }
+    end
+    after(:each) do
+      `window.console.warn = window.org_warn_console; window.console.error = window.org_error_console`
+    end
+
+    it "can use the [] notation for arrays" do
+      Foo.class_eval do
+        param :foo, type: []
+        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"])
+    end
+
+    it "can use the [xxx] notation for arrays of a specific type" do
+      Foo.class_eval do
+        param :foo, type: [String]
+        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"])
+    end
+
+    it "can convert a json hash to a type" do
+      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[: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
+      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"])
+    end
+
+    describe "converts params only once" do
+
+      it "not on every access" do
+        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[: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
+        expect(React.render_to_static_markup(React.create_element(Foo, foo: {bazwoggle: 1}))).to eq('<span>2</span>')
+      end
+
+      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
+            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
+      Foo.class_eval do
+        param :foo, type: Proc
+        def render
+          params.foo
+        end
+      end
+      expect(React.render_to_static_markup(React.create_element(Foo, foo: lambda { 'works!' }))).to eq('<span>works!</span>')
+    end
+
+    it "will create a 'bang' (i.e. update) method if the type is React::Observable" 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 }
+      expect(React.render_to_static_markup(React.create_element(Foo, foo: observer))).to eq('<span>ha!</span>')
+      expect(current_state).to eq("ha!")
+    end
+  end
+end
+end