Protei/PromucFlow_constructor
2
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

feat: Enhance date validation logic and add tests for timePrecision in DatePickerWidget2 (#37218)

Browse Source 
## 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:
Rahul Barwal 2024-11-07 11:25:49 +05:30 committed by GitHub
parent 359e395de3
commit 0c406b0d02
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 162 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

65
app/client/src/widgets/DatePickerWidget2/widget/derived.js
View File

@ -1,31 +1,50 @@
/* eslint-disable @typescript-eslint/no-unused-vars*/
export default {
isValidDate: (props, moment, _) => {
const minDate = new Date(props.minDate);
const maxDate = new Date(props.maxDate);
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;
if (!props.selectedDate && !props.isRequired) {
return 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;
},
//
};

120
app/client/src/widgets/DatePickerWidget2/widget/derived.test.js
View File

@ -86,4 +86,124 @@ describe("Validates Derived Properties", () => {
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);
});
});
});
});