Merge pull request #32 from pantographe/custom-rspec-matcher-html

Add custom eq_html RSpec matcher

spec/support/matchers/eq_html.rb

@@ -0,0 +1,51 @@
+# frozen_string_literal: true
+
+module ComponentMatchers
+  class EqHtml
+    attr_reader :actual, :expected
+
+    def initialize(expected)
+      @expected = expected
+      @actual = nil
+      @invalid_response = nil
+    end
+
+    def matches?(html_fragment)
+      html_fragment = html_fragment.to_html if html_fragment.is_a? Nokogiri::HTML::DocumentFragment
+
+      @actual = html_fragment
+
+      @actual == expected_formatted
+    end
+
+    def failure_message
+      "expected: #{actual}\n\n     got: #{expected}"
+    end
+
+    def failure_message_when_negated
+      "expected: value != #{actual}\n\n     got: #{expected}"
+    end
+
+    def description
+      "has HTML containing #{expected_formatted}"
+    end
+
+    def diffable?
+      true
+    end
+
+    private
+
+    def expected_formatted
+      expected.chomp
+    end
+  end
+
+  def eq_html(html)
+    EqHtml.new(html)
+  end
+end
+
+RSpec.configure do |config|
+  config.include ComponentMatchers, type: :component
+end

spec/view_component/form/button_component_spec.rb

@@ -12,9 +12,9 @@
 
   context "with simple args" do
     it do
-      expect(component.to_html).to eq(
-        %(<button name="button" type="submit">Send</button>)
-      )
+      expect(component).to eq_html <<~HTML
+        <button name="button" type="submit">Send</button>
+      HTML
     end
   end
 
@@ -26,9 +26,9 @@
     end
 
     it do
-      expect(component.to_html).to eq(
-        %(<button name="button" type="submit">Send <strong>now</strong>!</button>)
-      )
+      expect(component).to eq_html <<~HTML
+        <button name="button" type="submit">Send <strong>now</strong>!</button>
+      HTML
     end
   end
 

spec/view_component/form/check_box_component_spec.rb

@@ -10,10 +10,9 @@
 
   context "with simple args" do
     it do
-      expect(component.to_html).to eq(
-        %(<input name="user[admin]" type="hidden" value="0">) +
-          %(<input type="checkbox" value="1" name="user[admin]" id="user_admin">)
-      )
+      expect(component).to eq_html <<~HTML
+        <input name="user[admin]" type="hidden" value="0"><input type="checkbox" value="1" name="user[admin]" id="user_admin">
+      HTML
     end
   end
 

spec/view_component/form/collection_check_boxes_component_spec.rb

@@ -22,14 +22,10 @@
   let(:component_html_attributes) { component.css("input").last.attributes }
 
   context "with simple args" do
-    it do # rubocop:disable RSpec/ExampleLength
-      expect(component.to_html).to eq(
-        "<input type=\"hidden\" name=\"user[nationalities][]\" value=\"\">" \
-        "<input type=\"checkbox\" value=\"BE\" name=\"user[nationalities][]\" id=\"user_nationalities_be\">" \
-        "<label for=\"user_nationalities_be\">Belgium</label>" \
-        "<input type=\"checkbox\" value=\"FR\" name=\"user[nationalities][]\" id=\"user_nationalities_fr\">" \
-        "<label for=\"user_nationalities_fr\">France</label>"
-      )
+    it do
+      expect(component).to eq_html <<~HTML
+        <input type="hidden" name="user[nationalities][]" value=""><input type="checkbox" value="BE" name="user[nationalities][]" id="user_nationalities_be"><label for="user_nationalities_be">Belgium</label><input type="checkbox" value="FR" name="user[nationalities][]" id="user_nationalities_fr"><label for="user_nationalities_fr">France</label>
+      HTML
     end
   end
 

spec/view_component/form/collection_radio_buttons_component_spec.rb

@@ -22,14 +22,10 @@
   let(:component_html_attributes) { component.css("input").last.attributes }
 
   context "with simple args" do
-    it do # rubocop:disable RSpec/ExampleLength
-      expect(component.to_html).to eq(
-        "<input type=\"hidden\" name=\"user[nationalities]\" value=\"\">" \
-        "<input type=\"radio\" value=\"BE\" name=\"user[nationalities]\" id=\"user_nationalities_be\">" \
-        "<label for=\"user_nationalities_be\">Belgium</label>" \
-        "<input type=\"radio\" value=\"FR\" name=\"user[nationalities]\" id=\"user_nationalities_fr\">" \
-        "<label for=\"user_nationalities_fr\">France</label>"
-      )
+    it do
+      expect(component).to eq_html <<~HTML
+        <input type="hidden" name="user[nationalities]" value=""><input type="radio" value="BE" name="user[nationalities]" id="user_nationalities_be"><label for="user_nationalities_be">Belgium</label><input type="radio" value="FR" name="user[nationalities]" id="user_nationalities_fr"><label for="user_nationalities_fr">France</label>
+      HTML
     end
   end
 

spec/view_component/form/collection_select_component_spec.rb

@@ -23,10 +23,10 @@
 
   context "with simple args" do
     it do
-      expect(component.to_html).to eq(
-        "<select name=\"user[country]\" id=\"user_country\"><option value=\"BE\">Belgium</option>\n" \
-        "<option value=\"FR\">France</option></select>"
-      )
+      expect(component).to eq_html <<~HTML
+        <select name="user[country]" id="user_country"><option value="BE">Belgium</option>
+        <option value="FR">France</option></select>
+      HTML
     end
   end
 

spec/view_component/form/color_field_component_spec.rb

@@ -10,9 +10,9 @@
 
   context "with simple args" do
     it do
-      expect(component.to_html).to eq(
-        %(<input value="#000000" type="color" name="user[background_color]" id="user_background_color">)
-      )
+      expect(component).to eq_html <<~HTML
+        <input value="#000000" type="color" name="user[background_color]" id="user_background_color">
+      HTML
     end
   end
 

spec/view_component/form/file_field_component_spec.rb

@@ -10,9 +10,9 @@
 
   context "with simple args" do
     it do
-      expect(component.to_html).to eq(
-        %(<input type="file" name="user[avatar]" id="user_avatar">)
-      )
+      expect(component).to eq_html <<~HTML
+        <input type="file" name="user[avatar]" id="user_avatar">
+      HTML
     end
   end
 

spec/view_component/form/grouped_collection_select_component_spec.rb

@@ -40,14 +40,14 @@
   let(:component_html_attributes) { component.css("select").last.attributes }
 
   context "with simple args" do
-    it do # rubocop:disable RSpec/ExampleLength
-      expect(component.to_html).to eq(
-        "<select name=\"user[country]\" id=\"user_country\"><optgroup label=\"Europe\">\n" \
-        "<option value=\"BE\">Belgium</option>\n" \
-        "<option value=\"FR\">France</option>\n" \
-        "</optgroup>\n" \
-        "<optgroup label=\"Asia\"><option value=\"JP\">Japan</option></optgroup></select>"
-      )
+    it do
+      expect(component).to eq_html <<~HTML
+        <select name="user[country]" id="user_country"><optgroup label="Europe">
+        <option value="BE">Belgium</option>
+        <option value="FR">France</option>
+        </optgroup>
+        <optgroup label="Asia"><option value="JP">Japan</option></optgroup></select>
+      HTML
     end
   end
 

spec/view_component/form/label_component_spec.rb

@@ -11,9 +11,9 @@
 
   context "with simple args" do
     it do
-      expect(component.to_html).to eq(
-        %(<label for="user_first_name">First name</label>)
-      )
+      expect(component).to eq_html <<~HTML
+        <label for="user_first_name">First name</label>
+      HTML
     end
   end
 
@@ -22,9 +22,9 @@
     let(:component) { render_inline(described_class.new(form, object_name, :first_name, "Your first name", options)) }
 
     it do
-      expect(component.to_html).to eq(
-        %(<label class="custom-label" for="user_first_name">Your first name</label>)
-      )
+      expect(component).to eq_html <<~HTML
+        <label class="custom-label" for="user_first_name">Your first name</label>
+      HTML
     end
   end
 
@@ -36,9 +36,9 @@
     end
 
     it do
-      expect(component.to_html).to eq(
-        %(<label for="user_first_name">Your <strong>first name</strong></label>)
-      )
+      expect(component).to eq_html <<~HTML
+        <label for="user_first_name">Your <strong>first name</strong></label>
+      HTML
     end
   end
 
@@ -50,9 +50,9 @@
     end
 
     it do
-      expect(component.to_html).to eq(
-        %(<label for="user_first_name"><span class="translated-label">First name</span></label>)
-      )
+      expect(component).to eq_html <<~HTML
+        <label for="user_first_name"><span class="translated-label">First name</span></label>
+      HTML
     end
   end
 
@@ -65,9 +65,9 @@
     end
 
     it do
-      expect(component.to_html).to eq(
-        %(<label for="user_first_name"><span class="translated-label">First name</span></label>)
-      )
+      expect(component).to eq_html <<~HTML
+        <label for="user_first_name"><span class="translated-label">First name</span></label>
+      HTML
     end
   end
 

spec/view_component/form/radio_button_component_spec.rb

@@ -10,9 +10,9 @@
 
   context "with simple args" do
     it do
-      expect(component.to_html).to eq(
-        %(<input type="radio" value="mrs" name="user[civility]" id="user_civility_mrs">)
-      )
+      expect(component).to eq_html <<~HTML
+        <input type="radio" value="mrs" name="user[civility]" id="user_civility_mrs">
+      HTML
     end
   end
 

spec/view_component/form/search_field_component_spec.rb

@@ -10,9 +10,9 @@
 
   context "with simple args" do
     it do
-      expect(component.to_html).to eq(
-        %(<input type="search" name="user[query]" id="user_query">)
-      )
+      expect(component).to eq_html <<~HTML
+        <input type="search" name="user[query]" id="user_query">
+      HTML
     end
   end
 

spec/view_component/form/select_component_spec.rb

@@ -20,34 +20,32 @@
 
   context "with simple args" do
     it do
-      expect(component.to_html).to eq(
-        "<select name=\"user[role]\" id=\"user_role\"><option value=\"admin\">Admin</option>\n" \
-        "<option value=\"manager\">Manager</option></select>"
-      )
+      expect(component).to eq_html <<~HTML
+        <select name="user[role]" id="user_role"><option value="admin">Admin</option>
+        <option value="manager">Manager</option></select>
+      HTML
     end
   end
 
   context "with selected value" do
     let(:options) { { selected: "manager" } }
 
     it do
-      expect(component.to_html).to eq(
-        "<select name=\"user[role]\" id=\"user_role\"><option value=\"admin\">Admin</option>\n" \
-        "<option selected value=\"manager\">Manager</option></select>"
-      )
+      expect(component).to eq_html <<~HTML
+        <select name="user[role]" id="user_role"><option value="admin">Admin</option>
+        <option selected value="manager">Manager</option></select>
+      HTML
     end
   end
 
   context "with multiple select" do
     let(:html_options) { { multiple: true } }
 
-    it do # rubocop:disable RSpec/ExampleLength
-      expect(component.to_html).to eq(
-        "<input name=\"user[role][]\" type=\"hidden\" value=\"\">" \
-        "<select multiple name=\"user[role][]\" id=\"user_role\">" \
-        "<option value=\"admin\">Admin</option>\n" \
-        "<option value=\"manager\">Manager</option></select>"
-      )
+    it do
+      expect(component).to eq_html <<~HTML
+        <input name="user[role][]" type="hidden" value=""><select multiple name="user[role][]" id="user_role"><option value="admin">Admin</option>
+        <option value="manager">Manager</option></select>
+      HTML
     end
   end
 

spec/view_component/form/submit_component_spec.rb

@@ -11,19 +11,19 @@
 
   context "with simple args" do
     it do
-      expect(component.to_html).to eq(
-        %(<input type="submit" name="commit" value="" data-disable-with="">)
-      )
+      expect(component).to eq_html <<~HTML
+        <input type="submit" name="commit" value="" data-disable-with="">
+      HTML
     end
   end
 
   context "with value" do
     let(:value) { "Save" }
 
     it do
-      expect(component.to_html).to eq(
-        %(<input type="submit" name="commit" value="Save" data-disable-with="Save">)
-      )
+      expect(component).to eq_html <<~HTML
+        <input type="submit" name="commit" value="Save" data-disable-with="Save">
+      HTML
     end
   end
 

spec/view_component/form/text_area_component_spec.rb

@@ -10,9 +10,10 @@
 
   context "with simple args" do
     it do
-      expect(component.to_html).to eq(
-        %(<textarea name="user[bio]" id="user_bio">\n</textarea>)
-      )
+      expect(component).to eq_html <<~HTML
+        <textarea name="user[bio]" id="user_bio">
+        </textarea>
+      HTML
     end
   end
 

spec/view_component/form/text_field_component_spec.rb

@@ -10,9 +10,9 @@
 
   context "with simple args" do
     it do
-      expect(component.to_html).to eq(
-        %(<input type="text" name="user[email]" id="user_email">)
-      )
+      expect(component).to eq_html <<~HTML
+        <input type="text" name="user[email]" id="user_email">
+      HTML
     end
   end
 

spec/view_component/form/url_field_component_spec.rb

@@ -10,9 +10,9 @@
 
   context "with simple args" do
     it do
-      expect(component.to_html).to eq(
-        %(<input type="url" name="user[wiki_url]" id="user_wiki_url">)
-      )
+      expect(component).to eq_html <<~HTML
+        <input type="url" name="user[wiki_url]" id="user_wiki_url">
+      HTML
     end
   end