hyper-react 0.99.6 → 1.0.0.lap21

data/spec/react/top_level_component_spec.rb

@@ -0,0 +1,103 @@
+require 'spec_helper'
+
+
+describe 'React::TopLevelRailsComponent', js: true do
+  before :each do
+    on_client do
+      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)
+        params = {
+          controller: controller,
+          component_name: component_name,
+          render_params: {}
+        }
+        component = React::Test::Utils.render_component_into_document(React::TopLevelRailsComponent, params)
+        component.dom_node.JS[:outerHTML]
+      end
+    end
+  end
+
+  it 'uses the controller name to lookup a component' do
+    expect_evaluate_ruby('render_top_level("Controller", "Component1")').to eq('<span>Components::Controller::Component1</span>')
+  end
+
+  it 'can find the name without matching the controller' do
+    expect_evaluate_ruby('render_top_level("Controller", "Component2")').to eq('<span>Components::Component2</span>')
+  end
+
+  it 'will find the outer most matching component' do
+    expect_evaluate_ruby('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_evaluate_ruby('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_evaluate_ruby('React.html_tag?("a")').to be_truthy
+      expect_evaluate_ruby('React.html_tag?("div")').to be_truthy
+    end
+
+    it 'is truthy for valid svg tags' do
+      expect_evaluate_ruby('React.html_tag?("svg")').to be_truthy
+      expect_evaluate_ruby('React.html_tag?("circle")').to be_truthy
+    end
+
+    it 'is falsey for invalid tags' do
+      expect_evaluate_ruby('React.html_tag?("tagizzle")').to be_falsey
+    end
+  end
+
+  describe '.html_attr?' do
+    it 'is truthy for valid html attributes' do
+      expect_evaluate_ruby('React.html_attr?("id")').to be_truthy
+      expect_evaluate_ruby('React.html_attr?("data")').to be_truthy
+    end
+
+    it 'is truthy for valid svg attributes' do
+      expect_evaluate_ruby('React.html_attr?("cx")').to be_truthy
+      expect_evaluate_ruby('React.html_attr?("strokeWidth")').to be_truthy
+    end
+
+    it 'is falsey for invalid attributes' do
+      expect_evaluate_ruby('React.html_tag?("attrizzle")').to be_falsey
+    end
+  end
+end

data/spec/react/tutorial/tutorial_spec.rb

@@ -0,0 +1,42 @@
+require 'spec_helper'
+
+describe 'An Example from the react.rb doc', js: true do
+  it 'produces the correct result' do
+    mount 'HelloMessage' do
+      class HelloMessage
+        include React::Component
+        def render
+          div { "Hello World!" }
+        end
+      end
+    end
+    expect(page).to have_xpath('//div', text: 'Hello World!')
+  end
+end
+
+describe 'Adding state to a component (second tutorial example)', js: true do
+  before :each do
+    on_client do
+      class HelloMessage2
+        include React::Component
+        define_state(:user_name) { '@catmando' }
+        def render
+          div { "Hello #{state.user_name}" }
+        end
+      end
+    end
+  end
+
+  it "produces the correct result" do
+    mount 'HelloMessage2'
+    expect(page).to have_xpath('//div', text: 'Hello @catmando')
+  end
+
+  it 'renders to the document' do
+    evaluate_ruby do
+      ele = JS.call(:eval, "document.body.appendChild(document.createElement('div'))")
+      React.render(React.create_element(HelloMessage2), ele)
+    end
+    expect(page).to have_xpath('//div', text: 'Hello @catmando')
+  end
+end

data/spec/react/validator_spec.rb

@@ -0,0 +1,134 @@
+require "spec_helper"
+
+describe 'React::Validator', js: true do
+  describe '#validate' do
+    describe "Presence validation" do
+      it "should check if required props provided" do
+        evaluate_ruby do
+          VALIDATOR = React::Validator.new.build do
+            requires :foo
+            requires :bar
+          end
+        end
+        expect_evaluate_ruby('VALIDATOR.validate({})').to eq(["Required prop `foo` was not specified", "Required prop `bar` was not specified"])
+        expect_evaluate_ruby('VALIDATOR.validate({foo: 1, bar: 3})').to eq([])
+      end
+
+      it "should check if passed non specified prop" do
+        evaluate_ruby do
+          VALIDATOR = React::Validator.new.build do
+            optional :foo
+          end
+        end
+        expect_evaluate_ruby('VALIDATOR.validate({bar: 10})').to eq(["Provided prop `bar` not specified in spec"])
+        expect_evaluate_ruby('VALIDATOR.validate({foo: 10})').to eq([])
+      end
+    end
+
+    describe "Type validation" do
+      it "should check if passed value with wrong type" do
+        evaluate_ruby do
+          VALIDATOR = React::Validator.new.build do
+            requires :foo, type: String
+          end
+        end
+        expect_evaluate_ruby('VALIDATOR.validate({foo: 10})').to eq(["Provided prop `foo` could not be converted to String"])
+        expect_evaluate_ruby('VALIDATOR.validate({foo: "10"})').to eq([])
+      end
+
+      it "should check if passed value with wrong custom type" do
+        evaluate_ruby do
+          class Bar; end
+          VALIDATOR = React::Validator.new.build do
+            requires :foo, type: Bar
+          end
+        end
+        expect_evaluate_ruby('VALIDATOR.validate({foo: 10})').to eq(["Provided prop `foo` could not be converted to Bar"])
+        expect_evaluate_ruby('VALIDATOR.validate({foo: Bar.new})').to eq([])
+      end
+
+      it 'coerces native JS prop types to opal objects' do
+        evaluate_ruby do
+          VALIDATOR = React::Validator.new.build do
+            requires :foo, type: JS.call(:eval, "(function () { return { x: 1 }; })();")
+          end
+        end
+        expect_evaluate_ruby('VALIDATOR.validate({foo: `{ x: 1 }`})').to eq(["Provided prop `foo` could not be converted to [object Object]"])
+      end
+
+      it 'coerces native JS values to opal objects' do
+        evaluate_ruby do
+          VALIDATOR = React::Validator.new.build do
+            requires :foo, type: Array[Integer]
+          end
+        end
+        expect_evaluate_ruby('VALIDATOR.validate({foo: `[ { x: 1 } ]`})').to eq(["Provided prop `foo`[0] could not be converted to #{Integer.name}"])
+      end
+
+      it "should support Array[Class] validation" do
+        evaluate_ruby do
+          VALIDATOR = React::Validator.new.build do
+            requires :foo, type: Array[Hash]
+          end
+        end
+        expect_evaluate_ruby('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_evaluate_ruby('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
+        evaluate_ruby do
+          VALIDATOR = React::Validator.new.build do
+            requires :foo, values: [4,5,6]
+          end
+        end
+        expect_evaluate_ruby('VALIDATOR.validate({foo: 3})').to eq(["Value `3` for prop `foo` is not an allowed value"])
+        expect_evaluate_ruby('VALIDATOR.validate({foo: 4})').to eq([])
+      end
+    end
+  end
+
+  describe '#undefined_props' do
+    before :each do
+      on_client do
+        PROPS = { foo: 'foo', bar: 'bar', biz: 'biz', baz: 'baz' }
+        VALIDATOR = React::Validator.new.build do
+          requires :foo
+          optional :bar
+        end
+      end
+    end
+
+
+    it 'slurps up any extra params into a hash' do
+      expect_evaluate_ruby('VALIDATOR.undefined_props(PROPS)').to eq({ "biz" => 'biz', "baz" => 'baz' })
+    end
+
+    it 'prevents validate non-specified params' do
+      evaluate_ruby do
+        VALIDATOR.undefined_props(PROPS)
+      end
+      expect_evaluate_ruby('VALIDATOR.validate(PROPS)').to eq([])
+    end
+  end
+
+  describe "default_props" do
+    it "should return specified default values" do
+      evaluate_ruby do
+        VALIDATOR = React::Validator.new.build do
+          requires :foo, default: 10
+          requires :bar
+          optional :lorem, default: 20
+        end
+      end
+      expect_evaluate_ruby('VALIDATOR.default_props').to eq({"foo" => 10, "lorem" => 20})
+    end
+  end
+end

data/spec/reactive-ruby/component_loader_spec.rb

@@ -0,0 +1,74 @@
+require 'spec_helper'
+
+describe ReactiveRuby::ComponentLoader do
+  GLOBAL_WRAPPER = <<-JS
+    #{React::ServerRendering::ExecJSRenderer::GLOBAL_WRAPPER}
+    var console = {
+      warn: function(s) {  }
+    };
+  JS
+
+  let(:js) do
+    if ::Rails.application.assets['react-server.js']
+      react_source = ::Rails.application.assets['react-server.js']
+    else
+      react_source = ::Rails.application.assets['react.js']
+    end
+    ::Rails.application.assets['components'].to_s + react_source.to_s
+  end
+  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
+    xit 'loads given asset file into context' do
+      loader = described_class.new(v8_context)
+
+      expect {
+        loader.load('components')
+      }.to change { !!v8_context.eval('Opal.React !== undefined') }.from(false).to(true)
+    end
+
+    xit 'is truthy upon successful load' do
+      loader = described_class.new(v8_context)
+      expect(loader.load('components')).to be_truthy
+    end
+
+    xit 'fails silently returning false' do
+      loader = described_class.new(v8_context)
+      expect(loader.load('foo')).to be_falsey
+    end
+  end
+
+  describe '#load!' do
+    xit 'is truthy upon successful load' do
+      loader = described_class.new(v8_context)
+      expect(loader.load!('components')).to be_truthy
+    end
+
+    xit 'raises an expection if loading fails' do
+      loader = described_class.new(v8_context)
+      expect { loader.load!('foo') }.to raise_error(/No HyperReact components/)
+    end
+  end
+
+  describe '#loaded?' do
+    xit 'is truthy if components file is already loaded' do
+      loader = described_class.new(v8_context)
+      loader.load('components')
+      expect(loader).to be_loaded
+    end
+
+    xit 'is false if components file is not loaded' do
+      loader = described_class.new(v8_context)
+      expect(loader).to_not be_loaded
+    end
+  end
+end

data/spec/reactive-ruby/isomorphic_helpers_spec.rb

@@ -0,0 +1,157 @@
+require 'spec_helper'
+
+describe React::IsomorphicHelpers do
+  describe 'code execution context' do
+    let(:klass) { Class.send(:include, described_class) }
+
+    describe 'module class methods', :opal do
+      it { expect(described_class).to_not be_on_opal_server }
+      it { expect(described_class).to be_on_opal_client }
+    end
+
+    describe 'included class methods', :opal do
+      it { expect(klass).to_not be_on_opal_server }
+      it { expect(klass).to be_on_opal_client }
+    end
+
+    describe 'included instance methods', :opal do
+      it { expect(klass.new).to_not be_on_opal_server }
+      it { expect(klass.new).to be_on_opal_client }
+    end
+
+    describe 'module class methods', :ruby do
+      it { is_expected.to_not be_on_opal_server }
+      it { is_expected.to_not be_on_opal_client }
+    end
+
+    describe 'included class methods', :ruby do
+      subject { klass }
+      it { is_expected.to_not be_on_opal_server }
+      it { is_expected.to_not be_on_opal_client }
+    end
+
+    describe 'included instance methods', :ruby do
+      subject { klass.new }
+      it { is_expected.to_not be_on_opal_server }
+      it { is_expected.to_not be_on_opal_client }
+    end
+  end
+
+  describe 'load_context', :ruby do
+    let(:v8_context) { TestV8Context.new }
+    let(:controller) { double('controller') }
+    let(:name) { double('name') }
+
+    it 'creates a context and sets a controller' do
+      context = described_class.load_context(v8_context, controller, name)
+      expect(context.controller).to eq(controller)
+    end
+
+    it 'creates a context and sets a unique_id', js: true do
+      # this tests loads the prerender context and somehow trys evaluate_ruby, works only with above js: true
+      # TODO this is triggered by TimeCop for some reason
+      Timecop.freeze do
+        stamp = Time.now.to_i
+        context = described_class.load_context(v8_context, controller, name)
+        expect(context.unique_id).to eq("#{ controller.object_id }-#{ stamp }")
+      end
+    end
+  end
+
+  describe React::IsomorphicHelpers::Context do
+    class TestV8Context < Hash
+      def eval(args)
+        true
+      end
+      def attach(*args)
+        true
+      end
+    end
+
+    # Need to decouple/dry up this...
+    def test_context(files = nil)
+      js = ReactiveRuby::ServerRendering::ContextualRenderer::CONSOLE_POLYFILL.dup
+      js << Opal::Builder.build('opal').to_s
+      Array(files).each do |filename|
+        js << ::Rails.application.assets[filename].to_s
+      end
+      js = "#{React::ServerRendering::ExecJSRenderer::GLOBAL_WRAPPER}#{js}"
+      ctx = ExecJS.compile(js)
+      ctx = ReactiveRuby::ServerRendering.context_instance_for(ctx)
+    end
+
+    def react_context
+      if ::Rails.application.assets['react-server.js']
+        test_context(['server_rendering.js', 'react-server.js'])
+      else
+        test_context(['components', 'react.js'])
+      end
+    end
+
+    let(:v8_context) { TestV8Context.new }
+    let(:controller) { double('controller') }
+    let(:name) { double('name') }
+    before do
+      described_class.instance_variable_set :@before_first_mount_blocks, nil
+    end
+
+    describe '#initialize' do
+      it 'calls before mount callbacks' do
+        string = instance_double(String)
+        described_class.register_before_first_mount_block do
+          string.inspect
+        end
+        expect(string).to receive(:inspect).once
+        context = described_class.new('unique-id', v8_context, controller, name)
+      end
+    end
+
+    describe '#eval' do
+      it 'delegates to given context' do
+        context = described_class.new('unique-id', v8_context, controller, name)
+        js = 'true;'
+        expect(v8_context).to receive(:eval).with(js).once
+        context.eval(js)
+      end
+    end
+
+    describe '#send_to_opal' do
+      let(:opal_code) { Opal::Builder.new.build_str(ruby_code, __FILE__).to_s }
+      let(:ruby_code) { %Q[
+        module React::IsomorphicHelpers
+          def self.greet(name)
+            "Hello, " + name + "!"
+          end
+
+          def self.valediction
+            'Goodbye'
+          end
+        end
+      ]}
+
+      it 'raises an error when react cannot be loaded' do
+        context = described_class.new('unique-id', v8_context, controller, name)
+        context.instance_variable_set(:@ctx, test_context)
+        expect {
+          context.send_to_opal(:foo)
+        }.to raise_error(/No HyperReact components found/)
+      end
+
+      it 'executes method with args inside opal rubyracer context' do
+        ctx = react_context
+        context = described_class.new('unique-id', ctx, controller, name)
+        context.eval(opal_code)
+        result = context.send_to_opal(:greet, 'world')
+        expect(result).to eq('Hello, world!')
+      end
+
+      it 'executes the method inside opal rubyracer context' do
+        ctx = react_context
+        context = described_class.new('unique-id', ctx, controller, name)
+        context.eval(opal_code)
+        result = context.send_to_opal(:valediction)
+        expect(result).to eq('Goodbye')
+      end
+    end
+  end
+end