feat: Enhance date validation logic and add tests for timePrecision in DatePickerWidget2 (#37218)
## Description <ins>Problem</ins> The DatePickerWidget2 component had incomplete date validation logic, allowing incorrect dates to be selected, and lacked comprehensive testing for time precision. <ins>Root cause</ins> The date validation logic did not accurately account for time precision, and the testing was limited, making it difficult to ensure the component's correctness. <ins>Solution</ins> This PR enhances the date validation logic in DatePickerWidget2 to provide better granularity checks based on the timePrecision property, and adds comprehensive tests to ensure correct date handling across boundaries for different timePrecision settings. This PR handles... - Enhanced date validation logic to accurately account for time precision. - Comprehensive testing to ensure correct date handling for all possible input combinations. Fixes #37083 _or_ Fixes `Issue URL` > [!WARNING] > _If no issue exists, please create an issue first, and check with the maintainers if the issue is valid._ ## Automation /ok-to-test tags="@tag.Datepicker" ### 🔍 Cypress test results <!-- This is an auto-generated comment: Cypress test results --> > [!TIP] > 🟢 🟢 🟢 All cypress tests have passed! 🎉 🎉 🎉 > Workflow run: <https://github.com/appsmithorg/appsmith/actions/runs/11702221741> > Commit: 306373ac3b64a5a9ba037f513accd15dd9aaa36e > <a href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=11702221741&attempt=1" target="_blank">Cypress dashboard</a>. > Tags: `@tag.Datepicker` > Spec: > <hr>Wed, 06 Nov 2024 11:32:28 UTC <!-- end of auto-generated comment: Cypress test results --> ## Communication Should the DevRel and Marketing teams inform users about this change? - [ ] Yes - [x] No <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit - **New Features** - Enhanced date validation logic in the DatePickerWidget2 for improved accuracy based on time precision. - **Tests** - Introduced comprehensive test cases for the `isValidDate` function, covering various scenarios related to time precision, ensuring robust validation against defined date ranges. <!-- end of auto-generated comment: release notes by coderabbit.ai -->
This commit is contained in:
parent
359e395de3
commit
0c406b0d02
|
|
@ -1,31 +1,50 @@
|
||||||
/* eslint-disable @typescript-eslint/no-unused-vars*/
|
/* eslint-disable @typescript-eslint/no-unused-vars*/
|
||||||
export default {
|
export default {
|
||||||
isValidDate: (props, moment, _) => {
|
isValidDate: (props, moment, _) => {
|
||||||
const minDate = new Date(props.minDate);
|
if (!props.selectedDate && !props.isRequired) {
|
||||||
const maxDate = new Date(props.maxDate);
|
return true;
|
||||||
const selectedDate =
|
|
||||||
props.selectedDate !== ""
|
|
||||||
? moment(new Date(props.selectedDate))
|
|
||||||
: props.selectedDate;
|
|
||||||
let dateValid = true;
|
|
||||||
|
|
||||||
if (!!props.minDate && !!props.maxDate) {
|
|
||||||
dateValid = !!selectedDate
|
|
||||||
? selectedDate.isBetween(minDate, maxDate)
|
|
||||||
: !props.isRequired;
|
|
||||||
} else if (!!props.minDate) {
|
|
||||||
dateValid = !!selectedDate
|
|
||||||
? selectedDate.isAfter(minDate)
|
|
||||||
: !props.isRequired;
|
|
||||||
} else if (!!props.maxDate) {
|
|
||||||
dateValid = !!selectedDate
|
|
||||||
? selectedDate.isBefore(maxDate)
|
|
||||||
: !props.isRequired;
|
|
||||||
} else {
|
|
||||||
dateValid = props.isRequired ? !!selectedDate : true;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
return dateValid;
|
const minDate = props.minDate ? new Date(props.minDate) : null;
|
||||||
|
const maxDate = props.maxDate ? new Date(props.maxDate) : null;
|
||||||
|
const selectedDate = props.selectedDate
|
||||||
|
? moment(new Date(props.selectedDate))
|
||||||
|
: props.selectedDate;
|
||||||
|
|
||||||
|
if (!selectedDate) {
|
||||||
|
return !props.isRequired;
|
||||||
|
}
|
||||||
|
|
||||||
|
let granularity,
|
||||||
|
inclusivity = "[]";
|
||||||
|
|
||||||
|
switch (props.timePrecision) {
|
||||||
|
case "None":
|
||||||
|
granularity = "day";
|
||||||
|
break;
|
||||||
|
case "second":
|
||||||
|
case "minute":
|
||||||
|
case "millisecond":
|
||||||
|
granularity = props.timePrecision;
|
||||||
|
break;
|
||||||
|
default:
|
||||||
|
granularity = undefined;
|
||||||
|
inclusivity = undefined;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (minDate && maxDate) {
|
||||||
|
return selectedDate.isBetween(minDate, maxDate, granularity, inclusivity);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (minDate) {
|
||||||
|
return selectedDate.isSameOrAfter(minDate, granularity);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (maxDate) {
|
||||||
|
return selectedDate.isSameOrBefore(maxDate, granularity);
|
||||||
|
}
|
||||||
|
|
||||||
|
return true;
|
||||||
},
|
},
|
||||||
//
|
//
|
||||||
};
|
};
|
||||||
|
|
|
||||||
|
|
@ -86,4 +86,124 @@ describe("Validates Derived Properties", () => {
|
||||||
|
|
||||||
expect(result).toStrictEqual(false);
|
expect(result).toStrictEqual(false);
|
||||||
});
|
});
|
||||||
|
describe("timePrecision", () => {
|
||||||
|
it("should fail when selectedDate minute is outside bounds", () => {
|
||||||
|
const { isValidDate } = derivedProperty;
|
||||||
|
const input = {
|
||||||
|
isRequired: true,
|
||||||
|
maxDate: "2021-12-01T05:49:00.000Z",
|
||||||
|
minDate: "2021-12-01T05:48:00.000Z",
|
||||||
|
selectedDate: "2021-12-01T05:50:00.000Z",
|
||||||
|
timePrecision: "minute",
|
||||||
|
};
|
||||||
|
|
||||||
|
let result = isValidDate(input, moment, _);
|
||||||
|
|
||||||
|
expect(result).toStrictEqual(false);
|
||||||
|
});
|
||||||
|
|
||||||
|
it("timePrecision: minute -> date is valid even if selectedDate is over by seconds", () => {
|
||||||
|
const { isValidDate } = derivedProperty;
|
||||||
|
const input = {
|
||||||
|
isRequired: true,
|
||||||
|
maxDate: "2121-12-31T18:29:00.000Z",
|
||||||
|
minDate: "2021-12-01T05:49:28.753Z",
|
||||||
|
selectedDate: "2021-12-01T05:49:24.753Z",
|
||||||
|
timePrecision: "minute",
|
||||||
|
};
|
||||||
|
|
||||||
|
let result = isValidDate(input, moment, _);
|
||||||
|
|
||||||
|
expect(result).toStrictEqual(true);
|
||||||
|
});
|
||||||
|
|
||||||
|
it("timePrecision: second -> date is valid even if selectedDate is over by milliseconds", () => {
|
||||||
|
const { isValidDate } = derivedProperty;
|
||||||
|
const input = {
|
||||||
|
isRequired: true,
|
||||||
|
maxDate: "2121-12-31T18:29:00.000Z",
|
||||||
|
minDate: "2021-12-01T05:49:24.753Z",
|
||||||
|
selectedDate: "2021-12-01T05:49:24.751Z",
|
||||||
|
timePrecision: "second",
|
||||||
|
};
|
||||||
|
|
||||||
|
let result = isValidDate(input, moment, _);
|
||||||
|
|
||||||
|
expect(result).toStrictEqual(true);
|
||||||
|
});
|
||||||
|
|
||||||
|
it("timePrecision: millisecond", () => {
|
||||||
|
const { isValidDate } = derivedProperty;
|
||||||
|
const input = {
|
||||||
|
isRequired: true,
|
||||||
|
maxDate: "2121-12-31T18:29:00.000Z",
|
||||||
|
minDate: "2021-12-01T05:49:24.752Z",
|
||||||
|
selectedDate: "2021-12-01T05:49:24.753Z",
|
||||||
|
timePrecision: "millisecond",
|
||||||
|
};
|
||||||
|
|
||||||
|
let result = isValidDate(input, moment, _);
|
||||||
|
|
||||||
|
expect(result).toStrictEqual(true);
|
||||||
|
});
|
||||||
|
|
||||||
|
describe("timePrecision: None", () => {
|
||||||
|
it("date is same as minDate", () => {
|
||||||
|
const { isValidDate } = derivedProperty;
|
||||||
|
const input = {
|
||||||
|
isRequired: true,
|
||||||
|
maxDate: "2121-12-31T18:29:00.000Z",
|
||||||
|
minDate: "2021-12-01T00:00:00.000Z",
|
||||||
|
selectedDate: "2021-12-01T00:00:00.000Z",
|
||||||
|
timePrecision: "None",
|
||||||
|
};
|
||||||
|
|
||||||
|
let result = isValidDate(input, moment, _);
|
||||||
|
|
||||||
|
expect(result).toStrictEqual(true);
|
||||||
|
});
|
||||||
|
it("date is same as maxDate", () => {
|
||||||
|
const { isValidDate } = derivedProperty;
|
||||||
|
const input = {
|
||||||
|
isRequired: true,
|
||||||
|
maxDate: "2021-12-01T00:00:00.000Z",
|
||||||
|
minDate: "1991-12-31T18:29:00.000Z",
|
||||||
|
selectedDate: "2021-12-01T00:00:00.000Z",
|
||||||
|
timePrecision: "None",
|
||||||
|
};
|
||||||
|
|
||||||
|
let result = isValidDate(input, moment, _);
|
||||||
|
|
||||||
|
expect(result).toStrictEqual(true);
|
||||||
|
});
|
||||||
|
it("date is between minDate and maxDate", () => {
|
||||||
|
const { isValidDate } = derivedProperty;
|
||||||
|
const input = {
|
||||||
|
isRequired: true,
|
||||||
|
maxDate: "2121-12-31T18:29:00.000Z",
|
||||||
|
minDate: "1920-12-31T18:30:00.000Z",
|
||||||
|
selectedDate: "2021-12-01T05:49:24.753Z",
|
||||||
|
timePrecision: "None",
|
||||||
|
};
|
||||||
|
|
||||||
|
let result = isValidDate(input, moment, _);
|
||||||
|
|
||||||
|
expect(result).toStrictEqual(true);
|
||||||
|
});
|
||||||
|
it("date is out of bounds", () => {
|
||||||
|
const { isValidDate } = derivedProperty;
|
||||||
|
const input = {
|
||||||
|
isRequired: true,
|
||||||
|
maxDate: "2021-12-31T18:29:00.000Z",
|
||||||
|
minDate: "1920-12-31T18:30:00.000Z",
|
||||||
|
selectedDate: "2022-12-01T05:49:24.753Z",
|
||||||
|
timePrecision: "None",
|
||||||
|
};
|
||||||
|
|
||||||
|
let result = isValidDate(input, moment, _);
|
||||||
|
|
||||||
|
expect(result).toStrictEqual(false);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
});
|
});
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user