reactrb 0.7.42

data/spec/react/react_spec.rb

@@ -0,0 +1,211 @@
+require "spec_helper"
+
+if opal?
+describe React 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(React.render_to_static_markup(React.create_element(Foo))).to eq("<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
+
+      # deprecated as of React 14
+      # it "should transform Hash provided to `class_name` props as string" 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,26 @@
+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"
+end
+end

data/spec/react/top_level_component_spec.rb

@@ -0,0 +1,68 @@
+require 'spec_helper'
+
+if opal?
+
+module Components
+
+  module Controller
+    class Component1
+      include React::Component
+      def render
+        self.class.name.to_s
+      end
+    end
+  end
+
+  class Component1
+    include React::Component
+    def render
+      self.class.name.to_s
+    end
+  end
+
+  class Component2
+    include React::Component
+    def render
+      self.class.name.to_s
+    end
+  end
+end
+
+module Controller
+  class SomeOtherClass  # see issue #80
+  end
+end
+
+class Component1
+  include React::Component
+  def render
+    self.class.name.to_s
+  end
+end
+
+
+def render_top_level(controller, component_name)
+  React.render_to_static_markup(React.create_element(
+    React::TopLevelRailsComponent, {controller: controller, component_name: component_name, render_params: {}}))
+end
+
+describe React::TopLevelRailsComponent do
+
+  it 'uses the controller name to lookup a component' do
+    expect(render_top_level("Controller", "Component1")).to eq('<span>Components::Controller::Component1</span>')
+  end
+
+  it 'can find the name without matching the controller' do
+    expect(render_top_level("Controller", "Component2")).to eq('<span>Components::Component2</span>')
+  end
+
+  it 'will find the outer most matching component' do
+    expect(render_top_level("OtherController", "Component1")).to eq('<span>Component1</span>')
+  end
+
+  it 'can find the correct component when the name is fully qualified' do
+    expect(render_top_level("Controller", "::Components::Component1")).to eq('<span>Components::Component1</span>')
+  end
+
+end
+end

data/spec/react/tutorial/tutorial_spec.rb

@@ -0,0 +1,35 @@
+require 'spec_helper'
+
+if opal?
+class HelloMessage
+  include React::Component
+  def render
+    div { "Hello World!" }
+  end
+end
+
+describe 'An Example from the react.rb doc' do
+  it 'produces the correct result' do
+    expect(React.render_to_static_markup(React.create_element(HelloMessage))).to eq('<div>Hello World!</div>')
+  end
+end
+
+class HelloMessage2
+  include React::Component
+  define_state(:user_name) { '@catmando' }
+  def render
+    div { "Hello #{user_name}" }
+  end
+end
+
+describe 'Adding state to a component (second tutorial example)' do
+  it "produces the correct result" do
+    expect(React.render_to_static_markup(React.create_element(HelloMessage2))).to eq('<div>Hello @catmando</div>')
+  end
+
+  it 'renders to the document' do
+    React.render(React.create_element(HelloMessage2), `document.getElementById('render_here')`)
+    expect(`document.getElementById('render_here').innerHTML`) =~ 'Hello @catmando'
+  end
+end
+end

data/spec/react/validator_spec.rb

@@ -0,0 +1,128 @@
+require "spec_helper"
+
+if opal?
+describe React::Validator do
+  before do
+    stub_const 'Foo', Class.new(React::Component::Base)
+  end
+  describe '#validate' do
+    describe "Presence validation" do
+      it "should check if required props provided" do
+        validator = React::Validator.new(Foo).build do
+          requires :foo
+          requires :bar
+        end
+
+        expect(validator.validate({})).to eq(["Required prop `foo` was not specified", "Required prop `bar` was not specified"])
+        expect(validator.validate({foo: 1, bar: 3})).to eq([])
+      end
+
+      it "should check if passed non specified prop" do
+        validator = React::Validator.new(Foo).build do
+          optional :foo
+        end
+
+        expect(validator.validate({bar: 10})).to eq(["Provided prop `bar` not specified in spec"])
+        expect(validator.validate({foo: 10})).to eq([])
+      end
+    end
+
+    describe "Type validation" do
+      it "should check if passed value with wrong type" do
+        validator = React::Validator.new(Foo).build do
+          requires :foo, type: String
+        end
+
+        expect(validator.validate({foo: 10})).to eq(["Provided prop `foo` could not be converted to String"])
+        expect(validator.validate({foo: "10"})).to eq([])
+      end
+
+      it "should check if passed value with wrong custom type" do
+        stub_const 'Bar', Class.new
+        validator = React::Validator.new(Foo).build do
+          requires :foo, type: Bar
+        end
+
+        expect(validator.validate({foo: 10})).to eq(["Provided prop `foo` could not be converted to Bar"])
+        expect(validator.validate({foo: Bar.new})).to eq([])
+      end
+
+      it 'coerces native JS prop types to opal objects' do
+        validator = React::Validator.new(Foo).build do
+          requires :foo, type: `{ x: 1 }`
+        end
+
+        message = "Provided prop `foo` could not be converted to [object Object]"
+        expect(validator.validate({foo: `{ x: 1 }`})).to eq([message])
+      end
+
+      it 'coerces native JS values to opal objects' do
+        validator = React::Validator.new(Foo).build do
+          requires :foo, type: Array[Fixnum]
+        end
+
+        message = "Provided prop `foo`[0] could not be converted to Numeric"
+        expect(validator.validate({foo: `[ { x: 1 } ]`})).to eq([message])
+      end
+
+      it "should support Array[Class] validation" do
+        validator = React::Validator.new(Foo).build do
+          requires :foo, type: Array[Hash]
+        end
+
+        expect(validator.validate({foo: [1,'2',3]})).to eq(
+          [
+            "Provided prop `foo`[0] could not be converted to Hash",
+            "Provided prop `foo`[1] could not be converted to Hash",
+            "Provided prop `foo`[2] could not be converted to Hash"
+          ]
+        )
+        expect(validator.validate({foo: [{},{},{}]})).to eq([])
+      end
+    end
+
+    describe "Limited values" do
+      it "should check if passed value is not one of the specified values" do
+        validator = React::Validator.new(Foo).build do
+          requires :foo, values: [4,5,6]
+        end
+
+        expect(validator.validate({foo: 3})).to eq(["Value `3` for prop `foo` is not an allowed value"])
+        expect(validator.validate({foo: 4})).to eq([])
+      end
+    end
+  end
+
+  describe '#undefined_props' do
+    let(:props) { { foo: 'foo', bar: 'bar', biz: 'biz', baz: 'baz' } }
+    let(:validator) do
+      React::Validator.new(Foo).build do
+        requires :foo
+        optional :bar
+      end
+    end
+
+    it 'slurps up any extra params into a hash' do
+      others = validator.undefined_props(props)
+      expect(others).to eq({ biz: 'biz', baz: 'baz' })
+    end
+
+    it 'prevents validate non-specified params' do
+      validator.undefined_props(props)
+      expect(validator.validate(props)).to eq([])
+    end
+  end
+
+  describe "default_props" do
+    it "should return specified default values" do
+      validator = React::Validator.new(Foo).build do
+        requires :foo, default: 10
+        requires :bar
+        optional :lorem, default: 20
+      end
+
+      expect(validator.default_props).to eq({foo: 10, lorem: 20})
+    end
+  end
+end
+end