Fix datepicker

appsmithorg · Sep 16, 2024 · d7ed694 · d7ed694
1 parent ba6fd9b
commit d7ed694
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 39 deletions.
diff --git a/app/client/cypress/e2e/Regression/ClientSide/Widgets/Datepicker/DatePickerV2_spec.js b/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()}}",
+      );
+    });
   },
 );
 

diff --git a/app/client/cypress/limited-tests.txt b/app/client/cypress/limited-tests.txt
@@ -1,5 +1,5 @@
 # To run only limited tests - give the spec names in below format:
-cypress/e2e/Regression/ClientSide/Templates/Fork_Template_spec.js
+cypress/e2e/Regression/ClientSide/Widgets/Datepicker/DatePickerV2_spec.js
 
 # For running all specs - uncomment below:
 #cypress/e2e/**/**/*

diff --git a/app/client/cypress/locators/FormWidgets.json b/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"
 }