Add tests for pop date range vue component
This commit is contained in:
leigh-mil
parent
5e1ce65662
commit
789e6662a2
@ -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
|
||||
|
||||
99
js/components/__tests__/pop_date_range.test.js
Normal file
99
js/components/__tests__/pop_date_range.test.js
Normal file
@ -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))
|
||||
})
|
||||
})
|
||||
@ -344,7 +344,7 @@
|
||||
:optional='false'
|
||||
inline-template>
|
||||
|
||||
<fieldset class="usa-input date-picker" v-bind:class="{ 'usa-input--success': isDateValid && showValidation, 'usa-input--error': !isDateValid && showValidation }">
|
||||
<fieldset :name="name" class="usa-input date-picker" v-bind:class="{ 'usa-input--success': isDateValid && showValidation, 'usa-input--error': !isDateValid && showValidation }">
|
||||
<legend>
|
||||
<div class="usa-input__title">
|
||||
Start Date
|
||||
@ -443,7 +443,7 @@
|
||||
:optional='false'
|
||||
inline-template>
|
||||
|
||||
<fieldset class="usa-input date-picker" v-bind:class="{ 'usa-input--success': isDateValid && showValidation, 'usa-input--error': !isDateValid && showValidation }">
|
||||
<fieldset :name="name" class="usa-input date-picker" v-bind:class="{ 'usa-input--success': isDateValid && showValidation, 'usa-input--error': !isDateValid && showValidation }">
|
||||
<legend>
|
||||
<div class="usa-input__title">
|
||||
End Date
|
||||
|
||||
234
js/test_templates/pop_date_range.html
Normal file
234
js/test_templates/pop_date_range.html
Normal file
@ -0,0 +1,234 @@
|
||||
|
||||
<pop-date-range
|
||||
initial-min-start-date="2019-09-14"
|
||||
initial-max-end-date="2022-09-14"
|
||||
|
||||
v-bind:clin-index="1"
|
||||
|
||||
|
||||
initial-start-date="None"
|
||||
|
||||
|
||||
initial-end-date="None"
|
||||
|
||||
inline-template>
|
||||
|
||||
<div>
|
||||
<div class="form-row">
|
||||
<div class="form-col">
|
||||
<date-selector
|
||||
:mindate="initialMinStartDate"
|
||||
:maxdate="maxStartProp"
|
||||
|
||||
name-tag='start_date'
|
||||
initialmonth=""
|
||||
initialday=""
|
||||
initialyear=""
|
||||
|
||||
v-bind:watch='false'
|
||||
:optional='true'
|
||||
inline-template>
|
||||
|
||||
<fieldset :name="name" class="usa-input date-picker" v-bind:class="{ 'usa-input--success': isDateValid && showValidation, 'usa-input--error': !isDateValid && showValidation }">
|
||||
<legend>
|
||||
<div class="usa-input__title">
|
||||
Start Date
|
||||
</div>
|
||||
|
||||
<p class='usa-input__help'>
|
||||
For example: 07 04 1776
|
||||
</p>
|
||||
|
||||
<div v-if='minError' class="usa-input-error-message">
|
||||
PoP start date must be on or after September 14, 2019.
|
||||
</div>
|
||||
<div v-if='maxError' class="usa-input-error-message">
|
||||
PoP start date must be before end date.
|
||||
</div>
|
||||
</legend>
|
||||
|
||||
<div class="date-picker-component">
|
||||
<input :name="name" v-bind:value="formattedDate" v-on:change="onInput" type="hidden" />
|
||||
|
||||
<div class="usa-form-group usa-form-group-month">
|
||||
<label>Month</label>
|
||||
<input
|
||||
name="date-month"
|
||||
max="12"
|
||||
maxlength="2"
|
||||
min="1"
|
||||
type="number"
|
||||
v-bind:class="{ 'usa-input-error': (month && !isMonthValid) }"
|
||||
v-model="month"
|
||||
v-on:change="onInput"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="usa-form-group usa-form-group-day">
|
||||
<label>Day</label>
|
||||
<input
|
||||
name="date-day"
|
||||
maxlength="2"
|
||||
min="1"
|
||||
type="number"
|
||||
v-bind:class="{ 'usa-input-error': (day && !isDayValid) }"
|
||||
v-bind:max="daysMaxCalculation"
|
||||
v-model="day"
|
||||
v-on:change="onInput"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="usa-form-group usa-form-group-year">
|
||||
<label>Year</label>
|
||||
<input
|
||||
name="date-year"
|
||||
maxlength="4"
|
||||
type="number"
|
||||
v-model="year"
|
||||
max=""
|
||||
min=""
|
||||
v-on:change="onInput"
|
||||
/>
|
||||
|
||||
</div>
|
||||
|
||||
<div v-if="showValidation">
|
||||
<div class="usa-form-group-date-ok" v-if="isDateValid">
|
||||
|
||||
<span class="icon icon--ok icon--green" aria-hidden="true"><svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="check-circle" class="svg-inline--fa fa-check-circle fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M504 256c0 136.967-111.033 248-248 248S8 392.967 8 256 119.033 8 256 8s248 111.033 248 248zM227.314 387.314l184-184c6.248-6.248 6.248-16.379 0-22.627l-22.627-22.627c-6.248-6.249-16.379-6.249-22.628 0L216 308.118l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628 0l-22.627 22.627c-6.248 6.248-6.248 16.379 0 22.627l104 104c6.249 6.249 16.379 6.249 22.628.001z"></path></svg></span>
|
||||
|
||||
</div>
|
||||
<div class="usa-form-group-date-ok" v-else>
|
||||
|
||||
<span class="icon icon--alert icon--red" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="#fdb81e">
|
||||
<path d="M8 16c-4.411 0-8-3.589-8-8s3.589-8 8-8 8 3.589 8 8-3.589 8-8 8zM8 2C4.691 2 2 4.691 2 8s2.691 6 6 6 6-2.691 6-6-2.691-6-6-6zm0 8c-.552 0-1-.447-1-1V4c0-.552.448-1 1-1s1 .448 1 1v5c0 .553-.448 1-1 1zm0 3c-.26 0-.52-.11-.71-.29-.18-.19-.29-.45-.29-.71 0-.271.11-.521.29-.71.38-.37 1.05-.37 1.42 0 .18.189.29.45.29.71s-.11.52-.29.71c-.19.18-.45.29-.71.29z"/>
|
||||
</svg>
|
||||
</span>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</fieldset>
|
||||
</date-selector>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<div class="form-col">
|
||||
<date-selector
|
||||
:mindate="minEndProp"
|
||||
:maxdate="initialMaxEndDate"
|
||||
|
||||
name-tag='end_date'
|
||||
initialmonth=""
|
||||
initialday=""
|
||||
initialyear=""
|
||||
|
||||
v-bind:watch='false'
|
||||
:optional='true'
|
||||
inline-template>
|
||||
|
||||
<fieldset :name="name" class="usa-input date-picker" v-bind:class="{ 'usa-input--success': isDateValid && showValidation, 'usa-input--error': !isDateValid && showValidation }">
|
||||
<legend>
|
||||
<div class="usa-input__title">
|
||||
End Date
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
<div class='usa-alert usa-alert-info' role='alert' aria-live='polite'>
|
||||
|
||||
<div class='usa-alert-body'>
|
||||
|
||||
|
||||
|
||||
<p class='usa-alert-text'>
|
||||
A CLIN's period of performance must end before .
|
||||
</p>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p class='usa-input__help'>
|
||||
For example: 07 04 1776
|
||||
</p>
|
||||
|
||||
<div v-if='minError' class="usa-input-error-message">
|
||||
PoP end date must be after start date.
|
||||
</div>
|
||||
<div v-if='maxError' class="usa-input-error-message">
|
||||
PoP end date must be on or after September 14, 2022.
|
||||
</div>
|
||||
</legend>
|
||||
|
||||
<div class="date-picker-component">
|
||||
<input :name="name" v-bind:value="formattedDate" v-on:change="onInput" type="hidden" />
|
||||
|
||||
<div class="usa-form-group usa-form-group-month">
|
||||
<label>Month</label>
|
||||
<input
|
||||
name="date-month"
|
||||
max="12"
|
||||
maxlength="2"
|
||||
min="1"
|
||||
type="number"
|
||||
v-bind:class="{ 'usa-input-error': (month && !isMonthValid) }"
|
||||
v-model="month"
|
||||
v-on:change="onInput"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="usa-form-group usa-form-group-day">
|
||||
<label>Day</label>
|
||||
<input
|
||||
name="date-day"
|
||||
maxlength="2"
|
||||
min="1"
|
||||
type="number"
|
||||
v-bind:class="{ 'usa-input-error': (day && !isDayValid) }"
|
||||
v-bind:max="daysMaxCalculation"
|
||||
v-model="day"
|
||||
v-on:change="onInput"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="usa-form-group usa-form-group-year">
|
||||
<label>Year</label>
|
||||
<input
|
||||
name="date-year"
|
||||
maxlength="4"
|
||||
type="number"
|
||||
v-model="year"
|
||||
v-on:change="onInput"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div v-if="showValidation">
|
||||
<div class="usa-form-group-date-ok" v-if="isDateValid">
|
||||
|
||||
<span class="icon icon--ok icon--green" aria-hidden="true"><svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="check-circle" class="svg-inline--fa fa-check-circle fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M504 256c0 136.967-111.033 248-248 248S8 392.967 8 256 119.033 8 256 8s248 111.033 248 248zM227.314 387.314l184-184c6.248-6.248 6.248-16.379 0-22.627l-22.627-22.627c-6.248-6.249-16.379-6.249-22.628 0L216 308.118l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628 0l-22.627 22.627c-6.248 6.248-6.248 16.379 0 22.627l104 104c6.249 6.249 16.379 6.249 22.628.001z"></path></svg></span>
|
||||
|
||||
</div>
|
||||
<div class="usa-form-group-date-ok" v-else>
|
||||
|
||||
<span class="icon icon--alert icon--red" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="#fdb81e">
|
||||
<path d="M8 16c-4.411 0-8-3.589-8-8s3.589-8 8-8 8 3.589 8 8-3.589 8-8 8zM8 2C4.691 2 2 4.691 2 8s2.691 6 6 6 6-2.691 6-6-2.691-6-6-6zm0 8c-.552 0-1-.447-1-1V4c0-.552.448-1 1-1s1 .448 1 1v5c0 .553-.448 1-1 1zm0 3c-.26 0-.52-.11-.71-.29-.18-.19-.29-.45-.29-.71 0-.271.11-.521.29-.71.38-.37 1.05-.37 1.42 0 .18.189.29.45.29.71s-.11.52-.29.71c-.19.18-.45.29-.71.29z"/>
|
||||
</svg>
|
||||
</span>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</fieldset>
|
||||
</date-selector>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</pop-date-range>
|
||||
@ -204,7 +204,7 @@
|
||||
<div class="form-row">
|
||||
<div class="form-col">
|
||||
<date-selector :maxdate="maxStartProp" :mindate="initialMinStartDate" :name-tag="'clins-' + clinIndex + '-start_date'" :optional="false" inline-template="" v-bind:watch="true">
|
||||
<fieldset class="usa-input date-picker" v-bind:class="{ 'usa-input--success': isDateValid && showValidation, 'usa-input--error': !isDateValid && showValidation }">
|
||||
<fieldset :name="name" class="usa-input date-picker" v-bind:class="{ 'usa-input--success': isDateValid && showValidation, 'usa-input--error': !isDateValid && showValidation }">
|
||||
<legend>
|
||||
<div class="usa-input__title">
|
||||
Start Date
|
||||
@ -252,7 +252,7 @@
|
||||
<div class="form-row">
|
||||
<div class="form-col">
|
||||
<date-selector :maxdate="initialMaxEndDate" :mindate="minEndProp" :name-tag="'clins-' + clinIndex + '-end_date'" :optional="false" inline-template="" v-bind:watch="true">
|
||||
<fieldset class="usa-input date-picker" v-bind:class="{ 'usa-input--success': isDateValid && showValidation, 'usa-input--error': !isDateValid && showValidation }">
|
||||
<fieldset :name="name" class="usa-input date-picker" v-bind:class="{ 'usa-input--success': isDateValid && showValidation, 'usa-input--error': !isDateValid && showValidation }">
|
||||
<legend>
|
||||
<div class="usa-input__title">
|
||||
End Date
|
||||
|
||||
@ -36,7 +36,7 @@
|
||||
:optional='{{ optional | string | lower }}'
|
||||
inline-template>
|
||||
|
||||
<fieldset class="usa-input date-picker" v-bind:class="{ 'usa-input--success': isDateValid && showValidation, 'usa-input--error': !isDateValid && showValidation }">
|
||||
<fieldset :name="name" class="usa-input date-picker" v-bind:class="{ 'usa-input--success': isDateValid && showValidation, 'usa-input--error': !isDateValid && showValidation }">
|
||||
<legend>
|
||||
<div class="usa-input__title">
|
||||
{{ "task_orders.form.pop_start" | translate }}
|
||||
@ -130,7 +130,7 @@
|
||||
:optional='{{ optional | string | lower }}'
|
||||
inline-template>
|
||||
|
||||
<fieldset class="usa-input date-picker" v-bind:class="{ 'usa-input--success': isDateValid && showValidation, 'usa-input--error': !isDateValid && showValidation }">
|
||||
<fieldset :name="name" class="usa-input date-picker" v-bind:class="{ 'usa-input--success': isDateValid && showValidation, 'usa-input--error': !isDateValid && showValidation }">
|
||||
<legend>
|
||||
<div class="usa-input__title">
|
||||
{{ 'task_orders.form.pop_end' | translate }}
|
||||
|
||||
@ -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")
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user