hyper-react 0.10.0 → 0.11.0

data/spec/react/dsl_spec.rb

@@ -1,7 +1,7 @@
 require 'spec_helper'
 
 if opal?
-describe 'the React DSL' do
+describe 'the React DSL', type: :component do
 
   context "render macro" do
 
@@ -14,7 +14,7 @@ describe 'the React DSL' do
         end
       end
 
-      expect(React.render_to_static_markup(React.create_element(Foo))).to eq('<div class="foo">hello</div>')
+      expect(Foo).to render_static_html('<div class="foo">hello</div>')
     end
 
     it "can define the render method with the render macro without a container" do
@@ -26,7 +26,7 @@ describe 'the React DSL' do
         end
       end
 
-      expect(React.render_to_static_markup(React.create_element(Foo))).to eq('<span>hello</span>')
+      expect(Foo).to render_static_html('<span>hello</span>')
     end
 
     it "can define the render method with the render macro with a application defined container" do
@@ -40,7 +40,7 @@ describe 'the React DSL' do
         render Bar, p1: "fred"
       end
 
-      expect(React.render_to_static_markup(React.create_element(Foo))).to eq('<span>hello fred</span>')
+      expect(Foo).to render_static_html('<span>hello fred</span>')
     end
   end
 
@@ -53,7 +53,7 @@ describe 'the React DSL' do
       end
     end
 
-    expect(React.render_to_static_markup(React.create_element(Foo))).to eq('<div>hello</div>')
+    expect(Foo).to render_static_html('<div>hello</div>')
   end
 
   it "will pass converted props through event handlers" do
@@ -77,7 +77,7 @@ describe 'the React DSL' do
       end
     end
 
-    expect(React.render_to_static_markup(React.create_element(Foo))).to eq('<div>hello</div>')
+    expect(Foo).to render_static_html('<div>hello</div>')
   end
 
   it "has a .span short hand String method" do
@@ -89,7 +89,7 @@ describe 'the React DSL' do
       end
     end
 
-    expect(React.render_to_static_markup(React.create_element(Foo))).to eq('<div><span>hello</span><span>goodby</span></div>')
+    expect(Foo).to render_static_html('<div><span>hello</span><span>goodby</span></div>')
   end
 
   it "has a .br short hand String method" do
@@ -113,7 +113,7 @@ describe 'the React DSL' do
       end
     end
 
-    expect(React.render_to_static_markup(React.create_element(Foo))).to eq('<table><tr><td>hello</td></tr></table>')
+    expect(Foo).to render_static_html('<table><tr><td>hello</td></tr></table>')
   end
 
   it "has a .para short hand String method" do
@@ -125,7 +125,7 @@ describe 'the React DSL' do
       end
     end
 
-    expect(React.render_to_static_markup(React.create_element(Foo))).to eq('<div><p>hello</p></div>')
+    expect(Foo).to render_static_html('<div><p>hello</p></div>')
   end
 
   it 'can do a method call on a class name that is not a direct sibling' do
@@ -141,8 +141,8 @@ describe 'the React DSL' do
         Comp()
       end
     end
-    expect(React.render_to_static_markup(React.create_element(Mod::NestedMod::NestedComp)))
-      .to eq('<span>Mod::Comp</span>')
+    expect(Mod::NestedMod::NestedComp)
+      .to render_static_html('<span>Mod::Comp</span>')
   end
 
   it 'raises a meaningful error if a Constant Name is not actually a component' do
@@ -187,7 +187,7 @@ describe 'the React DSL' do
       end
     end
 
-    expect(React.render_to_static_markup(React.create_element(Foo))).to eq('<span>a man walks into a bar</span>')
+    expect(Foo).to render_static_html('<span>a man walks into a bar</span>')
   end
 
   it "can add class names by the haml .class notation" do
@@ -206,7 +206,7 @@ describe 'the React DSL' do
       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>')
+    expect(Foo).to render_static_html('<span class="other-class the-class">a man walks into a bar</span>')
   end
 
   it "can use the 'class' keyword for classes" do
@@ -218,7 +218,7 @@ describe 'the React DSL' do
       end
     end
 
-    expect(React.render_to_static_markup(React.create_element(Foo))).to eq('<span class="the-class">hello</span>')
+    expect(Foo).to render_static_html('<span class="the-class">hello</span>')
   end
 
   it "can generate a unrendered node using the .as_node method" do          # div { "hello" }.as_node
@@ -230,7 +230,8 @@ describe 'the React DSL' do
       end
     end
 
-    expect(React.render_to_static_markup(React.create_element(Foo))).to eq('<span data-size="12">React::Element</span>')
+    expect(Foo)
+    .to render_static_html('<span data-size="12">React::Element</span>')
   end
 
   it "can use the dangerously_set_inner_HTML param" do
@@ -242,7 +243,7 @@ describe 'the React DSL' do
       end
     end
 
-    expect(React.render_to_static_markup(React.create_element(Foo))).to eq('<div>Hello&nbsp;&nbsp;Goodby</div>')
+    expect(Foo).to render_static_html('<div>Hello&nbsp;&nbsp;Goodby</div>')
   end
 
   it 'should convert a hash param to hyphenated html attributes if in React::HASH_ATTRIBUTES' do
@@ -254,8 +255,8 @@ describe 'the React DSL' do
       end
     end
 
-    expect(React.render_to_static_markup(React.create_element(Foo)))
-      .to eq('<div data-foo="bar" aria-foo-bar="foo"></div>')
+    expect(Foo)
+      .to render_static_html('<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
@@ -267,8 +268,10 @@ describe 'the React DSL' do
       end
     end
 
-    expect(React.render_to_static_markup(React.create_element(Foo)))
-      .to eq('<div title="{&quot;bar&quot;=&gt;&quot;foo&quot;}"></div>')
+    expect(Foo)
+      .to render_static_html(
+        '<div title="{&quot;bar&quot;=&gt;&quot;foo&quot;}"></div>'
+      )
   end
 
   it "will remove all elements passed as params from the rendering buffer" do
@@ -290,7 +293,7 @@ describe 'the React DSL' do
       end
     end
 
-    expect(React.render_to_static_markup(React.create_element(Test))).to eq('<div><b>hello</b><b>hello</b></div>')
+    expect(Test).to render_static_html('<div><b>hello</b><b>hello</b></div>')
   end
 end
 end

data/spec/react/element_spec.rb

@@ -3,7 +3,7 @@ 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
+describe React::Element, type: :component do
   it 'bridges `type` of native React.Element attributes' do
     element = React.create_element('div')
     expect(element.element_type).to eq("div")
@@ -110,20 +110,20 @@ describe React::Element 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)
+        dom_node = React::Test::Utils.render_into_document(element)
+        React::Test::Utils.simulate(:click, dom_node)
       }.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"})
+        dom_node = React::Test::Utils.render_into_document(element)
+        React::Test::Utils.simulate(:keyDown, dom_node, {key: "Enter"})
       }.to yield_control
 
       expect { |b|
         element = React.create_element("form").on(:submit, &b)
-        instance = renderElementToDocument(element)
-        simulateEvent(:submit, instance, {})
+        dom_node = React::Test::Utils.render_into_document(element)
+        React::Test::Utils.simulate(:submit, dom_node)
       }.to yield_control
     end
 

data/spec/react/event_spec.rb

@@ -17,8 +17,8 @@ describe React::Event do
       expect(event).to respond_to(:prevent_default)
       expect(event).to respond_to(:stop_propagation)
     end
-    instance = renderElementToDocument(element)
-    simulateEvent(:click, instance)
+    dom_node = React::Test::Utils.render_into_document(element)
+    React::Test::Utils.simulate(:click, dom_node)
   end
 end
 end

data/spec/react/native_library_spec.rb

@@ -17,7 +17,7 @@ module NativeLibraryTestModule
   end
 end
 
-describe "React::NativeLibrary" do
+describe "React::NativeLibrary", type: :component do
 
   after(:each) do
     %x{
@@ -52,8 +52,7 @@ describe "React::NativeLibrary" do
       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>')
+      expect(Foo).to render_static_html('<div>Hello There</div>').with_params(name: "There")
     end
   end
 
@@ -69,7 +68,7 @@ describe "React::NativeLibrary" do
     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
+    expect(React::API.native_react_component?()).to be_falsy
   end
 
   it "will import a React.js library into the Ruby name space" do
@@ -87,8 +86,8 @@ describe "React::NativeLibrary" do
     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>')
+    expect(Foo::NativeComponent)
+      .to render_static_html('<div>Hello There</div>').with_params(name: "There")
   end
 
   it "will import a nested React.js library into the Ruby name space" do
@@ -107,8 +106,8 @@ describe "React::NativeLibrary" do
     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>')
+    expect(Foo::NestedLibrary::NativeComponent)
+      .to render_static_html('<div>Hello There</div>').with_params(name: "There")
   end
 
   it "will rename an imported a React.js component" do
@@ -127,8 +126,8 @@ describe "React::NativeLibrary" 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>')
+    expect(Foo::Bar)
+      .to render_static_html('<div>Hello There</div>').with_params(name: "There")
   end
 
   it "will give a reasonable error when failing to import a renamed component" do
@@ -164,8 +163,8 @@ describe "React::NativeLibrary" do
     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>')
+    expect(Foo)
+      .to render_static_html('<div>Hello There</div>').with_params(name: "There")
 
   end
 
@@ -184,8 +183,8 @@ describe "React::NativeLibrary" do
     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>')
+    expect(Foo)
+      .to render_static_html('<div>Hello There</div>').with_params(name: "There")
 
   end
 
@@ -234,8 +233,7 @@ describe "React::NativeLibrary" do
           }
         })
       }
-      expect(React.render_to_static_markup(
-        React.create_element(Foo))).to eq('<div>Hello There</div>')
+      expect(Foo).to render_static_html('<div>Hello There</div>')
     end
 
     it 'will automatically import a React.js component when referenced in another component with the _as_node suffix' do
@@ -254,8 +252,7 @@ describe "React::NativeLibrary" do
           }
         })
       }
-      expect(React.render_to_static_markup(
-        React.create_element(Foo))).to eq('<div><div>Hello There</div><div>Hello There</div></div>')
+      expect(Foo).to render_static_html('<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
@@ -276,8 +273,7 @@ describe "React::NativeLibrary" do
           })
         }
       }
-      expect(React.render_to_static_markup(
-        React.create_element(Foo))).to eq('<div><div>Hello There</div><div>Hello There</div></div>')
+      expect(Foo).to render_static_html('<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
@@ -289,8 +285,8 @@ describe "React::NativeLibrary" do
           }
         })
       }
-      expect(React.render_to_static_markup(
-        React.create_element(NativeComponent, name: "There"))).to eq('<div>Hello There</div>')
+      expect(NativeComponent)
+        .to render_static_html('<div>Hello There</div>').with_params(name: "There")
     end
 
     it "will automatically import a native library containing a React.js component" do
@@ -322,8 +318,8 @@ describe "React::NativeLibrary" do
           })
         }
       }
-      expect(React.render_to_static_markup(
-        React.create_element(NativeLibrary::NativeComponent, name: "There"))).to eq('<div>Hello There</div>')
+      expect(NativeLibrary::NativeComponent)
+        .to render_static_html('<div>Hello There</div>').with_params(name: "There")
     end
 
     it "will produce a sensible error if the component is not in the library" do

data/spec/react/observable_spec.rb

@@ -1,7 +1,42 @@
 require 'spec_helper'
 
 if opal?
+
 describe 'React::Observable' do
-  # tbd
+  it "allows to set value on Observable" do
+    stub_const 'Zoo', Class.new {
+      include React::Component
+      param :foo, type: React::Observable
+      before_mount do
+        params.foo! 4
+      end
+
+      def render
+        nil
+      end
+    }
+
+    stub_const 'Foo', Class.new
+    Foo.class_eval do
+      include React::Component
+
+      def render
+        div do
+          Zoo(foo: state.foo! )
+          span { state.foo.to_s }
+        end
+      end
+    end
+
+    instance = React::Test::Utils.render_into_document(React.create_element(Foo))
+    html = `#{instance.dom_node}.innerHTML`
+    # data-reactid appear in earlier versions of reactjs
+    %x{
+        var REGEX_REMOVE_IDS = /\s?data-reactid="[^"]+"/g;
+        html = html.replace(REGEX_REMOVE_IDS, '');
+    }
+    expect(html).to eq('<span></span><span>4</span>')
+  end
 end
+
 end

data/spec/react/opal_jquery_extensions_spec.rb

@@ -1,66 +1,68 @@
 require 'spec_helper'
 
 if opal?
-describe 'Element' do
-  after(:each) do
-    React::API.clear_component_class_cache
-  end
+describe 'opal-jquery extensions' do
+  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
+    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
+        def component_will_unmount
 
+        end
       end
-    end
 
-    expect_any_instance_of(Foo).to_not receive(:component_will_unmount)
+      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
+      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}"
+    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
-    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 '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' }
+    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
-    end
 
-    expect(Element[renderToDocument(Foo)].html).to eq('hello')
-  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
+    it "accepts plain js object as selector" do
+      expect {
+        Element[`window`]
+      }.not_to raise_error
+    end
   end
 end
 end