fix: Fix datepicker issue with aghelper (#36325)

## Description

**Root Cause Analysis (RCA):**
In the local environment, the minDate field was consistently cleared as
expected, but this behavior was not replicated in the CI pipeline.
Updating the existing flow to address this issue could introduce other
problems. The minDate text area having js date function in the CI
pipeline, leading to repeated test failures. Multiple function attempts
to resolve this issue were unsuccessful.

**Solution**:
I tried using the `agHelper` utility and updated the test flow with
adding a new test case.

EE PR: appsmithorg/appsmith-ee#5139

Fixes #`36329`  

## Automation

/ok-to-test tags="@tag.ImportExport"

### 🔍 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/10878662752>
> Commit: 0985fc5
> <a
href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=10878662752&attempt=1"
target="_blank">Cypress dashboard</a>.
> Tags: `@tag.ImportExport`
> Spec:
> <hr>Mon, 16 Sep 2024 06:53:39 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 Datepicker widget functionality with new locators for
improved user interaction.
  
- **Bug Fixes**
- Improved test cases for the Datepicker widget, ensuring accurate
validation of display data and date formats.

- **Documentation**
- Updated test specifications to reflect a shift in focus towards the
Datepicker widget.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->

app/client/cypress/e2e/Regression/ClientSide/Widgets/Datepicker/DatePickerV2_spec.js

@@ -83,41 +83,7 @@ describe(
       cy.closePropertyPane();
     });
 
-    it("5. Datepicker should not change the display data unless user selects the date", () => {
-      _.agHelper.AddDsl("datePickerdsl");
-
-      cy.openPropertyPane("datepickerwidget2");
-
-      cy.testJsontext(
-        "defaultdate",
-        '{{moment("04/05/2021 05:25", "DD/MM/YYYY HH:mm").toISOString()}}',
-      );
-      cy.get(formWidgetsPage.toggleJsMinDate).click();
-      cy.get(
-        ".t--property-control-mindate .ads-v2-input__input-section-input",
-      ).clear();
-      cy.get(
-        ".t--property-control-mindate .ads-v2-input__input-section-input",
-      ).type("2020-02-01");
-      cy.selectDateFormat("D MMMM, YYYY");
-      cy.get(".t--widget-datepickerwidget2 .bp3-input").should(
-        "contain.value",
-        "4 May, 2021",
-      );
-      cy.get(".t--widget-datepickerwidget2 .bp3-input").click({ force: true });
-      cy.get(".DayPicker-NavButton--next").click({ force: true });
-      cy.get(".t--widget-datepickerwidget2 .bp3-input").should(
-        "contain.value",
-        "4 May, 2021",
-      );
-      cy.get(formWidgetsPage.toggleJsMinDate).click();
-      cy.testJsontext(
-        "mindate",
-        "{{moment().subtract(10, 'days').toISOString()}}",
-      );
-    });
-
-    it("6. Datepicker input value changes to work with selected date formats", function () {
+    it("5. Datepicker input value changes to work with selected date formats", function () {
       _.agHelper.AddDsl("datePickerdsl");
 
       EditorNavigation.SelectEntityByName("DatePicker1", EntityType.Widget);
@@ -144,7 +110,7 @@ describe(
       _.agHelper.AssertPopoverTooltip("Date out of range");
     });
 
-    it("7. Check isDirty meta property", function () {
+    it("6. Check isDirty meta property", function () {
       _.agHelper.AddDsl("datePickerdsl");
       cy.openPropertyPane("textwidget");
       cy.updateCodeInput(
@@ -191,10 +157,50 @@ describe(
       cy.get(".t--widget-textwidget").first().should("contain", "false");
     });
 
-    it("8. Datepicker default date validation with js binding", function () {
+    it("7. Datepicker default date validation with js binding", function () {
       _.deployMode.DeployApp(); // eslint-disable-next-line cypress/no-unnecessary-waiting
       _.deployMode.NavigateBacktoEditor();
     });
+
+    it("8. Datepicker should not change the display data unless user selects the date", () => {
+      _.agHelper.AddDsl("datePickerdsl");
+
+      cy.openPropertyPane("datepickerwidget2");
+
+      cy.testJsontext(
+        "defaultdate",
+        '{{moment("04/05/2021 05:25", "DD/MM/YYYY HH:mm").toISOString()}}',
+      );
+      _.agHelper.PressEscape();
+      _.agHelper.GetNClick(formWidgetsPage.minDateTextArea, 0, true);
+      cy.testJsontextclear("mindate");
+      _.agHelper.GetNClick(formWidgetsPage.toggleJsMinDate, 0, true);
+      _.agHelper.WaitUntilEleAppear(formWidgetsPage.minDateInput);
+      _.agHelper.AssertAttribute(
+        formWidgetsPage.minDateInput,
+        "placeholder",
+        "YYYY-MM-DD HH:mm",
+        0,
+      );
+      _.agHelper.ClickNClear(formWidgetsPage.minDateInput, true, 0);
+      cy.get(formWidgetsPage.minDateInput).type("2020-02-01");
+      cy.selectDateFormat("D MMMM, YYYY");
+      cy.get(formWidgetsPage.datePickerInput).should(
+        "contain.value",
+        "4 May, 2021",
+      );
+      cy.get(formWidgetsPage.datePickerInput).click({ force: true });
+      cy.get(formWidgetsPage.dayPickerNextButton).click({ force: true });
+      cy.get(formWidgetsPage.datePickerInput).should(
+        "contain.value",
+        "4 May, 2021",
+      );
+      cy.get(formWidgetsPage.toggleJsMinDate).click();
+      cy.testJsontext(
+        "mindate",
+        "{{moment().subtract(10, 'days').toISOString()}}",
+      );
+    });
   },
 );
 

app/client/cypress/locators/FormWidgets.json

@@ -74,5 +74,9 @@
   "NavHomePage": "[data-testid='t--default-home-icon']",
   "apiCallToast": "div.Toastify__toast-body",
   "toggleOnOptionChange": ".t--property-control-onoptionchange .t--js-toggle",
-  "toggleButtonVariant": ".t--property-control-buttonvariant .t--js-toggle"
+  "toggleButtonVariant": ".t--property-control-buttonvariant .t--js-toggle",
+  "minDateTextArea" : ".t--property-control-mindate  .CodeMirror textarea",
+  "minDateInput" : ".t--property-control-mindate .ads-v2-input__input-section-input",
+  "datePickerInput": ".t--widget-datepickerwidget2 .bp3-input",
+  "dayPickerNextButton": ".DayPicker-NavButton--next"
 }