From 88d6ef32a437ef5884598975293871b4ed438ec6 Mon Sep 17 00:00:00 2001 From: leigh-mil Date: Wed, 16 Oct 2019 19:28:17 -0400 Subject: [PATCH] Display error when PoP start date and end date are the same --- js/components/__tests__/date_selector.test.js | 12 ++-- .../__tests__/pop_date_range.test.js | 58 +++++++++++++++++++ js/components/date_selector.js | 37 +++++++----- 3 files changed, 85 insertions(+), 22 deletions(-) diff --git a/js/components/__tests__/date_selector.test.js b/js/components/__tests__/date_selector.test.js index 24d4aed5..e186acfc 100644 --- a/js/components/__tests__/date_selector.test.js +++ b/js/components/__tests__/date_selector.test.js @@ -165,16 +165,16 @@ describe('DateSelector', () => { }) it('returns true when year is between min and max years', () => { - component.year = new Date('2019-01-01').getFullYear() - component.mindate = new Date('2018-01-01') - component.maxdate = new Date('2019-12-31') + component.year = '2019' + component.mindate = '2018-01-01' + component.maxdate = '2019-12-31' expect(component.isYearValid).toEqual(true) }) it('returns false when year is outside of min and max years', () => { - component.year = new Date('2020-01-01').getFullYear() - component.mindate = new Date('2018-01-01') - component.maxdate = new Date('2019-01-01') + component.year = '2020' + component.mindate = '2018-01-01' + component.maxdate = '2019-01-01' expect(component.isYearValid).toEqual(false) }) }) diff --git a/js/components/__tests__/pop_date_range.test.js b/js/components/__tests__/pop_date_range.test.js index 38fe58b0..5ff1f4ef 100644 --- a/js/components/__tests__/pop_date_range.test.js +++ b/js/components/__tests__/pop_date_range.test.js @@ -102,4 +102,62 @@ describe('PopDateRange Test', () => { expect(startDateField.classes()).toEqual(expect.not.arrayContaining(error)) expect(endDateField.classes()).toEqual(expect.arrayContaining(error)) }) + + it('should add an error to the end date if it is the same as start date', () => { + const wrapper = mount(PopDateRangeWrapper, { + propsData: { + initialData: {}, + }, + }) + + const error = ['usa-input--error'] + var startDateField = wrapper.find('fieldset[name="start_date"]') + var endDateField = wrapper.find('fieldset[name="end_date"]') + + // set valid date range + startDateField.find('input[name="date-month"]').setValue('01') + startDateField.find('input[name="date-day"]').setValue('01') + startDateField.find('input[name="date-year"]').setValue('2020') + + endDateField.find('input[name="date-month"]').setValue('01') + endDateField.find('input[name="date-day"]').setValue('01') + endDateField.find('input[name="date-year"]').setValue('2020') + + // manually trigger the change event in the hidden fields + startDateField.find('input[name="start_date"]').trigger('change') + endDateField.find('input[name="end_date"]').trigger('change') + + // check that end date has error class + expect(startDateField.classes()).toEqual(expect.not.arrayContaining(error)) + expect(endDateField.classes()).toEqual(expect.arrayContaining(error)) + }) + + it('should add an error to the start date if it is the same as end date', () => { + const wrapper = mount(PopDateRangeWrapper, { + propsData: { + initialData: {}, + }, + }) + + const error = ['usa-input--error'] + var startDateField = wrapper.find('fieldset[name="start_date"]') + var endDateField = wrapper.find('fieldset[name="end_date"]') + + // set valid date range + startDateField.find('input[name="date-month"]').setValue('01') + startDateField.find('input[name="date-day"]').setValue('01') + startDateField.find('input[name="date-year"]').setValue('2020') + + endDateField.find('input[name="date-month"]').setValue('01') + endDateField.find('input[name="date-day"]').setValue('01') + endDateField.find('input[name="date-year"]').setValue('2020') + + // manually trigger the change event in the hidden fields + endDateField.find('input[name="end_date"]').trigger('change') + startDateField.find('input[name="start_date"]').trigger('change') + + // check that start date has error class + expect(startDateField.classes()).toEqual(expect.arrayContaining(error)) + expect(endDateField.classes()).toEqual(expect.not.arrayContaining(error)) + }) }) diff --git a/js/components/date_selector.js b/js/components/date_selector.js index a8257f10..e991df2d 100644 --- a/js/components/date_selector.js +++ b/js/components/date_selector.js @@ -96,10 +96,9 @@ export default { }, isYearValid: function() { - // Emit a change event let valid - let minYear = this.mindate ? this.minDateParsed.getFullYear() : null - let maxYear = this.maxdate ? this.maxDateParsed.getFullYear() : null + let minYear = this.mindate ? parseInt(this.mindate) : null + let maxYear = this.maxdate ? parseInt(this.maxdate) : null if (minYear && maxYear) { valid = this.year >= minYear && this.year <= maxYear @@ -111,15 +110,17 @@ export default { }, isWithinDateRange: function() { - let _mindate = this.mindate ? Date.parse(this.mindate) : null - let _maxdate = this.maxdate ? Date.parse(this.maxdate) : null - let _dateTimestamp = Date.UTC(this.year, this.month - 1, this.day) - - if (_mindate !== null && _mindate >= _dateTimestamp) { + if ( + this.minDateParsed !== null && + this.minDateParsed >= this.dateParsed + ) { return false } - if (_maxdate !== null && _maxdate <= _dateTimestamp) { + if ( + this.maxDateParsed !== null && + this.maxDateParsed <= this.dateParsed + ) { return false } @@ -167,7 +168,7 @@ export default { minError: function() { if (this.isDateComplete) { - return this.minDateParsed > this.dateParsed + return this.minDateParsed >= this.dateParsed } return false @@ -175,7 +176,7 @@ export default { maxError: function() { if (this.isDateComplete) { - return this.maxDateParsed < this.dateParsed + return this.maxDateParsed <= this.dateParsed } return false @@ -191,23 +192,27 @@ export default { }, maxDateParsed: function() { - return new Date(this.maxdate) + let _maxdate = this.maxdate ? Date.parse(this.maxdate) : null + return _maxdate }, minDateParsed: function() { - return new Date(this.mindate) + let _mindate = this.mindate ? Date.parse(this.mindate) : null + return _mindate }, maxRangeParsed: function() { - return new Date(this.maxrange) + let _maxrange = this.maxrange ? Date.parse(this.maxrange) : null + return _maxrange }, minRangeParsed: function() { - return new Date(this.minrange) + let _minrange = this.minrange ? Date.parse(this.minrange) : null + return _minrange }, dateParsed: function() { - return new Date(this.formattedDate) + return Date.UTC(this.year, this.month - 1, this.day) }, },