diff --git a/js/components/__tests__/date_selector.test.js b/js/components/__tests__/date_selector.test.js index 8820ea41..348a4726 100644 --- a/js/components/__tests__/date_selector.test.js +++ b/js/components/__tests__/date_selector.test.js @@ -217,7 +217,7 @@ describe('DateSelector', () => { describe('minError', () => { it('returns true if the date is before mindate', () => { - component.mindate = new Date("2020-01-01") + component.mindate = new Date('2020-01-01') component.day = 1 component.month = 1 component.year = 2000 @@ -225,7 +225,7 @@ describe('DateSelector', () => { }) it('returns fals if the date is after mindate', () => { - component.mindate = new Date("2020-01-01") + component.mindate = new Date('2020-01-01') component.day = 1 component.month = 1 component.year = 2025 @@ -235,7 +235,7 @@ describe('DateSelector', () => { describe('maxError', () => { it('returns true if the date is after maxdate', () => { - component.maxdate = new Date("2020-01-01") + component.maxdate = new Date('2020-01-01') component.day = 1 component.month = 1 component.year = 2025 @@ -243,7 +243,7 @@ describe('DateSelector', () => { }) it('returns false if the date is before maxdate', () => { - component.maxdate = new Date("2020-01-01") + component.maxdate = new Date('2020-01-01') component.day = 1 component.month = 1 component.year = 2005 diff --git a/js/components/__tests__/pop_date_range.test.js b/js/components/__tests__/pop_date_range.test.js new file mode 100644 index 00000000..661edb04 --- /dev/null +++ b/js/components/__tests__/pop_date_range.test.js @@ -0,0 +1,99 @@ +import Vue from 'vue' +import { mount } from '@vue/test-utils' + +import PopDateRange from '../pop_date_range' + +import { makeTestWrapper } from '../../test_utils/component_test_helpers' + +const PopDateRangeWrapper = makeTestWrapper({ + components: { PopDateRange }, + templatePath: 'pop_date_range.html', +}) + +describe('PopDateRange Test', () => { + const component = new Vue(PopDateRange) + + it('should calculate the max start date', () => { + component.contractEnd = new Date('2020-01-01') + const date = new Date('2019-12-31') + expect(component.calcMaxStartDate(date)).toEqual(date) + }) + + it('should calculate the min end date', () => { + component.contractStart = new Date('2020-01-01') + const date = new Date('2020-02-02') + expect(component.calcMinEndDate(date)).toEqual(date) + }) + + it('should add an error to the start date if it is out of range', () => { + 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('2021') + + // 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 both dates do not have error class + expect(startDateField.classes()).toEqual(expect.not.arrayContaining(error)) + expect(endDateField.classes()).toEqual(expect.not.arrayContaining(error)) + + // update start date to be after end date and trigger change event + startDateField.find('input[name="date-year"]').setValue('2022') + startDateField.find('input[name="start_date"]').trigger('change') + + expect(startDateField.classes()).toEqual(expect.arrayContaining(error)) + expect(endDateField.classes()).toEqual(expect.not.arrayContaining(error)) + }) + + it('should add an error to the end date if it is out of range', () => { + 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('2021') + + // 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 both dates do not have error class + expect(startDateField.classes()).toEqual(expect.not.arrayContaining(error)) + expect(endDateField.classes()).toEqual(expect.not.arrayContaining(error)) + + // update end date to be before end date and trigger change event + endDateField.find('input[name="date-year"]').setValue('2019') + endDateField.find('input[name="end_date"]').trigger('change') + + expect(startDateField.classes()).toEqual(expect.not.arrayContaining(error)) + expect(endDateField.classes()).toEqual(expect.arrayContaining(error)) + }) +}) diff --git a/js/test_templates/clin_fields.html b/js/test_templates/clin_fields.html index debfcad5..8ac3d44e 100644 --- a/js/test_templates/clin_fields.html +++ b/js/test_templates/clin_fields.html @@ -344,7 +344,7 @@ :optional='false' inline-template> -
+
Start Date @@ -443,7 +443,7 @@ :optional='false' inline-template> -
+
End Date diff --git a/js/test_templates/pop_date_range.html b/js/test_templates/pop_date_range.html new file mode 100644 index 00000000..d440fbec --- /dev/null +++ b/js/test_templates/pop_date_range.html @@ -0,0 +1,234 @@ + + + +
+
+
+ + +
+ +
+ Start Date +
+ +

+ For example: 07 04 1776 +

+ +
+ PoP start date must be on or after September 14, 2019. +
+
+ PoP start date must be before end date. +
+ + +
+ + +
+ + +
+ +
+ + +
+ +
+ + + +
+ +
+
+ + + +
+
+ + + +
+
+
+
+ +
+
+ +
+
+ + +
+ +
+ End Date +
+ + + + + + +

+ For example: 07 04 1776 +

+ +
+ PoP end date must be after start date. +
+
+ PoP end date must be on or after September 14, 2022. +
+ + +
+ + +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+
+ + + +
+
+ + + +
+
+
+
+ +
+
+
+ diff --git a/js/test_templates/to_form.html b/js/test_templates/to_form.html index e2e30b07..1bbe8fbf 100644 --- a/js/test_templates/to_form.html +++ b/js/test_templates/to_form.html @@ -204,7 +204,7 @@
-
+
Start Date @@ -252,7 +252,7 @@
-
+
End Date diff --git a/templates/components/pop_date_range.html b/templates/components/pop_date_range.html index a0a69a13..a520b439 100644 --- a/templates/components/pop_date_range.html +++ b/templates/components/pop_date_range.html @@ -36,7 +36,7 @@ :optional='{{ optional | string | lower }}' inline-template> -
+
{{ "task_orders.form.pop_start" | translate }} @@ -130,7 +130,7 @@ :optional='{{ optional | string | lower }}' inline-template> -
+
{{ 'task_orders.form.pop_end' | translate }} diff --git a/tests/render_vue_component.py b/tests/render_vue_component.py index 3e9cd9c7..c4a7c135 100644 --- a/tests/render_vue_component.py +++ b/tests/render_vue_component.py @@ -135,3 +135,17 @@ def test_make_clin_fields(env, app): 0, ) write_template(clin_fields, "clin_fields.html") + + +def test_make_pop_date_range(env, app): + pop_date_range_template = env.get_template("components/pop_date_range.html") + pop_date_range_macro = getattr(pop_date_range_template.module, "PopDateRange") + form = CLINForm() + pop_date_range = pop_date_range_macro( + start_field=form.start_date, + end_field=form.end_date, + mindate=app.config.get("CONTRACT_START_DATE"), + maxdate=app.config.get("CONTRACT_END_DATE"), + index=1, + ) + write_template(pop_date_range, "pop_date_range.html")