hyper-react 0.10.0

data/spec/react/test/session_spec.rb

@@ -0,0 +1,100 @@
+require 'spec_helper'
+
+if opal?
+  RSpec.describe React::Test::Session do
+    subject { described_class.new }
+    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
+
+    describe '#mount' do
+      it 'returns an instance of the mounted component' do
+        expect(subject.mount(Greeter)).to be_a(Greeter)
+      end
+
+      it 'actualy mounts the component' do
+        expect(subject.mount(Greeter)).to be_mounted
+      end
+
+      it 'optionaly passes params to the component' do
+        instance = subject.mount(Greeter, message: 'world')
+        expect(instance.params.message).to eq('world')
+      end
+    end
+
+    describe '#instance' do
+      it 'returns the instance of the mounted component' do
+        instance = subject.mount(Greeter)
+        expect(subject.instance).to eq(instance)
+      end
+    end
+
+    describe '#element' do
+      it 'returns the React::Element for the mounted component' do
+        subject.mount(Greeter)
+        expect(subject.element).to be_a(React::Element)
+      end
+    end
+
+    describe '#native' do
+      it 'returns the React native instance of the component' do
+        instance = subject.mount(Greeter)
+        native = instance.instance_variable_get('@native')
+        expect(subject.native).to eq(native)
+      end
+    end
+
+    describe '#html' do
+      it 'returns the component rendered to static html' do
+        subject.mount(Greeter, message: 'world')
+        expect(subject.html).to eq('<span>Hello world</span>')
+      end
+
+      it 'returns the updated static html' do
+        subject.mount(Greeter)
+        subject.update_params(message: 'moon')
+        expect(subject.html).to eq('<span>Hello moon</span>')
+      end
+    end
+
+    describe '#update_params' do
+      it 'sends new params to the component' do
+        instance = subject.mount(Greeter, message: 'world')
+        subject.update_params(message: 'moon')
+        expect(instance.params.message).to eq('moon')
+      end
+
+      it 'leaves unspecified params in tact' do
+        instance = subject.mount(Greeter, message: 'world', from: 'outerspace')
+        subject.update_params(message: 'moon')
+        expect(instance.params.from).to eq('outerspace')
+      end
+
+      it 'causes the component to render' do
+        instance = subject.mount(Greeter, message: 'world')
+        expect(instance).to receive(:render)
+        subject.update_params(message: 'moon')
+      end
+    end
+
+    describe '#force_update' do
+      it 'causes the component to render' do
+        instance = subject.mount(Greeter)
+        expect(instance).to receive(:render)
+        subject.force_update!
+      end
+    end
+  end
+end

data/spec/react/test/utils_spec.rb

@@ -0,0 +1,45 @@
+require 'spec_helper'
+
+if opal?
+  module React
+    module Test
+      class Utils
+        def self.simulate(event, element)
+          Simulate.new.click(element)
+        end
+
+        class Simulate
+          include Native
+          def initialize
+            super(`React.addons.TestUtils.Simulate`)
+          end
+
+          def click(component_instance)
+            `#{@native}['click']`.call(component_instance.dom_node, {})
+          end
+        end
+      end
+    end
+  end
+  RSpec.describe React::Test::Utils do
+    it 'simulates' do
+      stub_const 'Foo', Class.new
+      Foo.class_eval do
+        include React::Component
+
+        def hello
+          @hello
+        end
+
+        def render
+          @hello = 'hello'
+          div { 'Click Me' }.on(:click) { |e| click(e) }
+        end
+      end
+
+      instance = renderToDocument(Foo)
+      expect_any_instance_of(Foo).to receive(:click)
+      described_class.simulate(:click, instance)
+    end
+  end
+end

data/spec/react/top_level_component_spec.rb

@@ -0,0 +1,96 @@
+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)
+  render_to_html(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
+
+  describe '.html_tag?' do
+    it 'is truthy for valid html tags' do
+      expect(React.html_tag?('a')).to be_truthy
+      expect(React.html_tag?('div')).to be_truthy
+    end
+
+    it 'is truthy for valid svg tags' do
+      expect(React.html_tag?('svg')).to be_truthy
+      expect(React.html_tag?('circle')).to be_truthy
+    end
+
+    it 'is falsey for invalid tags' do
+      expect(React.html_tag?('tagizzle')).to be_falsey
+    end
+  end
+
+  describe '.html_attr?' do
+    it 'is truthy for valid html attributes' do
+      expect(React.html_attr?('id')).to be_truthy
+      expect(React.html_attr?('data')).to be_truthy
+    end
+
+    it 'is truthy for valid svg attributes' do
+      expect(React.html_attr?('cx')).to be_truthy
+      expect(React.html_attr?('strokeWidth')).to be_truthy
+    end
+
+    it 'is falsey for invalid attributes' do
+      expect(React.html_tag?('attrizzle')).to be_falsey
+    end
+  end
+end
+end

data/spec/react/tutorial/tutorial_spec.rb

@@ -0,0 +1,36 @@
+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', type: :component do
+  it 'produces the correct result' do
+    expect(HelloMessage).to render('<div>Hello World!</div>')
+  end
+end
+
+class HelloMessage2
+  include React::Component
+  define_state(:user_name) { '@catmando' }
+  def render
+    div { "Hello #{state.user_name}" }
+  end
+end
+
+describe 'Adding state to a component (second tutorial example)', type: :component do
+  it "produces the correct result" do
+    expect(HelloMessage2).to render('<div>Hello @catmando</div>')
+  end
+
+  it 'renders to the document' do
+    ele = `document.createElement('div')`
+    React.render(React.create_element(HelloMessage2), ele)
+    expect(`#{ele}.innerHTML`) =~ 'Hello @catmando'
+  end
+end
+end

data/spec/react/validator_spec.rb

@@ -0,0 +1,124 @@
+require "spec_helper"
+
+if opal?
+describe React::Validator do
+  describe '#validate' do
+    describe "Presence validation" do
+      it "should check if required props provided" do
+        validator = React::Validator.new.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.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.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.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.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.build do
+          requires :foo, type: Array[Fixnum]
+        end
+        message = "Provided prop `foo`[0] could not be converted to #{Fixnum.name}"
+        expect(validator.validate({foo: `[ { x: 1 } ]`})).to eq([message])
+      end
+
+      it "should support Array[Class] validation" do
+        validator = React::Validator.new.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.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.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.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

data/spec/reactive-ruby/component_loader_spec.rb

@@ -0,0 +1,71 @@
+require 'spec_helper'
+
+if ruby?
+RSpec.describe ReactiveRuby::ComponentLoader do
+  GLOBAL_WRAPPER = <<-JS
+    var global = global || this;
+    var self = self || this;
+    var window = window || this;
+    var console = {
+      warn: function(s) {  }
+    };
+  JS
+
+  let(:js) { ::Rails.application.assets['components'].to_s }
+  let(:context) { ExecJS.compile(GLOBAL_WRAPPER + js) }
+  let(:v8_context) { ReactiveRuby::ServerRendering.context_instance_for(context) }
+
+  describe '.new' do
+    it 'raises a meaningful exception when initialized without a context' do
+      expect {
+        described_class.new(nil)
+      }.to raise_error(/Could not obtain ExecJS runtime context/)
+    end
+  end
+
+  describe '#load' do
+    it 'loads given asset file into context' do
+      loader = described_class.new(v8_context)
+
+      expect {
+        loader.load
+      }.to change { !!v8_context.eval('Opal.React') }.from(false).to(true)
+    end
+
+    it 'is truthy upon successful load' do
+      loader = described_class.new(v8_context)
+      expect(loader.load).to be_truthy
+    end
+
+    it 'fails silently returning false' do
+      loader = described_class.new(v8_context)
+      expect(loader.load('foo')).to be_falsey
+    end
+  end
+
+  describe '#load!' do
+    it 'is truthy upon successful load' do
+      loader = described_class.new(v8_context)
+      expect(loader.load!).to be_truthy
+    end
+
+    it 'raises an expection if loading fails' do
+      loader = described_class.new(v8_context)
+      expect { loader.load!('foo') }.to raise_error(/No react\.rb components/)
+    end
+  end
+
+  describe '#loaded?' do
+    it 'is truthy if components file is already loaded' do
+      loader = described_class.new(v8_context)
+      loader.load
+      expect(loader).to be_loaded
+    end
+
+    it 'is false if components file is not loaded' do
+      loader = described_class.new(v8_context)
+      expect(loader).to_not be_loaded
+    end
+  end
+end
+end