Skip to content

Commit

Permalink
feat: Enhance date validation logic and add tests for timePrecision i…
Browse files Browse the repository at this point in the history
…n 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: 306373a
> <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 -->
  • Loading branch information
rahulbarwal authored Nov 7, 2024
1 parent 359e395 commit 0c406b0
Show file tree
Hide file tree
Showing 2 changed files with 162 additions and 23 deletions.
65 changes: 42 additions & 23 deletions app/client/src/widgets/DatePickerWidget2/widget/derived.js
Original file line number Diff line number Diff line change
@@ -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 changes: 120 additions & 0 deletions app/client/src/widgets/DatePickerWidget2/widget/derived.test.js
Original file line number Diff line number Diff line change
Expand Up @@ -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);
});
});
});
});

0 comments on commit 0c406b0

Please sign in to comment.