simple_bootstrap_form 0.0.2 → 0.0.3

data/spec/simple_bootstrap_form_spec.rb

@@ -1,5 +1,9 @@
 require 'spec_helper'
 
+def pretty_print(html)
+  Nokogiri::XML(html, &:noblanks).to_xhtml
+end
+
 describe SimpleBootstrapForm, type: :helper do
 
   def account_form
@@ -23,133 +27,406 @@ describe SimpleBootstrapForm, type: :helper do
     let(:model) { Account.new }
     let(:form_id) { 'new_account' }
 
-    subject do
-      account_form
-    end
-
-    #it "should generate a form" do
-    #  expect(subject).to eq(
-    #    '<form accept-charset="UTF-8" action="/accounts" class="form-horizontal" id="new_account" method="post">' +
-    #      '<div style="margin:0;padding:0;display:inline">'+
-    #        '<input name="utf8" type="hidden" value="&#x2713;" />'+
-    #      '</div>'+
-    #      '<div class="form-group">'+
-    #        '<label class="control-label col-sm-3" for="account_email"><abbr title="required">*</abbr> Email</label>'+
-    #        '<div class="col-sm-6">'+
-    #          '<input class="form-control" id="account_email" name="account[email]" placeholder="Email" required="required" type="email" />'+
-    #        '</div>'+
-    #      '</div>'+
-    #    '</form>'
-    #  )
-    #end
-
-    describe "the form" do
-      it "should have and ID" do
-        should have_selector %(form##{form_id}[action="/accounts"])
+    describe "all forms" do
+      subject do
+        account_form
       end
 
-      it "should be a horizontal form" do
-        should have_selector "form##{form_id}.form-horizontal"
+      it "should have an ID" do
+        should have_element %(form##{form_id}[action="/accounts"])
       end
 
       it "should have role 'form'" do
-        should have_selector "form##{form_id}[role=form]"
+        should have_element "form##{form_id}[role=form]"
       end
-    end
 
-    describe "f.input" do
-      let(:field_id) { "account_email" }
+      describe "f.input" do
+        let(:field_id) { 'account_email' }
+
+        describe "form-group" do
+          it "should add a class describing the form group" do
+            should have_element '.form-group.account_email_group'
+          end
+
+          context "when a :group_class option is provided" do
+            subject {
+              helper.bootstrap_form_for model do |f|
+                f.input :email, group_class: "my_class"
+              end
+            }
+
+            it "should add that value as a class to the group" do
+              should have_element '.form-group.my_class'
+            end
+          end
 
-      describe "form-group" do
-        it "should add a class describing the form group" do
-          should have_selector ".form-group.account_email_group"
+          context "when :group_class is set to false on the input" do
+            subject {
+              helper.bootstrap_form_for model do |f|
+                f.input :email, group_class: false
+              end
+            }
+
+            it "should not add a field-specific class to that group" do
+              should have_element('.form-group').with_only_classes('form-group')
+            end
+          end
+
+          context "when :group_class is set to false on the form" do
+            subject {
+              helper.bootstrap_form_for model, group_class: false do |f|
+                f.input :email
+              end
+            }
+
+            it "should not add a field-specific class to the groups" do
+              should have_element('.form-group').with_only_classes('form-group')
+            end
+          end
         end
-      end
 
-      describe "label" do
-        it { should have_selector "form##{form_id} > .form-group > label.control-label[for=#{field_id}]" }
+        describe "label" do
+          it { should have_element "form##{form_id} > .form-group " +
+                                    "> label.control-label[for=#{field_id}]" }
+        end
+
+        describe "string field" do
+          let(:field_id) { 'account_first_name' }
 
-        it "should make the label 3 columns wide" do
-          should have_selector "label.col-sm-3[for=#{field_id}]"
+          it "should give the input an ID, and class form-control" do
+            should have_element %(input##{field_id}.form-control[name="account[first_name]"])
+          end
+
+          it { should have_element("input##{field_id}").with_type('text') }
+          it { should have_element("input##{field_id}").with_placeholder('First name') }
         end
-      end
 
-      describe "string field" do
-        let(:field_id) { 'account_first_name' }
+        describe "integer field" do
+          let(:field_id) { "account_id" }
+          subject do
+            helper.bootstrap_form_for model do |f|
+              f.input :id
+            end
+          end
+          it { should have_element("input##{field_id}").with_type('text') }
+        end
 
-        it "should give the input an ID, and class form-control" do
-          should have_selector %(input##{field_id}.form-control[name="account[first_name]"])
+        describe "email field (required)" do
+          let(:field_id) { "account_email" }
+
+          it { should have_element("input##{field_id}").with_type('email') }
+          it { should have_element("input##{field_id}").with_placeholder('Email') }
+          it { should have_element("input##{field_id}").with_attr_value(:required, 'required') }
         end
 
-        it "should place the input inside a 6 column div" do
-          should have_selector "form##{form_id} > .form-group > .col-sm-6 > input##{field_id}"
+        describe "option :as =>" do
+          let(:field_id) { "account_email" }
+          subject do
+            helper.bootstrap_form_for model do |f|
+              f.input :email, as: :text
+            end
+          end
+          it "should override the type" do
+            should have_element("input##{field_id}").with_type('text')
+          end
         end
 
-        it { should have_input("##{field_id}").with_type('text') }
-        it { should have_input("##{field_id}").with_placeholder('First name') }
-      end
+        describe "password field" do
+          let(:field_id) { "account_password" }
+
+          it { should have_element("input##{field_id}").with_type('password') }
+        end
+
+        context "Using the Article form" do
+          let(:model) { Article.new }
+          subject { article_form }
+
+          describe "text field (optional)" do
+            let(:field_id) { 'article_body' }
+
+            it { should have_element(:textarea).with_id(field_id) }
+            it { should have_element(:textarea).with_id(field_id)
+                                           .with_placeholder('Body') }
+            it { should_not have_element(:textarea).with_id(field_id)
+                                               .with_attr_value(:required, 'required') }
+          end
 
-      describe "integer field" do
-        let(:field_id) { "account_id" }
-        subject do
-          helper.bootstrap_form_for model do |f|
-            f.input :id
+          describe "datetime field" do
+            let(:field_id) { "article_published_at" }
+
+            it { should have_element("input##{field_id}").with_type('datetime') }
+          end
+
+          describe "boolean field" do
+            let(:field_id) { 'article_visible' }
+
+            it { should have_element("input##{field_id}").with_type('checkbox') }
           end
         end
-        it { should have_input("##{field_id}").with_type('text') }
       end
+    end
 
-      describe "email field (required)" do
-        let(:field_id) { "account_email" }
+    #describe "for vertical forms" do
+    #end
+
+    #describe "for inline forms" do
+    #  subject {
+    #    helper.bootstrap_form_for model, layout: 'inline' do |f|
+    #      f.input(:email)
+    #    end
+    #  }
+    #  it { should have_element "form.form-inline" }
+    #end
 
-        it { should have_input("##{field_id}").with_type('email') }
-        it { should have_input("##{field_id}").with_placeholder('Email') }
-        it { should have_input("##{field_id}").with_attr_value(:required, 'required') }
+    describe "horizontal forms" do
+      subject {
+        helper.bootstrap_form_for(model, layout: 'horizontal') {}
+      }
+
+      describe "the form" do
+        it { should have_element "form.form-horizontal" }
       end
 
-      describe "option :as =>" do
+      describe "f.input" do
         let(:field_id) { "account_email" }
-        subject do
-          helper.bootstrap_form_for model do |f|
-            f.input :email, as: :text
+
+        context "using size defaults" do
+          subject {
+            helper.bootstrap_form_for model, layout: 'horizontal' do |f|
+              f.input(:email)
+            end
+          }
+
+          it "should make the label col-sm-3 wide" do
+            should have_element "label.col-sm-3[for=#{field_id}]"
+          end
+
+          it "should place the input inside a col-sm-6" do
+            should have_element "form##{form_id} > .form-group > .col-sm-6 > input##{field_id}"
           end
         end
-        it "should override the type" do
-          should have_input("##{field_id}").with_type('text')
+
+        context "when sizes are supplied to the form" do
+          subject {
+            helper.bootstrap_form_for model, layout: 'horizontal',
+                                             label_size: 'col-md-3',
+                                             input_size: 'col-md-6' do |f|
+              f.input :email
+            end
+          }
+
+          it "should use the form sizes for label and input" do
+              should have_element "label.col-md-3[for=#{field_id}]"
+              should have_element ".form-group > .col-md-6 > input##{field_id}"
+          end
+
+          context "when sizes are supplied to the input" do
+            subject {
+              helper.bootstrap_form_for model, layout: 'horizontal' do |f|
+                f.input :email, label_size: 'col-xs-2', input_size: 'col-xs-4'
+              end
+            }
+
+            it "input sizes should override the form sizes" do
+              should have_element "label.col-xs-2[for=#{field_id}]"
+              should have_element ".form-group > .col-xs-4 > input##{field_id}"
+            end
+          end
         end
       end
+    end
+  end
 
-      describe "password field" do
-        let(:field_id) { "account_password" }
+  describe "getbootstrap.com examples" do
+    describe "Basic example" do
+      class Model1
+        include ActiveModel::Validations
+        include ActiveModel::Conversion
+        include ActiveModel::Naming
 
-        it { should have_input("##{field_id}").with_type('password') }
+        def self.model_path
+          "foo"
+        end
+
+        attr_accessor :exampleInputEmail1
+        attr_accessor :exampleInputPassword1
+        attr_accessor :exampleInputFile
+        attr_accessor :check_me_out
       end
 
-      context "Using the Article form" do
-        let(:model) { Article.new }
-        subject { article_form }
+      let!(:model) do
+        Model1.new
+      end
 
-        describe "text field (optional)" do
-          let(:field_id) { 'article_body' }
+      let(:basic_example_output_from_getbootstrap_dot_com) {
+        <<-BASIC_EXAMPLE
+<form role="form">
+  <div class="form-group">
+    <label for="exampleInputEmail1">Email address</label>
+    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
+  </div>
+  <div class="form-group">
+    <label for="exampleInputPassword1">Password</label>
+    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
+  </div>
+  <div class="form-group">
+    <label for="exampleInputFile">File input</label>
+    <input type="file" id="exampleInputFile">
+    <p class="help-block">Example block-level help text here.</p>
+  </div>
+  <div class="checkbox">
+    <label>
+      <input type="checkbox"> Check me out
+    </label>
+  </div>
+  <button type="submit" class="btn btn-default">Submit</button>
+</form>
+        BASIC_EXAMPLE
+      }
 
-          it { should have_tag(:textarea).with_id(field_id) }
-          it { should have_tag(:textarea).with_id(field_id)
-                                         .with_placeholder('Body') }
-          it { should_not have_tag(:textarea).with_id(field_id)
-                                             .with_attr_value(:required, 'required') }
+      subject {
+        helper.bootstrap_form_for model, url: '/foo' do |f|
+          f.input(:exampleInputEmail1) +
+          f.input(:exampleInputPassword1) +
+          f.input(:exampleInputFile, help: "Example block-level help text here.") +
+          f.input(:check_me_out, as: :boolean)
         end
+      }
 
-        describe "datetime field" do
-          let(:field_id) { "article_published_at" }
+      it "should generate the correct output"
+    end
 
-          it { should have_input("##{field_id}").with_type('datetime') }
+    describe "Inline form" do
+      let(:inline_form_from_getbootstrap_dot_com) {
+        <<-INLINE_FORM
+<form class="form-inline" role="form">
+  <div class="form-group">
+    <label class="sr-only" for="exampleInputEmail2">Email address</label>
+    <input type="email" class="form-control" id="exampleInputEmail2" placeholder="Enter email">
+  </div>
+  <div class="form-group">
+    <label class="sr-only" for="exampleInputPassword2">Password</label>
+    <input type="password" class="form-control" id="exampleInputPassword2" placeholder="Password">
+  </div>
+  <div class="checkbox">
+    <label>
+      <input type="checkbox"> Remember me
+    </label>
+  </div>
+  <button type="submit" class="btn btn-default">Sign in</button>
+</form>
+        INLINE_FORM
+      }
+    end
+
+    describe "Horizontal form" do
+      class Model3
+        include ActiveModel::Validations
+        include ActiveModel::Conversion
+        include ActiveModel::Naming
+
+        def self.model_path
+          "foo"
         end
 
-        describe "boolean field" do
-          let(:field_id) { 'article_visible' }
+        attr_accessor :inputEmail3
+        attr_accessor :inputPassword3
+        attr_accessor :remember_me
+      end
+
+      let!(:model) do
+        Model3.new
+      end
+
+      let(:horizontal_form_output) {
+        # Original copy from getbootstrap.com
+        #<form class="form-horizontal" role="form">
+        #  <div class="form-group">
+        #    <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
+        #    <div class="col-sm-10">
+        #      <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
+        #    </div>
+        #  </div>
+        #  <div class="form-group">
+        #    <label for="inputPassword3" class="col-sm-2 control-label">Password</label>
+        #    <div class="col-sm-10">
+        #      <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
+        #    </div>
+        #  </div>
+        #  <div class="form-group">
+        #    <div class="col-sm-offset-2 col-sm-10">
+        #      <div class="checkbox">
+        #        <label>
+        #          <input type="checkbox"> Remember me
+        #        </label>
+        #      </div>
+        #    </div>
+        #  </div>
+        #  <div class="form-group">
+        #    <div class="col-sm-offset-2 col-sm-10">
+        #      <button type="submit" class="btn btn-default">Sign in</button>
+        #    </div>
+        #  </div>
+        #</form>
 
-          it { should have_input("##{field_id}").with_type('checkbox') }
+        # Railsified version
+        # <form>
+        #   add accept-charset, action, id, method, model-specific class
+        # <label>
+        #   changed for= to model_field
+        # <input>
+        #   reorder input attributes to match Rails' order
+        #   add name=
+  <<-HORIZONTAL_FORM
+<form accept-charset="UTF-8" action="/foo" class="new_model3 form-horizontal" id="new_model3" method="post" role="form">
+  <div style=\"margin:0;padding:0;display:inline\">
+    <input name="utf8" type="hidden" value="&#x2713;" />
+  </div>
+  <div class="form-group">
+    <label class="col-sm-2 control-label" for="model3_inputEmail3">Email</label>
+    <div class="col-sm-10">
+      <input class="form-control" id="model3_inputEmail3" name="model3[inputEmail3]" placeholder="Email" type="email" />
+    </div>
+  </div>
+  <div class="form-group">
+    <label class="col-sm-2 control-label" for="model3_inputPassword3">Password</label>
+    <div class="col-sm-10">
+      <input class="form-control" id="model3_inputPassword3" name="model3[inputPassword3]" placeholder="Password" type="password" />
+    </div>
+  </div>
+  <div class="form-group">
+    <div class="col-sm-offset-2 col-sm-10">
+      <div class="checkbox">
+        <label>
+          <input type="checkbox"> Remember me
+        </label>
+      </div>
+    </div>
+  </div>
+  <div class="form-group">
+    <div class="col-sm-offset-2 col-sm-10">
+      <button type="submit" class="btn btn-default">Sign in</button>
+    </div>
+  </div>
+</form>
+        HORIZONTAL_FORM
+      }
+
+      subject {
+        helper.bootstrap_form_for model,
+                                  layout: :horizontal,
+                                  label_size: 'col-sm-2',
+                                  input_size: 'col-sm-10',
+                                  group_class: false,
+                                  url: '/foo' do |f|
+          f.input(:inputEmail3, label: "Email", placeholder: "Email") +
+          f.input(:inputPassword3, label: "Password", placeholder: "Password") +
+          f.input(:remember_me, as: :boolean, label_size: 'col-sm-offset-2 col-sm-10')
         end
+      }
+
+      it "should generate the correct output" do
+        #expect(pretty_print subject).to eq horizontal_form_output
       end
     end
   end

data/spec/spec_helper.rb

@@ -44,4 +44,7 @@ RSpec.configure do |config|
   # the seed, which is printed after each run.
   #     --seed 1234
   config.order = "random"
+
+  config.filter_run :focus => true
+  config.run_all_when_everything_filtered = true
 end

data/spec/support/have_element.rb

@@ -0,0 +1,109 @@
+require 'nokogiri'
+
+RSpec::Matchers.define :have_element do |selector|
+  match_for_should do |markup|
+    @selector = selector
+    @markup = markup
+    element_is_present && classes_match
+  end
+
+  match_for_should_not do |markup|
+    @selector = selector
+    @markup = markup
+    !element_is_present || !classes_match
+  end
+
+  failure_message_for_should do |markup|
+    if the_element.nil?
+      "expected to find an element matching #{selector} in #{markup}"
+    elsif @expected_classes
+      actual_classes = @element['class'].split(' ')
+      "expected #{inspect_the_element} to have classes \"#{@expected_classes.sort.join(' ')}\" but it has classes \"#{actual_classes.sort.join(' ')}\""
+    else
+    end
+  end
+
+  failure_message_for_should_not do |markup|
+    "expected #{inspect_the_element} not to have classes \"#{@expected_classes.sort.join(' ')}\" in #{markup}"
+  end
+
+  def element_is_present
+    the_element.is_a? Nokogiri::XML::Element
+  end
+
+  def check_element(element)
+    if @expected_classes
+    else
+      true
+    end
+  end
+
+  ########## Chain assertions that will affect the selector
+
+  chain :with_id do |id|
+    @id = id
+  end
+
+  chain :with_class do |css_class|
+    @class = css_class
+  end
+
+  def attrs
+    @attrs ||= {}
+  end
+
+  chain :with_attr_value do |attr, value|
+    attrs[attr] = value
+  end
+
+  chain :with_type do |type|
+    attrs['type'] = type
+  end
+
+  chain :with_placeholder do |placeholder|
+    attrs['placeholder'] = placeholder
+  end
+
+  def actual_selector
+    @actual_selector ||= begin
+      s = @selector.to_s.dup
+      s << "##{@id}" if @id
+      s << ".#{@class}" if @class
+      attrs.each do |attr, value|
+        s << "[#{attr}=\"#{value}\"]"
+      end
+      s
+    end
+  end
+
+  ########## Chain assertions that are run once the tag has been recovered
+
+  chain :with_only_classes do |classes|
+    @expected_classes = classes.split ' '
+  end
+  
+  def actual_classes
+    the_element['class'].split ' '
+  end
+  
+  def classes_match
+    return true unless @expected_classes
+    actual_classes.sort == @expected_classes.sort
+  end
+  
+  ########## Utility methods
+  
+  def the_element
+    @element ||= begin
+      doc = Nokogiri::XML @markup
+      elements = doc.css actual_selector
+      raise "found multiple elements matching \"#{actual_selector}\"" if elements.count > 1
+      elements.first
+    end
+  end
+
+  def inspect_the_element
+    the_element.children = ""
+    the_element
+  end
+end