hyper-react 0.10.0

data/spec/react/native_library_spec.rb

@@ -0,0 +1,344 @@
+require 'spec_helper'
+require 'reactrb/auto-import'
+
+if opal?
+
+module NativeLibraryTestModule
+  class Component < React::Component::Base
+    param :time_stamp
+    backtrace :none
+    render { NativeComponent(name: "There - #{params.time_stamp}") }
+  end
+
+  class NestedComponent < React::Component::Base
+    param :time_stamp
+    backtrace :none
+    render { NativeLibrary::NativeNestedLibrary::NativeComponent(name: "There - #{params.time_stamp}") }
+  end
+end
+
+describe "React::NativeLibrary" do
+
+  after(:each) do
+    %x{
+      delete window.NativeLibrary;
+      delete window.NativeComponent;
+      delete window.nativeLibrary;
+      delete window.nativeComponent;
+      delete window.NativeObject;
+    }
+    Object.send :remove_const, :NativeLibrary
+    Object.send :remove_const, :NativeComponent
+  end
+
+  describe "functional stateless component (supported in reactjs v14+ only)" do
+    it "is not detected as native React.js component by `native_react_component?`", v13_only: true do
+      expect(React::API.native_react_component?(`function C(){ return null }`)).to be_falsy
+    end
+
+    it "is detected as native React.js component by `native_react_component?`", v13_exclude: true do
+      expect(React::API.native_react_component?(`function C(){ return null }`)).to be_truthy
+    end
+
+    it "imports a React.js functional stateless component", v13_exclude: true do
+      %x{
+        window.NativeLibrary = {
+          FunctionalComponent: function HelloMessage(props){
+            return React.createElement("div", null, "Hello ", props.name);
+          }
+        }
+      }
+      stub_const 'Foo', Class.new(React::Component::Base)
+      Foo.class_eval do
+        imports "NativeLibrary.FunctionalComponent"
+      end
+      expect(React.render_to_static_markup(
+        React.create_element(Foo, name: "There"))).to eq('<div>Hello There</div>')
+    end
+  end
+
+  it "can use native_react_component? to detect a native React.js component" do
+    %x{
+      window.NativeComponent = React.createClass({
+        displayName: "HelloMessage",
+        render: function render() {
+          return React.createElement("div", null, "Hello ", this.props.name);
+        }
+      })
+    }
+    expect(React::API.native_react_component?(`window.NativeComponent`)).to be_truthy
+    expect(React::API.native_react_component?(`{render: function render() {}}`)).to be_falsy
+    expect(React::API.native_react_component?(`window.DoesntExist`)).to be_falsy
+    expect(React::API.native_react_component?(``)).to be_falsy
+  end
+
+  it "will import a React.js library into the Ruby name space" do
+    %x{
+      window.NativeLibrary = {
+        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::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 = {
+        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"
+      rename "NativeComponent" => "Bar"
+    end
+    expect(React.render_to_static_markup(
+      React.create_element(Foo::Bar, name: "There"))).to eq('<div>Hello There</div>')
+  end
+
+  it "will give a reasonable error when failing to import a renamed component" do
+    %x{
+      window.NativeLibrary = {
+        NativeComponent: React.createClass({
+          displayName: "HelloMessage",
+          render: function render() {
+            return React.createElement("div", null, "Hello ", this.props.name);
+          }
+        })
+      }
+    }
+    stub_const 'Foo', Class.new(React::NativeLibrary)
+    expect do
+      Foo.class_eval do
+        imports "NativeLibrary"
+        rename "MispelledComponent" => "Bar"
+      end
+    end.to raise_error(/could not import MispelledComponent/)
+  end
+
+  it "will import a single React.js component into the ruby name space" do
+    %x{
+      window.NativeComponent = React.createClass({
+        displayName: "HelloMessage",
+        render: function render() {
+          return React.createElement("div", null, "Hello ", this.props.name);
+        }
+      })
+    }
+    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, name: "There"))).to eq('<div>Hello There</div>')
+
+  end
+
+  it "will import a name scoped React.js component into the ruby name space" do
+    %x{
+      window.NativeLibrary = {
+        NativeComponent: React.createClass({
+          displayName: "HelloMessage",
+          render: function render() {
+            return React.createElement("div", null, "Hello ", this.props.name);
+          }
+        })
+      }
+    }
+    stub_const 'Foo', Class.new(React::Component::Base)
+    Foo.class_eval do
+      imports "NativeLibrary.NativeComponent"
+    end
+    expect(React.render_to_static_markup(
+      React.create_element(Foo, name: "There"))).to eq('<div>Hello There</div>')
+
+  end
+
+  it "will give a meaningful error if the React.js component is invalid" do
+    %x{
+      window.NativeObject = {}
+    }
+    stub_const 'Foo', Class.new(React::Component::Base)
+    expect do
+      Foo.class_eval do
+        imports "NativeObject"
+      end
+    end.to raise_error("Foo cannot import 'NativeObject': does not appear to be a native react component.")
+    expect do
+      Foo.class_eval do
+        imports "window.Baz"
+      end
+    end.to raise_error(/^Foo cannot import \'window\.Baz\'\: (?!does not appear to be a native react component)..*$/)
+  end
+
+  context "automatic importing" do
+
+    it "will automatically import a React.js component when referenced in another component" do
+      %x{
+        window.NativeComponent = React.createClass({
+          displayName: "HelloMessage",
+          render: function render() {
+            return React.createElement("div", null, "Hello ", this.props.name);
+          }
+        })
+      }
+      expect(React.render_to_static_markup(
+        React.create_element(NativeLibraryTestModule::Component, time_stamp: Time.now))).to match(/<div>Hello There.*<\/div>/)
+    end
+
+    it "will automatically import a React.js component when referenced in another component" do
+      stub_const 'Foo', Class.new(React::Component::Base)
+      Foo.class_eval do
+        render { NativeComponent(name: "There") }
+      end
+      %x{
+        window.NativeComponent = React.createClass({
+          displayName: "HelloMessage",
+          render: function render() {
+            return React.createElement("div", null, "Hello ", this.props.name);
+          }
+        })
+      }
+      expect(React.render_to_static_markup(
+        React.create_element(Foo))).to eq('<div>Hello There</div>')
+    end
+
+    it 'will automatically import a React.js component when referenced in another component with the _as_node suffix' do
+      stub_const 'Foo', Class.new(React::Component::Base)
+      Foo.class_eval do
+        render(:div) do
+          e = React::Element.new(NativeComponent_as_node(name: 'There'))
+          2.times { e.render }
+        end
+      end
+      %x{
+        window.NativeComponent = React.createClass({
+          displayName: "HelloMessage",
+          render: function render() {
+            return React.createElement("div", null, "Hello ", this.props.name);
+          }
+        })
+      }
+      expect(React.render_to_static_markup(
+        React.create_element(Foo))).to eq('<div><div>Hello There</div><div>Hello There</div></div>')
+    end
+
+    it "will automatically import a React.js component in a library when referenced in another component with the _as_node suffix" do
+      stub_const 'Foo', Class.new(React::Component::Base)
+      Foo.class_eval do
+        render(:div) do
+          e = React::Element.new(NativeLibrary::NativeComponent_as_node(name: 'There'))
+          2.times { e.render }
+        end
+      end
+      %x{
+        window.NativeLibrary = {
+          NativeComponent: React.createClass({
+            displayName: "HelloMessage",
+            render: function render() {
+              return React.createElement("div", null, "Hello ", this.props.name);
+            }
+          })
+        }
+      }
+      expect(React.render_to_static_markup(
+        React.create_element(Foo))).to eq('<div><div>Hello There</div><div>Hello There</div></div>')
+    end
+
+    it "will automatically import a React.js component when referenced as a constant" do
+      %x{
+        window.NativeComponent = React.createClass({
+          displayName: "HelloMessage",
+          render: function render() {
+            return React.createElement("div", null, "Hello ", this.props.name);
+          }
+        })
+      }
+      expect(React.render_to_static_markup(
+        React.create_element(NativeComponent, name: "There"))).to eq('<div>Hello There</div>')
+    end
+
+    it "will automatically import a native library containing a React.js component" do
+      %x{
+        window.NativeLibrary = {
+          NativeNestedLibrary: {
+            NativeComponent: React.createClass({
+              displayName: "HelloMessage",
+              render: function render() {
+                return React.createElement("div", null, "Hello ", this.props.name);
+              }
+            })
+          }
+        }
+      }
+
+      expect(React.render_to_static_markup(
+        React.create_element(NativeLibraryTestModule::NestedComponent, time_stamp: Time.now))).to match(/<div>Hello There.*<\/div>/)
+    end
+
+    it "the library and components can begin with lower case letters" do
+      %x{
+        window.nativeLibrary = {
+          nativeComponent: React.createClass({
+            displayName: "HelloMessage",
+            render: function render() {
+              return React.createElement("div", null, "Hello ", this.props.name);
+            }
+          })
+        }
+      }
+      expect(React.render_to_static_markup(
+        React.create_element(NativeLibrary::NativeComponent, name: "There"))).to eq('<div>Hello There</div>')
+    end
+
+    it "will produce a sensible error if the component is not in the library" do
+      %x{
+        window.NativeLibrary = {
+          NativeNestedLibrary: {
+          }
+        }
+      }
+      expect do
+        React.render_to_static_markup(React.create_element(NativeLibraryTestModule::NestedComponent, time_stamp: Time.now))
+      end.to raise_error("could not import a react component named: NativeLibrary.NativeNestedLibrary.NativeComponent")
+
+    end
+
+  end
+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/opal_jquery_extensions_spec.rb

@@ -0,0 +1,66 @@
+require 'spec_helper'
+
+if opal?
+describe 'Element' do
+  after(:each) 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
+      param :name
+      def render
+        "hello #{params.name}"
+      end
+    end
+    test_div = Element.new(:div)
+    test_div.render { Foo(name: 'fred') }
+    expect(Element[test_div].find('span').html).to eq('hello fred')
+  end
+
+  it 'renders a top level component using render with a container and params ' do
+    test_div = Element.new(:div)
+    test_div.render(:span, id: :render_test_span) { 'hello' }
+    expect(Element[test_div].find('#render_test_span').html).to eq('hello')
+  end
+
+  it 'will find the DOM node given a react element' do
+    stub_const 'Foo', Class.new(React::Component::Base)
+    Foo.class_eval do
+      def render
+        div { 'hello' }
+      end
+    end
+
+    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

@@ -0,0 +1,258 @@
+require 'spec_helper'
+
+if opal?
+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
+      collect_other_params_as :foo
+
+      def render
+        div { params.foo[:bar] }
+      end
+    end
+
+    expect(Foo).to render('<div>biz</div>').with_params(bar: 'biz')
+  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(Foo).to render('<div>bar</div>').with_params(foo: :bar)
+  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(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
+    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(Foo).to render('<div>12-string</div>').with_params(foo1: 12, foo2: "string")
+  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[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
+    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[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
+      Foo.class_eval do
+        param :foo, type: [String]
+        param :bar, type: [String]
+      end
+      renderToDocument(Foo, foo: [10], bar: ["10"])
+      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
+      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
+
+      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
+          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
+        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
+      Foo.class_eval do
+        param :foo, type: Proc
+        def render
+          params.foo
+        end
+      end
+      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
+      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(Foo).to render('<span>ha!</span>').with_params(foo: observer)
+      expect(current_state).to eq("ha!")
+    end
+  end
+end
+end