Skip to content

Commit

Permalink
2195 - Update memorable-date validation (#922)
Browse files Browse the repository at this point in the history 
* Update date-utils validation logic. Remove isNaN function and consolidate logic into validate function to keep state management in one function. Update tests to accomodate these changes

* Fixed type errors

---------

Co-authored-by: harshil1793 <[email protected]>
Co-authored-by: Harshil <[email protected]>
  • Loading branch information
@nickjg231 @harshil1793
3 people authored Nov 1, 2023
1 parent f58ac8b commit 1ff6bb0
Show file tree
Hide file tree
Showing 6 changed files with 432 additions and 304 deletions.
5 changes: 5 additions & 0 deletions packages/web-components/src/components/va-date/test/va-date.e2e.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -101,8 +101,10 @@ describe('va-date', () => {
);
const date = await page.find('va-date');
const handleYear = await page.$('pierce/[name="testYear"]');
const handleMonth = await page.$('pierce/[name="testMonth"]');

// Trigger Blur
await handleMonth.press('Tab');
await handleYear.press('Tab');
await page.waitForChanges();

Expand Down Expand Up @@ -499,6 +501,9 @@ describe('va-date', () => {

const date = await page.find('va-date');
const handleYear = await page.$('pierce/[name="testYear"]');
const handleMonth = await page.$('pierce/[name="testMonth"]');

await handleMonth.press('Tab');

// Year
await handleYear.press('2');
Expand Down
36 changes: 30 additions & 6 deletions packages/web-components/src/components/va-date/va-date.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,6 @@ import {
days,
validate,
getErrorParameters,
checkIsNaN,
zeroPadStart,
} from '../../utils/date-utils';

Expand Down Expand Up @@ -103,6 +102,10 @@ export class VaDate {
@Prop({ mutable: true }) invalidMonth: boolean = false;
@Prop({ mutable: true }) invalidYear: boolean = false;

private dayTouched: boolean = false;
private monthTouched: boolean = false;
private yearTouched: boolean = false;

/**
* Whether or not an analytics event will be fired.
*/
Expand Down Expand Up @@ -141,15 +144,21 @@ export class VaDate {
.split('-')
.map(val => Number(val));

if(!checkIsNaN(this, year, month, day, this.monthYearOnly)) {
// if any fields are NaN do not continue validation
validate({
component: this,
year,
month,
day,
yearTouched: this.yearTouched,
monthTouched: this.monthTouched,
dayTouched: this.dayTouched
});

if (this.error) {
return;
}

this.setValue(year, month, day);
// Run built-in validation. Any custom validation
// will happen afterwards
validate(this, year, month, day, this.monthYearOnly);
this.dateBlur.emit(event);

if (this.enableAnalytics) {
Expand Down Expand Up @@ -191,6 +200,18 @@ export class VaDate {
this.dateChange.emit(event);
};

private handleMonthBlur = () => {
this.monthTouched = true;
}

private handleDayBlur = () => {
this.dayTouched = true;
}

private handleYearBlur = () => {
this.yearTouched = true;
}

render() {
const {
required,
Expand Down Expand Up @@ -236,6 +257,7 @@ export class VaDate {
// Value must be a string
value={month?.toString()}
onVaSelect={handleDateChange}
onBlur={this.handleMonthBlur}
invalid={this.invalidMonth}
class="select-month"
aria-label="Please enter two digits for the month"
Expand All @@ -256,6 +278,7 @@ export class VaDate {
// Value must be a string
value={daysForSelectedMonth.length < day ? '' : day?.toString()}
onVaSelect={handleDateChange}
onBlur={this.handleDayBlur}
invalid={this.invalidDay}
class="select-day"
aria-label="Please enter two digits for the day"
Expand All @@ -279,6 +302,7 @@ export class VaDate {
value={year ? year.toString() : ''}
invalid={this.invalidYear}
onInput={handleDateChange}
onBlur={this.handleYearBlur}
class="input-year"
inputmode="numeric"
type="text"
Expand Down
10 changes: 10 additions & 0 deletions packages/web-components/src/components/va-memorable-date/test/va-memorable-date.e2e.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -171,8 +171,10 @@ describe('va-memorable-date', () => {
);
const date = await page.find('va-memorable-date');
const handleYear = await page.$('pierce/[name="testYear"]');
const handleMonth = await page.$('pierce/[name="testMonth"]');

// Trigger Blur
await handleMonth.press('Tab');
await handleYear.press('Tab');
await page.waitForChanges();

Expand Down Expand Up @@ -850,6 +852,7 @@ describe('va-memorable-date', () => {

// Set an invalid value
await handleMonth.select('');
await handleMonth.press('Tab');
// Trigger Blur
await handleYear.press('Tab');

Expand Down Expand Up @@ -883,8 +886,10 @@ describe('va-memorable-date', () => {
);
const date = await page.find('va-memorable-date');
const handleYear = await page.$('pierce/[name="testYear"]');
const handleMonth = await page.$('pierce/[name="testMonth"]');

// Trigger Blur
await handleMonth.press('Tab');
await handleYear.press('Tab');
await page.waitForChanges();

Expand Down Expand Up @@ -995,6 +1000,7 @@ describe('va-memorable-date', () => {

// Select month value that doesn't exist
await handleMonth.select('39');
await handleMonth.press('Tab');
// Trigger Blur
await handleYear.press('Tab');

Expand Down Expand Up @@ -1507,8 +1513,10 @@ describe('va-memorable-date', () => {
);
const date = await page.find('va-memorable-date');
const handleYear = await page.$('pierce/[name="testYear"]');
const handleMonth = await page.$('pierce/[name="testMonth"]');

// Trigger Blur
await handleMonth.press('Tab');
await handleYear.press('Tab');
await page.waitForChanges();

Expand All @@ -1525,8 +1533,10 @@ describe('va-memorable-date', () => {
);
const date = await page.find('va-memorable-date');
const handleYear = await page.$('pierce/[name="testYear"]');
const handleMonth = await page.$('pierce/[name="testMonth"]');

// Trigger Blur
await handleMonth.press('Tab');
await handleYear.press('Tab');
await page.waitForChanges();

Expand Down
43 changes: 35 additions & 8 deletions packages/web-components/src/components/va-memorable-date/va-memorable-date.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,6 @@ import {
getErrorParameters,
months,
validate,
checkIsNaN,
zeroPadStart,
} from '../../utils/date-utils';

Expand Down Expand Up @@ -113,14 +112,27 @@ export class VaMemorableDate {
@Prop({ mutable: true }) invalidMonth: boolean = false;
@Prop({ mutable: true }) invalidYear: boolean = false;

private dayTouched: boolean = false;
private monthTouched: boolean = false;
private yearTouched: boolean = false;

private handleDateBlur = (event: FocusEvent) => {
const [year, month, day] = (this.value || '').split('-');
const yearNum = Number(year);
const monthNum = Number(month);
const dayNum = Number(day);

if(!checkIsNaN(this, yearNum, monthNum, dayNum)) {
// if any fields are NaN do not continue validation
validate({
component: this,
year: yearNum,
month: monthNum,
day: dayNum,
yearTouched: this.yearTouched,
monthTouched: this.monthTouched,
dayTouched: this.dayTouched
});

if (this.error) {
return;
}

Expand All @@ -135,10 +147,6 @@ export class VaMemorableDate {
// errors will also remove internal errors.
this.dateBlur.emit(event);

// Built-in validation is run after custom so internal errors override
// custom errors, e.g. Show invalid date instead of custom error
validate(this, yearNum, monthNum, dayNum);

if (this.enableAnalytics) {
const detail = {
componentName: 'va-memorable-date',
Expand Down Expand Up @@ -176,6 +184,18 @@ export class VaMemorableDate {
this.dateChange.emit(event);
};

private handleMonthBlur = () => {
this.monthTouched = true;
}

private handleDayBlur = () => {
this.dayTouched = true;
}

private handleYearBlur = () => {
this.yearTouched = true;
}

/**
* Whether or not an analytics event will be fired.
*/
Expand Down Expand Up @@ -257,6 +277,7 @@ export class VaMemorableDate {
aria-describedby={describedbyIds}
invalid={this.invalidMonth}
onVaSelect={handleDateChange}
onBlur={this.handleMonthBlur}
class='usa-form-group--month-select'
reflectInputError={error === 'month-range' ? true : false}
value={month ? String(parseInt(month)) : month}
Expand Down Expand Up @@ -284,8 +305,9 @@ export class VaMemorableDate {
// if NaN provide empty string
value={month?.toString()}
onInput={handleDateChange}
onBlur={this.handleMonthBlur}
class="usa-form-group--month-input memorable-date-input"
reflectInputError={error === 'month-range' ? true : false}
reflectInputError={error === 'month-range' ? true : false}
inputmode="numeric"
type="text"
error={this.invalidMonth ? getErrorMessage(error) : null}
Expand Down Expand Up @@ -329,6 +351,7 @@ export class VaMemorableDate {
// if NaN provide empty string
value={day?.toString()}
onInput={handleDateChange}
onBlur={this.handleDayBlur}
class="usa-form-group--day-input memorable-date-input"
reflectInputError={error === 'day-range' ? true : false}
inputmode="numeric"
Expand All @@ -349,6 +372,7 @@ export class VaMemorableDate {
// if NaN provide empty string
value={year?.toString()}
onInput={handleDateChange}
onBlur={this.handleYearBlur}
class="usa-form-group--year-input memorable-date-input"
reflectInputError={error === 'year-range' ? true : false}
inputmode="numeric"
Expand Down Expand Up @@ -390,6 +414,7 @@ export class VaMemorableDate {
// if NaN provide empty string
value={month?.toString()}
onInput={handleDateChange}
onBlur={this.handleMonthBlur}
class="input-month memorable-date-input"
inputmode="numeric"
type="text"
Expand All @@ -407,6 +432,7 @@ export class VaMemorableDate {
// if NaN provide empty string
value={day?.toString()}
onInput={handleDateChange}
onBlur={this.handleDayBlur}
class="input-day memorable-date-input"
inputmode="numeric"
type="text"
Expand All @@ -424,6 +450,7 @@ export class VaMemorableDate {
// if NaN provide empty string
value={year?.toString()}
onInput={handleDateChange}
onBlur={this.handleYearBlur}
class="input-year memorable-date-input"
inputmode="numeric"
type="text"
Expand Down
Loading

0 comments on commit 1ff6bb0

Please sign in to comment.