gov_uk_date_fields 3.1.0 → 4.0.0

data/test/dummy/test/controllers/employees_controller_test.rb

@@ -74,13 +74,8 @@ class EmployeesControllerTest < ActionController::TestCase
     get :edit, params: { id: @employee }
 
     assert_select 'input#employee_dob_dd' do
-      assert_select '[placeholder]',true
-      assert_select '[placeholder=?]','DD'
-      assert_select '[size=?]','2'
-    end
-
-    assert_select 'input#employee_joined_dd' do
-      assert_select '[placeholder]',false
+      assert_select '[type=?]','number'
+      assert_select '[pattern=?]','[0-9]*'
     end
   end
 end

data/test/dummy/test/fixtures/files/date_fields_error.html

@@ -0,0 +1,37 @@
+<div class="govuk-form-group govuk-form-group--error">
+    <fieldset class="govuk-fieldset" role="group" aria-describedby="employee_dob_hint employee_dob_error">
+        <legend class="govuk-fieldset__legend govuk-fieldset__legend--xl">
+            <h1 class="govuk-fieldset__heading">
+                Date of birth
+            </h1>
+        </legend>
+        <span class="govuk-hint" id="employee_dob_hint">For example, 12 11 2007</span>
+        <span class="govuk-error-message" id="employee_dob_error">Enter the date of birth</span>
+        <div class="govuk-date-input" id="employee_dob">
+            <div class="govuk-date-input__item">
+                <div class="govuk-form-group">
+                    <label class="govuk-label govuk-date-input__label" for="employee_dob_dd">
+                        Day
+                    </label>
+                    <input class="govuk-input govuk-date-input__input govuk-input--width-2 govuk-input--error" id="employee_dob_dd" name="employee[dob_dd]" value="" type="number" pattern="[0-9]*">
+                </div>
+            </div>
+            <div class="govuk-date-input__item">
+                <div class="govuk-form-group">
+                    <label class="govuk-label govuk-date-input__label" for="employee_dob_mm">
+                        Month
+                    </label>
+                    <input class="govuk-input govuk-date-input__input govuk-input--width-2 govuk-input--error" id="employee_dob_mm" name="employee[dob_mm]" value="" type="number" pattern="[0-9]*">
+                </div>
+            </div>
+            <div class="govuk-date-input__item">
+                <div class="govuk-form-group">
+                    <label class="govuk-label govuk-date-input__label" for="employee_dob_yyyy">
+                        Year
+                    </label>
+                    <input class="govuk-input govuk-date-input__input govuk-input--width-4 govuk-input--error" id="employee_dob_yyyy" name="employee[dob_yyyy]" value="" type="number" pattern="[0-9]*">
+                </div>
+            </div>
+        </div>
+    </fieldset>
+</div>

data/test/dummy/test/fixtures/files/date_fields_no_error.html

@@ -0,0 +1,36 @@
+<div class="govuk-form-group">
+    <fieldset class="govuk-fieldset" role="group" aria-describedby="employee_dob_hint">
+        <legend class="govuk-fieldset__legend govuk-fieldset__legend--xl">
+            <h1 class="govuk-fieldset__heading">
+                Date of birth
+            </h1>
+        </legend>
+        <span class="govuk-hint" id="employee_dob_hint">For example, 12 11 2007</span>
+        <div class="govuk-date-input" id="employee_dob">
+            <div class="govuk-date-input__item">
+                <div class="govuk-form-group">
+                    <label class="govuk-label govuk-date-input__label" for="employee_dob_dd">
+                        Day
+                    </label>
+                    <input class="govuk-input govuk-date-input__input govuk-input--width-2" id="employee_dob_dd" name="employee[dob_dd]" value="7" type="number" pattern="[0-9]*">
+                </div>
+            </div>
+            <div class="govuk-date-input__item">
+                <div class="govuk-form-group">
+                    <label class="govuk-label govuk-date-input__label" for="employee_dob_mm">
+                        Month
+                    </label>
+                    <input class="govuk-input govuk-date-input__input govuk-input--width-2" id="employee_dob_mm" name="employee[dob_mm]" value="12" type="number" pattern="[0-9]*">
+                </div>
+            </div>
+            <div class="govuk-date-input__item">
+                <div class="govuk-form-group">
+                    <label class="govuk-label govuk-date-input__label" for="employee_dob_yyyy">
+                        Year
+                    </label>
+                    <input class="govuk-input govuk-date-input__input govuk-input--width-4" id="employee_dob_yyyy" name="employee[dob_yyyy]" value="1963" type="number" pattern="[0-9]*">
+                </div>
+            </div>
+        </div>
+    </fieldset>
+</div>

data/test/dummy/test/fixtures/files/date_fields_no_heading.html

@@ -0,0 +1,34 @@
+<div class="govuk-form-group">
+    <fieldset class="govuk-fieldset" role="group" aria-describedby="employee_dob_hint">
+        <legend class="govuk-fieldset__legend govuk-fieldset__legend--xl govuk-visually-hidden">
+            Date of birth
+        </legend>
+        <span class="govuk-hint" id="employee_dob_hint">For example, 12 11 2007</span>
+        <div class="govuk-date-input" id="employee_dob">
+            <div class="govuk-date-input__item">
+                <div class="govuk-form-group">
+                    <label class="govuk-label govuk-date-input__label" for="employee_dob_dd">
+                        Day
+                    </label>
+                    <input class="govuk-input govuk-date-input__input govuk-input--width-2" id="employee_dob_dd" name="employee[dob_dd]" value="7" type="number" pattern="[0-9]*">
+                </div>
+            </div>
+            <div class="govuk-date-input__item">
+                <div class="govuk-form-group">
+                    <label class="govuk-label govuk-date-input__label" for="employee_dob_mm">
+                        Month
+                    </label>
+                    <input class="govuk-input govuk-date-input__input govuk-input--width-2" id="employee_dob_mm" name="employee[dob_mm]" value="12" type="number" pattern="[0-9]*">
+                </div>
+            </div>
+            <div class="govuk-date-input__item">
+                <div class="govuk-form-group">
+                    <label class="govuk-label govuk-date-input__label" for="employee_dob_yyyy">
+                        Year
+                    </label>
+                    <input class="govuk-input govuk-date-input__input govuk-input--width-4" id="employee_dob_yyyy" name="employee[dob_yyyy]" value="1963" type="number" pattern="[0-9]*">
+                </div>
+            </div>
+        </div>
+    </fieldset>
+</div>

data/test/dummy/test/models/default_error_clash_employee_test.rb

@@ -12,14 +12,14 @@ class DefaultErrorClashEmployeeTest < ActiveSupport::TestCase
 
   def test_presence_error_messages_generated
     @employee.valid?
-    assert_equal ["can't be blank"], @employee.errors[:dob]
+    assert_equal ["Enter the date of birth"], @employee.errors[:dob]
     assert_equal ["can't be blank"], @employee.errors[:joined]
   end
 
   def test_invalid_day_adds_invalid_date_message_to_cant_be_blank_message
     @employee.dob_dd = '32'
     assert_false @employee.valid?
-    assert_equal ['Invalid date', "can't be blank"], @employee.errors[:dob]
+    assert_equal ['Invalid date', "Enter the date of birth"], @employee.errors[:dob]
     assert_equal ["can't be blank"], @employee.errors[:joined]
   end
 

data/test/dummy/test/models/form_fields_test.rb

@@ -20,325 +20,30 @@ class GovUkDateFieldsTest < ActiveSupport::TestCase
     @form_builder = ActionView::Helpers::FormBuilder.new(:employee, @employee, @template, {} )
   end
 
+  test 'date_fields_no_error' do
+    fixture = file_fixture('date_fields_no_error.html').read
 
-  test "error raised if invalid options given" do
-    err = assert_raise do
-      GovUkDateFields::FormFields.new(@form_builder, :employee, :dob, rubbish: 'some_value')
-    end
-  end
-
-
-  test "basic_output_without_fieldset" do
     date_fields = GovUkDateFields::FormFields.new(@form_builder, :employee, :dob)
-    assert_html_equal(date_fields.raw_output, expected_basic_output_without_fieldset)
-  end
-
-  test 'placeholder_output_without_fieldset' do
-    date_fields = GovUkDateFields::FormFields.new(@form_builder, :employee, :dob, {placeholders: { day: 'DAY', month: 'MTH', year: 'YEAR' } })
-    assert_html_equal(date_fields.raw_output, expected_placeholder_output_without_fieldset)
-  end
-
-  test 'fieldset_output_with_form_hint' do
-    date_fields = GovUkDateFields::FormFields.new(@form_builder, :employee, :dob, {legend_text: 'Date of birth', legend_class: 'govuk_legend_class', form_hint_text: 'In the form: dd mm yyyy'})
-    assert_html_equal(date_fields.raw_output, expected_fieldset_output_with_form_hint)
-  end
-
-  test 'fieldset output with legend class' do
-    date_fields = GovUkDateFields::FormFields.new(@form_builder, :employee, :joined, {legend_text: 'Joining date', legend_class: 'date-legend-class', form_hint_text: 'For example, 31 3 1980'})
-    assert_html_equal(date_fields.raw_output, expected_fieldset_output_with_legend_class)
-  end
-
-  test 'fieldset with id' do
-    date_fields = GovUkDateFields::FormFields.new(@form_builder, :employee, :joined, {legend_text: 'Joining date', id: 'employee_date_joined'})
-    assert_html_equal(date_fields.raw_output, expected_fieldset_output_with_id)
-  end
-
-  test 'fieldset without explicit `id` passed in the options (will be autogenerated)' do
-    date_fields = GovUkDateFields::FormFields.new(@form_builder, :employee, :joined, {legend_text: 'Joining date'})
-    assert_html_equal(date_fields.raw_output, expected_fieldset_output_without_id)
-  end
-
-  test 'fieldset output with today button with no css class specified' do
-    date_fields = GovUkDateFields::FormFields.new(@form_builder, :employee, :joined, {legend_text: 'Joining date', id: 'employee_date_joined', today_button: true})
-    assert_html_equal(date_fields.raw_output, expected_fieldset_output_with_unstyled_today_button)
-  end
-
-  test 'fieldset output with today button with css class applied' do
-    date_fields = GovUkDateFields::FormFields.new(@form_builder, :employee, :joined, {legend_text: 'Joining date', id: 'employee_date_joined', today_button: {class: 'today-button-class'} } )
-    assert_html_equal(date_fields.raw_output, expected_fieldset_output_with_syled_today_button)
-  end
-
-  test 'fieldset with error_class and message' do
-    @employee.errors[:joined] <<  "Invalid joining date"
-    @employee.errors[:joined] <<  "Joining date must be in the past"
-    date_fields = GovUkDateFields::FormFields.new(@form_builder, :employee, :joined, {legend_text: 'Joining date', id: 'employee_date_joined'})
-    assert_html_equal(date_fields.raw_output, expected_fieldset_output_with_error_class_and_message)
-  end
-
-  test 'fieldset with error_class and message, with autogenerated `id`' do
-    @employee.errors[:joined] <<  "Invalid joining date"
-    date_fields = GovUkDateFields::FormFields.new(@form_builder, :employee, :joined, {legend_text: 'Joining date'})
-    assert_html_equal(date_fields.raw_output, expected_fieldset_output_with_error_class_and_message_without_id)
+    assert_html_equal(date_fields.raw_output, fixture)
   end
 
-  test 'fieldset with error_class and supplied error messages' do
-    @employee.errors[:joined] <<  "invalid"
-    @employee.errors[:joined] <<  "must_be_in_past"
-    date_fields = GovUkDateFields::FormFields.new(@form_builder, :employee, :joined, {legend_text: 'Joining date', id: 'employee_date_joined', error_messages: ['Invalid joining date', 'Joining date must be in the past']})
-    assert_html_equal(date_fields.raw_output, expected_fieldset_output_with_error_class_and_message)
-  end
-
-  test "squash_html" do
-    html = "   <html>  This is some   text \n  <tr>  \n    <td>  <%=   dfkhdfh   %>  </td>  </tr>\n</html> "
-    expected_result = "<html>This is some   text<tr><td><%=   dfkhdfh   %></td></tr></html>"
-    assert_html_equal(html, expected_result)
-  end
-
-
-  def expected_basic_output_without_fieldset
-    %Q{
-      <input value="7" id="employee_dob_dd" name="employee[dob_dd]" size="2" type="text" />
-      <input value="12" id="employee_dob_mm" name="employee[dob_mm]" size="3" type="text" />
-      <input value="1963" id="employee_dob_yyyy" name="employee[dob_yyyy]" size="4" type="text" />
-    }
-  end
+  test 'date_fields_error' do
+    fixture = file_fixture('date_fields_error.html').read
 
+    @employee.dob = nil
+    @employee.errors.add(:dob, :blank)
 
-  def expected_placeholder_output_without_fieldset
-    %Q{
-      <input value="7" id="employee_dob_dd" name="employee[dob_dd]" placeholder="DAY" size="2" type="text" />
-      <input value="12" id="employee_dob_mm" name="employee[dob_mm]" placeholder="MTH" size="3" type="text" />
-      <input value="1963" id="employee_dob_yyyy" name="employee[dob_yyyy]" placeholder="YEAR" size="4" type="text" />
-    }
-  end
-
-  def expected_fieldset_output_with_error_class_and_message
-    %Q{
-      <div class="form-group gov_uk_date form-group-error" id="employee_date_joined">
-        <fieldset>
-          <legend>
-            <span class="form-label-bold">Joining date</span>
-            <span class="form-hint" id="employee_date_joined-hint">
-              For example, 31 3 1980
-            </span>
-            <ul>
-              <li><span class="error-message">Invalid joining date</span></li>
-              <li><span class="error-message">Joining date must be in the past</span></li>
-            </ul>
-          </legend>
-          <div class="form-date">
-            <div class="form-group form-group-day">
-              <label for="employee_joined_dd">Day</label>
-              <input class="form-control form-control-error" id="employee_joined_dd" name="employee[joined_dd]" type="number" min="0" max="31" aria-describedby="employee_date_joined-hint" value="1">
-            </div>
-            <div class="form-group form-group-month">
-              <label for="employee_joined_mm">Month</label>
-              <input class="form-control form-control-error" id="employee_joined_mm" name="employee[joined_mm]" type="number" min="0" max="12" value="4">
-            </div>
-            <div class="form-group form-group-year">
-              <label for="employee_joined_yyyy">Year</label>
-              <input class="form-control form-control-error" id="employee_joined_yyyy" name="employee[joined_yyyy]" type="number" min="0" max="2100" value="2015">
-            </div>
-          </div>
-        </fieldset>
-      </div>
-    }
-  end
-
-  def expected_fieldset_output_with_error_class_and_message_without_id
-    %Q{
-      <div class="form-group gov_uk_date form-group-error" id="error_employee_joined">
-        <fieldset>
-          <legend>
-            <span class="form-label-bold">Joining date</span>
-            <span class="form-hint" id="employee_joined-hint">
-              For example, 31 3 1980
-            </span>
-            <ul>
-              <li><span class="error-message">Invalid joining date</span></li>
-            </ul>
-          </legend>
-          <div class="form-date">
-            <div class="form-group form-group-day">
-              <label for="employee_joined_dd">Day</label>
-              <input class="form-control form-control-error" id="employee_joined_dd" name="employee[joined_dd]" type="number" min="0" max="31" aria-describedby="employee_joined-hint" value="1">
-            </div>
-            <div class="form-group form-group-month">
-              <label for="employee_joined_mm">Month</label>
-              <input class="form-control form-control-error" id="employee_joined_mm" name="employee[joined_mm]" type="number" min="0" max="12" value="4">
-            </div>
-            <div class="form-group form-group-year">
-              <label for="employee_joined_yyyy">Year</label>
-              <input class="form-control form-control-error" id="employee_joined_yyyy" name="employee[joined_yyyy]" type="number" min="0" max="2100" value="2015">
-            </div>
-          </div>
-        </fieldset>
-      </div>
-    }
-  end
-
-  def expected_fieldset_output_with_id
-    %Q{
-      <div class="form-group gov_uk_date" id="employee_date_joined">
-        <fieldset>
-          <legend>
-            <span class="form-label-bold">Joining date</span>
-            <span class="form-hint" id="employee_date_joined-hint">For example, 31 3 1980</span>
-          </legend>
-          <div class="form-date">
-            <div class="form-group form-group-day">
-              <label for="employee_joined_dd">Day</label>
-              <input class="form-control" id="employee_joined_dd" name="employee[joined_dd]" type="number" min="0" max="31" aria-describedby="employee_date_joined-hint" value="1">
-            </div>
-            <div class="form-group form-group-month">
-              <label for="employee_joined_mm">Month</label>
-              <input class="form-control" id="employee_joined_mm" name="employee[joined_mm]" type="number" min="0" max="12" value="4">
-            </div>
-            <div class="form-group form-group-year">
-              <label for="employee_joined_yyyy">Year</label>
-              <input class="form-control" id="employee_joined_yyyy" name="employee[joined_yyyy]" type="number" min="0" max="2100" value="2015">
-            </div>
-          </div>
-        </fieldset>
-      </div>
-    }
-  end
-
-  def expected_fieldset_output_without_id
-    %Q{
-      <div class="form-group gov_uk_date" id="employee_joined">
-        <fieldset>
-          <legend>
-            <span class="form-label-bold">Joining date</span>
-            <span class="form-hint" id="employee_joined-hint">For example, 31 3 1980</span>
-          </legend>
-          <div class="form-date">
-            <div class="form-group form-group-day">
-              <label for="employee_joined_dd">Day</label>
-              <input class="form-control" id="employee_joined_dd" name="employee[joined_dd]" type="number" min="0" max="31" aria-describedby="employee_joined-hint" value="1">
-            </div>
-            <div class="form-group form-group-month">
-              <label for="employee_joined_mm">Month</label>
-              <input class="form-control" id="employee_joined_mm" name="employee[joined_mm]" type="number" min="0" max="12" value="4">
-            </div>
-            <div class="form-group form-group-year">
-              <label for="employee_joined_yyyy">Year</label>
-              <input class="form-control" id="employee_joined_yyyy" name="employee[joined_yyyy]" type="number" min="0" max="2100" value="2015">
-            </div>
-          </div>
-        </fieldset>
-      </div>
-    }
-  end
-
-  def expected_fieldset_output_with_form_hint
-    %Q{
-      <div class="form-group gov_uk_date" id="employee_dob">
-        <fieldset>
-          <legend class="govuk_legend_class">
-            <span class="form-label-bold">Date of birth</span>
-            <span class="form-hint" id="employee_dob-hint">In the form: dd mm yyyy</span>
-          </legend>
-          <div class="form-date">
-            <div class="form-group form-group-day">
-              <label for="employee_dob_dd">Day</label>
-              <input class="form-control" id="employee_dob_dd" name="employee[dob_dd]" type="number" min="0" max="31" aria-describedby="employee_dob-hint" value="7">
-            </div>
-            <div class="form-group form-group-month">
-              <label for="employee_dob_mm">Month</label>
-              <input class="form-control" id="employee_dob_mm" name="employee[dob_mm]" type="number" min="0" max="12" value="12">
-            </div>
-            <div class="form-group form-group-year">
-              <label for="employee_dob_yyyy">Year</label>
-              <input class="form-control" id="employee_dob_yyyy" name="employee[dob_yyyy]" type="number" min="0" max="2100" value="1963">
-            </div>
-          </div>
-        </fieldset>
-      </div>
-    }
+    date_fields = GovUkDateFields::FormFields.new(@form_builder, :employee, :dob)
+    assert_html_equal(date_fields.raw_output, fixture)
   end
 
-  def expected_fieldset_output_with_legend_class
-    %Q{
-      <div class="form-group gov_uk_date" id="employee_joined">
-        <fieldset>
-          <legend class="date-legend-class">
-            <span class="form-label-bold">Joining date</span>
-            <span class="form-hint" id="employee_joined-hint">For example, 31 3 1980</span>
-          </legend>
-          <div class="form-date">
-            <div class="form-group form-group-day">
-              <label for="employee_joined_dd">Day</label>
-              <input class="form-control" id="employee_joined_dd" name="employee[joined_dd]" type="number" min="0" max="31" aria-describedby="employee_joined-hint" value="1">
-            </div>
-            <div class="form-group form-group-month">
-              <label for="employee_joined_mm">Month</label>
-              <input class="form-control" id="employee_joined_mm" name="employee[joined_mm]" type="number" min="0" max="12" value="4">
-            </div>
-            <div class="form-group form-group-year">
-              <label for="employee_joined_yyyy">Year</label>
-              <input class="form-control" id="employee_joined_yyyy" name="employee[joined_yyyy]" type="number" min="0" max="2100" value="2015">
-            </div>
-          </div>
-        </fieldset>
-      </div>
-    }
-  end
+  test 'date_fields_no_heading' do
+    fixture = file_fixture('date_fields_no_heading.html').read
 
-  def expected_fieldset_output_with_unstyled_today_button
-    %Q{
-      <div class="form-group gov_uk_date" id="employee_date_joined">
-        <fieldset>
-          <legend>
-            <span class="form-label-bold">Joining date</span>
-            <span class="form-hint" id="employee_date_joined-hint">For example, 31 3 1980</span>
-          </legend>
-          <div class="form-date">
-            <a class="button" role="button" href="#">Today</a>
-            <div class="form-group form-group-day">
-                <label for="employee_joined_dd">Day</label>
-                <input class="form-control" id="employee_joined_dd" name="employee[joined_dd]" type="number" min="0" max="31" aria-describedby="employee_date_joined-hint" value="1">
-            </div>
-            <div class="form-group form-group-month">
-                <label for="employee_joined_mm">Month</label>
-                <input class="form-control" id="employee_joined_mm" name="employee[joined_mm]" type="number" min="0" max="12" value="4">
-            </div>
-            <div class="form-group form-group-year">
-                <label for="employee_joined_yyyy">Year</label>
-                <input class="form-control" id="employee_joined_yyyy" name="employee[joined_yyyy]" type="number" min="0" max="2100" value="2015">
-            </div>
-          </div>
-        </fieldset>
-      </div>
-    }
+    date_fields = GovUkDateFields::FormFields.new(
+      @form_builder, :employee, :dob,
+      legend_options: { page_heading: false, visually_hidden: true }
+    )
+    assert_html_equal(date_fields.raw_output, fixture)
   end
-
-  def expected_fieldset_output_with_syled_today_button
-    %Q{
-      <div class="form-group gov_uk_date" id="employee_date_joined">
-        <fieldset>
-          <legend>
-            <span class="form-label-bold">Joining date</span>
-            <span class="form-hint" id="employee_date_joined-hint">For example, 31 3 1980</span>
-          </legend>
-          <div class="form-date">
-            <a class="today-button-class" role="button" href="#">Today</a>
-            <div class="form-group form-group-day">
-                <label for="employee_joined_dd">Day</label>
-                <input class="form-control" id="employee_joined_dd" name="employee[joined_dd]" type="number" min="0" max="31" aria-describedby="employee_date_joined-hint" value="1">
-            </div>
-            <div class="form-group form-group-month">
-                <label for="employee_joined_mm">Month</label>
-                <input class="form-control" id="employee_joined_mm" name="employee[joined_mm]" type="number" min="0" max="12" value="4">
-            </div>
-            <div class="form-group form-group-year">
-                <label for="employee_joined_yyyy">Year</label>
-                <input class="form-control" id="employee_joined_yyyy" name="employee[joined_yyyy]" type="number" min="0" max="2100" value="2015">
-            </div>
-          </div>
-        </fieldset>
-      </div>
-    }
-  end
-
 end