implement render to html matcher

Author: ajjahn

spec/react/component/base_spec.rb

@@ -25,8 +25,8 @@ def render
         @instance_data.join(" ")
       end
     end
-    expect(render_to_html(Foo)).to eq("<span>working</span>")
-    expect(render_to_html(Bar)).to eq("<span>working well</span>")
+    expect(Foo).to render("<span>working</span>")
+    expect(Bar).to render("<span>working well</span>")
   end
 
 end

spec/react/component_spec.rb

@@ -120,7 +120,7 @@ def render
         end
       end
 
-      expect(render_to_html(Foo)).to eq('<div>bar</div>')
+      expect(Foo).to render('<div>bar</div>')
     end
 
     it 'allows kernal method names like "format" to be used as state variable names' do
@@ -131,7 +131,7 @@ def render
         end
       end
 
-      expect(render_to_html(Foo)).to eq('<div>yes</div>')
+      expect(Foo).to render('<div>yes</div>')
     end
 
     it 'returns an observer with the bang method and no arguments' do
@@ -141,7 +141,7 @@ def render
         end
       end
 
-      expect(render_to_html(Foo)).to eq('<div>React::Observable</div>')
+      expect(Foo).to render('<div>React::Observable</div>')
     end
 
     it 'returns the current value of a state when written' do
@@ -152,15 +152,15 @@ def render
         end
       end
 
-      expect(render_to_html(Foo)).to eq('<div>bar</div>')
+      expect(Foo).to render('<div>bar</div>')
     end
 
     it 'can access an explicitly defined state`' do
       Foo.class_eval do
         define_state foo: :bar
       end
 
-      expect(render_to_html(Foo)).to eq('<div>bar</div>')
+      expect(Foo).to render('<div>bar</div>')
     end
 
   end
@@ -304,7 +304,7 @@ def render
         end
       end
 
-      expect(render_to_html(Foo)).to eq('<div>bar</div>')
+      expect(Foo).to render('<div>bar</div>')
     end
 
     it 'transforms state getter to Ruby object' do
@@ -320,7 +320,7 @@ def render
         end
       end
 
-      expect(render_to_html(Foo)).to eq('<div>Hello</div>')
+      expect(Foo).to render('<div>Hello</div>')
     end
   end
 
@@ -468,8 +468,8 @@ def render
           end
         end
 
-        expect(render_to_html(Foo, foo: 'lorem')).to eq('<div>lorem-bar</div>')
-        expect(render_to_html(Foo)).to eq('<div>foo-bar</div>')
+        expect(Foo).to render('<div>lorem-bar</div>').with_params(foo: 'lorem')
+        expect(Foo).to render('<div>foo-bar</div>')
       end
     end
   end
@@ -596,7 +596,7 @@ def render
         end
       end
 
-      expect(render_to_html(Bar)).to eq('<div><div><span>astring</span></div></div>')
+      expect(Bar).to render('<div><div><span>astring</span></div></div>')
     end
 
     it 'builds single node in top-level render without providing a block' do
@@ -609,7 +609,7 @@ def render
         end
       end
 
-      expect(render_to_html(Foo)).to eq('<div></div>')
+      expect(Foo).to render('<div></div>')
     end
 
     it 'redefines `p` to make method missing work' do
@@ -627,7 +627,7 @@ def render
       end
 
       markup = '<p class="foo"><p></p><div>lorem ipsum</div><p id="10"></p></p>'
-      expect(render_to_html(Foo)).to eq(markup)
+      expect(Foo).to render(markup)
     end
 
     it 'only overrides `p` in render context' do

spec/react/dsl_spec.rb

@@ -2,7 +2,6 @@
 
 if opal?
 describe 'the React DSL' do
-
   it "will turn the last string in a block into a element" do
     stub_const 'Foo', Class.new
     Foo.class_eval do
@@ -12,7 +11,7 @@ def render
       end
     end
 
-    expect(render_to_html(Foo)).to eq('<div>hello</div>')
+    expect(Foo).to render('<div>hello</div>')
   end
 
   it "has a .span short hand String method" do
@@ -24,7 +23,7 @@ def render
       end
     end
 
-    expect(render_to_html(Foo)).to eq('<div><span>hello</span><span>goodby</span></div>')
+    expect(Foo).to render('<div><span>hello</span><span>goodby</span></div>')
   end
 
   it "has a .br short hand String method" do
@@ -36,7 +35,7 @@ def render
       end
     end
 
-    expect(render_to_html(Foo)).to eq('<div><span>hello<br></span></div>')
+    expect(Foo).to render('<div><span>hello<br></span></div>')
   end
 
   it "has a .td short hand String method" do
@@ -48,7 +47,7 @@ def render
       end
     end
 
-    expect(render_to_html(Foo)).to eq('<table><tr><td>hello</td></tr></table>')
+    expect(Foo).to render('<table><tr><td>hello</td></tr></table>')
   end
 
   it "has a .para short hand String method" do
@@ -60,7 +59,7 @@ def render
       end
     end
 
-    expect(render_to_html(Foo)).to eq('<div><p>hello</p></div>')
+    expect(Foo).to render('<div><p>hello</p></div>')
   end
 
   it "will treat the component class name as a first class component name" do
@@ -78,7 +77,7 @@ def render
       end
     end
 
-    expect(render_to_html(Foo)).to eq('<span>a man walks into a bar</span>')
+    expect(Foo).to render('<span>a man walks into a bar</span>')
   end
 
   it "will treat the component class name as a first class component name" do
@@ -96,7 +95,7 @@ def render
       end
     end
 
-    expect(render_to_html(Foo)).to eq('<span>a man walks into a bar</span>')
+    expect(Foo).to render('<span>a man walks into a bar</span>')
   end
 
   it "can add class names by the haml .class notation" do
@@ -114,7 +113,7 @@ def render
       end
     end
 
-    expect(render_to_html(Foo)).to eq('<span class="the-class">a man walks into a bar</span>')
+    expect(Foo).to render('<span class="the-class">a man walks into a bar</span>')
   end
 
   it "can use the 'class' keyword for classes" do
@@ -126,7 +125,7 @@ def render
       end
     end
 
-    expect(render_to_html(Foo)).to eq('<span class="the-class">hello</span>')
+    expect(Foo).to render('<span class="the-class">hello</span>')
   end
 
   it "can generate a unrendered node using the .as_node method" do          # div { "hello" }.as_node
@@ -138,7 +137,7 @@ def render
       end
     end
 
-    expect(render_to_html(Foo)).to eq('<span>React::Element</span>')
+    expect(Foo).to render('<span>React::Element</span>')
   end
 
   it "can use the dangerously_set_inner_HTML param" do
@@ -150,7 +149,7 @@ def render
       end
     end
 
-    expect(render_to_html(Foo)).to eq('<div>Hello&nbsp;&nbsp;Goodby</div>')
+    expect(Foo).to render('<div>Hello&nbsp;&nbsp;Goodby</div>')
   end
 
   it "will remove all elements passed as params from the rendering buffer" do
@@ -173,7 +172,7 @@ def render
       end
     end
 
-    expect(render_to_html(Test)).to eq('<div><b>hello</b><b>hello</b></div>')
+    expect(Test).to render('<div><b>hello</b><b>hello</b></div>')
   end
 end
 end

spec/react/param_declaration_spec.rb

@@ -13,7 +13,7 @@ def render
       end
     end
 
-    expect(render_to_html(Foo, bar: 'biz')).to eq('<div>biz</div>')
+    expect(Foo).to render('<div>biz</div>').with_params(bar: 'biz')
   end
 
   it "can create and access a required param" do
@@ -26,7 +26,7 @@ def render
       end
     end
 
-    expect(render_to_html(Foo, foo: :bar)).to eq('<div>bar</div>')
+    expect(Foo).to render('<div>bar</div>').with_params(foo: :bar)
   end
 
   it "can create and access an optional params" do
@@ -43,7 +43,7 @@ def render
       end
     end
 
-    expect(render_to_html(Foo, foo1: :bar1, foo3: :bar3)).to eq('<div>bar1-no_bar2-bar3-no_bar4</div>')
+    expect(Foo).to render('<div>bar1-no_bar2-bar3-no_bar4</div>').with_params(foo1: :bar1, foo3: :bar3)
   end
 
   it 'can specify validation rules with the type option' do
@@ -67,7 +67,7 @@ def render
       end
     end
 
-    expect(render_to_html(Foo, foo1: 12, foo2: "string")).to eq('<div>12-string</div>')
+    expect(Foo).to render('<div>12-string</div>').with_params(foo1: 12, foo2: "string")
   end
 
   it 'logs error in warning if validation failed' do
@@ -162,8 +162,9 @@ def render
           "#{params.bar.kind}, #{params.baz[0].kind}"
         end
       end
-      expect(render_to_html(
-        Foo, foo: "", bar: {bazwoggle: 1}, baz: [{bazwoggle: 2}])).to eq('<span>1, 2</span>')
+
+      params = { foo: "", bar: { bazwoggle: 1 }, baz: [{ bazwoggle: 2 }] }
+      expect(Foo).to render('<span>1, 2</span>').with_params(params)
       expect(`window.dummy_log`).to eq(["Warning: Failed propType: In component `Foo`\nProvided prop `foo` could not be converted to BazWoggle"])
     end
 
@@ -174,7 +175,7 @@ def render
           params.foo
         end
       end
-      expect(render_to_html(Foo, foo: lambda { 'works!' })).to eq('<span>works!</span>')
+      expect(Foo).to render('<span>works!</span>').with_params(foo: lambda { 'works!' })
     end
 
     it "will create a 'bang' (i.e. update) method if the type is React::Observable" do
@@ -189,7 +190,7 @@ def render
       end
       current_state = ""
       observer = React::Observable.new(current_state) { |new_state| current_state = new_state }
-      expect(render_to_html(Foo, foo: observer)).to eq('<span>ha!</span>')
+      expect(Foo).to render('<span>ha!</span>').with_params(foo: observer)
       expect(current_state).to eq("ha!")
     end
   end

spec/react/react_spec.rb

@@ -102,7 +102,7 @@ def render
           end
         end
 
-        expect(render_to_html(Foo)).to eq("<div>20</div>")
+        expect(Foo).to render("<div>20</div>")
       end
 
       it "should match the instance cycle to ReactComponent life cycle" do

spec/react/tutorial/tutorial_spec.rb

@@ -10,7 +10,7 @@ def render
 
 describe 'An Example from the react.rb doc' do
   it 'produces the correct result' do
-    expect(render_to_html(HelloMessage)).to eq('<div>Hello World!</div>')
+    expect(HelloMessage).to render('<div>Hello World!</div>')
   end
 end
 
@@ -24,7 +24,7 @@ def render
 
 describe 'Adding state to a component (second tutorial example)' do
   it "produces the correct result" do
-    expect(render_to_html(HelloMessage2)).to eq('<div>Hello @catmando</div>')
+    expect(HelloMessage2).to render('<div>Hello @catmando</div>')
   end
 
   it 'renders to the document' do

spec/spec_helper.rb

@@ -65,6 +65,7 @@ def self.should_immediately_generate(opts={}, &block)
 
   RSpec.configure do |config|
     config.include React::SpecHelpers
+    config.include React::Testing::Matchers
     config.filter_run_excluding :ruby
   end
 end

spec/support/react/spec_helpers.rb

@@ -59,4 +59,52 @@ def expect_component_to_eventually(component_class, opts = {}, &block)
       check_block.call
     end
   end
+
+  module Testing
+    module Matchers
+      class RenderHTMLMatcher
+        def initialize(expected)
+          @expected = expected
+          @params = {}
+        end
+
+        def with_params(params)
+          @params = params
+          self
+        end
+
+        def matches?(component)
+          @component = component
+          @actual = render_to_html
+          @expected == @actual
+        end
+
+        def failure_message
+          failure_string
+        end
+
+        def negative_failure_message
+          failure_string(:negative)
+        end
+
+        private
+
+        def render_to_html
+          element = React.create_element(@component, @params)
+          React.render_to_static_markup(element)
+        end
+
+        def failure_string(negative = false)
+          str = "expected '#{@component.name}' with params '#{@params}' to "
+          str = str + "not " if negative
+          str = str + "render '#{@expected}', but '#{@actual}' was rendered."
+          str
+        end
+      end
+
+      def render(*args)
+        RenderHTMLMatcher.new(*args)
+      end
+    end
+  end
 end