hyper-react 0.10.0

data/spec/react/react_spec.rb

@@ -0,0 +1,209 @@
+require "spec_helper"
+
+if opal?
+RSpec.describe React, type: :component do
+  after(:each) do
+    React::API.clear_component_class_cache
+  end
+
+  describe "is_valid_element" do
+    it "should return true if passed a valid element" do
+      element = React::Element.new(`React.createElement('div')`)
+      expect(React.is_valid_element(element)).to eq(true)
+    end
+
+    it "should return false is passed a non React element" do
+      element = React::Element.new(`{}`)
+      expect(React.is_valid_element(element)).to eq(false)
+    end
+  end
+
+  describe "create_element" do
+    it "should create a valid element with only tag" do
+      element = React.create_element('div')
+      expect(React.is_valid_element(element)).to eq(true)
+    end
+
+    context "with block" do
+      it "should create a valid element with text as only child when block yield String" do
+        element = React.create_element('div') { "lorem ipsum" }
+        expect(React.is_valid_element(element)).to eq(true)
+        expect(element.props.children).to eq("lorem ipsum")
+      end
+
+      it "should create a valid element with children as array when block yield Array of element" do
+        element = React.create_element('div') do
+          [React.create_element('span'), React.create_element('span'), React.create_element('span')]
+        end
+        expect(React.is_valid_element(element)).to eq(true)
+        expect(element.props.children.length).to eq(3)
+      end
+
+      it "should render element with children as array when block yield Array of element" do
+        element = React.create_element('div') do
+          [React.create_element('span'), React.create_element('span'), React.create_element('span')]
+        end
+        instance = renderElementToDocument(element)
+        expect(Element[instance].children.length).to eq(3)
+      end
+    end
+
+    describe "custom element" do
+      before do
+        stub_const 'Foo', Class.new
+        Foo.class_eval do
+          def render
+            React.create_element("div") { "lorem" }
+          end
+        end
+      end
+
+      it "should render element with only one children correctly" do
+        element = React.create_element(Foo) { React.create_element('span') }
+        instance = renderElementToDocument(element)
+        expect(instance.props.children).not_to be_a(Array)
+        expect(instance.props.children.type).to eq("span")
+      end
+
+      it "should render element with more than one children correctly" do
+        element = React.create_element(Foo) { [React.create_element('span'), React.create_element('span')] }
+        instance = renderElementToDocument(element)
+        expect(instance.props.children).to be_a(Array)
+        expect(instance.props.children.length).to eq(2)
+      end
+
+      it "should create a valid element provided class defined `render`" do
+        element = React.create_element(Foo)
+        expect(React.is_valid_element(element)).to eq(true)
+      end
+
+      it "should allow creating with properties" do
+        element = React.create_element(Foo, foo: "bar")
+        expect(element.props.foo).to eq("bar")
+      end
+
+      it "should raise error if provided class doesn't defined `render`" do
+        expect { React.create_element(Array) }.to raise_error
+      end
+
+      it "should use the same instance for the same ReactComponent" do
+        Foo.class_eval do
+          attr_accessor :a
+          def initialize(n)
+            self.a = 10
+          end
+
+          def component_will_mount
+            self.a = 20
+          end
+
+          def render
+            React.create_element("div") { self.a.to_s }
+          end
+        end
+
+        expect(Foo).to render("<div>20</div>")
+      end
+
+      it "should match the instance cycle to ReactComponent life cycle" do
+        `var count = 0;`
+
+        Foo.class_eval do
+          def initialize
+            `count = count + 1;`
+          end
+          def render
+            React.create_element("div")
+          end
+        end
+
+        renderToDocument(Foo)
+        renderToDocument(Foo)
+
+        expect(`count`).to eq(2)
+      end
+    end
+
+    describe "create element with properties" do
+      it "should enforce snake-cased property name" do
+        element = React.create_element("div", class_name: "foo")
+        expect(element.props.className).to eq("foo")
+      end
+
+      it "should allow custom property" do
+        element = React.create_element("div", foo: "bar")
+        expect(element.props.foo).to eq("bar")
+      end
+
+      it "should not camel-case custom property" do
+        element = React.create_element("div", foo_bar: "foo")
+        expect(element.props.foo_bar).to eq("foo")
+      end
+    end
+
+    describe "class_name helpers (React.addons.classSet)" do
+      it "should transform Hash provided to `class_name` props as string", v13_only: true do
+        classes = {foo: true, bar: false, lorem: true}
+        element = React.create_element("div", class_name: classes)
+        expect(element.props.className).to eq("foo lorem")
+      end
+
+      it "should not alter behavior when passing a string" do
+        element = React.create_element("div", class_name: "foo bar")
+
+        expect(element.props.className).to eq("foo bar")
+      end
+    end
+  end
+
+  describe "render" do
+    async "should render element to DOM" do
+      div = `document.createElement("div")`
+      React.render(React.create_element('span') { "lorem" }, div) do
+        run_async {
+          expect(`div.children[0].tagName`).to eq("SPAN")
+          expect(`div.textContent`).to eq("lorem")
+        }
+      end
+    end
+
+    it "should work without providing a block" do
+      div = `document.createElement("div")`
+      React.render(React.create_element('span') { "lorem" }, div)
+    end
+
+    it "should return a React::Component::API compatible object" do
+      div = `document.createElement("div")`
+      component = React.render(React.create_element('span') { "lorem" }, div)
+      React::Component::API.public_instance_methods(true).each do |method_name|
+        expect(component).to respond_to(method_name)
+      end
+    end
+
+    pending "should return nil to prevent abstraction leakage" do
+      div = `document.createElement("div")`
+      expect {
+        React.render(React.create_element('span') { "lorem" }, div)
+      }.to be_nil
+    end
+  end
+
+  describe "render_to_string" do
+    it "should render a React.Element to string" do
+      ele = React.create_element('span') { "lorem" }
+      expect(React.render_to_string(ele)).to be_kind_of(String)
+    end
+  end
+
+  describe "unmount_component_at_node" do
+    async "should unmount component at node" do
+      div = `document.createElement("div")`
+      React.render(React.create_element('span') { "lorem" }, div ) do
+        run_async {
+          expect(React.unmount_component_at_node(div)).to eq(true)
+        }
+      end
+    end
+  end
+end
+end

data/spec/react/state_spec.rb

@@ -0,0 +1,55 @@
+require 'spec_helper'
+
+if opal?
+describe 'React::State' do
+  it "can created static exported states" do
+    stub_const 'Foo', Class.new
+    Foo.class_eval do
+      include React::Component
+      export_state(:foo) { 'bar' }
+    end
+
+    expect(Foo.foo).to eq('bar')
+  end
+
+  # these will all require async operations and testing to see if things get
+  # re-rendered see spec_helper the "render" test method
+
+  # if Foo.foo is used during rendering then when Foo.foo changes we will
+  # rerender
+  it "sets up observers when exported states are read"
+
+  # React::State.set_state(object, attribute, value) +
+  # React::State.get_state(object, attribute)
+  it "can be accessed outside of react using get/set_state"
+
+  it 'ignores state updates during rendering' do
+    stub_const 'StateTest', Class.new(React::Component::Base)
+    StateTest.class_eval do
+      export_state :boom
+      before_mount do
+        # force boom to be on the observing list during the current rendering cycle
+        StateTest.boom! !StateTest.boom
+        # this is automatically called by after_mount / after_update, but we don't want
+        # to have to setup a complicated async test, so we just force it now.
+        # if we don't do this, then updating boom will have no effect on the first render
+        React::State.update_states_to_observe
+      end
+      def render
+        (StateTest.boom ? "Boom" : "No Boom").tap { StateTest.boom! !StateTest.boom }
+      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)}
+    }
+    markup = React.render_to_static_markup(React.create_element(StateTest))
+    `window.console.warn = org_warn_console; window.console.error = org_error_console;`
+    expect(markup).to eq('<span>Boom</span>')
+    expect(StateTest.boom).to be_falsy
+    expect(`log`).to eq([])
+  end
+end
+end

data/spec/react/test/dsl_spec.rb

@@ -0,0 +1,43 @@
+require 'spec_helper'
+
+if opal?
+  RSpec.describe React::Test::DSL do
+    describe 'the DSL' do
+      let(:session) { Class.new { include React::Test::DSL }.new }
+
+      before do
+        React::Test.reset_session!
+
+        stub_const 'Greeter', Class.new
+        Greeter.class_eval do
+          include React::Component
+
+          params do
+            optional :message
+            optional :from
+          end
+
+          def render
+            span { "Hello #{params.message}" }
+          end
+        end
+      end
+
+      it 'is possible to include it in another class' do
+        session.mount(Greeter)
+        expect(session.instance).to be_a(Greeter)
+      end
+
+      it "should provide a 'component' shortcut for more expressive tests" do
+        session.component.mount(Greeter)
+        expect(session.component.instance).to be_a(Greeter)
+      end
+
+      React::Test::Session::DSL_METHODS.each do |method|
+        it "responds to all DSL method: #{method}" do
+          expect(session).to respond_to(method)
+        end
+      end
+    end
+  end
+end

data/spec/react/test/matchers/render_html_matcher_spec.rb

@@ -0,0 +1,83 @@
+require 'spec_helper'
+
+if opal?
+describe React::Test::Matchers::RenderHTMLMatcher do
+  let(:component) {
+    Class.new do
+      include React::Component
+      params do
+        optional :string
+      end
+      def render
+        div do
+          span { params.string } if params.string
+          'lorem'
+        end
+      end
+    end
+  }
+  let(:expected) { '<div>lorem</div>' }
+  let(:matcher) { described_class.new(expected) }
+
+  describe '#matches?' do
+    it 'is truthy when rendered component html equals expected html' do
+      expect(matcher.matches?(component)).to be_truthy
+    end
+
+    it 'is falsey when rendered component html does not equal expected html' do
+      matcher = described_class.new('foo')
+      expect(matcher.matches?(component)).to be_falsey
+    end
+  end
+
+  describe '#with_params' do
+    let(:expected) { '<div><span>str</span>lorem</div>' }
+
+    it 'renders the component with the given params' do
+      matcher.with_params(string: 'str')
+      expect(matcher.matches?(component)).to be_truthy
+    end
+  end
+
+  describe '#failure_message' do
+    let(:expected) { '<div><span>str</span>lorem</div>' }
+
+    it 'includes the name of the component' do
+      stub_const 'Foo', component
+      matcher.matches?(Foo)
+      expect(matcher.failure_message).to match(/expected 'Foo'/)
+    end
+
+    it 'includes the params hash' do
+      matcher.with_params(string: 'bar')
+      matcher.matches?(component)
+      expect(matcher.failure_message).to match(/with params '{"string"=>"bar"}'/)
+    end
+
+    it 'includes the expected html value' do
+      matcher.matches?(component)
+      expect(matcher.failure_message).to match(/to render '#{expected}'/)
+    end
+
+    it 'includes the actual html value' do
+      actual = '<div>lorem<\/div>'
+      matcher.matches?(component)
+      expect(matcher.failure_message).to match(/, but '#{actual}' was rendered/)
+    end
+
+    it 'does not include "to not render"' do
+      matcher.matches?(component)
+      expect(matcher.failure_message).to_not match(/to not render/)
+    end
+  end
+
+  describe '#negative_failure_message' do
+    let(:expected) { '<div><span>str</span>lorem</div>' }
+
+    it 'includes "to not render"' do
+      matcher.matches?(component)
+      expect(matcher.negative_failure_message).to match(/to not render/)
+    end
+  end
+end
+end

data/spec/react/test/rspec_spec.rb

@@ -0,0 +1,62 @@
+require 'spec_helper'
+
+if opal?
+  RSpec.describe 'react/test/rspec', type: :component do
+    before do
+      stub_const 'Greeter', Class.new
+      Greeter.class_eval do
+        include React::Component
+        params do
+          optional :message
+          optional :from
+        end
+
+        def render
+          span { "Hello #{params.message}" }
+        end
+      end
+    end
+
+    it 'should include react/test in rspec' do
+      comp = mount(Greeter)
+      expect(component.instance).to eq(comp)
+    end
+
+    it 'includes rspec matchers' do
+      expect(Greeter).to render(
+        '<span>Hello world</span>'
+      ).with_params(message: 'world')
+    end
+
+    describe 'resetting the session' do
+      it 'creates an instance of the mounted component in one example' do
+        mount(Greeter)
+      end
+
+      it '...then is not availalbe in the next' do
+        expect { component.instance }.to raise_error
+      end
+    end
+  end
+
+  RSpec.describe 'react/test/rspec', type: :other do
+    before do
+      stub_const 'Greeter', Class.new
+      Greeter.class_eval do
+        include React::Component
+        params do
+          optional :message
+          optional :from
+        end
+
+        def render
+          span { "Hello #{params.message}" }
+        end
+      end
+    end
+
+    it 'should not include react/test in rspec' do
+      expect { mount(Greeter) }.to raise_error
+    end
+  end
+end